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

Fluid typography: add font size constraints #44993

Merged

Conversation

ramonjd
Copy link
Member

@ramonjd ramonjd commented Oct 15, 2022

Resolves #44957

WordPress/wordpress-develop patch:

Cherry picked into wp/6.1 branch in this PR:

What?

This PR adds default minimum font size constraint of 14px/0.875rem/0.875em so that a fluid font's minimum font size does not become smaller than the constraint.

❗ For user-defined font sizes that are < 14px we will use the font-size itself as the minimum value. This is so that changes to these custom values are reflected in the editor and frontend. We trust the user here to insert a sensible value

Why and how?

To ensure that minimum font sizes, whether user-defined or calculated by gutenberg_get_typography_font_size_value are not less than 14px/0.875rem/0.875em.

This is to protect readability and accessibility.

Testing Instructions

In theme.json, add some very small font sizes (<14px or .875rem) to the presets' fluid.min.

Example:

				{
					"size": "2.8rem",
					"fluid": {
						"min": "0.3rem",
						"max": "30px"
					},
					"slug": "neutrale",
					"name": "Neutrale"
				},

Add a post and apply the preset.

Check that these font sizes are never less than 14px or .875rem in the editor and frontend.

Next add a custom font size to an element, either in theme.json or via the editor.

If your custom font size is <14px or .875rem, the value of the custom font size will be static.

Otherwise the clamped value's minimum font size should be never be less than 14px or .875rem.

Example theme.json
{
	"version": 2,
	"settings": {
		"typography": {
			"fluid": true,
			"fontSizes": [
				{
					"size": ".9rem",
					"slug": "piccolino",
					"name": "Piccolino"
				},
				{
					"size": "2rem",
					"fluid": {
						"min": "1.8rem",
						"max": "40px"
					},
					"slug": "in-mezzo",
					"name": "In Mezzo"
				},
				{
					"size": "2.8rem",
					"fluid": {
						"min": "0.3rem",
						"max": "30px"
					},
					"slug": "neutrale",
					"name": "Neutrale"
				},
				{
					"size": "4.75rem",
					"slug": "grandone",
					"name": "Grandone"
				}
			]
		}
	},
	"styles": {
		"typography": {
			"fontSize": "12px"
		},
		"elements": {
			"h1": {
				"typography": {
					"fontSize": "4rem"
				}
			}
		},
		"blocks": {
			"core/post-date": {
				"typography": {
					"fontSize": "16px"
				}
			}
		}
	}
}
Example HTML
<!-- wp:heading -->
<h2>Default font size in theme.json style (not clamped because &lt; 14px):</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet. A eaque harum in aspernatur vero qui sapiente asperiores quo harum exercitationem qui quasi neque et laborum veritatis. Et sint inventore rem aliquam tempora nam ratione quaerat.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Corrected font size in preset (won't be smaller than 14px):</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"piccolino"} -->
<p class="has-piccolino-font-size">Lorem ipsum dolor sit amet. A eaque harum in aspernatur vero qui sapiente asperiores quo harum exercitationem qui quasi neque et laborum veritatis. Et sint inventore rem aliquam tempora nam ratione quaerat.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Corrected fluid.min font size in preset (won't be smaller than 14px):</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"fontSize":"neutrale"} -->
<p class="has-neutrale-font-size">Lorem ipsum dolor sit amet. A eaque harum in aspernatur vero qui sapiente asperiores quo harum exercitationem qui quasi neque et laborum veritatis. Et sint inventore rem aliquam tempora nam ratione quaerat.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Small custom font size (not clamped because &lt; 14px):</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"typography":{"fontSize":"12px"}}} -->
<p style="font-size:12px">Lorem ipsum dolor sit amet. A eaque harum in aspernatur vero qui sapiente asperiores quo harum exercitationem qui quasi neque et laborum veritatis. Et sint inventore rem aliquam tempora nam ratione quaerat.</p>
<!-- /wp:paragraph -->
## Screenshots or screencast
2022-10-17.13.00.13.mp4

@github-actions
Copy link

github-actions bot commented Oct 15, 2022

Size Change: +412 B (0%)

Total Size: 1.27 MB

Filename Size Change
build/block-editor/index.min.js 168 kB +252 B (0%)
build/block-editor/style-rtl.css 15.6 kB +20 B (0%)
build/block-editor/style.css 15.5 kB +20 B (0%)
build/block-library/index.min.js 191 kB +27 B (0%)
build/components/index.min.js 202 kB +27 B (0%)
build/edit-site/index.min.js 57.8 kB +60 B (0%)
build/editor/index.min.js 41.7 kB +14 B (0%)
build/editor/style-rtl.css 3.62 kB -5 B (0%)
build/editor/style.css 3.61 kB -3 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 982 B
build/annotations/index.min.js 2.76 kB
build/api-fetch/index.min.js 2.26 kB
build/autop/index.min.js 2.14 kB
build/blob/index.min.js 475 B
build/block-directory/index.min.js 7.09 kB
build/block-directory/style-rtl.css 990 B
build/block-directory/style.css 991 B
build/block-editor/default-editor-styles-rtl.css 378 B
build/block-editor/default-editor-styles.css 378 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 126 B
build/block-library/blocks/audio/theme.css 126 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 84 B
build/block-library/blocks/avatar/style.css 84 B
build/block-library/blocks/block/editor-rtl.css 161 B
build/block-library/blocks/block/editor.css 161 B
build/block-library/blocks/button/editor-rtl.css 482 B
build/block-library/blocks/button/editor.css 482 B
build/block-library/blocks/button/style-rtl.css 523 B
build/block-library/blocks/button/style.css 523 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 84 B
build/block-library/blocks/categories/editor.css 83 B
build/block-library/blocks/categories/style-rtl.css 100 B
build/block-library/blocks/categories/style.css 100 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 406 B
build/block-library/blocks/columns/style.css 406 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 187 B
build/block-library/blocks/comment-template/style.css 185 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 834 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 630 B
build/block-library/blocks/cover/editor-rtl.css 612 B
build/block-library/blocks/cover/editor.css 613 B
build/block-library/blocks/cover/style-rtl.css 1.57 kB
build/block-library/blocks/cover/style.css 1.55 kB
build/block-library/blocks/embed/editor-rtl.css 293 B
build/block-library/blocks/embed/editor.css 293 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 126 B
build/block-library/blocks/embed/theme.css 126 B
build/block-library/blocks/file/editor-rtl.css 300 B
build/block-library/blocks/file/editor.css 300 B
build/block-library/blocks/file/style-rtl.css 253 B
build/block-library/blocks/file/style.css 254 B
build/block-library/blocks/file/view.min.js 346 B
build/block-library/blocks/freeform/editor-rtl.css 2.44 kB
build/block-library/blocks/freeform/editor.css 2.44 kB
build/block-library/blocks/gallery/editor-rtl.css 948 B
build/block-library/blocks/gallery/editor.css 950 B
build/block-library/blocks/gallery/style-rtl.css 1.53 kB
build/block-library/blocks/gallery/style.css 1.53 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 394 B
build/block-library/blocks/group/editor.css 394 B
build/block-library/blocks/group/style-rtl.css 57 B
build/block-library/blocks/group/style.css 57 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 76 B
build/block-library/blocks/heading/style.css 76 B
build/block-library/blocks/html/editor-rtl.css 327 B
build/block-library/blocks/html/editor.css 329 B
build/block-library/blocks/image/editor-rtl.css 884 B
build/block-library/blocks/image/editor.css 882 B
build/block-library/blocks/image/style-rtl.css 627 B
build/block-library/blocks/image/style.css 630 B
build/block-library/blocks/image/theme-rtl.css 126 B
build/block-library/blocks/image/theme.css 126 B
build/block-library/blocks/latest-comments/style-rtl.css 284 B
build/block-library/blocks/latest-comments/style.css 284 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/latest-posts/style-rtl.css 463 B
build/block-library/blocks/latest-posts/style.css 462 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 266 B
build/block-library/blocks/media-text/editor.css 263 B
build/block-library/blocks/media-text/style-rtl.css 507 B
build/block-library/blocks/media-text/style.css 505 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 705 B
build/block-library/blocks/navigation-link/editor.css 703 B
build/block-library/blocks/navigation-link/style-rtl.css 115 B
build/block-library/blocks/navigation-link/style.css 115 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.02 kB
build/block-library/blocks/navigation/editor.css 2.03 kB
build/block-library/blocks/navigation/style-rtl.css 2.17 kB
build/block-library/blocks/navigation/style.css 2.16 kB
build/block-library/blocks/navigation/view-modal.min.js 2.78 kB
build/block-library/blocks/navigation/view.min.js 443 B
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 363 B
build/block-library/blocks/page-list/editor.css 363 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 174 B
build/block-library/blocks/paragraph/editor.css 174 B
build/block-library/blocks/paragraph/style-rtl.css 279 B
build/block-library/blocks/paragraph/style.css 281 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 493 B
build/block-library/blocks/post-comments-form/style.css 493 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 73 B
build/block-library/blocks/post-excerpt/editor.css 73 B
build/block-library/blocks/post-excerpt/style-rtl.css 69 B
build/block-library/blocks/post-excerpt/style.css 69 B
build/block-library/blocks/post-featured-image/editor-rtl.css 586 B
build/block-library/blocks/post-featured-image/editor.css 584 B
build/block-library/blocks/post-featured-image/style-rtl.css 315 B
build/block-library/blocks/post-featured-image/style.css 315 B
build/block-library/blocks/post-navigation-link/style-rtl.css 153 B
build/block-library/blocks/post-navigation-link/style.css 153 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 282 B
build/block-library/blocks/post-template/style.css 282 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-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 103 B
build/block-library/blocks/preformatted/style.css 103 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 326 B
build/block-library/blocks/pullquote/style.css 325 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 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 282 B
build/block-library/blocks/query-pagination/style.css 278 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 439 B
build/block-library/blocks/query/editor.css 439 B
build/block-library/blocks/quote/style-rtl.css 213 B
build/block-library/blocks/quote/style.css 213 B
build/block-library/blocks/quote/theme-rtl.css 223 B
build/block-library/blocks/quote/theme.css 226 B
build/block-library/blocks/read-more/style-rtl.css 132 B
build/block-library/blocks/read-more/style.css 132 B
build/block-library/blocks/rss/editor-rtl.css 202 B
build/block-library/blocks/rss/editor.css 204 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 165 B
build/block-library/blocks/search/editor.css 165 B
build/block-library/blocks/search/style-rtl.css 409 B
build/block-library/blocks/search/style.css 406 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 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 234 B
build/block-library/blocks/separator/style.css 234 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 464 B
build/block-library/blocks/shortcode/editor.css 464 B
build/block-library/blocks/site-logo/editor-rtl.css 490 B
build/block-library/blocks/site-logo/editor.css 490 B
build/block-library/blocks/site-logo/style-rtl.css 203 B
build/block-library/blocks/site-logo/style.css 203 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 184 B
build/block-library/blocks/social-link/editor.css 184 B
build/block-library/blocks/social-links/editor-rtl.css 674 B
build/block-library/blocks/social-links/editor.css 673 B
build/block-library/blocks/social-links/style-rtl.css 1.4 kB
build/block-library/blocks/social-links/style.css 1.39 kB
build/block-library/blocks/spacer/editor-rtl.css 322 B
build/block-library/blocks/spacer/editor.css 322 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 494 B
build/block-library/blocks/table/editor.css 494 B
build/block-library/blocks/table/style-rtl.css 611 B
build/block-library/blocks/table/style.css 609 B
build/block-library/blocks/table/theme-rtl.css 190 B
build/block-library/blocks/table/theme.css 190 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 235 B
build/block-library/blocks/template-part/editor.css 235 B
build/block-library/blocks/template-part/theme-rtl.css 101 B
build/block-library/blocks/template-part/theme.css 101 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 87 B
build/block-library/blocks/verse/style.css 87 B
build/block-library/blocks/video/editor-rtl.css 691 B
build/block-library/blocks/video/editor.css 694 B
build/block-library/blocks/video/style-rtl.css 174 B
build/block-library/blocks/video/style.css 174 B
build/block-library/blocks/video/theme-rtl.css 126 B
build/block-library/blocks/video/theme.css 126 B
build/block-library/classic-rtl.css 162 B
build/block-library/classic.css 162 B
build/block-library/common-rtl.css 1.02 kB
build/block-library/common.css 1.02 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.2 kB
build/block-library/editor.css 11.2 kB
build/block-library/elements-rtl.css 54 B
build/block-library/elements.css 54 B
build/block-library/reset-rtl.css 478 B
build/block-library/reset.css 478 B
build/block-library/style-rtl.css 12.3 kB
build/block-library/style.css 12.3 kB
build/block-library/theme-rtl.css 719 B
build/block-library/theme.css 722 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.83 kB
build/blocks/index.min.js 49.8 kB
build/components/style-rtl.css 11.3 kB
build/components/style.css 11.3 kB
build/compose/index.min.js 12.2 kB
build/core-data/index.min.js 15.5 kB
build/customize-widgets/index.min.js 11.3 kB
build/customize-widgets/style-rtl.css 1.38 kB
build/customize-widgets/style.css 1.38 kB
build/data-controls/index.min.js 653 B
build/data/index.min.js 8.08 kB
build/date/index.min.js 32.1 kB
build/deprecated/index.min.js 507 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.7 kB
build/edit-navigation/index.min.js 16.1 kB
build/edit-navigation/style-rtl.css 3.99 kB
build/edit-navigation/style.css 4 kB
build/edit-post/classic-rtl.css 546 B
build/edit-post/classic.css 547 B
build/edit-post/index.min.js 31.8 kB
build/edit-post/style-rtl.css 7.13 kB
build/edit-post/style.css 7.13 kB
build/edit-site/style-rtl.css 8.37 kB
build/edit-site/style.css 8.35 kB
build/edit-widgets/index.min.js 16.7 kB
build/edit-widgets/style-rtl.css 4.34 kB
build/edit-widgets/style.css 4.34 kB
build/element/index.min.js 4.68 kB
build/escape-html/index.min.js 537 B
build/experiments/index.min.js 868 B
build/format-library/index.min.js 6.95 kB
build/format-library/style-rtl.css 571 B
build/format-library/style.css 571 B
build/hooks/index.min.js 1.64 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.77 kB
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.78 kB
build/keycodes/index.min.js 1.83 kB
build/list-reusable-blocks/index.min.js 2.13 kB
build/list-reusable-blocks/style-rtl.css 835 B
build/list-reusable-blocks/style.css 835 B
build/media-utils/index.min.js 2.93 kB
build/notices/index.min.js 963 B
build/nux/index.min.js 2.06 kB
build/nux/style-rtl.css 732 B
build/nux/style.css 728 B
build/plugins/index.min.js 1.94 kB
build/preferences-persistence/index.min.js 2.22 kB
build/preferences/index.min.js 1.33 kB
build/primitives/index.min.js 933 B
build/priority-queue/index.min.js 1.58 kB
build/react-i18n/index.min.js 696 B
build/react-refresh-entry/index.min.js 8.44 kB
build/react-refresh-runtime/index.min.js 7.31 kB
build/redux-routine/index.min.js 2.74 kB
build/reusable-blocks/index.min.js 2.21 kB
build/reusable-blocks/style-rtl.css 256 B
build/reusable-blocks/style.css 256 B
build/rich-text/index.min.js 10.6 kB
build/server-side-render/index.min.js 1.77 kB
build/shortcode/index.min.js 1.53 kB
build/style-engine/index.min.js 1.46 kB
build/token-list/index.min.js 644 B
build/url/index.min.js 3.61 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 38.5 kB
build/vendors/react.min.js 4.34 kB
build/viewport/index.min.js 1.08 kB
build/warning/index.min.js 268 B
build/widgets/index.min.js 7.21 kB
build/widgets/style-rtl.css 1.18 kB
build/widgets/style.css 1.19 kB
build/wordcount/index.min.js 1.06 kB

