Skip to content

Theme.json: Can't define default presets at the block level #72810

@t-hamano

Description

@t-hamano

Description

Found while investigating #72671

The theme.json file allows us to define presets for UIs like colors and font sizes. These presets can be defined at both the global and block levels.

Block-level presets work as expected, but under the following conditions, a preset cannot be used as a theme preset:

  • The default preset is disabled.
  • The slug matches the default preset.

To avoid this problem, developers are forced to take one of the following two measures.

  • Define presets at a global level.
  • Use a different slug than the default preset.

Step-by-step reproduction instructions

The following theme.json files are examples of those that cause problems.

Duotone

In the image block, only the "Dark grayscale" duotone preset should be available, but no presets are available at all.

{
	"version": 3,
	"appearanceTools": true,
	"settings": {
		"blocks":{
			"core/image": {
				"color": {
					"defaultDuotone": false,
					"duotone": [
						{
							"name": "Dark grayscale",
							"colors": [ "#000000", "#7f7f7f" ],
							"slug": "dark-grayscale"
						}
					]
				}
			}
		}
	}
}

Shadow

In the image block, only the "Natural" shadow preset should be available, but no presets are available at all.

{
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"blocks":{
			"core/image": {
				"shadow": {
					"defaultPresets": false,
					"presets": [
						{
							"name": "Natural",
							"slug": "natural",
							"shadow": "6px 6px 9px rgba(0, 0, 0, 0.2)"
						}
					]
				}
			}
		}
	}
}

Font Size

In the Paragraph block, only the "Small" duotone preset should be available, but no presets are available at all.

{
	"version": 3,
	"settings": {
		"appearanceTools": true,
		"blocks":{
			"core/paragraph": {
				"typography": {
					"defaultFontSizes": false,
					"fontSizes": [
						{
							"name": "Small",
							"slug": "small",
							"size": "13px"
						}
					]
				}
			}
		}
	}
}

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure

Metadata

Metadata

Labels

Global StylesAnything related to the broader Global Styles efforts, including Styles Engine and theme.json[Status] In ProgressTracking issues with work in progress[Type] BugAn existing feature does not function as intended

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions