Description

Fixes #34120

And so the days of the Cover block dictating font size attributes to its innerBlocks irrespective of the contents of theme.json and the wishes of theme developers ... takes breath ... are over.

In this proposed code change, we check the editor settings for fontSizes block support before setting a fontSize attribute on the Cover block's innards (a paragraph).

Why? Because, as described in #34120, the existence of the fontSize attribute, even where the theme has deactivated fontSize support, tells the fontSize hook to add the has-large-font-size class to the block container.

Props to @andrewserong and @philbuchanan

How has this been tested?

Manually, using a browser with 👀 We don't set innerBlock attributes for native mobile.

Best tested with smooth blues or jazz.

For testing, I'm using TT1 Blocks theme and editing the theme.json directly in WordPress, e.g., /wp-admin/theme-editor.php?file=theme.json&theme=tt1-blocks

Existing behavior

Before applying this patch, check existing behavior.

Edit settings.typography in your theme.json:

"fontSizes": []

In the editor, insert a cover block. Check that font size controls are disabled in the block inspector sidebar, and that the paragraph inner block has the class of has-large-font-size.

With the changes in this PR applied

With this patch applied, refresh the editor and insert a new cover block.

Check that font size controls are disabled in the block inspector sidebar, and that the paragraph inner block does not have the class of has-large-font-size.

Publish that post and check the frontend! The class should be absent on the paragraph block as well.

Known knowns

Here are some things I discovered along the way. None have any negative impact on this PR I think.

We can override via specific block settings in theme.json as well. For example, deactivating fontSizes in settings.typography, but activating them in settings.blocks['core/cover'].typography.

		"blocks": {
			"core/cover": {
				"typography": {
					"fontSizes": [
						{
							"slug": "extra-small",
							"size": "16px",
							"name": "Extra small"
						},
						{
							"slug": "small",
							"size": "18px",
							"name": "Small"
						}
					]
				}
			}
		}

The values themselves won't have any effect since the Cover Block doesn't yet support fontSizes.

Edge case: a mismatch might also occur when we turn off fontSizes for the paragraph block in settings.blocks['core/paragraph'].typography, but it's still activated in settings.typography.

		"blocks": {
			"core/paragraph": {
				"typography": {
					"fontSizes": []
				}
			}
		

The controls do not appear, but the Cover block will read the global settings.

Oh yes, and WordPress core fontSizes will ultimately kick in if none are enabled elsewhere. 😄

Screenshots

With fontSizes enabled:

Without fontSizes enabled:

Types of changes

This is a compatibility change, ensure the inner blocks of the Cover block respect the theme.json settings.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• I've tested my changes with keyboard and screen readers.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.
• I've updated all React Native files affected by any refactorings/renamings in this PR (please manually search all *.native.js files for terms that need renaming or removal).