compressed-size-action

@ramonjd ramonjd force-pushed the update/fluid-typography-with-min-font-size-value-constraint branch from 3c2a4a1 to 6f9ad91 Compare October 16, 2022 01:06
Copy link
Contributor

@tellthemachines tellthemachines left a comment

Choose a reason for hiding this comment

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

Tested these changes on Chrome, Firefox and Safari on macOS. I used custom font sizes both large and small, defined in px, em and rem, and tested with different browser font size settings. It's all working pretty well across all the browsers!

A few comments below.

lib/block-supports/typography.php Outdated Show resolved Hide resolved
lib/block-supports/typography.php Outdated Show resolved Hide resolved
@@ -372,12 +374,17 @@ function gutenberg_get_computed_fluid_typography_value( $args = array() ) {
)
);

// Protect against unsupported units.
// Checks for mandatory min and max sizes, and protects against unsupported units.
Copy link
Contributor

Choose a reason for hiding this comment

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

In the (unchanged) lines above, we're coercing the max size to $font_size_unit but not the min size, is that deliberate?

Copy link
Member Author

@ramonjd ramonjd Oct 17, 2022

Choose a reason for hiding this comment

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

It is, and here's the logic (mine at least 😄)

The min and max font size units can theoretically differ, so one can be px and the other rem. This is fine in
the resulting clamp value's first and third args, e.g., clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)

