Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font size presets UI #62328

Closed
wants to merge 41 commits into from
Closed

Font size presets UI #62328

wants to merge 41 commits into from

Conversation

matiasbenedetto
Copy link
Contributor

@matiasbenedetto matiasbenedetto commented Jun 5, 2024

What?

Adds UI to Global styles to allow modification of font size presets.
Fixes: #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.

@matiasbenedetto matiasbenedetto added [Type] Feature New feature to highlight in changelogs. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Jun 5, 2024
Copy link

github-actions bot commented Jun 5, 2024

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

compressed-size-action

@jasmussen
Copy link
Contributor

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?

@matiasbenedetto
Copy link
Contributor Author

matiasbenedetto commented Jun 10, 2024

@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

@matiasbenedetto
Copy link
Contributor Author

Adding a new font size preset:

Screencast.from.10-06-24.16.43.14.webm

@matiasbenedetto
Copy link
Contributor Author

Removing font size preset:

Screencast.from.10-06-24.16.46.22.webm

@matiasbenedetto matiasbenedetto marked this pull request as ready for review June 10, 2024 15:15
Copy link

github-actions bot commented Jun 10, 2024

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 <mmaattiiaass@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: beafialho <beafialho@git.wordpress.org>
Co-authored-by: markhowellsmead <markhowellsmead@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: luminuu <luminuu@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@matiasbenedetto
Copy link
Contributor Author

ℹ️ I pushed all the changes to this branch so it can be tested.

@jasmussen jasmussen requested a review from a team June 11, 2024 08:12
@jasmussen
Copy link
Contributor

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:

Screenshot 2024-06-11 at 10 12 46

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.

@beafialho
Copy link

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?

@matiasbenedetto
Copy link
Contributor Author

matiasbenedetto commented Jun 11, 2024

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

@beafialho
Copy link

beafialho commented Jun 11, 2024

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 👍

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the great work!

My concern is that the FontSizePicker component has been significantly updated and a new component called SizeControl has also been added.

The SizeControl component is marked as private, but FontSizePicker uses it internally. Since the FontSizePicker component is public, it may indirectly become public even if the SizeControl component is private.

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.

I think we will need feedback from the @WordPress/gutenberg-components team if we move forward with the current approach.

Comment on lines 57 to 58
// Get the font sizes from the theme or use the default ones.
const sizes = fontSizes.theme ?? fontSizes.default;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need to consider the case when defaultFontSizes is false?

@matiasbenedetto
Copy link
Contributor Author

matiasbenedetto commented Jun 17, 2024

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.

@tyxla tyxla requested a review from a team June 17, 2024 14:08

export const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];

function SizeControl( props: SizeControlProps ) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@WordPress/gutenberg-components how do we feel about the new SizeControl component being introduced as a separate component (a private API to start with)?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As @jasmussen said, a big change in core components like this should be discussed in a separate issue to figure out the best approach. And the "why" of the change is not immediately clear to me from this PR — we may be able to find other approaches once the "why" is more clear.

Copy link
Contributor

@ciampo ciampo Jun 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO, SizeControl shouldn't live in the @wordpress/components package, since it feels too tailored to a specific need of the editor.

We could instead discuss the need for a more general purpose UnitControl + RangeControl component, which was already initially discussed in #40507 and then abandoned for lack of priority.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks everyone for your input.

And the "why" of the change is not immediately clear to me from this PR — we may be able to find other approaches once the "why" is more clear.

@mirka I submitted the component in a new PR: #62866

IMO, SizeControl shouldn't live in the @wordpress/components package, since it feels too tailored to a specific need of the editor.

@ciampo What does it mean 'tailored for a specific need of the editor' in this context?
I don't see how SizeControl is more tailored 'for a specific need of the editor' than the FontSizePicker. Could you explain, please?

Copy link
Contributor

@ciampo ciampo Jun 26, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see how SizeControl is more tailored 'for a specific need of the editor' than the FontSizePicker. Could you explain, please?

That is true, and in fact I also think that FontSizePicker shouldn't be in the @wordpress/components package either for the same reason — but it is there and we can't easily remove it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that this suggestion from @mirka hits the sweet spot between reducing the amount of new code introduced, future maintenance need and speed of iteration:

