Section Styles: improve performance and conceptual consistency

[oandregal]

Trac ticket https://core.trac.wordpress.org/ticket/61451
Follow-up work for https://core.trac.wordpress.org/ticket/61312

Backports WordPress/gutenberg#62712

The changes in WordPress/gutenberg#62712 make optimizations around the processing and registration of shared block style variations in theme.json as well as simplify the mental model for the feature increasing conceptual consistency.

These changes involve:

• Moving shared variation definitions from styles.blocks.variations to styles.variations
• Removing blockTypes from styles.variations.
• Not automatically registering shared variations from theme style variation or primary theme.json files.
• Moving the merging of theme.json data into the WP_Theme_JSON_Resolver and WP_Theme_JSON classes as per #6868

Testing Instructions

1. Defines block style variations via the different sources below:
   • register_block_style
   • Theme.json partial file under /styles directory including blockTypes
   • Within a theme style variation under styles.variations
     • Define at least one that is registered via register_block_style or a theme.json partial as well
     • Define a variation that hasn't been registered
2. Confirm that only registered variations appear for selection (those defined via register_block_style, theme.json partials, or in core block types styles property such as Button's Outline style)
3. Try out all the variations and ensure they get applied correctly in the editor and frontend
4. Update the variation definitions to define inner element and block type styles as well
5. Check the inner element and block type styles are applied correctly for variations
6. Test applying variations on blocks in a nested fashion
7. Update variation styles via Styles > Blocks > Block Type > Variation and confirm they apply correctly everywhere

`register_block_style` Example

gutenberg_register_block_style(
	array( 'core/group', 'core/columns' ),
	array(
		'name'       => 'section-b',
		'label'      => __( 'Section B' ),
		'style_data' => array(
			'color'    => array(
				'background' => '#4f6f52',
				'text'       => '#d2e3c8',
			),
			'blocks'   => array(
				'core/group' => array(
					'color' => array(
						'background' => '#739072',
						'text'       => '#e3eedd',
					),
				),
			),
			'elements' => array(
				'link' => array(
					'color'  => array(
						'text' => '#ead196',
					),
					':hover' => array(
						'color' => array(
							'text' => '#ebd9b4',
						),
					),
				),
			),
		),
	)
);

Theme.json Partial Example

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 3,
	"title": "Section A",
	"slug": "section-a",
	"blockTypes": [ "core/group" ],
	"styles": {
		"color": {
			"background": "slategrey",
			"text": "snow"
		},
		"blocks": {
			"core/group": {
				"color": {
					"background": "darkslategrey",
					"text": "whitesmoke"
				}
			}
		}
	}
}

Theme Style Variation Example (`styles.variations`)

{

	"styles": {
		"variations": {
			"section-a": {
				"color": {
					"background": "var(--wp--preset--color--theme-2)",
					"text": "var(--wp--preset--color--theme-5)"
				},
				"blocks": {
					"core/group": {
						"color": {
							"background": "var(--wp--preset--color--theme-4)",
							"text": "var(--wp--preset--color--theme-2)"
						}
					}
				}
			}
		}
	}
}

[github-actions]

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

• The Plugin and Theme Directories cannot be accessed within Playground.
• All changes will be lost when closing a tab with a Playground instance.
• All changes will be lost when refreshing the page.
• A fresh instance is created each time the link below is clicked.
• Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
  it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

[joemcgill]

Thanks, @oandregal. I'm happy to do some additional profiling here if you all would find it helpful while continuing to iterate on the GB PR. It doesn't seem like this changes much of the impact when there are no new variations registered. It may also be helpful to run some A/B performance tests when additional block variations are added to a theme to make sure the processing doesn't increase as additional theme.json files are added to the /style directory.

[aaronrobertshaw]

In the interests of time, I've push a couple of commits to bring this in line with the latest updates over in WordPress/gutenberg#62712.

[andrewserong]

I've just given this a manual test, and it's all working for me here as it is over in WordPress/gutenberg#62712:

✅ theme.json partials are registered automatically and available in post and site editors, and output correctly
✅ Block styles nested within a partial are working correctly
✅ Nesting multiple blocks each using variations is working correctly
✅ Variations defined in the root theme.json file's style.variations are not registered automatically
✅ Variations defined in the root theme.json file that have been registered separately elsewhere have their styles applied correctly in the site editor and site frontend
✅ Updating block style variations in the site editor works correctly, and the updates are applied where expected

[aaronrobertshaw]

Most things are testing well for me however I've run into an issue with theme style variations.

In this PR, it appears as though the theme.json partial defined block style variations are omitted from the response. The endpoint doesn't appear to register those variations at the moment. The catch though is neither does that endpoint in Gutenberg which is working.

[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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props oandregal, aaronrobertshaw, andrewserong, joemcgill.

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

[aaronrobertshaw]

Most things are testing well for me however I've run into an issue with theme style variations.

Thanks for the quick turnaround here @oandregal 🚀

After the fix in 270a4e5 this is looking good!

✅ Theme.json partials have their variations registered automatically
✅ Theme.json partial defined variations could be applied in both editors and are reflected on the frontend correctly
✅ Non registered variations under styles.variations were omitted as expected
✅ Registered variations under styles.variations were included
✅ Tweaking variations in global styles worked and was reflected in editors and frontend
✅ Nesting applications of block style variations works
✅ Theme style variation defined block style variations were updated correctly on selection

Screen.Recording.2024-06-24.at.6.02.33.PM.mp4

[oandregal]

Committed in https://core.trac.wordpress.org/changeset/58466