But in order to calculate a linear factor between viewport boundaries we have to do the math on similar values, that is, values whose units are the same. So we coerce the max value unit to whatever the min value unit is.

I use the min value because, if there isn't a min value specified, e.g., it's a custom font size, we use incoming custom font size to calculate a minimum value, and therefore use its unit.

The functions' internals are ripe for refactor by the way, but since it's all neatly housed I think we can do it in a follow up.

lib/block-supports/typography.php Outdated Show resolved Hide resolved
Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

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

This is looking pretty good so far, thanks so much for digging in to land a fix @ramonjd! Just left a few nits, but happy to give this a more detailed test once it's ready for a final review 🙂

lib/block-supports/typography.php Outdated Show resolved Hide resolved
lib/block-supports/typography.php Outdated Show resolved Hide resolved
lib/block-supports/typography.php Outdated Show resolved Hide resolved
@ramonjd ramonjd self-assigned this Oct 17, 2022
@ramonjd ramonjd changed the title WIP Fluid typography: add font size constraints Oct 17, 2022
@ramonjd ramonjd added [Type] Bug An existing feature does not function as intended [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Feature] Typography Font and typography-related issues and PRs labels Oct 17, 2022
@ramonjd ramonjd marked this pull request as ready for review October 17, 2022 02:06
- Adds default minimum font size limits so that text does not become smaller than 14px/0.875rem/0.875em. The consequence will be that all fluid font sizes will be no smaller than 14px/0.875rem/0.875em in any viewport width.
- Users may define font-sizes that are smaller than 14px/0.875rem/0.875em. In this case the user-defined font size becomes the minimum. For example if a user defines 9px for a block, then the minimum font size for that block will be 9px.