Rework the disableCustomFontSizes prop in FontSizePicker so that it allows for custom font sizes only (which I believe would be the equivalent of the proposed SizeControl). For example we could deprecate disableCustomFontSizes and make a new enum prop with three options (e.g. "custom" | "predefined" | "both").

I'll see if I can spin up a PR with the necessary changes, so that this PR can use directly FontSizePicker — would that be ok @matiasbenedetto @mirka @t-hamano ?

Copy link
Contributor Author

@matiasbenedetto matiasbenedetto Jun 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that should be a follow-up independent of this task. The component has already consumed too much time for this implementation and it should not be a blocker. Apart from that, I'm not sure modifying the FontSizePicker component is the right thing to do and it certainly doesn't work for the other similar implementation: #61986

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@matiasbenedetto What are the requirements for #61986 that cannot be addressed by modifying FontSizePicker? Is there some logic in FontSizePicker that makes it unsuitable as a more generic sizing control, or is it a terminology issue?

Copy link
Contributor Author

@matiasbenedetto matiasbenedetto Jul 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

At a first glance I see 3 issues, that make me think that adding a 'mode' prop to determine the component to determine what it renders isn't the best approach:

  • FontSizePicker control only handle a small subset of css units.
  • FontSizePicker naming.
  • Adding this complexity doesn't seem to add much value to the FontSizePicker component and degrades the developer experience and it's more prone to errors.

Still, I haven't started working on the implementation of #61986 yet. So I may find other reasons on the way.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, we'll leave it to the feature folks to figure out the best abstraction. Thanks for elaborating.

I'll point out that we already do have a handful of SizeControl-like instances on the app side (SpacingInputControl, BorderRadiusControl, GridLayoutMinimumWidthControl) where people built their own UnitControl + slider-only RangeControl combo and did their own orchestration logic. I'm sure they could all be refactored to a certain degree, but I'm not immediately sure if it's worth the consolidation effort.

@annezazu
Copy link
Contributor

@WordPress/block-themers feedback is needed here from a block theme perspective 👀

@carolinan
Copy link
Contributor

carolinan commented Jun 27, 2024

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: #56364 (comment)

@jasmussen
Copy link
Contributor

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?

@carolinan
Copy link
Contributor

My preference would be consistency and to not have to go back and forward because it creates extra unnecessary work.

@matiasbenedetto
Copy link
Contributor Author

matiasbenedetto commented Jun 28, 2024

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?

@carolinan
Copy link
Contributor

I did find it confusing, but the consistency remark was about the visibility and positioning of the conditional controls.
I know we can not always get everything right the first time, or second, or third, but it creates so much extra work when a decision is made and then reverted.

So about the conditional controls, that are only visible depending on the parent option, it seems the common ground is to indent them. In this case, there is more than one condition, and I am not sure if it would "look good" or if translations would fit in this space if the last nested control was indented twice.

@carolinan
Copy link
Contributor

I don't think there is precedence for this, but perhaps when the new size is added automatically, it could have a bit of a background color fade or similar to indicate that it is the newest item? I did not find it so easy to see which size was the one I had just added.

@matiasbenedetto
Copy link
Contributor Author

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.

@carolinan is this done for any other setting/preset? Updating the slug seems risky because all the elements where the preset was applied will point to a preset that no longer exist.

@carolinan
Copy link
Contributor

As a developer I would like WP to update the slug everywhere ;)
As a developer I also would not like to start working on that because of the performance issues....

I don't want to put this on you, because you have already made progress here and probably have thought about this in detail,
but if the the size was not actually added until I choose a name and save, then the slug could already match the chosen name.

@t-hamano
Copy link
Contributor

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.

Previously, color palettes had slugs automatically generated based on the label you entered. However, if non-alphabetical characters were used in the label, the slug would not be generated correctly or would be duplicated.

To solve this, a sequential number was adopted, independent of the label. See the discussion in issues below.

This rule is consistent across all of the custom color palettes, custom shadow presets, and custom font size presets in this PR.

