Skip to content

Setting typography.customFontSize: false in theme.json doesn't remove font size classes and variables #34120

@philbuchanan

Description

@philbuchanan

Description

I'm using the theme.json file to disable a number of font settings for the theme. Specifically there is an issue with custom font sizes:

{
	"version": 1,
	"settings": {
		"typography": {
			"customFontSize": false,
			"fontSizes": []
		}
	}
}

Setting both of those properties does not actually remove the classnames (e.g. .has-large-font-size or variables (e.g. var(--wp--preset--font-size--large)).

The challenge this introduces is that the core/cover block's default template uses <p class="has-large-font-size">…</p>. Since the UI was disabled in theme.json, there is no way in the editor to remove this setting (with the exception of using the code editor which I don't think is a valid solution). Further, because the .has-large-font-size class uses !important it is also very difficult to override the style in my theme. I can use !important myself, but if I have custom paragraph styles applies, I'll need even more specific selectors.

I would expect that if I disable custom font sizes entirely, it should not define the classnames or variables at all or, at the very least, not apply them to existing blocks.

Step-by-step reproduction instructions

  1. Disable custom font sizes using theme.json.
  2. Add a core/cover block.
  3. Note the has-large-font-size class applied with no way to remove it.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 5.8
Not using the Gutenberg plugin (although I have tested and the issue remains with the plugin enabled).

Pre-checks

  • I have searched the existing issues.
  • I have tested with all plugins deactivated except Gutenberg.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Block] CoverAffects the Cover Block - used to display content laid over a background image

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions