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

Add defaultFontSizes theme.json (theme.json v3) #58409

Merged
merged 54 commits into from Apr 25, 2024

Conversation

ajlende
Copy link
Contributor

@ajlende ajlende commented Jan 29, 2024

Dev Note 📝

See #58409 (comment)

What?

Reimplementation of #56661 with a proper theme.json migration.

Adds a defaultFontSizes option to disable showing the default font sizes.

When defaultFontSizes === false the options are removed from the UI.

In theme.json v3, by default defaultFontSizes is true.

In theme.json v2, defaultFontSizes isn't a valid key, but is treated as false where it would be used when a theme has font sizes defined for backwards compatibility of generated CSS.

Why?

Having an option for defaultFontSizes would give themes more control over which options are available. This option brings consistency to font sizes to match colors, gradients, duotone filters, and shadow presets.

How?

Goals are to migrate the behavior of the font sizes presets to be like other presets that can be disabled via default* settings.

Testing Instructions

Screenshots below contain example modified fontSizes JSON for TT4 to cover various cases of having font sizes and overriding default ones.

For each modified theme.json test that each step works as expected (see screenshots):

  1. Test with theme.json "version": 2. (trunk and this PR should be the same.)
  2. Update your theme.json to "version": 3. (Don't forget to update the style variations too.)
  3. Update your theme.json (again) with settings.typography.defaultFontSizes to false.

Then test custom origin styles migration.

  1. Start on trunk with a "version": 2 theme.json with no associated wp_global_styles post_types in the DB.
  2. Make changes to the global styles UI such as adding a new color.
  3. See the "version": 2 entry in the DB.
  4. Switch to this branch.
  5. Make more changes to the global styles UI such removing the color.
  6. See that the entry is updated to "version": 3 in the DB.
  7. See that "defaultFontSizes": false is not added to the entry in the DB.
  8. Update the theme's theme.json to "version": 3.
  9. Make more updates in the UI.
  10. See that "defaultFontSizes": false is still not added.

Testing Instructions for Keyboard

N/A

Screenshots or screencast

Each set of screenshots shows a different example theme.json modification to TT4.

  • v2 trunk: Screenshot of previous behavior in v2 theme.json.
  • v2: Screenshot from this branch for v2 theme.json.
  • v3 (default): Screenshot with v3 theme.json. (Should be the same as "defaultFontSizes": true.)
  • v3 false: Screenshot with "defaultFontSizes": false set in v3 theme.json.

TT4 Footnote Override

Example JSON
// Override fontSizes
// Same as TT4 with small renamed to footnote
{
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"fluid": false,
					"name": "Footnote",
					"size": "0.9rem",
					"slug": "footnote"
				},
				{
					"fluid": false,
					"name": "Medium",
					"size": "1.05rem",
					"slug": "medium"
				},
				{
					"fluid": {
						"min": "1.39rem",
						"max": "1.85rem"
					},
					"name": "Large",
					"size": "1.85rem",
					"slug": "large"
				},
				{
					"fluid": {
						"min": "1.85rem",
						"max": "2.5rem"
					},
					"name": "Extra Large",
					"size": "2.5rem",
					"slug": "x-large"
				},
				{
					"fluid": {
						"min": "2.5rem",
						"max": "3.27rem"
					},
					"name": "Extra Extra Large",
					"size": "3.27rem",
					"slug": "xx-large"
				}
			]
		}
	}
}
v2 trunk v2 v3 (default) v3 false
font-sizes-v2-override-before font-sizes-v2-override-after font-sizes-v3-override-true font-sizes-v3-override-false

TT4 Custom Only

Example JSON
// Only custom fontSizes
// Same as override with only footnote and extra-extra-large
{
	"settings": {
		"typography": {
			"fontSizes": [
				{
					"fluid": false,
					"name": "Footnote",
					"size": "0.9rem",
					"slug": "footnote"
				},
				{
					"fluid": {
						"min": "2.5rem",
						"max": "3.27rem"
					},
					"name": "Extra Extra Large",
					"size": "3.27rem",
					"slug": "xx-large"
				}
			]
		}
	}
}
v2 trunk v2 v3 (default) v3 false
font-sizes-v2-custom-before font-sizes-v2-custom-after font-sizes-v3-custom-true font-sizes-v3-custom-false

TT4 Empty fontSizes

Example JSON
// Empty fontSizes
{
	"settings": {
		"typography": {
			"fontSizes": []
		}
	}
}
v2 trunk v2 v3 (default) v3 false
font-sizes-v2-empty-before font-sizes-v2-empty-after font-sizes-v3-empty-true font-sizes-v3-empty-false

TT4 Undefined fontSizes

Example JSON
// Undefined fontSizes
{
	"settings": {
		"typography": {}
	}
}
v2 trunk v2 v3 (default) v3 false
font-sizes-v2-undefined-before font-sizes-v2-undefined-after font-sizes-v3-undefined-true font-sizes-v3-undefined-false

@ajlende ajlende added [Type] Bug An existing feature does not function as intended [Feature] Typography Font and typography-related issues and PRs labels Jan 29, 2024
@ajlende ajlende self-assigned this Jan 29, 2024
Copy link

github-actions bot commented Jan 29, 2024

This pull request changed or added PHP files in previous commits, but none have been detected in the latest commit.

Thank you! ❤️

@ajlende ajlende force-pushed the fix/default-font-sizes-override branch from 37060a7 to 0333ef6 Compare January 30, 2024 16:46
@ajlende ajlende changed the title Fix defaultFontSizes override Add defaultFontSizes theme.json (v2) Jan 30, 2024
Copy link

github-actions bot commented Jan 30, 2024

Size Change: +42 B (0%)

Total Size: 1.75 MB

Filename Size Change
build/block-editor/index.min.js 256 kB +42 B (0%)
ℹ️ View Unchanged
Filename Size
build/a11y/index.min.js 955 B
build/annotations/index.min.js 2.27 kB
build/api-fetch/index.min.js 2.32 kB
build/autop/index.min.js 2.1 kB
build/blob/index.min.js 578 B
build/block-directory/index.min.js 7.26 kB
build/block-directory/style-rtl.css 1.03 kB
build/block-directory/style.css 1.03 kB
build/block-editor/content-rtl.css 4.53 kB
build/block-editor/content.css 4.53 kB
build/block-editor/default-editor-styles-rtl.css 395 B
build/block-editor/default-editor-styles.css 395 B
build/block-editor/style-rtl.css 15.5 kB
build/block-editor/style.css 15.5 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 150 B
build/block-library/blocks/audio/editor.css 150 B
build/block-library/blocks/audio/style-rtl.css 122 B
build/block-library/blocks/audio/style.css 122 B
build/block-library/blocks/audio/theme-rtl.css 133 B
build/block-library/blocks/audio/theme.css 133 B
build/block-library/blocks/avatar/editor-rtl.css 116 B
build/block-library/blocks/avatar/editor.css 116 B
build/block-library/blocks/avatar/style-rtl.css 104 B
build/block-library/blocks/avatar/style.css 104 B
build/block-library/blocks/block/editor-rtl.css 305 B
build/block-library/blocks/block/editor.css 305 B
build/block-library/blocks/button/editor-rtl.css 415 B
build/block-library/blocks/button/editor.css 414 B
build/block-library/blocks/button/style-rtl.css 627 B
build/block-library/blocks/button/style.css 626 B
build/block-library/blocks/buttons/editor-rtl.css 337 B
build/block-library/blocks/buttons/editor.css 337 B
build/block-library/blocks/buttons/style-rtl.css 332 B
build/block-library/blocks/buttons/style.css 332 B
build/block-library/blocks/calendar/style-rtl.css 239 B
build/block-library/blocks/calendar/style.css 239 B
build/block-library/blocks/categories/editor-rtl.css 113 B
build/block-library/blocks/categories/editor.css 112 B
build/block-library/blocks/categories/style-rtl.css 124 B
build/block-library/blocks/categories/style.css 124 B
build/block-library/blocks/code/editor-rtl.css 53 B
build/block-library/blocks/code/editor.css 53 B
build/block-library/blocks/code/style-rtl.css 121 B
build/block-library/blocks/code/style.css 121 B
build/block-library/blocks/code/theme-rtl.css 124 B
build/block-library/blocks/code/theme.css 124 B
build/block-library/blocks/columns/editor-rtl.css 108 B
build/block-library/blocks/columns/editor.css 108 B
build/block-library/blocks/columns/style-rtl.css 421 B
build/block-library/blocks/columns/style.css 421 B
build/block-library/blocks/comment-author-avatar/editor-rtl.css 125 B
build/block-library/blocks/comment-author-avatar/editor.css 125 B
build/block-library/blocks/comment-content/style-rtl.css 92 B
build/block-library/blocks/comment-content/style.css 92 B
build/block-library/blocks/comment-template/style-rtl.css 199 B
build/block-library/blocks/comment-template/style.css 198 B
build/block-library/blocks/comments-pagination-numbers/editor-rtl.css 123 B
build/block-library/blocks/comments-pagination-numbers/editor.css 121 B
build/block-library/blocks/comments-pagination/editor-rtl.css 222 B
build/block-library/blocks/comments-pagination/editor.css 209 B
build/block-library/blocks/comments-pagination/style-rtl.css 235 B
build/block-library/blocks/comments-pagination/style.css 231 B
build/block-library/blocks/comments-title/editor-rtl.css 75 B
build/block-library/blocks/comments-title/editor.css 75 B
build/block-library/blocks/comments/editor-rtl.css 840 B
build/block-library/blocks/comments/editor.css 839 B
build/block-library/blocks/comments/style-rtl.css 637 B
build/block-library/blocks/comments/style.css 636 B
build/block-library/blocks/cover/editor-rtl.css 671 B
build/block-library/blocks/cover/editor.css 674 B
build/block-library/blocks/cover/style-rtl.css 1.7 kB
build/block-library/blocks/cover/style.css 1.69 kB
build/block-library/blocks/details/editor-rtl.css 65 B
build/block-library/blocks/details/editor.css 65 B
build/block-library/blocks/details/style-rtl.css 86 B
build/block-library/blocks/details/style.css 86 B
build/block-library/blocks/embed/editor-rtl.css 322 B
build/block-library/blocks/embed/editor.css 322 B
build/block-library/blocks/embed/style-rtl.css 410 B
build/block-library/blocks/embed/style.css 410 B
build/block-library/blocks/embed/theme-rtl.css 133 B
build/block-library/blocks/embed/theme.css 133 B
build/block-library/blocks/file/editor-rtl.css 326 B
build/block-library/blocks/file/editor.css 327 B
build/block-library/blocks/file/style-rtl.css 280 B
build/block-library/blocks/file/style.css 281 B
build/block-library/blocks/file/view.min.js 324 B
build/block-library/blocks/footnotes/style-rtl.css 201 B
build/block-library/blocks/footnotes/style.css 199 B
build/block-library/blocks/form-input/editor-rtl.css 227 B
build/block-library/blocks/form-input/editor.css 227 B
build/block-library/blocks/form-input/style-rtl.css 343 B
build/block-library/blocks/form-input/style.css 343 B
build/block-library/blocks/form-submission-notification/editor-rtl.css 340 B
build/block-library/blocks/form-submission-notification/editor.css 340 B
build/block-library/blocks/form-submit-button/style-rtl.css 69 B
build/block-library/blocks/form-submit-button/style.css 69 B
build/block-library/blocks/form/view.min.js 471 B
build/block-library/blocks/freeform/editor-rtl.css 2.61 kB
build/block-library/blocks/freeform/editor.css 2.61 kB
build/block-library/blocks/gallery/editor-rtl.css 956 B
build/block-library/blocks/gallery/editor.css 960 B
build/block-library/blocks/gallery/style-rtl.css 1.72 kB
build/block-library/blocks/gallery/style.css 1.72 kB
build/block-library/blocks/gallery/theme-rtl.css 108 B
build/block-library/blocks/gallery/theme.css 108 B
build/block-library/blocks/group/editor-rtl.css 647 B
build/block-library/blocks/group/editor.css 647 B
build/block-library/blocks/group/style-rtl.css 103 B
build/block-library/blocks/group/style.css 103 B
build/block-library/blocks/group/theme-rtl.css 78 B
build/block-library/blocks/group/theme.css 78 B
build/block-library/blocks/heading/style-rtl.css 189 B
build/block-library/blocks/heading/style.css 189 B
build/block-library/blocks/html/editor-rtl.css 336 B
build/block-library/blocks/html/editor.css 337 B
build/block-library/blocks/image/editor-rtl.css 878 B
build/block-library/blocks/image/editor.css 878 B
build/block-library/blocks/image/style-rtl.css 1.6 kB
build/block-library/blocks/image/style.css 1.59 kB
build/block-library/blocks/image/theme-rtl.css 133 B
build/block-library/blocks/image/theme.css 133 B
build/block-library/blocks/image/view.min.js 1.54 kB
build/block-library/blocks/latest-comments/style-rtl.css 357 B
build/block-library/blocks/latest-comments/style.css 357 B
build/block-library/blocks/latest-posts/editor-rtl.css 213 B
build/block-library/blocks/latest-posts/editor.css 212 B
build/block-library/blocks/latest-posts/style-rtl.css 478 B
build/block-library/blocks/latest-posts/style.css 478 B
build/block-library/blocks/list/style-rtl.css 88 B
build/block-library/blocks/list/style.css 88 B
build/block-library/blocks/media-text/editor-rtl.css 306 B
build/block-library/blocks/media-text/editor.css 305 B
build/block-library/blocks/media-text/style-rtl.css 505 B
build/block-library/blocks/media-text/style.css 503 B
build/block-library/blocks/more/editor-rtl.css 431 B
build/block-library/blocks/more/editor.css 431 B
build/block-library/blocks/navigation-link/editor-rtl.css 668 B
build/block-library/blocks/navigation-link/editor.css 669 B
build/block-library/blocks/navigation-link/style-rtl.css 259 B
build/block-library/blocks/navigation-link/style.css 257 B
build/block-library/blocks/navigation-submenu/editor-rtl.css 296 B
build/block-library/blocks/navigation-submenu/editor.css 295 B
build/block-library/blocks/navigation/editor-rtl.css 2.26 kB
build/block-library/blocks/navigation/editor.css 2.26 kB
build/block-library/blocks/navigation/style-rtl.css 2.26 kB
build/block-library/blocks/navigation/style.css 2.25 kB
build/block-library/blocks/navigation/view.min.js 1.03 kB
build/block-library/blocks/nextpage/editor-rtl.css 395 B
build/block-library/blocks/nextpage/editor.css 395 B
build/block-library/blocks/page-list/editor-rtl.css 377 B
build/block-library/blocks/page-list/editor.css 377 B
build/block-library/blocks/page-list/style-rtl.css 175 B
build/block-library/blocks/page-list/style.css 175 B
build/block-library/blocks/paragraph/editor-rtl.css 235 B
build/block-library/blocks/paragraph/editor.css 235 B
build/block-library/blocks/paragraph/style-rtl.css 335 B
build/block-library/blocks/paragraph/style.css 335 B
build/block-library/blocks/post-author/style-rtl.css 175 B
build/block-library/blocks/post-author/style.css 176 B
build/block-library/blocks/post-comments-form/editor-rtl.css 96 B
build/block-library/blocks/post-comments-form/editor.css 96 B
build/block-library/blocks/post-comments-form/style-rtl.css 508 B
build/block-library/blocks/post-comments-form/style.css 508 B
build/block-library/blocks/post-content/editor-rtl.css 74 B
build/block-library/blocks/post-content/editor.css 74 B
build/block-library/blocks/post-date/style-rtl.css 61 B
build/block-library/blocks/post-date/style.css 61 B
build/block-library/blocks/post-excerpt/editor-rtl.css 71 B
build/block-library/blocks/post-excerpt/editor.css 71 B
build/block-library/blocks/post-excerpt/style-rtl.css 141 B
build/block-library/blocks/post-excerpt/style.css 141 B
build/block-library/blocks/post-featured-image/editor-rtl.css 729 B
build/block-library/blocks/post-featured-image/editor.css 727 B
build/block-library/blocks/post-featured-image/style-rtl.css 342 B
build/block-library/blocks/post-featured-image/style.css 342 B
build/block-library/blocks/post-navigation-link/style-rtl.css 215 B
build/block-library/blocks/post-navigation-link/style.css 214 B
build/block-library/blocks/post-template/editor-rtl.css 99 B
build/block-library/blocks/post-template/editor.css 98 B
build/block-library/blocks/post-template/style-rtl.css 409 B
build/block-library/blocks/post-template/style.css 408 B
build/block-library/blocks/post-terms/style-rtl.css 96 B
build/block-library/blocks/post-terms/style.css 96 B
build/block-library/blocks/post-time-to-read/style-rtl.css 69 B
build/block-library/blocks/post-time-to-read/style.css 69 B
build/block-library/blocks/post-title/style-rtl.css 100 B
build/block-library/blocks/post-title/style.css 100 B
build/block-library/blocks/preformatted/style-rtl.css 125 B
build/block-library/blocks/preformatted/style.css 125 B
build/block-library/blocks/pullquote/editor-rtl.css 135 B
build/block-library/blocks/pullquote/editor.css 135 B
build/block-library/blocks/pullquote/style-rtl.css 354 B
build/block-library/blocks/pullquote/style.css 353 B
build/block-library/blocks/pullquote/theme-rtl.css 174 B
build/block-library/blocks/pullquote/theme.css 174 B
build/block-library/blocks/query-pagination-numbers/editor-rtl.css 122 B
build/block-library/blocks/query-pagination-numbers/editor.css 121 B
build/block-library/blocks/query-pagination/editor-rtl.css 221 B
build/block-library/blocks/query-pagination/editor.css 211 B
build/block-library/blocks/query-pagination/style-rtl.css 288 B
build/block-library/blocks/query-pagination/style.css 284 B
build/block-library/blocks/query-title/style-rtl.css 63 B
build/block-library/blocks/query-title/style.css 63 B
build/block-library/blocks/query/editor-rtl.css 486 B
build/block-library/blocks/query/editor.css 486 B
build/block-library/blocks/query/view.min.js 958 B
build/block-library/blocks/quote/style-rtl.css 237 B
build/block-library/blocks/quote/style.css 237 B
build/block-library/blocks/quote/theme-rtl.css 233 B
build/block-library/blocks/quote/theme.css 235 B
build/block-library/blocks/read-more/style-rtl.css 140 B
build/block-library/blocks/read-more/style.css 140 B
build/block-library/blocks/rss/editor-rtl.css 149 B
build/block-library/blocks/rss/editor.css 149 B
build/block-library/blocks/rss/style-rtl.css 289 B
build/block-library/blocks/rss/style.css 288 B
build/block-library/blocks/search/editor-rtl.css 184 B
build/block-library/blocks/search/editor.css 184 B
build/block-library/blocks/search/style-rtl.css 690 B
build/block-library/blocks/search/style.css 689 B
build/block-library/blocks/search/theme-rtl.css 114 B
build/block-library/blocks/search/theme.css 114 B
build/block-library/blocks/search/view.min.js 478 B
build/block-library/blocks/separator/editor-rtl.css 146 B
build/block-library/blocks/separator/editor.css 146 B
build/block-library/blocks/separator/style-rtl.css 239 B
build/block-library/blocks/separator/style.css 239 B
build/block-library/blocks/separator/theme-rtl.css 194 B
build/block-library/blocks/separator/theme.css 194 B
build/block-library/blocks/shortcode/editor-rtl.css 323 B
build/block-library/blocks/shortcode/editor.css 323 B
build/block-library/blocks/site-logo/editor-rtl.css 801 B
build/block-library/blocks/site-logo/editor.css 801 B
build/block-library/blocks/site-logo/style-rtl.css 204 B
build/block-library/blocks/site-logo/style.css 204 B
build/block-library/blocks/site-tagline/editor-rtl.css 86 B
build/block-library/blocks/site-tagline/editor.css 86 B
build/block-library/blocks/site-title/editor-rtl.css 116 B
build/block-library/blocks/site-title/editor.css 116 B
build/block-library/blocks/site-title/style-rtl.css 57 B
build/block-library/blocks/site-title/style.css 57 B
build/block-library/blocks/social-link/editor-rtl.css 184 B
build/block-library/blocks/social-link/editor.css 184 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.48 kB
build/block-library/blocks/social-links/style.css 1.48 kB
build/block-library/blocks/spacer/editor-rtl.css 350 B
build/block-library/blocks/spacer/editor.css 350 B
build/block-library/blocks/spacer/style-rtl.css 48 B
build/block-library/blocks/spacer/style.css 48 B
build/block-library/blocks/table/editor-rtl.css 395 B
build/block-library/blocks/table/editor.css 395 B
build/block-library/blocks/table/style-rtl.css 639 B
build/block-library/blocks/table/style.css 639 B
build/block-library/blocks/table/theme-rtl.css 152 B
build/block-library/blocks/table/theme.css 152 B
build/block-library/blocks/tag-cloud/style-rtl.css 251 B
build/block-library/blocks/tag-cloud/style.css 253 B
build/block-library/blocks/template-part/editor-rtl.css 431 B
build/block-library/blocks/template-part/editor.css 431 B
build/block-library/blocks/template-part/theme-rtl.css 107 B
build/block-library/blocks/template-part/theme.css 107 B
build/block-library/blocks/term-description/style-rtl.css 111 B
build/block-library/blocks/term-description/style.css 111 B
build/block-library/blocks/text-columns/editor-rtl.css 95 B
build/block-library/blocks/text-columns/editor.css 95 B
build/block-library/blocks/text-columns/style-rtl.css 166 B
build/block-library/blocks/text-columns/style.css 166 B
build/block-library/blocks/verse/style-rtl.css 99 B
build/block-library/blocks/verse/style.css 99 B
build/block-library/blocks/video/editor-rtl.css 552 B
build/block-library/blocks/video/editor.css 555 B
build/block-library/blocks/video/style-rtl.css 185 B
build/block-library/blocks/video/style.css 185 B
build/block-library/blocks/video/theme-rtl.css 133 B
build/block-library/blocks/video/theme.css 133 B
build/block-library/classic-rtl.css 179 B
build/block-library/classic.css 179 B
build/block-library/common-rtl.css 1.11 kB
build/block-library/common.css 1.11 kB
build/block-library/editor-elements-rtl.css 75 B
build/block-library/editor-elements.css 75 B
build/block-library/editor-rtl.css 12.4 kB
build/block-library/editor.css 12.4 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.8 kB
build/block-library/style.css 14.8 kB
build/block-library/theme-rtl.css 707 B
build/block-library/theme.css 713 B
build/block-serialization-default-parser/index.min.js 1.12 kB
build/block-serialization-spec-parser/index.min.js 2.87 kB
build/blocks/index.min.js 51.7 kB
build/commands/index.min.js 15.2 kB
build/commands/style-rtl.css 953 B
build/commands/style.css 951 B
build/components/index.min.js 220 kB
build/components/style-rtl.css 12 kB
build/components/style.css 12 kB
build/compose/index.min.js 12.7 kB
build/core-commands/index.min.js 2.77 kB
build/core-data/index.min.js 72.5 kB
build/customize-widgets/index.min.js 11 kB
build/customize-widgets/style-rtl.css 1.36 kB
build/customize-widgets/style.css 1.36 kB
build/data-controls/index.min.js 640 B
build/data/index.min.js 9 kB
build/date/index.min.js 17.9 kB
build/deprecated/index.min.js 451 B
build/dom-ready/index.min.js 324 B
build/dom/index.min.js 4.65 kB
build/edit-post/classic-rtl.css 578 B
build/edit-post/classic.css 578 B
build/edit-post/index.min.js 17 kB
build/edit-post/style-rtl.css 4.24 kB
build/edit-post/style.css 4.23 kB
build/edit-site/index.min.js 224 kB
build/edit-site/style-rtl.css 13.9 kB
build/edit-site/style.css 14 kB
build/edit-widgets/index.min.js 17.6 kB
build/edit-widgets/style-rtl.css 4.17 kB
build/edit-widgets/style.css 4.16 kB
build/editor/index.min.js 80 kB
build/editor/style-rtl.css 6.99 kB
build/editor/style.css 6.99 kB
build/element/index.min.js 4.83 kB
build/escape-html/index.min.js 537 B
build/format-library/index.min.js 8.07 kB
build/format-library/style-rtl.css 493 B
build/format-library/style.css 492 B
build/hooks/index.min.js 1.55 kB
build/html-entities/index.min.js 448 B
build/i18n/index.min.js 3.58 kB
build/interactivity/debug.min.js 16.2 kB
build/interactivity/file.min.js 447 B
build/interactivity/image.min.js 1.67 kB
build/interactivity/index.min.js 13 kB
build/interactivity/navigation.min.js 1.17 kB
build/interactivity/query.min.js 740 B
build/interactivity/router.min.js 2.79 kB
build/interactivity/search.min.js 618 B
build/is-shallow-equal/index.min.js 527 B
build/keyboard-shortcuts/index.min.js 1.3 kB
build/keycodes/index.min.js 1.46 kB
build/list-reusable-blocks/index.min.js 2.11 kB
build/list-reusable-blocks/style-rtl.css 851 B
build/list-reusable-blocks/style.css 851 B
build/media-utils/index.min.js 2.92 kB
build/modules/importmap-polyfill.min.js 12.2 kB
build/notices/index.min.js 948 B
build/nux/index.min.js 1.57 kB
build/nux/style-rtl.css 748 B
build/nux/style.css 744 B
build/patterns/index.min.js 6.47 kB
build/patterns/style-rtl.css 595 B
build/patterns/style.css 595 B
build/plugins/index.min.js 1.8 kB
build/preferences-persistence/index.min.js 2.06 kB
build/preferences/index.min.js 2.85 kB
build/preferences/style-rtl.css 710 B
build/preferences/style.css 712 B
build/primitives/index.min.js 975 B
build/priority-queue/index.min.js 1.52 kB
build/private-apis/index.min.js 1 kB
build/react-i18n/index.min.js 623 B
build/react-refresh-entry/index.min.js 9.47 kB
build/react-refresh-runtime/index.min.js 6.78 kB
build/redux-routine/index.min.js 2.7 kB
build/reusable-blocks/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 kB
build/router/index.min.js 1.88 kB
build/server-side-render/index.min.js 1.96 kB
build/shortcode/index.min.js 1.39 kB
build/style-engine/index.min.js 2.03 kB
build/token-list/index.min.js 582 B
build/url/index.min.js 3.74 kB
build/vendors/inert-polyfill.min.js 2.48 kB
build/vendors/react-dom.min.js 41.7 kB
build/vendors/react.min.js 4.02 kB
build/viewport/index.min.js 957 B
build/warning/index.min.js 249 B
build/widgets/index.min.js 7.23 kB
build/widgets/style-rtl.css 1.17 kB
build/widgets/style.css 1.17 kB
build/wordcount/index.min.js 1.02 kB

