theme.json schema: Don't allow css property except at the root and block level

[t-hamano]

Fixes #52217

What?

This PR changes the theme.json schema to not allow the insertion of CSS properties except at the root level of the styles property and directly under styles.blocks.

Why?

For now, css property are only available in the site root and block and will not work if specified on variations or elements. It would make sense to display a warning according to the schema when a CSS property is defined that does not work.

How?

Removed css property from stylesProperties . This is because if this property is present, it will appear as a candidate, even if the css property is not allowed.

Removed css property from stylesElementsPropertiesComplete and stylesPropertiesComplete. This will trigger a warning when css properties are defined primarily at the element level.

Instead of removing css from stylesProperties, add description and type to css properties in styles and stylesPropertiesAndElementsComplete. This is to display a description when inserting a property and to insert a default empty string when the property is inserted.

Testing Instructions

Create locally a theme.json with the schema directed to this PR:

theme.json sample

{
	"$schema": "https://raw.githubusercontent.com/WordPress/gutenberg/schema/css-only-block-level/schemas/json/theme.json",
	"version": 2,
	"styles": {
		"css": "",
		"blocks": {
			"core/button": {
				"css": "",
				"elements": {
					"button": {
						"css": "",
						":hover": {
							"css": ""
						}
					},
					"link": {
						"css": "",
						":hover": {
							"css": ""
						}
					}
				},
				"variations": {
					"wide": {
						"css": ""
					}
				}
			},
			"my/custom": {
				"css": "",
				"elements": {
					"css": "",
					"button": {
						":hover": {
							"css": ""
						}
					}
				},
				"variations": {
					"wide": {
						"css": ""
					}
				}
			}
		},
		"elements": {
			"button": {
				"css": "",
				":hover": {
					"css": ""
				}
			},
			"link": {
				"css": "",
				":hover": {
					"css": ""
				}
			}
		}
	}
}

Use this theme.json file to confirm the following:

• When typing "css" under styles and styles.blocks.{blockname}, a property with a description should appear in the candidate list. If you add a definition, you should not get a warning.
• If you type "css" anywhere else, it should not appear as a candidate. If you defined the property manually, you should get a warning.

[github-actions]

Flaky tests detected in 62e3e13.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5706409803
📝 Reported issues:

• [Flaky Test] should load styles added through enqueue_block_assets #53088 in specs/editor/plugins/iframed-equeue-block-assets.test.js
• [Flaky Test] shouldn't conflict with server-side autosave #35176 in specs/editor/various/autosave.test.js

[t-hamano]

If the schema is strictly defined, the css property will unfortunately be removed from the document. It may be possible to revive this description by slightly forcing the docs:theme-ref logic to be adjusted.

However, now that css properties are only allowed in certain hierarchies, I personally think it is acceptable. If in the future, css properties will be available everywhere related to style, I think it would be fine to add them at that time.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <[email protected]>
Co-authored-by: carolinan <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[t-hamano]

For now, css property are only available in the site root and block and will not work if specified on variations or elements. It would make sense to display a warning according to the schema when a CSS property is defined that does not work.

I tested this again and it seems the css works on both elements and variations. Perhaps it's related to the section styles introduced in WP6.6.

Therefore, I'm closing this PR.