WordPress
Add vw and vh units to the custom font size picker
What?
Add the vw and vh units to the custom font size picker.
Partial for https://github.com/WordPress/gutenberg/issues/23323
Why?
The custom font size picker is limited to using px, em, rem. Users are asking for the units to be extended (The units are also more limited than in the custom spacing control, where px, em, rem %, vw and vh are supported)
How?
The PR updates the units in the font size picker component.
Testing Instructions
Add a text based block like a paragraph. Open the block settings and open the Typography panel. Select "Set custom size". Confirm that vw and vh units can be selected. Select them and confirm that the units are used in the editor and front.
Testing Instructions for Keyboard
Screenshots or screencast
@ramonjd Hi, I am pinging you early because I think I am missing something. I am trying to add the vw and vh units to the font size picker, and I don't think it can be as easy as this? I can't help thinking that, if it only required this code change, why did we not add it earlier? There must be a rabbit hole somewhere :)
Size Change: +2.19 kB (+0.13%)
Total Size: 1.74 MB
| Filename | Size | Change | |
|---|---|---|---|
build/block-directory/index.min.js |
7.29 kB | +38 B (+0.52%) | |
build/block-editor/content-rtl.css |
4.57 kB | +70 B (+1.56%) | |
build/block-editor/content.css |
4.57 kB | +71 B (+1.58%) | |
build/block-editor/index.min.js |
260 kB | +2.19 kB (+0.85%) | |
build/block-editor/style-rtl.css |
15.5 kB | +35 B (+0.23%) | |
build/block-editor/style.css |
15.5 kB | +34 B (+0.22%) | |
build/block-library/blocks/group/editor-rtl.css |
403 B | +9 B (+2.28%) | |
build/block-library/blocks/group/editor.css |
403 B | +9 B (+2.28%) | |
build/block-library/blocks/latest-posts/style-rtl.css |
494 B | +16 B (+3.35%) | |
build/block-library/blocks/latest-posts/style.css |
494 B | +16 B (+3.35%) | |
build/block-library/blocks/rss/editor-rtl.css |
101 B | -48 B (-32.21%) | 🎉 |
build/block-library/blocks/rss/editor.css |
101 B | -48 B (-32.21%) | 🎉 |
build/block-library/blocks/shortcode/editor-rtl.css |
286 B | -37 B (-11.46%) | 👏 |
build/block-library/blocks/shortcode/editor.css |
286 B | -37 B (-11.46%) | 👏 |
build/block-library/blocks/social-links/style-rtl.css |
1.5 kB | +19 B (+1.28%) | |
build/block-library/blocks/social-links/style.css |
1.5 kB | +19 B (+1.29%) | |
build/block-library/editor-rtl.css |
12.2 kB | -27 B (-0.22%) | |
build/block-library/editor.css |
12.2 kB | -27 B (-0.22%) | |
build/block-library/index.min.js |
218 kB | +115 B (+0.05%) | |
build/block-library/style-rtl.css |
14.8 kB | +21 B (+0.14%) | |
build/block-library/style.css |
14.8 kB | +22 B (+0.15%) | |
build/blocks/index.min.js |
51.8 kB | +58 B (+0.11%) | |
build/commands/index.min.js |
15.2 kB | +40 B (+0.26%) | |
build/components/index.min.js |
222 kB | +2.25 kB (+1.02%) | |
build/components/style-rtl.css |
12 kB | +39 B (+0.33%) | |
build/components/style.css |
12 kB | +34 B (+0.29%) | |
build/compose/index.min.js |
12.8 kB | +18 B (+0.14%) | |
build/core-commands/index.min.js |
2.71 kB | -95 B (-3.38%) | |
build/core-data/index.min.js |
72.5 kB | -58 B (-0.08%) | |
build/customize-widgets/index.min.js |
10.9 kB | +15 B (+0.14%) | |
build/data/index.min.js |
9.01 kB | +13 B (+0.14%) | |
build/edit-post/index.min.js |
14.6 kB | +192 B (+1.33%) | |
build/edit-site/index.min.js |
214 kB | -8.78 kB (-3.94%) | |
build/edit-site/style-rtl.css |
12.5 kB | -448 B (-3.47%) | |
build/edit-site/style.css |
12.5 kB | -461 B (-3.57%) | |
build/edit-widgets/index.min.js |
17.5 kB | +61 B (+0.35%) | |
build/edit-widgets/style-rtl.css |
4.18 kB | +17 B (+0.41%) | |
build/edit-widgets/style.css |
4.18 kB | +18 B (+0.43%) | |
build/editor/index.min.js |
91.8 kB | +8.63 kB (+10.36%) | ⚠️ |
build/editor/style-rtl.css |
8.39 kB | +138 B (+1.67%) | |
build/editor/style.css |
8.4 kB | +138 B (+1.67%) | |
build/format-library/index.min.js |
8.09 kB | +15 B (+0.19%) | |
build/interactivity/debug.min.js |
16.4 kB | +124 B (+0.76%) | |
build/interactivity/index.min.js |
13.2 kB | +206 B (+1.58%) | |
build/interactivity/router.min.js |
2.81 kB | +25 B (+0.9%) | |
build/keyboard-shortcuts/index.min.js |
1.31 kB | +13 B (+1%) | |
build/list-reusable-blocks/index.min.js |
2.14 kB | +24 B (+1.14%) | |
build/nux/index.min.js |
1.58 kB | +13 B (+0.83%) | |
build/patterns/index.min.js |
6.51 kB | +61 B (+0.95%) | |
build/plugins/index.min.js |
1.81 kB | +11 B (+0.61%) | |
build/preferences/index.min.js |
2.9 kB | +48 B (+1.68%) | |
build/primitives/index.min.js |
831 B | +22 B (+2.72%) | |
build/react-i18n/index.min.js |
629 B | +6 B (+0.96%) | |
build/reusable-blocks/index.min.js |
2.72 kB | +22 B (+0.81%) | |
build/router/index.min.js |
1.96 kB | +25 B (+1.29%) | |
build/server-side-render/index.min.js |
1.97 kB | +10 B (+0.51%) | |
build/vendors/inert-polyfill.min.js |
0 B | -2.48 kB (removed) | 🏆 |
build/vendors/react-dom.min.js |
42.8 kB | +1.12 kB (+2.7%) | |
build/vendors/react.min.js |
2.65 kB | -1.37 kB (-34.1%) | 🎉 |
build/viewport/index.min.js |
964 B | +7 B (+0.73%) | |
build/widgets/index.min.js |
7.13 kB | +15 B (+0.21%) |
ℹ️ View Unchanged
| Filename | Size |
|---|---|
build/a11y/index.min.js |
955 B |
build/annotations/index.min.js |
2.27 kB |
build/api-fetch/index.min.js |
2.32 kB |
build/autop/index.min.js |
2.1 kB |
build/blob/index.min.js |
578 B |
build/block-directory/style-rtl.css |
1.03 kB |
build/block-directory/style.css |
1.03 kB |
build/block-editor/default-editor-styles-rtl.css |
395 B |
build/block-editor/default-editor-styles.css |
395 B |
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 |
150 B |
build/block-library/blocks/audio/editor.css |
150 B |
build/block-library/blocks/audio/style-rtl.css |
122 B |
build/block-library/blocks/audio/style.css |
122 B |
build/block-library/blocks/audio/theme-rtl.css |
133 B |
build/block-library/blocks/audio/theme.css |
133 B |
build/block-library/blocks/avatar/editor-rtl.css |
116 B |
build/block-library/blocks/avatar/editor.css |
116 B |
build/block-library/blocks/avatar/style-rtl.css |
104 B |
build/block-library/blocks/avatar/style.css |
104 B |
build/block-library/blocks/block/editor-rtl.css |
277 B |
build/block-library/blocks/block/editor.css |
277 B |
build/block-library/blocks/button/editor-rtl.css |
415 B |
build/block-library/blocks/button/editor.css |
414 B |
build/block-library/blocks/button/style-rtl.css |
627 B |
build/block-library/blocks/button/style.css |
626 B |
build/block-library/blocks/buttons/editor-rtl.css |
337 B |
build/block-library/blocks/buttons/editor.css |
337 B |
build/block-library/blocks/buttons/style-rtl.css |
332 B |
build/block-library/blocks/buttons/style.css |
332 B |
build/block-library/blocks/calendar/style-rtl.css |
239 B |
build/block-library/blocks/calendar/style.css |
239 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 |
124 B |
build/block-library/blocks/code/theme.css |
124 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 |
421 B |
build/block-library/blocks/columns/style.css |
421 B |
build/block-library/blocks/comment-author-avatar/editor-rtl.css |
125 B |
build/block-library/blocks/comment-author-avatar/editor.css |
125 B |
build/block-library/blocks/comment-content/style-rtl.css |
92 B |
build/block-library/blocks/comment-content/style.css |
92 B |
build/block-library/blocks/comment-template/style-rtl.css |
199 B |
build/block-library/blocks/comment-template/style.css |
198 B |
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css |
123 B |
build/block-library/blocks/comments-pagination-numbers/editor.css |
121 B |
build/block-library/blocks/comments-pagination/editor-rtl.css |
222 B |
build/block-library/blocks/comments-pagination/editor.css |
209 B |
build/block-library/blocks/comments-pagination/style-rtl.css |
235 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 |
840 B |
build/block-library/blocks/comments/editor.css |
839 B |
build/block-library/blocks/comments/style-rtl.css |
637 B |
build/block-library/blocks/comments/style.css |
636 B |
build/block-library/blocks/cover/editor-rtl.css |
671 B |
build/block-library/blocks/cover/editor.css |
674 B |
build/block-library/blocks/cover/style-rtl.css |
1.7 kB |
build/block-library/blocks/cover/style.css |
1.69 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 |
312 B |
build/block-library/blocks/embed/editor.css |
312 B |
build/block-library/blocks/embed/style-rtl.css |
410 B |
build/block-library/blocks/embed/style.css |
410 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 |
327 B |
build/block-library/blocks/file/style-rtl.css |
280 B |
build/block-library/blocks/file/style.css |
281 B |
build/block-library/blocks/file/view.min.js |
324 B |
build/block-library/blocks/footnotes/style-rtl.css |
201 B |
build/block-library/blocks/footnotes/style.css |
199 B |
build/block-library/blocks/form-input/editor-rtl.css |
227 B |
build/block-library/blocks/form-input/editor.css |
227 B |
build/block-library/blocks/form-input/style-rtl.css |
343 B |
build/block-library/blocks/form-input/style.css |
343 B |
build/block-library/blocks/form-submission-notification/editor-rtl.css |
340 B |
build/block-library/blocks/form-submission-notification/editor.css |
340 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 |
471 B |
build/block-library/blocks/freeform/editor-rtl.css |
2.61 kB |
build/block-library/blocks/freeform/editor.css |
2.61 kB |
build/block-library/blocks/gallery/editor-rtl.css |
956 B |
build/block-library/blocks/gallery/editor.css |
960 B |
build/block-library/blocks/gallery/style-rtl.css |
1.72 kB |
build/block-library/blocks/gallery/style.css |
1.72 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/style-rtl.css |
103 B |
build/block-library/blocks/group/style.css |
103 B |
build/block-library/blocks/group/theme-rtl.css |
78 B |
build/block-library/blocks/group/theme.css |
78 B |
build/block-library/blocks/heading/style-rtl.css |
189 B |
build/block-library/blocks/heading/style.css |
189 B |
build/block-library/blocks/html/editor-rtl.css |
336 B |
build/block-library/blocks/html/editor.css |
337 B |
build/block-library/blocks/image/editor-rtl.css |
891 B |
build/block-library/blocks/image/editor.css |
891 B |
build/block-library/blocks/image/style-rtl.css |
1.6 kB |
build/block-library/blocks/image/style.css |
1.59 kB |
build/block-library/blocks/image/theme-rtl.css |
133 B |
build/block-library/blocks/image/theme.css |
133 B |
build/block-library/blocks/image/view.min.js |
1.54 kB |
build/block-library/blocks/latest-comments/style-rtl.css |
357 B |
build/block-library/blocks/latest-comments/style.css |
357 B |
build/block-library/blocks/latest-posts/editor-rtl.css |
213 B |
build/block-library/blocks/latest-posts/editor.css |
212 B |
build/block-library/blocks/list/style-rtl.css |
88 B |
build/block-library/blocks/list/style.css |
88 B |
build/block-library/blocks/media-text/editor-rtl.css |
306 B |
build/block-library/blocks/media-text/editor.css |
305 B |
build/block-library/blocks/media-text/style-rtl.css |
505 B |
build/block-library/blocks/media-text/style.css |
503 B |
build/block-library/blocks/more/editor-rtl.css |
431 B |
build/block-library/blocks/more/editor.css |
431 B |
build/block-library/blocks/navigation-link/editor-rtl.css |
668 B |
build/block-library/blocks/navigation-link/editor.css |
669 B |
build/block-library/blocks/navigation-link/style-rtl.css |
193 B |
build/block-library/blocks/navigation-link/style.css |
192 B |
build/block-library/blocks/navigation-submenu/editor-rtl.css |
296 B |
build/block-library/blocks/navigation-submenu/editor.css |
295 B |
build/block-library/blocks/navigation/editor-rtl.css |
2.26 kB |
build/block-library/blocks/navigation/editor.css |
2.26 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 |
395 B |
build/block-library/blocks/nextpage/editor.css |
395 B |
build/block-library/blocks/page-list/editor-rtl.css |
377 B |
build/block-library/blocks/page-list/editor.css |
377 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 |
235 B |
build/block-library/blocks/paragraph/editor.css |
235 B |
build/block-library/blocks/paragraph/style-rtl.css |
335 B |
build/block-library/blocks/paragraph/style.css |
335 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 |
508 B |
build/block-library/blocks/post-comments-form/style.css |
508 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 |
61 B |
build/block-library/blocks/post-date/style.css |
61 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 |
734 B |
build/block-library/blocks/post-featured-image/editor.css |
732 B |
build/block-library/blocks/post-featured-image/style-rtl.css |
342 B |
build/block-library/blocks/post-featured-image/style.css |
342 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 |
397 B |
build/block-library/blocks/post-template/style.css |
396 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 |
69 B |
build/block-library/blocks/post-time-to-read/style.css |
69 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 |
135 B |
build/block-library/blocks/pullquote/editor.css |
135 B |
build/block-library/blocks/pullquote/style-rtl.css |
354 B |
build/block-library/blocks/pullquote/style.css |
353 B |
build/block-library/blocks/pullquote/theme-rtl.css |
174 B |
build/block-library/blocks/pullquote/theme.css |
174 B |
build/block-library/blocks/query-pagination-numbers/editor-rtl.css |
122 B |
build/block-library/blocks/query-pagination-numbers/editor.css |
121 B |
build/block-library/blocks/query-pagination/editor-rtl.css |
221 B |
build/block-library/blocks/query-pagination/editor.css |
211 B |
build/block-library/blocks/query-pagination/style-rtl.css |
288 B |
build/block-library/blocks/query-pagination/style.css |
284 B |
build/block-library/blocks/query-title/style-rtl.css |
63 B |
build/block-library/blocks/query-title/style.css |
63 B |
build/block-library/blocks/query/editor-rtl.css |
486 B |
build/block-library/blocks/query/editor.css |
486 B |
build/block-library/blocks/query/view.min.js |
958 B |
build/block-library/blocks/quote/style-rtl.css |
237 B |
build/block-library/blocks/quote/style.css |
237 B |
build/block-library/blocks/quote/theme-rtl.css |
233 B |
build/block-library/blocks/quote/theme.css |
235 B |
build/block-library/blocks/read-more/style-rtl.css |
140 B |
build/block-library/blocks/read-more/style.css |
140 B |
build/block-library/blocks/rss/style-rtl.css |
289 B |
build/block-library/blocks/rss/style.css |
288 B |
build/block-library/blocks/search/editor-rtl.css |
184 B |
build/block-library/blocks/search/editor.css |
184 B |
build/block-library/blocks/search/style-rtl.css |
690 B |
build/block-library/blocks/search/style.css |
689 B |
build/block-library/blocks/search/theme-rtl.css |
114 B |
build/block-library/blocks/search/theme.css |
114 B |
build/block-library/blocks/search/view.min.js |
478 B |
build/block-library/blocks/separator/editor-rtl.css |
146 B |
build/block-library/blocks/separator/editor.css |
146 B |
build/block-library/blocks/separator/style-rtl.css |
239 B |
build/block-library/blocks/separator/style.css |
239 B |
build/block-library/blocks/separator/theme-rtl.css |
194 B |
build/block-library/blocks/separator/theme.css |
194 B |
build/block-library/blocks/site-logo/editor-rtl.css |
805 B |
build/block-library/blocks/site-logo/editor.css |
805 B |
build/block-library/blocks/site-logo/style-rtl.css |
204 B |
build/block-library/blocks/site-logo/style.css |
204 B |
build/block-library/blocks/site-tagline/editor-rtl.css |
86 B |
build/block-library/blocks/site-tagline/editor.css |
86 B |
build/block-library/blocks/site-title/editor-rtl.css |
116 B |
build/block-library/blocks/site-title/editor.css |
116 B |
build/block-library/blocks/site-title/style-rtl.css |
57 B |
build/block-library/blocks/site-title/style.css |
57 B |
build/block-library/blocks/social-link/editor-rtl.css |
324 B |
build/block-library/blocks/social-link/editor.css |
324 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/spacer/editor-rtl.css |
350 B |
build/block-library/blocks/spacer/editor.css |
350 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 |
395 B |
build/block-library/blocks/table/editor.css |
395 B |
build/block-library/blocks/table/style-rtl.css |
639 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 |
251 B |
build/block-library/blocks/tag-cloud/style.css |
253 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 |
107 B |
build/block-library/blocks/template-part/theme.css |
107 B |
build/block-library/blocks/term-description/style-rtl.css |
111 B |
build/block-library/blocks/term-description/style.css |
111 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 |
166 B |
build/block-library/blocks/text-columns/style.css |
166 B |
build/block-library/blocks/verse/style-rtl.css |
99 B |
build/block-library/blocks/verse/style.css |
99 B |
build/block-library/blocks/video/editor-rtl.css |
552 B |
build/block-library/blocks/video/editor.css |
555 B |
build/block-library/blocks/video/style-rtl.css |
185 B |
build/block-library/blocks/video/style.css |
185 B |
build/block-library/blocks/video/theme-rtl.css |
133 B |
build/block-library/blocks/video/theme.css |
133 B |
build/block-library/classic-rtl.css |
179 B |
build/block-library/classic.css |
179 B |
build/block-library/common-rtl.css |
1.11 kB |
build/block-library/common.css |
1.11 kB |
build/block-library/editor-elements-rtl.css |
75 B |
build/block-library/editor-elements.css |
75 B |
build/block-library/elements-rtl.css |
54 B |
build/block-library/elements.css |
54 B |
build/block-library/reset-rtl.css |
472 B |
build/block-library/reset.css |
472 B |
build/block-library/theme-rtl.css |
707 B |
build/block-library/theme.css |
713 B |
build/block-serialization-default-parser/index.min.js |
1.12 kB |
build/block-serialization-spec-parser/index.min.js |
2.87 kB |
build/commands/style-rtl.css |
953 B |
build/commands/style.css |
951 B |
build/customize-widgets/style-rtl.css |
1.36 kB |
build/customize-widgets/style.css |
1.36 kB |
build/data-controls/index.min.js |
640 B |
build/date/index.min.js |
17.9 kB |
build/deprecated/index.min.js |
451 B |
build/dom-ready/index.min.js |
324 B |
build/dom/index.min.js |
4.65 kB |
build/edit-post/classic-rtl.css |
578 B |
build/edit-post/classic.css |
578 B |
build/edit-post/style-rtl.css |
2.68 kB |
build/edit-post/style.css |
2.68 kB |
build/element/index.min.js |
4.83 kB |
build/escape-html/index.min.js |
537 B |
build/format-library/style-rtl.css |
493 B |
build/format-library/style.css |
492 B |
build/hooks/index.min.js |
1.55 kB |
build/html-entities/index.min.js |
448 B |
build/i18n/index.min.js |
3.58 kB |
build/interactivity/file.min.js |
447 B |
build/interactivity/image.min.js |
1.67 kB |
build/interactivity/navigation.min.js |
1.17 kB |
build/interactivity/query.min.js |
740 B |
build/interactivity/search.min.js |
618 B |
build/is-shallow-equal/index.min.js |
527 B |
build/keycodes/index.min.js |
1.46 kB |
build/list-reusable-blocks/style-rtl.css |
851 B |
build/list-reusable-blocks/style.css |
851 B |
build/media-utils/index.min.js |
2.92 kB |
build/modules/importmap-polyfill.min.js |
12.2 kB |
build/notices/index.min.js |
948 B |
build/nux/style-rtl.css |
748 B |
build/nux/style.css |
744 B |
build/patterns/style-rtl.css |
595 B |
build/patterns/style.css |
595 B |
build/preferences-persistence/index.min.js |
2.06 kB |
build/preferences/style-rtl.css |
710 B |
build/preferences/style.css |
712 B |
build/priority-queue/index.min.js |
1.52 kB |
build/private-apis/index.min.js |
1 kB |
build/react-refresh-entry/index.min.js |
9.47 kB |
build/react-refresh-runtime/index.min.js |
6.78 kB |
build/redux-routine/index.min.js |
2.7 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/shortcode/index.min.js |
1.39 kB |
build/style-engine/index.min.js |
2.02 kB |
build/token-list/index.min.js |
582 B |
build/url/index.min.js |
3.74 kB |
build/vendors/react-jsx-runtime.min.js |
554 B |
build/warning/index.min.js |
249 B |
build/widgets/style-rtl.css |
1.17 kB |
build/widgets/style.css |
1.17 kB |
build/wordcount/index.min.js |
1.02 kB |
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Thanks for the ping @carolinan
I don't think it can be as easy as this? There must be a rabbit hole somewhere :)
How many times have I thought this too 😄 ?
The PR tests well in the editor. I can't think of any technical reason why we couldn't support these units. vw already exists as a back up in the unit control component.
Not to say there aren't rabbit holes, yet from a code perspective I can't see any obvious ones.
The only issue that occurs to me right now is that fluid typography doesn't yet support vw/vh due to the way the values are calculated. Relative values like these are tricky to get right.
So a user might be left wondering why some units are converted to clamp values and others not. I suppose one day this could be communicated via the UI somehow, or integrated into any controls we might consider, e.g.,
- https://github.com/WordPress/gutenberg/issues/45502
Pinging @jasmussen for a design perspective.
I suppose we could ask the community if this would be useful without clamp(). I'll ask in the issue.
The motivation for fluid typography is one of "it just works", and both vh and vw units are fluid in their own way. To that end I'd think this could be as simple as just allowing those units as Carolina suggests.
There's still a very separate question around how the initial theme.json font size array can be built using the editor, and since theme.json allows a font size preset to be fluid or not, that's something you need to be able to build using global styles. That's mostly a UI design question, but it might eventually overlap with some of aspects of this conversation.
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: carolinan <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: ramonjd <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: jasmussen <[email protected]>
Co-authored-by: geriux <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: richtabor <[email protected]>
To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.
Flaky tests detected in 2f45c69782d12afe752c6f0c07d0b18a8a953a4d. Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9202165130 📝 Reported issues:
- #61806 in
/test/e2e/specs/site-editor/zoom-out.spec.js
Just to first confirm that we're making the intended changes — do we want to expand the unit types that are available in the Typography panel only? Or expand the default unit types for everybody that uses the FontSizePicker component? The PR description suggests that the intent was the former, but the code changes here will do the latter.
Let me know and I can advise on where to make the changes.
🤔 Great question. I think these units are relevant enough to be added to the component... But open to listen to other opinions.
I think these units are relevant enough to be added to the component
I wouldn't consider this a "breaking" change so I don't mind either way, but I'm just wondering whether vw/vh would be kind of irrelevant outside of a "full-page editing" context.
I also wanted to make sure it was clear that we're changing the defaults. Any consumer of FontSizePicker could've already passed vw/vh to the units prop if they wanted. I proposed a follow-up because this was unclear from the docs/code #60996.
For the range slider, it makes sense to me to limit the max value to 10 instead of 100, not least because starting at 50 would be very large. But I am unsure about using the decimals. I can't say I have seen many examples of that. What do you think @iamtakashi ?
What about the native file? I probably should not have touched it @WordPress/native-mobile.
Here is the range slider in the custom font size control in the Typography panel, with the decimals and max value at 10.
https://github.com/WordPress/gutenberg/assets/7422055/f41d7289-ce1f-4a29-a45e-d46e2e7f6700
What about the native file? I probably should not have touched it @WordPress/native-mobile.
I'll take a look 👍
Since I have not heard anything, I added vw and vh to isValueUnitRelative. It now uses decimals and the range slider has a max value of 10, like em and rem.
Thanks for the updates. Range slider looks good!
This is testing as expected for me, and I think a nice addition to the text block font size options.
Also I can't find any regressions in the way vw/h units are parsed when I define them theme.json styles - the values are being reflected in the global styles controls as defaults:
I can't see any interference with fluid typography (which guards against units it doesn't understand anyway)
https://github.com/WordPress/gutenberg/assets/6458278/e92d7517-35d0-43f0-9c73-44c66392293d
LGTM, but I'd just cc @WordPress/gutenberg-design for awareness and in case there are any gotchas.
Which is the correct place to add the change log entry? I understand that I need to move it to unreleased, but should it be under enhancements or internal?
The only concern with this PR is, as already mentioned, changing the default units of the FontSizePicker itself.
And as far as I know, unlike settings.spacing.units, the font size units cannot be changed via theme.json. That's because the typography panel doesn't take units into account, and support like settings.typograpy.units doesn't exist yet. Therefore, all themes are affected, as well as developers using this component without the unit prop.
What do you think about changing the default units of the typography panel in anticipation of adding support for settings/typograhy.units in the future?
Without a way to control the units, it is not going to make a difference for either type of extenders where the units are added.
I'm concerned about backward compatibility and extensibility.
For example, the following changes do not require any changes to the FontSizePicker component.
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
index 64a7be0443..75e5912d2b 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -196,6 +196,7 @@ export default function TypographyPanel( {
const resetFontFamily = () => setFontFamily( undefined );
// Font Size
+ const units = [ 'px', 'em', 'rem', 'vw', 'vh' ];
const hasFontSizeEnabled = useHasFontSizeControl( settings );
const disableCustomFontSizes = ! settings?.typography?.customFontSize;
const mergedFontSizes = getMergedFontSizes( settings );
@@ -385,6 +386,7 @@ export default function TypographyPanel( {
disableCustomFontSizes={ disableCustomFontSizes }
withReset={ false }
withSlider
+ units={ units }
size="__unstable-large"
/>
</ToolsPanelItem>
This means that developers using FontSizePicker components that do not explicitly specify the unit prop will not be affected.
And assuming that font size units are supported in theme.json in the future, all we need to do is make the following changes:
diff --git a/packages/block-editor/src/components/global-styles/typography-panel.js b/packages/block-editor/src/components/global-styles/typography-panel.js
index 75e5912d2b..38c501d7ee 100644
--- a/packages/block-editor/src/components/global-styles/typography-panel.js
+++ b/packages/block-editor/src/components/global-styles/typography-panel.js
@@ -196,7 +196,8 @@ export default function TypographyPanel( {
const resetFontFamily = () => setFontFamily( undefined );
// Font Size
- const units = [ 'px', 'em', 'rem', 'vw', 'vh' ];
+ const [ availableUnits ] = useSettings( 'spacing.units' );
+ const units = availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ];
const hasFontSizeEnabled = useHasFontSizeControl( settings );
const disableCustomFontSizes = ! settings?.typography?.customFontSize;
const mergedFontSizes = getMergedFontSizes( settings );
What do you think about this approach?
My opinion remains unchanged, that these units are relevant enough to be enabled as the default.
@t-hamano is there any reason why FontSizePicker shouldn't have the vw and vh as default font sizes? If we wanted to use useSettings( 'spacing.units' ) in the future for font sizes, why not have it there?
is there any reason why
FontSizePickershouldn't have thevwandvhas default font sizes?
My only concern is that for developers using the FontSizePicker component, and in all themes, the vw and vh units will be exposed. If many contributors think it's okay for this unit to be exposed as the default, I think it's okay to ship this PR.