theme.json needs "fontSize" and "fontFamily" properties in settings>typography to allow disabling of the controls while keeping the CSS

[wwdes]

What problem does this address?

This issue arises when programmatically changing editor settings via block_editor_settings_all filter.

Lets assume we want to only allow admins to be able to change text color by using themes palette. We can do this by creating a palette in settings>color>palette and setting settings>color>text to true. Then, we can filter the editor settings by hooking to block_editor_settings_all and changing settings>color>text to false for non-admin users. Works great, however, we can not do the same for font size or font family controls because the only way to enable/disable these controls in the editor is by having an array set in settings>typography>fontSizes/fontFamilies. If the only way to remove the control from the editor is by removing the array then the CSS will not be generated for the front end.

What is your proposed solution?

Add a setting similar to settings>color>text to settings->typography. Maybe call these setting fontSize and fontFamily. With these new settings we can keep the frontend CSS that is generated from the arrays but be able to programmatically control if a user should see the controls in the editor.

[ramonjd]

👋

Hmm, this one is tricky.

If I understand correctly, there should be a way to hide the font size UI control while retaining the generated CSS from thefontSizes array.

Are you looking to remove the font sizes control from the site editor UI?

Would you be able to add steps/or example code you're using and the expected behaviour?

This issue might be related:

• Tracking: Disabling Design Tool UIs #45273

I tested some things in the post editor only using WordPress 6.2 (Gutenberg plugin disabled).

I separately assigned an empty array to fontSizes in theme.json,

		"typography": {
			"fontSizes": []
		},

and via the block_editor_settings_all hook (bear in mind the use of __experimentalFeatures might not be supported in the future):

add_filter( 'block_editor_settings_all', function( $settings ) {
    $settings['__experimentalFeatures']['typography']['fontSizes'] = [];
    return $settings;
} );

Both resulted in the font size UI control not being displayed:

Before	After

Using the hook only however, I see that the CSS vars and classes are still generated.

For example, I added a new font size to the 2023 theme in theme.json

				{
					"size": "20rem",
					"slug": "huge-mundo"
				}

And in the HTML I see the CSS preset vars and classes:

--wp--preset--font-size--huge-mundo: clamp(15rem, 15rem + ((1vw - 0.48rem) * 9.615), 20rem);
...
.has-huge-mundo-font-size{font-size: var(--wp--preset--font-size--huge-mundo) !important;}