compressed-size-action

@ajlende ajlende changed the base branch from trunk to backport/global-styles-tests February 1, 2024 16:10
@ajlende ajlende force-pushed the fix/default-font-sizes-override branch from 0333ef6 to 0c1707f Compare February 1, 2024 16:10
Base automatically changed from backport/global-styles-tests to trunk February 2, 2024 16:32
@ajlende ajlende force-pushed the fix/default-font-sizes-override branch from 0c1707f to 561ba46 Compare February 6, 2024 17:22
Copy link

github-actions bot commented Feb 7, 2024

Flaky tests detected in ec14150.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/8729353311
📝 Reported issues:

@ajlende ajlende force-pushed the fix/default-font-sizes-override branch 2 times, most recently from fc92183 to 30e7c4f Compare February 7, 2024 17:01
@ajlende ajlende force-pushed the fix/default-font-sizes-override branch from df86af6 to 661f0c0 Compare February 7, 2024 20:17
@ajlende ajlende marked this pull request as ready for review February 7, 2024 20:29
Copy link

github-actions bot commented Feb 7, 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: ajlende <ajlende@git.wordpress.org>
Co-authored-by: draganescu <andraganescu@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: gaambo <gaambo@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>

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

@ajlende
Copy link
Contributor Author

ajlende commented Apr 17, 2024

  1. Update your theme.json (again) with settings.typography.defaultFontSizes to true.
  2. See that the default values do not show and the theme values are not overridden.

Are these instructions correct? I think it should say update defaultFontSizes to false (since true is the default)...

Also, when I'm testing theme.json v2, I don't see the default sizes even if I rename small to footnote.

@scruffian It looks like I missed updating some parts over the course of this being open while other PRs were merged and old behavior was changed. I've updated the screenshots and instructions to hopefully be more clear. Thanks for reviewing!


// Needs to be set for schema migrations of user data.
$config['isGlobalStylesUserThemeJSON'] = true;

static::$user = new WP_Theme_JSON_Gutenberg( $config, 'custom' );
Copy link
Contributor Author

@ajlende ajlende Apr 17, 2024

Choose a reason for hiding this comment

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

isGlobalStylesUserThemeJSON needs to be preset for migrations to run. Migrations are run on both WP_Theme_JSON_Data_Gutenberg and WP_Theme_JSON_Gutenberg constructors.

Copy link
Contributor

@scruffian scruffian left a comment

Choose a reason for hiding this comment

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

I have tested all of the scenarios and they all work as described. The code makes sense to me too.

@ajlende ajlende enabled auto-merge (squash) April 25, 2024 17:28
@ajlende ajlende merged commit 2012a36 into trunk Apr 25, 2024
61 checks passed
@ajlende ajlende deleted the fix/default-font-sizes-override branch April 25, 2024 17:57
@github-actions github-actions bot added this to the Gutenberg 18.3 milestone Apr 25, 2024
@ajlende
Copy link
Contributor Author

ajlende commented Apr 25, 2024

Dev note draft 📝


Theme.json version 3

The theme.json version has been incremented in order to update the default behavior for overriding the default fontSizes presets in theme.json.

Using older theme.json versions will continue to be supported and work the same as they have before. However, upgrading to version 3 is recommended when your minimum WordPress version reaches 6.6 because new development will continue in the newer versions.

See the theme.json reference for more info on migration.

defaultFontSizes

A new settings.typography.defaultFontSizes option has been added to give control over showing default (core-provided) font sizes and preventing those defaults from being overridden.

  • When set to true it will show the default font sizes and prevent them from being overridden by the theme.
  • When set to false it will hide the default font sizes and allow the theme to use the default slugs.

It is true by default when switching to v3. This is to be consistent with how other default* options work such as settings.color.defaultPalette, but differs from the behavior in v2.

In theme.json v2, the default font sizes were only shown when theme sizes were not defined. A theme providing font sizes with the same slugs as the defaults would always override the default ones.

The default fontSizes slugs are: small, medium, large, x-large, and xx-large.

To keep behavior similar to v2 with a v3 theme.json:

  • If you do not have any fontSizes defined, no additional action is needed.
  • If you have some fontSizes defined, set defaultFontSizes to false.
{
	"version": 3,
	"settings": {
		"typography": {
			"defaultFontSizes": false,
			"fontSizes": [
				{
					"name": "Small",
					"slug": "small",
					"size": "10px"
				},
				{
					"name": "Medium",
					"slug": "small",
					"size": "16px"
				},
				{
					"name": "Large",
					"slug": "large",
					"size": "28px"
				},
			]
		}
	}
}