- Min font size should not be greater than max font size.
- Round to 3 decimal places (JS)

- Rounding computed min and max values
…s in em

This is to keep it consistent with the original formula and ensure the fluid argument in clamp is working off a size relative to :root

Fixing formatting and grammar
Rolling back renaming $preset to $font_size in preference to a follow up.

Do  not clamp value if there is no min size and the font size is less than 14px
@ramonjd ramonjd force-pushed the update/fluid-typography-with-min-font-size-value-constraint branch from 1e0d8f3 to f45b4a5 Compare October 17, 2022 02:25
@ramonjd
Copy link
Member Author

ramonjd commented Oct 17, 2022

The exception is where users or themers define font-sizes that are smaller than 14px. In this case, in order to honour the user's choice, the value is not clamped (no fluidity).

@jasmussen @tellthemachines @andrewserong

Seeking your counsel here.

I've made an assumption about font sizes that are < 14px set by users or in theme.json (essentially any font size without a defined min font size).

In this PR they are not clamped, but will return a static size.

So, if the font size is 12px it won't be clamped, and remain 12px.

14px and above will start returning, for example, clamp(14px, 0.875rem + (1vw - 7.68px) * 0.841, 21px) as you go bigger.

In a previous commit, I had returned a clamped value but had used font sizes that are < 14px as the minimum font size. That seemed a bit strange and against the spirit of what we're trying to acheive.

What are your thoughts on how to handle these small values set by the user?

My intention was not to create any surprises in the editor or theme.json, by constraining a font size even if the user is setting the value < 14px. It would be strange to set a font size to 9px and not seeing the text budge on the screen.

Also I thought that there may be some design cases for very small font sizes, e.g., where the text is not meant to be readable. It's a long bow to draw, I know.

@andrewserong
Copy link
Contributor

In this PR they are not clamped, but will return a static size.

From my perspective, the idea of keeping font sizes < 14px as non clamped values sounds like a good approach to me. Taking a step back and thinking of the value of the fluid typography rules, it's primarily to enable setting larger font-sizes that scale down in a pleasing (and magic) way on smaller viewport sizes, or scale up in a pleasing way to very large viewport sizes. So, when someone explicitly uses a really small font size, I doubt there's the same desire to have fluid rules be applied.

I'm not a designer, though, so keen to hear what @jasmussen thinks here, too!

Also, I suppose in follow-ups (perhaps for 6.2), we might be able to have an explicit fluid flag, where if users really want the small font-size to have fluid rules, they could be applied?

But when it comes to really small font-sizes, the main use cases I can think of are footer areas where folks are intentionally putting a whole bunch of information with a high level of density (especially terms of service info and the like). And that information is likely the kind that isn't intended to really scale up very much. E.g. here are parts of footers on Microsoft and Apple websites:

image

image

@tellthemachines
Copy link
Contributor

In a previous commit, I had returned a clamped value but had used font sizes that are < 14px as the minimum font size. That seemed a bit strange and against the spirit of what we're trying to acheive.

It doesn't seem strange to me. I think it stranger if the fluid behaviour varies depending on font size, because it feels a bit random - why set the limit at 14px?

We could also argue that if the user sets a custom font size, they'll expect that size to persist across different viewports, but if that behaviour changes with setting the fluid flag, then it makes sense for it to change for all font sizes equally.

@andrewserong
Copy link
Contributor

but if that behaviour changes with setting the fluid flag, then it makes sense for it to change for all font sizes equally.

Also a very good point!

