Remove settings.layout.definitions from theme.json

[carolinan]

I used the "create blank theme" option, and after making my changes, I exported it using the tool the plugin uses in the Site Editor.

In theme.json, I found a settings.layout.definitions which I don't believe is valid and should not be in theme.json?
If it is correct, I would like to learn more, can you provide a link to the documentation?

		"layout": {
			"contentSize": "620px",
			"definitions": {
				"constrained": {
					"baseStyles": [
						{
							"rules": {
								"float": "left",
								"margin-inline-end": "2em",
								"margin-inline-start": "0"
							},
							"selector": " > .alignleft"
						},
						{
							"rules": {
								"float": "right",
								"margin-inline-end": "0",
								"margin-inline-start": "2em"
							},
							"selector": " > .alignright"
						},
						{
							"rules": {
								"margin-left": "auto !important",
								"margin-right": "auto !important"
							},
							"selector": " > .aligncenter"
						},
						{
							"rules": {
								"margin-left": "auto !important",
								"margin-right": "auto !important",
								"max-width": "var(--wp--style--global--content-size)"
							},
							"selector": " > :where(:not(.alignleft):not(.alignright):not(.alignfull))"
						},
						{
							"rules": {
								"max-width": "var(--wp--style--global--wide-size)"
							},
							"selector": " > .alignwide"
						}
					],
					"className": "is-layout-constrained",
					"name": "constrained",
					"slug": "constrained",
					"spacingStyles": [
						{
							"rules": {
								"margin-block-end": "0",
								"margin-block-start": "0"
							},
							"selector": " > *"
						},
						{
							"rules": {
								"margin-block-end": "0"
							},
							"selector": " > * + *"
						}
					]
				},
				"default": {
					"baseStyles": [
						{
							"rules": {
								"float": "left",
								"margin-inline-end": "2em",
								"margin-inline-start": "0"
							},
							"selector": " > .alignleft"
						},
						{
							"rules": {
								"float": "right",
								"margin-inline-end": "0",
								"margin-inline-start": "2em"
							},
							"selector": " > .alignright"
						},
						{
							"rules": {
								"margin-left": "auto !important",
								"margin-right": "auto !important"
							},
							"selector": " > .aligncenter"
						}
					],
					"className": "is-layout-flow",
					"name": "default",
					"slug": "flow",
					"spacingStyles": [
						{
							"rules": {
								"margin-block-end": "0",
								"margin-block-start": "0"
							},
							"selector": " > *"
						},
						{
							"rules": {
								"margin-block-end": "0"
							},
							"selector": " > * + *"
						}
					]
				},
				"flex": {
					"baseStyles": [
						{
							"rules": {
								"align-items": "center",
								"flex-wrap": "wrap"
							}
						},
						{
							"rules": {
								"margin": "0"
							},
							"selector": " > *"
						}
					],
					"className": "is-layout-flex",
					"displayMode": "flex",
					"name": "flex",
					"slug": "flex"
				},
				"grid": {
					"baseStyles": [
						{
							"rules": {
								"margin": "0"
							},
							"selector": " > *"
						}
					],
					"className": "is-layout-grid",
					"displayMode": "grid",
					"name": "grid",
					"slug": "grid"
				}
			},
			"wideSize": "1100px"
		},

[carolinan]

I believe this is copied directly from the Gutenberg theme.json? https://github.com/WordPress/gutenberg/blob/trunk/lib/theme.json#L222

[annezazu]

Noting that this was brought up in the FSE Outreach Program's Build a Block Theme exploration as well as a point of confusion:

I’ve exported and downloaded the theme. It contains all files I expected. The theme.json contained the styles I defined but also contained a lot of styles which I don’t know where they are coming from. Eg layout definitions constrained and basestyles with some rules for floating etc?

[jffng]

I believe this is copied directly from the Gutenberg theme.json?https://github.com/WordPress/gutenberg/blob/trunk/lib/theme.json#L222

The CBT export functionality generates the theme.json by first creating a new instance of WP_Theme_JSON_Gutenberg or WP_Theme_JSON: https://github.com/WordPress/create-block-theme/blob/trunk/admin/resolver_additions.php#L25

So it seems any properties of the default theme.json instance will be a part of the export, unless the properties are overwritten when the sources (default, theme, user) are merged. The layout rules are not generated by CBT, but rather the default theme.json as you pointed out.

I'm not sure we should do anything special here to filter them out, what do you think?

[carolinan]

I don't think it should be left in because it is confusing both for users and developers.

[jasmussen]

Just encountered this issue causing what I thought was a bug in the block editor itself: WordPress/gutenberg#49914

The rules appear to have pretty high specificity. In my case, automatically inherited these definitions when saving a custom variant theme based of TT3 as a base. But looking at the default theme.json in TT3, it does not have those theme.json properties. So does that mean it stores them from the Gutenberg lib/theme.json?

In that case, it seems pretty important to omit those rules, lest we actually bake the theme to include any bugs that may have been present at the point in time where the theme was created. It seems quite dangerous to include these for that reason.

[jffng]

Thanks for the additional context, I see now how exporting these definitions can create issues since they can override Gutenberg's in unexpected ways.

However, I'm having trouble replicating the issue where settings.layout.definitions is included in the exported theme.json. Here are the scenarios I tested:

A

I used the "create blank theme" option, and after making my changes, I exported it using the tool the plugin uses in the Site Editor.

B

• Activate TT3
• Make some changes to the global layout (e.g. set the content size to 600px)
• Export, clone, and child

In all instances, settings.layout does not contain any definitions.

I tested on 6.2 with and without Gutenberg trunk active. I'm also running trunk of CBT but I don't think there have been any changes to CBT since the last release that would affect this functionality.

@jasmussen @carolinan are you still able to replicate this, and if so, how did you do it?

[jasmussen]

I just tested right now, and I'm still seeing the definitions copied over. Using 6.2 release, trunk GB, and CBT version 1.8.2, TT3 version 1.1 as a base. I used this process:

• In wp-content, I duplicated the twentytwentythree folder and renamed it to twentytwentythree-test, and updated the style.scss to rename the theme to be called TwentyTwenty-Three Test, then activated the theme.
• Edited bg color, font, and layout content/wide width values.
• Saved to overwrite the theme.

This option:

I see the definitions there. You can test the theme file here:

twentytwentythree-test.zip

[jasmussen]

Just connecting dots with feedback from @tellthemachines:

Yes, the definitions should only ever be in the core theme.json, as they are used to build the core styles for each layout type. They shouldn't be in theme files at all.

[pbking]

Test this scenario in a few scenarios that I believe points the problem to an issue in CORE.

With NO plugins activated (Gutenberg or CBT) and using only the native export functionality I got the same result as the above when using WordPress 6.2.

However using ANY combination of plugins (Gutenberg/CBT) or none I got the expected/desired result when using WordPress 6.1. This is when exporting either via CBT OR The Site Editor's native functionality.

This seems to point to an error with WordPress core rather than an issue with the CBT plugin.

[jasmussen]

I went ahead and opened WordPress/gutenberg#50238 as it appers to be a core issue. If you find it to be such in the future, you should all feel welcome to open those issues. This is an important one to get fixed, regardless of the origin.

[andrewserong]

I believe this was caused by a regression in Gutenberg. I have a fix open in: WordPress/gutenberg#50268 which hopefully should resolve it.