Introduce Element.json

[adamziel]

What problem does this address?

As of recently, the Site Editor supports button elements.

The idea was to have a building block that's can be managed and embedded in other blocks (such as search), but that isn't a Gutenberg block in itself and thus doesn't support features like reordering.

Here's a problem: how to surface the Button element in global styles UI?

@scruffian explored updating the relevant sidebar components in #41659, but it requires updating four files:

• packages/edit-site/src/components/global-styles/screen-typography-element.js
• packages/edit-site/src/components/global-styles/screen-typography.js
• packages/edit-site/src/components/global-styles/screen-colors.js
• packages/edit-site/src/components/global-styles/ui.js

That's a lot of files and a lot of copypasted code!

Let's go a step further – how do we manage spacings, borders, and anything else that applies? How do we attach custom CSS?

This exact problem is already solved for blocks via block.json and the "supports" config key.

What is your proposed solution?

Let's introduce an element.json file – a declarative way of introducing and configuring elements.

With element.json in place, the above PR could look as follows:

// packages/edit-site/src/elements/button.json
{
	"$schema": "https://schemas.wp.org/trunk/element.json",
	"name": "button",
	"title": "Button",
	"supports": {
		"color": {
			"__experimentalSkipSerialization": true,
			"gradients": true,
			"__experimentalDefaultControls": {
				"background": true,
				"text": true
			}
		},
		"typography": {
			"fontSize": true,
			"__experimentalFontFamily": true,
			"__experimentalDefaultControls": {
				"fontSize": true
			}
		}
	}
}

Adding support for margins and would involve adding the relevant spacing and __experimentalBorder configuration keys.

cc @scruffian @draganescu @getdave @dmsnell @mcsf @gziolo @Mamaduka @noisysocks @tellthemachines @ellatrix @ramonjd @andrewserong @mtias