The question of whether to allow editing of the slug, or generate it by some rule based on the label, might be better discussed in a new issue covering colors, shadows, and font sizes as a whole, rather than in this PR.

@matiasbenedetto
Copy link
Contributor Author

matiasbenedetto commented Jun 28, 2024

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?

I tried both with code. They look like this.
The one with the left padding looks untidy for me.
The one with disabled component looks better but it doesn't hide the unnecessary complexity when the options are not available.
(side note: the button of the unit controller should not be blue when it is disabled it seems like a bug of that component).

With disabled component With left indent
Screenshot from 2024-06-28 13-49-48 Screenshot from 2024-06-28 13-40-17

@carolinan
Copy link
Contributor

carolinan commented Jun 29, 2024

I tried both with code. They look like this.

Consistency is important for me because it helps me work more efficiently, both when coding the controls and using them, but yeah, I want to say that I don't like this result either.
I know "like" and "feel" are very subjective but this indentation probably works best when there are multiple options that are below the controls.

@carolinan
Copy link
Contributor

The question of whether to allow editing of the slug, or generate it by some rule based on the label, might be better discussed in a new issue covering colors, shadows, and font sizes as a whole, rather than in this PR.

Yes, thank you for the background info!

@luminuu
Copy link
Member

luminuu commented Jul 1, 2024

Seeing this here, what is the difference between "Fluid typography" and "Custom fluid values"?

@matiasbenedetto
Copy link
Contributor Author

what is the difference between "Fluid typography" and "Custom fluid values"?

If fluid typography is enabled the default values are used for min and max. If the user want's to set manually the min and max, it should enable 'Custom fluid values'.

Reference from this make post: https://make.wordpress.org/core/2022/10/03/fluid-font-sizes-in-wordpress-6-1/

For presets, individual font sizes can be defined by their minimum and maximum values, which determine the smallest and largest values of a font size. Moreover, individual preset font sizes can opt out by setting settings.typography.fontSizes[].fluid to false.

In the absence of explicit minimum and maximum values, the editor will scale the existing size value up and down to calculate smallest and largest values automatically using computed lower and upper font size values based on the single value.

@jasmussen
Copy link
Contributor

Thanks for trying this. It really seems like the right solution is what you had, to hide the added controls until the toggle is flipped. There might not be a perfect solution that applies consistently for each of these cases.

@luminuu
Copy link
Member

luminuu commented Jul 2, 2024

If fluid typography is enabled the default values are used for min and max. If the user want's to set manually the min and max, it should enable 'Custom fluid values'.

Reference from this make post: https://make.wordpress.org/core/2022/10/03/fluid-font-sizes-in-wordpress-6-1/

Thanks! I wonder if it might be helpful to have a description for the Fluid typography label too. I'm thinking more of the users who are not aware what fluid typography means.

@jasmussen
Copy link
Contributor

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?

Just making sure I understand this question right: you're asking if it's okay that theme font size presets overrides and replaces those provided by other means (default, theme, custom)?

I feel like I'm still missing a bit of nuance, so I'll cast a bit of a broader net by pinging also @WordPress/gutenberg-design on this question. IMO the two aren't directly comparable, since in the case of colors there need to be fallbacks based on the named slugs. This is less the case with fonts, where they are often applied in a more sweeping style across blocks.

Not sure if this is helping, but I'd tend to think that whatever you see in that font size presets panel, is going to be the only set of font sizes you can choose from in the typography panels of your site. If they are not customized, that means they come from the theme. If they are customized after the fact, they now come from the user.

@matiasbenedetto
Copy link
Contributor Author

I wonder if it might be helpful to have a description for the Fluid typography label too. I'm thinking more of the users who are not aware what fluid typography means.

👍 Added in #63057

@matiasbenedetto
Copy link
Contributor Author

Thanks everyone for your feedback.

As there was no consensus about adding a new component to the components library I'm closing this PR in favor of #63057. Please continue providing feedback there. I think I implemented all the suggestion sreceived here, please review and comment in #63057

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json [Type] Feature New feature to highlight in changelogs.
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Add UI to Global styles to allow modification of font size presets