[BBT-98] Adds support for variation styling

[chrishall0]

** Note for reviewer - unsure what release this will be a part of, so i've put it as release/1.0.0 for now but happy to change this if required **

#98 Implements Variation styles editing within Themer.

Description

#98

This ticket implements functionality to change 'variations' values within blocks that support this. Further info regarding variations and which blocks are support is here https://developer.wordpress.org/news/2023/05/26/customizing-core-block-style-variations-via-theme-json/

I'm using twentytwentythree to test and by default WordPress seems to have variation values available for the Button component and the Site-Title component, the rest of the blocks will need values adding to the Theme.json files with the supported core name.

Please note as per ticket, custom variations are not currently supported so will not render. The button blocks supports two different variations so we can use this to test the tabpanel implementation. I've attached a copy of my theme.json below to assist testing this.

This PR also adds in menu options for elements and variations underneath the selected block. Changes have been made to the navigator block and code block logic to account for this.

Change Log

• Adds in StylesVariation component which should appear in side menu of supported blocks (some may require a 'variation' adding to the respective theme.json file to allow this to show as only Button and Site-Title blocks have this by default
• Adds in Elements menu option to wrap Elements that are within Blocks.

Steps to test

Select a block such as the core/button block within Themer and use the menu to get to the variations options. Edit these and then within the post editor, check that these have been reflected when adding the respective block and choosing the edited style variation.

Below is a copy of my button component within my theme.json to assist any testing

"core/button": {
				"variations": {
					"fill": {
						"border": {
							"color": "var(--wp--preset--color--black)",
							"radius": "0",
							"style": "solid",
							"width": "3px"
						},
						"shadow": "var(--wp--preset--shadow--outlined)",
						"spacing": {
							"padding": {
								"top": "0.5rem",
								"bottom": "0.5rem",
								"left": "1.5rem",
								"right": "1.5rem"
							}
						},
						"color": {
							"background": "var(--wp--preset--color--secondary)",
							"text": "var(--wp--preset--color--white)"
						}
					},
					"outline": {
						"border": {
							"color": "var(--wp--preset--color--black)",
							"radius": "0",
							"style": "solid",
							"width": "3px"
						},
						"shadow": "var(--wp--preset--shadow--outlined)",
						"spacing": {
							"padding": {
								"top": "0.5rem",
								"bottom": "0.5rem",
								"left": "1.5rem",
								"right": "1.5rem"
							}
						},
						"color": {
							"background": "var(--wp--preset--color--primary)",
							"text": "var(--wp--preset--color--white)"
						}
					}
				}
			},

Screenshots/Videos

http://bigbite.im/v/oa1pNt

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• Any dependent changes have been merged and published in downstream modules

[jonnywatersbb]

Awesome @chrishall0 this is really useful!

Might be something to look at with the button block itself here and the way the styles are nested, but there doesn't seem to be a way to target the hover state of the outline variation:

I wonder if we'd need to change the UI slightly in order to style all states within a different button variation?

[chrishall0]

Awesome @chrishall0 this is really useful!

Might be something to look at with the button block itself here and the way the styles are nested, but there doesn't seem to be a way to target the hover state of the outline variation:

I wonder if we'd need to change the UI slightly in order to style all states within a different button variation?

hey @jonnywatersbb, i've been doing some more digging into this and i'm not sure it's going to be possible currently. Looking at the theme.json schema we can define any variations styling within the 'blocks' subsection of the styles section, however any styling for pseudo styles are defined within the 'elements' subsection instead, which does not support 'variations'. So therefore I think you can't currently style a pseudo state for a particular variation within the theme.json.

@g-elwell I think you mentioned something around this in the ticket, just wanted to loop you in incase i've missed something.

I believe this current open issue on the Gutenberg repo might be relevant WordPress/gutenberg#59731

I'm going to draft this actually, because I want to make some changes and move this to be accessed via the sidebar rather than where it is currently.

[g-elwell]

hey @jonnywatersbb, i've been doing some more digging into this and i'm not sure it's going to be possible currently. Looking at the theme.json schema we can define any variations styling within the 'blocks' subsection of the styles section, however any styling for pseudo styles are defined within the 'elements' subsection instead, which does not support 'variations'. So therefore I think you can't currently style a pseudo state for a particular variation within the theme.json.

@g-elwell I think you mentioned something around this in the ticket, just wanted to loop you in incase i've missed something.

I believe this current open issue on the Gutenberg repo might be relevant WordPress/gutenberg#59731

Yeah this makes sense to me and is unfortunately a limitation of how Gutenberg and theme.json are working currently.

The way blocks are styled makes things mega confusing with buttons in particular (which is where this is likely to be most used!)

Disregarding variations for a sec, if you style the core/button block, you can't style pseudo-states. If you style the HTML button element, you can. But if you style the HTML button element within the core/button block, your styles won't apply because there's no button NESTED INSIDE that block. So variations are going to suffer from the same issue, because they are block-level styles. For example, outline is registered on the core/button block, so from that point there's no way to style the pseudo states.