@ajlende ajlende added the has dev note when dev note is done (for upcoming WordPress release) label Apr 25, 2024
@carolinan
Copy link
Contributor

@ajlende The documentation updates look mostly good but there are some files that were not updated, and broken links.

Needs updating:

## Migrating from v2 to v3

Upgrading to v3 adjusts preset defaults to be more consistent with one another.

### How to migrate from v1 to v2:

@t-hamano
Copy link
Contributor

JSON Schema no longer allows version 2. Shouldn't version 2 still be allowed?

image

@ajlende
Copy link
Contributor Author

ajlende commented Apr 29, 2024

JSON Schema no longer allows version 2. Shouldn't version 2 still be allowed?

While v2 theme.json files will continue to work on current versions of WordPress, the schema is a tool for theme developers to verify their theme.json with the specified version of WordPress you are developing for. Versions of schemas are handled via URL. For example, the last theme.json v2 schema will be located at https://schemas.wp.org/wp/6.5/theme.json, and the last theme.json v1 schema is at https://schemas.wp.org/wp/5.8/theme.json.

I didn't do a great job of explaining this in the original theme.json blog post, but unless you are developing for folks with the Gutenberg plugin active, you don't really want to be using the trunk version of the schema. A theme should be using the oldest version of WordPress that it supports.

