WordPress
Font size presets UI
What?
Adds UI to Global styles to allow modification of font size presets. Fixes: https://github.com/WordPress/gutenberg/issues/61987
Why?
To allow users to edit the font size presets using the editor.
How?
By implementing the UI to handling creation, update and removal of font size presets.
Screencasts
See the comments below to find the screencasts.
Size Change: +1.42 kB (+0.08%)
Total Size: 1.76 MB
| Filename | Size | Change |
|---|---|---|
build/components/index.min.js |
223 kB | +167 B (+0.07%) |
build/edit-site/index.min.js |
209 kB | +1.18 kB (+0.57%) |
build/edit-site/style-rtl.css |
11.8 kB | +35 B (+0.3%) |
build/edit-site/style.css |
11.8 kB | +35 B (+0.3%) |
ℹ️ View Unchanged
| Filename | Size |
|---|---|
build/a11y/index.min.js |
951 B |
build/annotations/index.min.js |
2.26 kB |
build/api-fetch/index.min.js |
2.31 kB |
build/autop/index.min.js |
2.12 kB |
build/blob/index.min.js |
579 B |
build/block-directory/index.min.js |
7.31 kB |
build/block-directory/style-rtl.css |
1.01 kB |
build/block-directory/style.css |
1.01 kB |
build/block-editor/content-rtl.css |
4.57 kB |
build/block-editor/content.css |
4.57 kB |
build/block-editor/default-editor-styles-rtl.css |
394 B |
build/block-editor/default-editor-styles.css |
394 B |
build/block-editor/index.min.js |
265 kB |
build/block-editor/style-rtl.css |
15.7 kB |
build/block-editor/style.css |
15.6 kB |
build/block-library/blocks/archives/editor-rtl.css |
61 B |
build/block-library/blocks/archives/editor.css |
60 B |
build/block-library/blocks/archives/style-rtl.css |
90 B |
build/block-library/blocks/archives/style.css |
90 B |
build/block-library/blocks/audio/editor-rtl.css |
149 B |
build/block-library/blocks/audio/editor.css |
151 B |
build/block-library/blocks/audio/style-rtl.css |
132 B |
build/block-library/blocks/audio/style.css |
132 B |
build/block-library/blocks/audio/theme-rtl.css |
134 B |
build/block-library/blocks/audio/theme.css |
134 B |
build/block-library/blocks/avatar/editor-rtl.css |
115 B |
build/block-library/blocks/avatar/editor.css |
115 B |
build/block-library/blocks/avatar/style-rtl.css |
104 B |
build/block-library/blocks/avatar/style.css |
104 B |
build/block-library/blocks/button/editor-rtl.css |
310 B |
build/block-library/blocks/button/editor.css |
310 B |
build/block-library/blocks/button/style-rtl.css |
538 B |
build/block-library/blocks/button/style.css |
538 B |
build/block-library/blocks/buttons/editor-rtl.css |
336 B |
build/block-library/blocks/buttons/editor.css |
336 B |
build/block-library/blocks/buttons/style-rtl.css |
328 B |
build/block-library/blocks/buttons/style.css |
328 B |
build/block-library/blocks/calendar/style-rtl.css |
240 B |
build/block-library/blocks/calendar/style.css |
240 B |
build/block-library/blocks/categories/editor-rtl.css |
113 B |
build/block-library/blocks/categories/editor.css |
112 B |
build/block-library/blocks/categories/style-rtl.css |
124 B |
build/block-library/blocks/categories/style.css |
124 B |
build/block-library/blocks/code/editor-rtl.css |
53 B |
build/block-library/blocks/code/editor.css |
53 B |
build/block-library/blocks/code/style-rtl.css |
121 B |
build/block-library/blocks/code/style.css |
121 B |
build/block-library/blocks/code/theme-rtl.css |
122 B |
build/block-library/blocks/code/theme.css |
122 B |
build/block-library/blocks/columns/editor-rtl.css |
108 B |
build/block-library/blocks/columns/editor.css |
108 B |
build/block-library/blocks/columns/style-rtl.css |
420 B |
build/block-library/blocks/columns/style.css |
420 B |
build/block-library/blocks/comment-author-avatar/editor-rtl.css |
124 B |
build/block-library/blocks/comment-author-avatar/editor.css |
124 B |
build/block-library/blocks/comment-content/style-rtl.css |
90 B |
build/block-library/blocks/comment-content/style.css |
90 B |
build/block-library/blocks/comment-template/style-rtl.css |
200 B |
build/block-library/blocks/comment-template/style.css |
199 B |
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css |
122 B |
build/block-library/blocks/comments-pagination-numbers/editor.css |
121 B |
build/block-library/blocks/comments-pagination/editor-rtl.css |
221 B |
build/block-library/blocks/comments-pagination/editor.css |
211 B |
build/block-library/blocks/comments-pagination/style-rtl.css |
234 B |
build/block-library/blocks/comments-pagination/style.css |
231 B |
build/block-library/blocks/comments-title/editor-rtl.css |
75 B |
build/block-library/blocks/comments-title/editor.css |
75 B |
build/block-library/blocks/comments/editor-rtl.css |
832 B |
build/block-library/blocks/comments/editor.css |
832 B |
build/block-library/blocks/comments/style-rtl.css |
632 B |
build/block-library/blocks/comments/style.css |
631 B |
build/block-library/blocks/cover/editor-rtl.css |
668 B |
build/block-library/blocks/cover/editor.css |
669 B |
build/block-library/blocks/cover/style-rtl.css |
1.62 kB |
build/block-library/blocks/cover/style.css |
1.6 kB |
build/block-library/blocks/details/editor-rtl.css |
65 B |
build/block-library/blocks/details/editor.css |
65 B |
build/block-library/blocks/details/style-rtl.css |
86 B |
build/block-library/blocks/details/style.css |
86 B |
build/block-library/blocks/embed/editor-rtl.css |
314 B |
build/block-library/blocks/embed/editor.css |
314 B |
build/block-library/blocks/embed/style-rtl.css |
419 B |
build/block-library/blocks/embed/style.css |
419 B |
build/block-library/blocks/embed/theme-rtl.css |
133 B |
build/block-library/blocks/embed/theme.css |
133 B |
build/block-library/blocks/file/editor-rtl.css |
326 B |
build/block-library/blocks/file/editor.css |
326 B |
build/block-library/blocks/file/style-rtl.css |
278 B |
build/block-library/blocks/file/style.css |
279 B |
build/block-library/blocks/file/view.min.js |
324 B |
build/block-library/blocks/footnotes/style-rtl.css |
198 B |
build/block-library/blocks/footnotes/style.css |
197 B |
build/block-library/blocks/form-input/editor-rtl.css |
229 B |
build/block-library/blocks/form-input/editor.css |
229 B |
build/block-library/blocks/form-input/style-rtl.css |
342 B |
build/block-library/blocks/form-input/style.css |
342 B |
build/block-library/blocks/form-submission-notification/editor-rtl.css |
344 B |
build/block-library/blocks/form-submission-notification/editor.css |
341 B |
build/block-library/blocks/form-submit-button/style-rtl.css |
69 B |
build/block-library/blocks/form-submit-button/style.css |
69 B |
build/block-library/blocks/form/view.min.js |
470 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.6 kB |
build/block-library/blocks/freeform/editor.css |
2.6 kB |
build/block-library/blocks/gallery/editor-rtl.css |
958 B |
build/block-library/blocks/gallery/editor.css |
962 B |
build/block-library/blocks/gallery/style-rtl.css |
1.71 kB |
build/block-library/blocks/gallery/style.css |
1.71 kB |
build/block-library/blocks/gallery/theme-rtl.css |
108 B |
build/block-library/blocks/gallery/theme.css |
108 B |
build/block-library/blocks/group/editor-rtl.css |
402 B |
build/block-library/blocks/group/editor.css |
402 B |
build/block-library/blocks/group/style-rtl.css |
103 B |
build/block-library/blocks/group/style.css |
103 B |
build/block-library/blocks/group/theme-rtl.css |
79 B |
build/block-library/blocks/group/theme.css |
79 B |
build/block-library/blocks/heading/style-rtl.css |
188 B |
build/block-library/blocks/heading/style.css |
188 B |
build/block-library/blocks/html/editor-rtl.css |
346 B |
build/block-library/blocks/html/editor.css |
347 B |
build/block-library/blocks/image/editor-rtl.css |
845 B |
build/block-library/blocks/image/editor.css |
843 B |
build/block-library/blocks/image/style-rtl.css |
1.54 kB |
build/block-library/blocks/image/style.css |
1.54 kB |
build/block-library/blocks/image/theme-rtl.css |
137 B |
build/block-library/blocks/image/theme.css |
137 B |
build/block-library/blocks/image/view.min.js |
1.54 kB |
build/block-library/blocks/latest-comments/style-rtl.css |
355 B |
build/block-library/blocks/latest-comments/style.css |
354 B |
build/block-library/blocks/latest-posts/editor-rtl.css |
204 B |
build/block-library/blocks/latest-posts/editor.css |
204 B |
build/block-library/blocks/latest-posts/style-rtl.css |
509 B |
build/block-library/blocks/latest-posts/style.css |
510 B |
build/block-library/blocks/list/style-rtl.css |
104 B |
build/block-library/blocks/list/style.css |
104 B |
build/block-library/blocks/media-text/editor-rtl.css |
304 B |
build/block-library/blocks/media-text/editor.css |
303 B |
build/block-library/blocks/media-text/style-rtl.css |
516 B |
build/block-library/blocks/media-text/style.css |
515 B |
build/block-library/blocks/more/editor-rtl.css |
427 B |
build/block-library/blocks/more/editor.css |
427 B |
build/block-library/blocks/navigation-link/editor-rtl.css |
663 B |
build/block-library/blocks/navigation-link/editor.css |
664 B |
build/block-library/blocks/navigation-link/style-rtl.css |
192 B |
build/block-library/blocks/navigation-link/style.css |
191 B |
build/block-library/blocks/navigation-submenu/editor-rtl.css |
295 B |
build/block-library/blocks/navigation-submenu/editor.css |
294 B |
build/block-library/blocks/navigation/editor-rtl.css |
2.2 kB |
build/block-library/blocks/navigation/editor.css |
2.21 kB |
build/block-library/blocks/navigation/style-rtl.css |
2.26 kB |
build/block-library/blocks/navigation/style.css |
2.25 kB |
build/block-library/blocks/navigation/view.min.js |
1.03 kB |
build/block-library/blocks/nextpage/editor-rtl.css |
392 B |
build/block-library/blocks/nextpage/editor.css |
392 B |
build/block-library/blocks/page-list/editor-rtl.css |
378 B |
build/block-library/blocks/page-list/editor.css |
378 B |
build/block-library/blocks/page-list/style-rtl.css |
175 B |
build/block-library/blocks/page-list/style.css |
175 B |
build/block-library/blocks/paragraph/editor-rtl.css |
236 B |
build/block-library/blocks/paragraph/editor.css |
236 B |
build/block-library/blocks/paragraph/style-rtl.css |
341 B |
build/block-library/blocks/paragraph/style.css |
340 B |
build/block-library/blocks/post-author/style-rtl.css |
175 B |
build/block-library/blocks/post-author/style.css |
176 B |
build/block-library/blocks/post-comments-form/editor-rtl.css |
96 B |
build/block-library/blocks/post-comments-form/editor.css |
96 B |
build/block-library/blocks/post-comments-form/style-rtl.css |
506 B |
build/block-library/blocks/post-comments-form/style.css |
506 B |
build/block-library/blocks/post-content/editor-rtl.css |
74 B |
build/block-library/blocks/post-content/editor.css |
74 B |
build/block-library/blocks/post-date/style-rtl.css |
62 B |
build/block-library/blocks/post-date/style.css |
62 B |
build/block-library/blocks/post-excerpt/editor-rtl.css |
71 B |
build/block-library/blocks/post-excerpt/editor.css |
71 B |
build/block-library/blocks/post-excerpt/style-rtl.css |
141 B |
build/block-library/blocks/post-excerpt/style.css |
141 B |
build/block-library/blocks/post-featured-image/editor-rtl.css |
729 B |
build/block-library/blocks/post-featured-image/editor.css |
726 B |
build/block-library/blocks/post-featured-image/style-rtl.css |
341 B |
build/block-library/blocks/post-featured-image/style.css |
341 B |
build/block-library/blocks/post-navigation-link/style-rtl.css |
215 B |
build/block-library/blocks/post-navigation-link/style.css |
214 B |
build/block-library/blocks/post-template/editor-rtl.css |
99 B |
build/block-library/blocks/post-template/editor.css |
98 B |
build/block-library/blocks/post-template/style-rtl.css |
399 B |
build/block-library/blocks/post-template/style.css |
398 B |
build/block-library/blocks/post-terms/style-rtl.css |
96 B |
build/block-library/blocks/post-terms/style.css |
96 B |
build/block-library/blocks/post-time-to-read/style-rtl.css |
70 B |
build/block-library/blocks/post-time-to-read/style.css |
70 B |
build/block-library/blocks/post-title/style-rtl.css |
100 B |
build/block-library/blocks/post-title/style.css |
100 B |
build/block-library/blocks/preformatted/style-rtl.css |
125 B |
build/block-library/blocks/preformatted/style.css |
125 B |
build/block-library/blocks/pullquote/editor-rtl.css |
134 B |
build/block-library/blocks/pullquote/editor.css |
134 B |
build/block-library/blocks/pullquote/style-rtl.css |
342 B |
build/block-library/blocks/pullquote/style.css |
342 B |
build/block-library/blocks/pullquote/theme-rtl.css |
167 B |
build/block-library/blocks/pullquote/theme.css |
167 B |
build/block-library/blocks/query-pagination-numbers/editor-rtl.css |
121 B |
build/block-library/blocks/query-pagination-numbers/editor.css |
118 B |
build/block-library/blocks/query-pagination/editor-rtl.css |
220 B |
build/block-library/blocks/query-pagination/editor.css |
208 B |
build/block-library/blocks/query-pagination/style-rtl.css |
287 B |
build/block-library/blocks/query-pagination/style.css |
283 B |
build/block-library/blocks/query-title/style-rtl.css |
64 B |
build/block-library/blocks/query-title/style.css |
64 B |
build/block-library/blocks/query/editor-rtl.css |
502 B |
build/block-library/blocks/query/editor.css |
502 B |
build/block-library/blocks/query/view.min.js |
958 B |
build/block-library/blocks/quote/style-rtl.css |
238 B |
build/block-library/blocks/quote/style.css |
238 B |
build/block-library/blocks/quote/theme-rtl.css |
221 B |
build/block-library/blocks/quote/theme.css |
225 B |
build/block-library/blocks/read-more/style-rtl.css |
138 B |
build/block-library/blocks/read-more/style.css |
138 B |
build/block-library/blocks/rss/editor-rtl.css |
101 B |
build/block-library/blocks/rss/editor.css |
101 B |
build/block-library/blocks/rss/style-rtl.css |
288 B |
build/block-library/blocks/rss/style.css |
287 B |
build/block-library/blocks/search/editor-rtl.css |
183 B |
build/block-library/blocks/search/editor.css |
183 B |
build/block-library/blocks/search/style-rtl.css |
672 B |
build/block-library/blocks/search/style.css |
671 B |
build/block-library/blocks/search/theme-rtl.css |
113 B |
build/block-library/blocks/search/theme.css |
113 B |
build/block-library/blocks/search/view.min.js |
475 B |
build/block-library/blocks/separator/editor-rtl.css |
100 B |
build/block-library/blocks/separator/editor.css |
100 B |
build/block-library/blocks/separator/style-rtl.css |
248 B |
build/block-library/blocks/separator/style.css |
248 B |
build/block-library/blocks/separator/theme-rtl.css |
195 B |
build/block-library/blocks/separator/theme.css |
195 B |
build/block-library/blocks/shortcode/editor-rtl.css |
286 B |
build/block-library/blocks/shortcode/editor.css |
286 B |
build/block-library/blocks/site-logo/editor-rtl.css |
806 B |
build/block-library/blocks/site-logo/editor.css |
803 B |
build/block-library/blocks/site-logo/style-rtl.css |
218 B |
build/block-library/blocks/site-logo/style.css |
218 B |
build/block-library/blocks/site-tagline/editor-rtl.css |
87 B |
build/block-library/blocks/site-tagline/editor.css |
87 B |
build/block-library/blocks/site-title/editor-rtl.css |
123 B |
build/block-library/blocks/site-title/editor.css |
123 B |
build/block-library/blocks/site-title/style-rtl.css |
71 B |
build/block-library/blocks/site-title/style.css |
71 B |
build/block-library/blocks/social-link/editor-rtl.css |
338 B |
build/block-library/blocks/social-link/editor.css |
338 B |
build/block-library/blocks/social-links/editor-rtl.css |
676 B |
build/block-library/blocks/social-links/editor.css |
675 B |
build/block-library/blocks/social-links/style-rtl.css |
1.5 kB |
build/block-library/blocks/social-links/style.css |
1.5 kB |
build/block-library/blocks/spacer/editor-rtl.css |
346 B |
build/block-library/blocks/spacer/editor.css |
346 B |
build/block-library/blocks/spacer/style-rtl.css |
48 B |
build/block-library/blocks/spacer/style.css |
48 B |
build/block-library/blocks/table/editor-rtl.css |
394 B |
build/block-library/blocks/table/editor.css |
394 B |
build/block-library/blocks/table/style-rtl.css |
640 B |
build/block-library/blocks/table/style.css |
639 B |
build/block-library/blocks/table/theme-rtl.css |
152 B |
build/block-library/blocks/table/theme.css |
152 B |
build/block-library/blocks/tag-cloud/style-rtl.css |
266 B |
build/block-library/blocks/tag-cloud/style.css |
265 B |
build/block-library/blocks/template-part/editor-rtl.css |
393 B |
build/block-library/blocks/template-part/editor.css |
393 B |
build/block-library/blocks/template-part/theme-rtl.css |
113 B |
build/block-library/blocks/template-part/theme.css |
113 B |
build/block-library/blocks/term-description/style-rtl.css |
108 B |
build/block-library/blocks/term-description/style.css |
108 B |
build/block-library/blocks/text-columns/editor-rtl.css |
95 B |
build/block-library/blocks/text-columns/editor.css |
95 B |
build/block-library/blocks/text-columns/style-rtl.css |
165 B |
build/block-library/blocks/text-columns/style.css |
165 B |
build/block-library/blocks/verse/style-rtl.css |
98 B |
build/block-library/blocks/verse/style.css |
98 B |
build/block-library/blocks/video/editor-rtl.css |
553 B |
build/block-library/blocks/video/editor.css |
554 B |
build/block-library/blocks/video/style-rtl.css |
192 B |
build/block-library/blocks/video/style.css |
192 B |
build/block-library/blocks/video/theme-rtl.css |
134 B |
build/block-library/blocks/video/theme.css |
134 B |
build/block-library/classic-rtl.css |
179 B |
build/block-library/classic.css |
179 B |
build/block-library/common-rtl.css |
1.1 kB |
build/block-library/common.css |
1.1 kB |
build/block-library/editor-elements-rtl.css |
75 B |
build/block-library/editor-elements.css |
75 B |
build/block-library/editor-rtl.css |
11.9 kB |
build/block-library/editor.css |
11.9 kB |
build/block-library/elements-rtl.css |
54 B |
build/block-library/elements.css |
54 B |
build/block-library/index.min.js |
219 kB |
build/block-library/reset-rtl.css |
472 B |
build/block-library/reset.css |
472 B |
build/block-library/style-rtl.css |
14.6 kB |
build/block-library/style.css |
14.6 kB |
build/block-library/theme-rtl.css |
702 B |
build/block-library/theme.css |
707 B |
build/block-serialization-default-parser/index.min.js |
1.12 kB |
build/block-serialization-spec-parser/index.min.js |
2.87 kB |
build/blocks/index.min.js |
52.2 kB |
build/commands/index.min.js |
15.2 kB |
build/commands/style-rtl.css |
955 B |
build/commands/style.css |
952 B |
build/components/style-rtl.css |
12.1 kB |
build/components/style.css |
12.1 kB |
build/compose/index.min.js |
12.9 kB |
build/core-commands/index.min.js |
2.75 kB |
build/core-data/index.min.js |
72.6 kB |
build/customize-widgets/index.min.js |
10.9 kB |
build/customize-widgets/style-rtl.css |
1.35 kB |
build/customize-widgets/style.css |
1.35 kB |
build/data-controls/index.min.js |
641 B |
build/data/index.min.js |
8.99 kB |
build/date/index.min.js |
18 kB |
build/deprecated/index.min.js |
458 B |
build/dom-ready/index.min.js |
325 B |
build/dom/index.min.js |
4.65 kB |
build/edit-post/classic-rtl.css |
578 B |
build/edit-post/classic.css |
580 B |
build/edit-post/index.min.js |
12.5 kB |
build/edit-post/style-rtl.css |
2.31 kB |
build/edit-post/style.css |
2.31 kB |
build/edit-site/posts-rtl.css |
6.35 kB |
build/edit-site/posts.css |
6.35 kB |
build/edit-widgets/index.min.js |
17.6 kB |
build/edit-widgets/style-rtl.css |
4.18 kB |
build/edit-widgets/style.css |
4.18 kB |
build/editor/index.min.js |
98 kB |
build/editor/style-rtl.css |
9.19 kB |
build/editor/style.css |
9.19 kB |
build/element/index.min.js |
4.83 kB |
build/escape-html/index.min.js |
537 B |
build/format-library/index.min.js |
8.1 kB |
build/format-library/style-rtl.css |
494 B |
build/format-library/style.css |
493 B |
build/hooks/index.min.js |
1.54 kB |
build/html-entities/index.min.js |
445 B |
build/i18n/index.min.js |
3.58 kB |
build/interactivity/debug.min.js |
16.5 kB |
build/interactivity/file.min.js |
447 B |
build/interactivity/image.min.js |
1.68 kB |
build/interactivity/index.min.js |
13.4 kB |
build/interactivity/navigation.min.js |
1.16 kB |
build/interactivity/query.min.js |
742 B |
build/interactivity/router.min.js |
2.8 kB |
build/interactivity/search.min.js |
615 B |
build/is-shallow-equal/index.min.js |
526 B |
build/keyboard-shortcuts/index.min.js |
1.31 kB |
build/keycodes/index.min.js |
1.46 kB |
build/list-reusable-blocks/index.min.js |
2.17 kB |
build/list-reusable-blocks/style-rtl.css |
846 B |
build/list-reusable-blocks/style.css |
846 B |
build/media-utils/index.min.js |
2.92 kB |
build/modules/importmap-polyfill.min.js |
12.3 kB |
build/notices/index.min.js |
946 B |
build/nux/index.min.js |
1.58 kB |
build/nux/style-rtl.css |
749 B |
build/nux/style.css |
745 B |
build/patterns/index.min.js |
7.34 kB |
build/patterns/style-rtl.css |
687 B |
build/patterns/style.css |
685 B |
build/plugins/index.min.js |
1.81 kB |
build/preferences-persistence/index.min.js |
2.06 kB |
build/preferences/index.min.js |
2.9 kB |
build/preferences/style-rtl.css |
715 B |
build/preferences/style.css |
715 B |
build/primitives/index.min.js |
829 B |
build/priority-queue/index.min.js |
1.54 kB |
build/private-apis/index.min.js |
1.01 kB |
build/react-i18n/index.min.js |
630 B |
build/react-refresh-entry/index.min.js |
9.47 kB |
build/react-refresh-runtime/index.min.js |
6.76 kB |
build/redux-routine/index.min.js |
2.69 kB |
build/reusable-blocks/index.min.js |
2.73 kB |
build/reusable-blocks/style-rtl.css |
256 B |
build/reusable-blocks/style.css |
256 B |
build/rich-text/index.min.js |
10.1 kB |
build/router/index.min.js |
1.96 kB |
build/server-side-render/index.min.js |
1.94 kB |
build/shortcode/index.min.js |
1.4 kB |
build/style-engine/index.min.js |
2.01 kB |
build/token-list/index.min.js |
581 B |
build/url/index.min.js |
3.85 kB |
build/vendors/react-dom.min.js |
42.8 kB |
build/vendors/react-jsx-runtime.min.js |
560 B |
build/vendors/react.min.js |
2.65 kB |
build/viewport/index.min.js |
965 B |
build/warning/index.min.js |
250 B |
build/widgets/index.min.js |
7.19 kB |
build/widgets/style-rtl.css |
1.16 kB |
build/widgets/style.css |
1.16 kB |
build/wordcount/index.min.js |
1.03 kB |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Feel free to let @WordPress/gutenberg-design know when this PR is ready to review! Since the main issue is labelled as needing design, however, I took a quick look. But I'm unsure where to look. Would you be able to add screenshots or testing instructions to the PR or issue?
@WordPress/gutenberg-design here's a screencast featuring some work about this. Could you please take a look?
Not all of this has already been pushed to this branch.
Screencast from 10-06-24 13:06:38.webm
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
Co-authored-by: matiasbenedetto <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: beafialho <[email protected]>
Co-authored-by: markhowellsmead <[email protected]>
Co-authored-by: youknowriad <[email protected]>
Co-authored-by: annezazu <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: luminuu <[email protected]>
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.
:information_source: I pushed all the changes to this branch so it can be tested.
Nice work, this is not that far off! I'll give this a more thorough review when I get a moment, for now I've signal boosted this a bit for feedback.
Two things that do stand out to me in this part:
The "Reset" button next to the font size slider, and the Fluid yes/no. For the former, can we just remove the reset button? You can always backspace the value to clear it, or remove the font preset. For the latter, outside of better ideas, perhaps just a toggle that says "Fluid typography" rather than a yes/no control might work.
This is exciting to see! It will greatly impact my work and, I'm sure, of all those creating/playing with themes as well.
It would be neat if the added custom font size presets could be automatically organized by size values from Smallest > Largest so that we don't see a 0.8rem after a 3.9rem. Would that be possible?
It would be neat if the added custom font size presets could be automatically organized by size values from Smallest > Largest so that we don't see a 0.8rem after a 3.9rem. Would that be possible?
That's a nice suggestion, thanks. There's only one technical/design difficulty about that: the mix of different units. Would it be okay to order the sizes primarily by unit and secondarily by quantity?
If we have a list of multiple font sizes with different units, it could look like this:
- 12px
- 20px
- 1.5 rem
- 3 rem
- 2 vw
- 4 vw
Would this type of order be OK @beafialho @jasmussen?
Another possibility is to calculate the relative units with a coefficient that allows us to make an approximative scale of the real size of that font for a 'typical' desktop screen.
In this example we would order by the 'result' column. The order is slightly different. It tries to replicate what would be the size of the fonts in a 'typical' (1920px wide) screen.
| Font size | Unit | Pixel coefficient | Result |
|---|---|---|---|
| 12 | px | 1 | 12 |
| 20 | px | 1 | 20 |
| 1.5 | rem | 16 | 24 |
| 2 | vw | 19.2 | 38.4 |
| 3 | rem | 16 | 48 |
| 4 | vw | 19.2 | 76.8 |
Would this type of order be OK @beafialho @jasmussen?
That would be ok IMO, as long as the custom ones within the same unit are ordered by sizes 👍
Do you intend for the SizeControl component to be used outside of the Global Styles?
If not, it might be better to extend the FontSizePicker component in the block-editor package rather than making changes to the components package.
As in this PR, I think the current component couldn't be achieved by extending the FontSizeControl component. The new SizeControl component is only a subset of the FontSizePicker extracted to be re-used independently.
- A visible reset button is hugely advantageous for most users. Simply entering the field and manually removing the value requires more interaction, and is less intuitive than a common button pattern.
- As in many places in the editor, the addition of more extensive help text (or links to documentation) would be hugely useful for many users. For example, an explanation of what fluid sizing is, in layperson terms.
Agreed on the advantage, but I'd rather improve the existing UI for resetting values across, than make exceptions to the core componentry in a local PR like this. Changes to the core componentry should be separate PRs.
Based on @jasmussen 's feedback, I changed the toggle component and removed the reset buttons:
Screencast from 19-06-24 14:33:14.webm
Based on @beafialho 's feedback I implemented the coefficient ordering for font sizes described in this comment: https://github.com/WordPress/gutenberg/pull/62328#issuecomment-2160459582
As in many places in the editor, the addition of more extensive help text (or links to documentation) would be hugely useful for many users. For example, an explanation of what fluid sizing is, in layperson terms.
@markhowellsmead, you are welcome to suggest texts/hints to improve the current UI.
@markhowellsmead, you are welcome to suggest texts/hints to improve the current UI.
Where would I do that? Here?
We can rename or delete the default/theme presets, which is unexpected for me. With color and shadow presets, we can't rename or delete the default presets.
These comments seem to suggest that the font size presets should work as the color palettes or shadow presets. I have 2 thoughts about this:
-
This is not how font size presets work in the editor right now. If you have font sizes defined in more than one 'key' (example:
defaultandtheme), only the theme ones are listed on the UI for the user to select. The default and the theme sizes are not combined in one list. Only the theme ones are listed. This is opinionated, but each type of setting has its own logic regarding this. @jasmussen @youknowriad I'd appreciate your input about this. -
I don't think that having many 'groups' of font size presets, like in color palettes, adds much value for users. @WordPress/block-themers input welcome.
Is the origin a theme? I think we need to change the origin where the settings are saved to match the origin the user edited.
If we keep the current behavior, saving all the sizes in 'theme' or 'custom' should be ok, as the other alternative is unnecessary and more complex.
@t-hamano @matiasbenedetto it seems to me that whatever we do for colors, we should follow for fonts presents.
If I'm not wrong for colors, we allow editing theme and custom palettes (but not default I think) and we show all of them when picking a color for a given style.
If I'm not wrong for colors, we allow editing theme and custom palettes (but not default I think) and we show all of them when picking a color for a given style.
Yes, that's true, but it is not how the UI currently works for font sizes. I remember that there was at least one attempt to make all the presets available to the user (default, theme, custom), but that was considered a bug. I remember discussing this in this PR (https://github.com/WordPress/gutenberg/pull/55219), but there could be other threads, too.
@youknowriad @jasmussen @WordPress/block-themers , do you think replicating the color palette model adds value for users? What would the font picker look like with the size presets coming from all the origins?
I'm not strongly opinionated on the UI to be honest, so I'll let the other chime-in.
it seems to me that whatever we do for colors, we should follow for fonts presents.
I believe @richtabor and @scruffian are working on exactly this.
Sidenote, @WordPress/gutenberg-design is a great ping for feedback.
Where would I do that? Here?
@markhowellsmead yep, here is a good place. You can suggest improvements in this pull request about this particular addition to the editor
It might be nice to have a confirmation dialog when removing a font, similar to the custom shadow palette.
Regarding renaming, how about moving it to the ellipsis menu like we did with custom shadows?
Based on @t-hamano 's feedback I added the rename and delete dialogs:
Screencast from 21-06-24 16:32:47.webm
@WordPress/block-themers feedback is needed here from a block theme perspective 👀
I did find it confusing that when I click on the plus icon to add a size, a size is added automatically but unlike the colors I can't edit them directly.
As a developer, I would like to know if I can customize the slug when I use the UI to add sizes and then export the theme, because custom-X is not so descriptive.
In a separate issue @jasmussen suggested that when a control is conditional, like the settings that are only available when "fluid typography" is toggled on, the controls should always be visible but disabled by default, and enabled when the condition applies. The control should also be intended, to indicate that it is dependent on the parent. You can read more about the reasoning here: https://github.com/WordPress/gutenberg/pull/56364#issuecomment-1985286961
like the settings that are only available when "fluid typography" is toggled on, the controls should always be visible but disabled by default, and enabled when the condition applies.
There can be nuance here.
- In the case of the dropdown label, the label being always visible but grayed, can implicitly explain why there's no "show label" toggle unless the "display as dropdown" label is toggled first: they are connected.
- In the case of fluid typography, those min/max values are entirely sub-sets of the main fluid typograhy toggle, you wouldn't look for them otherwise.
So there's an argument that both patterns can be judiciuosly applied based on works best in the given context. If we have to extract a basic rule I'd actually lean on hiding child options, including reverting my own statement from your PR, but then be sure to always indent child-options from the left, so there's a visible indication of hierarchy.
Any preference?
My preference would be consistency and to not have to go back and forward because it creates extra unnecessary work.
I would like to receive your input about the expected behavior of the font size presets:
Font size presets in the font picker and colors palette are working differently. The colors admit several 'origins' (default, theme, custom) and all of them are available to be selected by the user. Meanwhile, fonts sizes are working differently, 'theme' presets (if they are defined) overrides 'default' font sizes. 'default' presets can not be selected or seen by the user if 'theme' size presets are available.
What path should we follow here?