@ramonjd
Copy link
Member Author

ramonjd commented Oct 17, 2022

We could also argue that if the user sets a custom font size, they'll expect that size to persist across different viewports, but if that behaviour changes with setting the fluid flag, then it makes sense for it to change for all font sizes equally

Taking a step back and thinking of the value of the fluid typography rules, it's primarily to enable setting larger font-sizes that scale down in a pleasing (and magic) way on smaller viewport sizes, or scale up in a pleasing way to very large viewport sizes. So, when someone explicitly uses a really small font size, I doubt there's the same desire to have fluid rules be applied.

Hmm, excellent observations.

So the choice is whether to:

  • return a clamped value all the time, even if the font size is < 14px
  • only return a clamped value if the font size > 14px (and there is no minimum set in a preset for example)

Both give precedence to user choice, which I think we should do.

I'm not sure whether we place such a constraint on styles elsewhere so we'd be setting a precedent that should be compatible with other potential constraints, e.g., maximum font size.

With that in mind, I suppose turning on fluid: true is a deliberate act on the part of a theme, so it'd be easy to argue that it should be a "universal" switch.

Keen to hear what @jasmussen and co. think as well.

The good news is that the functionality for both exists in the commit history of this PR, so it's easy to change once we've made up our minds 😄

Later I'd like to revive this PR:

And add a configurable minimum font size as well. Maybe even a max font size.

Copy link
Contributor

@jasmussen jasmussen left a comment

Choose a reason for hiding this comment

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

Nice! Approving from a design perspective, because when fluid: true; and no other fluid boundaries defined on a per-preset basis, the minimum font size is 14px in editor and frontend:
Screenshot 2022-10-17 at 10 41 20

Screenshot 2022-10-17 at 10 41 28

That definitely fixes the small-font bug.

I furthermore tested that the manual boundaries (custom min/max) work as intended, and even fluid: false on a per-preset basis works as intended. This makes fluid typography feel true to its boolean "just works" intent, but maintains the room to customize.

I'd appreciate good code reviews in addition to this approval! Thank you for fast work.

@ramonjd
Copy link
Member Author

ramonjd commented Oct 18, 2022

Thanks again for testing @andrewserong

I've made all the changes and added test for the zero value.

Playing around with the fluid typography, in the editor, I think this strikes a good balance, though personally I look forward to being able to adjust the multiplier / ratio further down the track (e.g. in 6.2) to take a slightly more moderate calculation — but that's a feature for another time!

I'm also happy with the balance so far and I think we're in a good place. Existing font sizes, when a user flips the fluid switch won't be affected and we can introduce configurables later.

I'm grateful for the constant testing and thoughts! 🙇

@ramonjd ramonjd merged commit 963d836 into trunk Oct 18, 2022
@ramonjd ramonjd deleted the update/fluid-typography-with-min-font-size-value-constraint branch October 18, 2022 21:12
@github-actions github-actions bot added this to the Gutenberg 14.4 milestone Oct 18, 2022
ramonjd added a commit to ramonjd/wordpress-develop that referenced this pull request Oct 18, 2022
- Adds default minimum font size limits so that min font size, where provided, does not become smaller than 14px/0.875rem/0.875em. The consequence will be that all fluid font sizes will be no smaller than 14px/0.875rem/0.875em in any viewport width.
- For font sizes of < 14px that have no defined minimum sizes, use the font size to set the floor of the clamp() value.
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Oct 19, 2022
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.

This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.