Technically JSON Schema Draft-04 would be able to support all versions simultaneously, but it would be a nightmare to maintain, would be slower for code editors to check, and it wouldn't flag developers working off trunk of a new version where all new work is happening.

@ajlende
Copy link
Contributor Author

ajlende commented Apr 29, 2024

The documentation updates look mostly good but there are some files that were not updated, and broken links.

@carolinan Thanks for catching those documentation issues. I found a bunch more issues as I was fixing those things and added everything in #61221.

@@ -2244,7 +2249,7 @@
"version": {
"description": "Version of theme.json to use.",
"type": "integer",
"enum": [ 2 ]
"enum": [ 3 ]
Copy link
Member

Choose a reason for hiding this comment

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

I think we still need to support the older versions. Having only version 3 in the enum list produces a warning for default themes.

CleanShot 2024-04-30 at 11 33 35

Copy link
Contributor

Choose a reason for hiding this comment

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

Or should we increase the default theme's theme.json version to 3?

Copy link
Member

Choose a reason for hiding this comment

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

I mentioned the default theme as an example. Not everyone will upgrade versions immediately, and the older versions still work.

Copy link
Contributor Author

@ajlende ajlende Apr 30, 2024

Choose a reason for hiding this comment

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

Default themes, like all other themes, should be using the schema for the oldest version of WordPress that they intend to support so that incompatible styles and settings are properly flagged. If the theme.json version is updated to 3, then the theme will only work with 6.6 and up or with the latest Gutenberg plugin installed.

It's confused often enough that I'm planning on writing a developer.wordpress.org blog post to help explain how JSON schema versioning works and how it's different from the theme.json version.

@ajlende ajlende changed the title Add defaultFontSizes theme.json (v2) Add defaultFontSizes theme.json (theme.json v3) Apr 30, 2024
@@ -38,6 +38,7 @@ class WP_Theme_JSON_Schema_Gutenberg {
* Function that migrates a given theme.json structure to the last version.
*
* @since 5.9.0
* @since 6.5.0 Migrate up to v3.
Copy link
Member

Choose a reason for hiding this comment

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

@ajlende shouldn't this be 6.6?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yep. Updating in #61328

*
* - Sets settings.typography.defaultFontSizes to false.
*
* @since 6.5.0
Copy link
Member

Choose a reason for hiding this comment

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

Again I think this should be 6.6

justintadlock added a commit to x3p0-dev/x3p0-ideas that referenced this pull request May 11, 2024
Use the new `defaultFontSizes` setting. We no longer need the `ThemeJson` class because its only purpose was to remove the Core default font sizes.

Fixed in Gutenberg: WordPress/gutenberg#58409
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 has dev note when dev note is done (for upcoming WordPress release) [Type] Feature New feature to highlight in changelogs.
Projects
Development

Successfully merging this pull request may close these issues.

None yet

10 participants