Add default-spacing-sizes and default-font-sizes options for classic themes

[ajlende]

What?

Fixes an issue where defaults were generated in classic themes when they should not have been.

Why?

Bug fix for #58409 and #61842.

How?

Set defaultFontSizes and defaultSpacingSizes to false for classic themes when they have fontSizes or spacingSizes defined, respectively.

Additionally, since it was just a couple extra lines, I added the editor-spacing-sizes, default-font-sizes, and default-spacing-sizes theme supports for parity with other presets.

Testing Instructions

1. In a classic theme add theme support for editor-font-sizes that match the default slugs. (The default slugs are: small, medium, large, x-large, and xx-large.)
2. See that the default font sizes are not generated, and the slugs that matched the default slugs show the theme support configuration.
3. Add theme support for default-font-sizes and see that the default font sizes are generated and they override the theme font sizes.

function my_theme_setup() {
	// Step 1
	add_theme_support(
		'editor-font-sizes',
		array(
			array(
				'name'      => __( 'Small' ),
				'size'      => 19.5,
				'slug'      => 'small',
			),
			array(
				'name'      => __( 'Normal' ),
				'size'      => 22,
				'slug'      => 'normal',
			),
			array(
				'name'      => __( 'Large' ),
				'size'      => 36.5,
				'slug'      => 'large',
			),
			array(
				'name'      => __( 'Huge' ),
				'size'      => 49.5,
				'slug'      => 'huge',
			),
		)
	);
	// Step 2
	add_theme_support( 'default-font-sizes' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

:root {
	// Step 1
	--wp--preset--font-size--small: 19.5px;
	--wp--preset--font-size--medium: 20px;
	--wp--preset--font-size--large: 36.5px;
	--wp--preset--font-size--x-large: 42px;
	--wp--preset--font-size--normal: 22px;
	--wp--preset--font-size--huge: 49.5px;

	// Step 2
	--wp--preset--font-size--small: 13px;
	--wp--preset--font-size--medium: 20px;
	--wp--preset--font-size--large: 36px;
	--wp--preset--font-size--x-large: 42px;
	--wp--preset--font-size--normal: 22px;
	--wp--preset--font-size--huge: 49.5px;
}

The same should work for editor-spacing-sizes and default-spacing-sizes.

function my_theme_setup() {
	// Step 1
	add_theme_support(
		'editor-spacing-sizes',
		array(
			array(
				'name' => __( '3X-Small' ),
				'size' => '10px',
				'slug' => '10',
			),
			array(
				'name' => __( 'Medium' ),
				'size' => '50px',
				'slug' => '50',
			),
			array(
				'name' => __( 'Large' ),
				'size' => '60px',
				'slug' => '60',
			),
			array(
				'name' => __( '3X-Large' ),
				'size' => '90px',
				'slug' => '90',
			),
		)
	);
	// Step 2
	add_theme_support( 'default-spacing-sizes' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

:root {
	// Step 1
	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 50px;
	--wp--preset--spacing--60: 60px;
	--wp--preset--spacing--70: 3.38rem;
	--wp--preset--spacing--80: 5.06rem;
	--wp--preset--spacing--10: 10px;
	--wp--preset--spacing--90: 90px;

	// Step 2
	--wp--preset--spacing--20: 0.44rem;
	--wp--preset--spacing--30: 0.67rem;
	--wp--preset--spacing--40: 1rem;
	--wp--preset--spacing--50: 1.5rem;
	--wp--preset--spacing--60: 2.25rem;
	--wp--preset--spacing--70: 3.38rem;
	--wp--preset--spacing--80: 5.06rem;
	--wp--preset--spacing--10: 10px;
	--wp--preset--spacing--90: 90px;
}

Testing Instructions for Keyboard

Screenshots or screencast

[github-actions]

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 <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: andrewserong <[email protected]>

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

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/compat/wordpress-6.6/block-editor.php
❔ lib/class-wp-theme-json-gutenberg.php
❔ lib/class-wp-theme-json-resolver-gutenberg.php
❔ lib/load.php
❔ phpunit/class-wp-theme-json-test.php

[ajlende]

Copied from core. See https://github.com/WordPress/wordpress-develop/pull/6616/files#diff-edfc853e670c7bfc5a838dc74f75ba5d8b95cb4adbddf0644d9227bcb692e344 for a better diff.

[github-actions]

Flaky tests detected in 2dcd295.
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/9369758211
📝 Reported issues:

• [Flaky Test] submenu click on the arrow interactions #61884 in /test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js

[carolinan]

I am trying to follow the logic. Reading this it sounds to me like the default font sizes will be disabled by default? So the font sizes will not be selectable in the editor unless the theme is updated to set it to true?

[andrewserong]

I believe this is testing nicely for me. Just double-checking that when I test with Twenty Twenty theme, the after here is the intention as that theme currently sets 'editor-font-sizes' with its own values for small, normal, large, and larger sizes. So prior to this PR, using the unexpected extra sizes, we'd get the following mismatched sizes:

Before

But with this PR applied (and no other changes to the theme), then we get the correct sizes that are balanced to the theme:

After

If I then go in and add add_theme_support( 'default-font-sizes' ); to the theme, then I can get to the Before image above again. I haven't had a close look at the code yet, but behaviour-wise, this is feeling good to me so far 👍

[andrewserong]

This is looking good to me! All testing well:

✅ If the theme sets no editor font sizes and doesn't opt into default font sizes, then default font sizes are available.
✅ If the theme sets editor font sizes but not default font sizes, no default font sizes are available.
✅ If the theme sets both, default font sizes will override.
✅ Same as above for spacing sizes.

I agree the logic might look a bit tricky to follow, but in practice, I think this strikes the right balance, and I haven't been able to fault it while testing, and it resolves a current issue for classic themes such as Twenty Twenty.

This LGTM 🚀, but do feel free to seek a second opinion if there is any doubt about the feature.

The only thing to change from my perspective is a typo in the docs.

[carolinan]

I am not able to reproduce the missing font sizes in classic themes (+ the JavaScript error) with Gutenberg active, with or without this PR; so I can't test this:
✅ If the theme sets no editor font sizes and doesn't opt into default font sizes, then default font sizes are available.

I want to clarify that I don't mean to block the approval of this PR.

[ellatrix]

This was cherry-picked to the wp/6.6 branch.