Original PR from Gutenberg repository:
* [WordPress/gutenberg#44993 #44993 Fluid typography: add font size constraints]

Follow-up to [54260], [54360], [54497], [54500].

Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646


git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
pento pushed a commit to WordPress/wordpress-develop that referenced this pull request Oct 19, 2022
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.

This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.

Original PR from Gutenberg repository:
* [WordPress/gutenberg#44993 #44993 Fluid typography: add font size constraints]

Follow-up to [54260], [54360], [54497], [54500].

Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
Reviewed by bernhard-reiter, SergeyBiryukov.
Merges [54646] to the 6.1 branch.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/branches/6.1@54647 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith pushed a commit to markjaquith/WordPress that referenced this pull request Oct 19, 2022
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.

This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.

Original PR from Gutenberg repository:
* [WordPress/gutenberg#44993 #44993 Fluid typography: add font size constraints]

Follow-up to [54260], [54360], [54497], [54500].

Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
Reviewed by bernhard-reiter, SergeyBiryukov.
Merges [54646] to the 6.1 branch.
See #56467.
Built from https://develop.svn.wordpress.org/branches/6.1@54647


git-svn-id: http://core.svn.wordpress.org/branches/6.1@54199 1a063a9b-81f0-0310-95a4-ce76da25c4cd
github-actions bot pushed a commit to platformsh/wordpress-performance that referenced this pull request Oct 19, 2022
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.

This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.

Original PR from Gutenberg repository:
* [WordPress/gutenberg#44993 #44993 Fluid typography: add font size constraints]

Follow-up to [54260], [54360], [54497], [54500].

Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646


git-svn-id: https://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
ramonjd added a commit that referenced this pull request Oct 19, 2022
* Initial commit:
- Adds default minimum font size limits so that text does not become smaller than 14px/0.875rem/0.875em. The consequence will be that all fluid font sizes will be no smaller than 14px/0.875rem/0.875em in any viewport width.
- Users may define font-sizes that are smaller than 14px/0.875rem/0.875em. In this case the user-defined font size becomes the minimum. For example if a user defines 9px for a block, then the minimum font size for that block will be 9px.

- Min font size should not be greater than max font size.
- Round to 3 decimal places (JS)

- Rounding computed min and max values

* Rounding parsed min and max values

* Updating JS rounding function so that values are rounded

* Removing type coercion

* Updating failing test

* Remove reference to preset in favour of "fontSize"

* Ensure that rem units are used when calculating min and max boundaries in em
This is to keep it consistent with the original formula and ensure the fluid argument in clamp is working off a size relative to :root

Fixing formatting and grammar
Rolling back renaming $preset to $font_size in preference to a follow up.

Do  not clamp value if there is no min size and the font size is less than 14px

* Oh Linter! You persistent crank.

* For font sizes of < 14px that have no defined minimum sizes, use the font size to set the floor of the clamp() value.

* Removing max < min check. It wasn't there before. It can be a follow up if required as it requires extra logic.

* Checking for a zero-based linear factor. If we find one, default to `1`

* Refer to correct JS var in JS file
ockham pushed a commit that referenced this pull request Oct 25, 2022
* Initial commit:
- Adds default minimum font size limits so that text does not become smaller than 14px/0.875rem/0.875em. The consequence will be that all fluid font sizes will be no smaller than 14px/0.875rem/0.875em in any viewport width.
- Users may define font-sizes that are smaller than 14px/0.875rem/0.875em. In this case the user-defined font size becomes the minimum. For example if a user defines 9px for a block, then the minimum font size for that block will be 9px.

- Min font size should not be greater than max font size.
- Round to 3 decimal places (JS)

- Rounding computed min and max values

* Rounding parsed min and max values

* Updating JS rounding function so that values are rounded

* Removing type coercion

* Updating failing test

* Remove reference to preset in favour of "fontSize"

* Ensure that rem units are used when calculating min and max boundaries in em
This is to keep it consistent with the original formula and ensure the fluid argument in clamp is working off a size relative to :root

Fixing formatting and grammar
Rolling back renaming $preset to $font_size in preference to a follow up.

Do  not clamp value if there is no min size and the font size is less than 14px

* Oh Linter! You persistent crank.

* For font sizes of < 14px that have no defined minimum sizes, use the font size to set the floor of the clamp() value.

* Removing max < min check. It wasn't there before. It can be a follow up if required as it requires extra logic.

* Checking for a zero-based linear factor. If we find one, default to `1`

* Refer to correct JS var in JS file
@ockham
Copy link
Contributor

ockham commented Oct 25, 2022

I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: c3933fa

@ockham ockham removed the Backport to WP 6.7 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 25, 2022
@ockham
Copy link
Contributor

ockham commented Oct 25, 2022

I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: c3933fa

Reverting on the wp/6.1 branch per this discussion.

ockham added a commit that referenced this pull request Oct 25, 2022
@ockham
Copy link
Contributor

ockham commented Oct 25, 2022

I just cherry-picked this PR to the wp/6.1 branch to get it included in the next release: c3933fa

Reverting on the wp/6.1 branch per this discussion.

9b745d7

@ockham ockham added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Oct 26, 2022
ootwch pushed a commit to ootwch/wordpress-develop that referenced this pull request Nov 4, 2022
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.

This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.

Original PR from Gutenberg repository:
* [WordPress/gutenberg#44993 #44993 Fluid typography: add font size constraints]

Follow-up to [54260], [54360], [54497], [54500].

Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.

git-svn-id: https://develop.svn.wordpress.org/trunk@54646 602fd350-edb4-49c9-b593-d223f7449a82
Mamaduka pushed a commit that referenced this pull request Nov 10, 2022
* Initial commit:
- Adds default minimum font size limits so that text does not become smaller than 14px/0.875rem/0.875em. The consequence will be that all fluid font sizes will be no smaller than 14px/0.875rem/0.875em in any viewport width.
- Users may define font-sizes that are smaller than 14px/0.875rem/0.875em. In this case the user-defined font size becomes the minimum. For example if a user defines 9px for a block, then the minimum font size for that block will be 9px.

- Min font size should not be greater than max font size.
- Round to 3 decimal places (JS)

- Rounding computed min and max values

* Rounding parsed min and max values

* Updating JS rounding function so that values are rounded

* Removing type coercion

* Updating failing test

* Remove reference to preset in favour of "fontSize"

* Ensure that rem units are used when calculating min and max boundaries in em
This is to keep it consistent with the original formula and ensure the fluid argument in clamp is working off a size relative to :root

Fixing formatting and grammar
Rolling back renaming $preset to $font_size in preference to a follow up.

Do  not clamp value if there is no min size and the font size is less than 14px

* Oh Linter! You persistent crank.

* For font sizes of < 14px that have no defined minimum sizes, use the font size to set the floor of the clamp() value.

* Removing max < min check. It wasn't there before. It can be a follow up if required as it requires extra logic.

* Checking for a zero-based linear factor. If we find one, default to `1`

* Refer to correct JS var in JS file
Mamaduka pushed a commit that referenced this pull request Nov 10, 2022
* Initial commit:
- Adds default minimum font size limits so that text does not become smaller than 14px/0.875rem/0.875em. The consequence will be that all fluid font sizes will be no smaller than 14px/0.875rem/0.875em in any viewport width.
- Users may define font-sizes that are smaller than 14px/0.875rem/0.875em. In this case the user-defined font size becomes the minimum. For example if a user defines 9px for a block, then the minimum font size for that block will be 9px.

- Min font size should not be greater than max font size.
- Round to 3 decimal places (JS)

- Rounding computed min and max values

* Rounding parsed min and max values

* Updating JS rounding function so that values are rounded

* Removing type coercion

* Updating failing test

* Remove reference to preset in favour of "fontSize"

* Ensure that rem units are used when calculating min and max boundaries in em
This is to keep it consistent with the original formula and ensure the fluid argument in clamp is working off a size relative to :root

Fixing formatting and grammar
Rolling back renaming $preset to $font_size in preference to a follow up.

Do  not clamp value if there is no min size and the font size is less than 14px

* Oh Linter! You persistent crank.

* For font sizes of < 14px that have no defined minimum sizes, use the font size to set the floor of the clamp() value.

* Removing max < min check. It wasn't there before. It can be a follow up if required as it requires extra logic.

* Checking for a zero-based linear factor. If we find one, default to `1`

* Refer to correct JS var in JS file
@Mamaduka Mamaduka removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Nov 14, 2022
VenusPR added a commit to VenusPR/Wordpress_Richard that referenced this pull request Mar 9, 2023
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.

This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.

Original PR from Gutenberg repository:
* [WordPress/gutenberg#44993 #44993 Fluid typography: add font size constraints]

Follow-up to [54260], [54360], [54497], [54500].

Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
See #56467.
Built from https://develop.svn.wordpress.org/trunk@54646


git-svn-id: http://core.svn.wordpress.org/trunk@54198 1a063a9b-81f0-0310-95a4-ce76da25c4cd
VenusPR added a commit to VenusPR/Wordpress_Richard that referenced this pull request Mar 9, 2023
This commit:
* Adds default minimum font size limits so that min font size, where provided, does not become smaller than `14px`/`0.875rem`/`0.875em`.
* For font sizes of `< 14px` that have no defined minimum sizes, uses the font size to set the floor of the `clamp()` value.

This bugfix prevents converting existing small font sizes to clamp values that will reduce their font size even further in narrow widths. It therefore improves backward compatibility and accessibility.

Original PR from Gutenberg repository:
* [WordPress/gutenberg#44993 #44993 Fluid typography: add font size constraints]

Follow-up to [54260], [54360], [54497], [54500].

Props ramonopoly, andrewserong, isabel_brison, Joen, bernhard-reiter.
Reviewed by bernhard-reiter, SergeyBiryukov.
Merges [54646] to the 6.1 branch.
See #56467.
Built from https://develop.svn.wordpress.org/branches/6.1@54647


git-svn-id: http://core.svn.wordpress.org/branches/6.1@54199 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Typography Font and typography-related issues and PRs [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
No open projects
Development

Successfully merging this pull request may close these issues.

Fluid typography: add font size constraints
6 participants