Section styles: consolidate variation name

[oandregal]

What?

This PR enables theme.json partials to provide a different slug than the generated kebab-case to follow what any other registration mechanism (block.json, register_style_variation) does.

Why?

For theme.json partials to work like any other registration mechanism, and to enable them to override variations with names that don't follow the kebab-case convention.

The existing mechanisms to register block style variations require a name and a label, see docs. The name is used to generate the associated class (e.g.: is-style-NAME) and we don't do any processing of it — all the following are correct:

Variation Name	Generated class
dark	is-style-dark
Dark	is-style-Dark
PitchDark	is-style-PitchDark
pitch-dark	is-style-pitch-dark

Before this PR, the title from the theme.json partials was preprocessed to generate a kebab-cased variation name & class:

Partial's Title	Variation Name	Generated class
dark	dark	is-style-dark
Dark	dark	is-style-dark
PitchDark	pitch-dark	is-style-pitch-dark
pitch-dark	pitch-dark	is-style-pitch-dark

After this PR, the theme.json partials can contain an optional slug (alternative: name?) key to be used in registering the variation and generating its class. This enables the theme.json partials to work with any variation name or class that wasn't kebab-case:

Partial's Title	Partial's slug	Variation Name	Generated class
dark	-	dark	is-style-dark
Dark	Dark	Dark	is-style-Dark
PitchDark	PitchDark	PitchDark	is-style-PitchDark
pitch-dark	-	pitch-dark	is-style-pitch-dark

Note the slug is optional and most of the cases will just let title be kebab-cased.

How?

Allow slug to be provided in theme.json partials:

• Use slug if present, otherwise kebab-case the title a602aae
• Update schemas c0cca63

Testing Instructions

Register a variation with a non-kebab-cased name. For example, paste the following in the functions.php of TT4:

		register_block_style(
			'core/group',
			array(
				'name'         => 'MyVariation',
				'label'        => __( 'My variation', 'twentytwentyfour' ),
				'inline_style' => '
				.is-style-MyVariation {
					background-color: red;
				}',
			)
		);

• Go to the editor and verify there is a variation for the group block called "My variation" and that applying it would set the background to red.
• Create the file styles/partial.json with the following contents:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "title": "My variation",
    "blockTypes": [ "core/group" ],
    "styles": {
            "color": {
                    "background": "blue",
                    "text": "white"
            }
    }
}

• Go to the editor. You'll see two variations registered.

• Now, update the partial.json to include a slug that matches the variation name provided by register_block_style call:

{
    "$schema": "https://schemas.wp.org/trunk/theme.json",
    "version": 2,
    "title": "My variation",
    "slug": "MyVariation",
    "blockTypes": [ "core/group" ],
    "styles": {
            "color": {
                    "background": "blue",
                    "text": "white"
            }
    }
}

• Go to the editor and verify that there is only one variation again:

• Confirm that the partial's style gets applied correctly as it takes precedence over the PHP block style registration.

[github-actions]

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core GitHub repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ phpunit/data/themedir1/block-theme/styles/block-style-variation-with-slug.json
❔ lib/block-supports/block-style-variations.php
❔ lib/class-wp-theme-json-gutenberg.php
❔ phpunit/block-supports/block-style-variations-test.php
❔ phpunit/class-wp-theme-json-resolver-test.php

[oandregal]

For most scenarios, just kebab-casing the title will be enough and that's a great devexp we may want to keep. The slug (could also use name) is a way to make it work for any scenario.

[aaronrobertshaw]

There's an issue with styles generation: when the slug is provided the styles are not generated.

The resolution of block style variations from partials needed to be tweaked in the same way the registration was so their key is consistent. I pushed a tweak in ebf2162

I'll give this a more thorough review shortly. Then create a backport PR, update the backport changelog etc.

[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: oandregal <oandregal@git.wordpress.org>
Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>

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

[aaronrobertshaw]

Thanks for putting this together @oandregal 👍

This tests well for me resolving both the "duplicate" style option and variation merging issues.

I've created a backport for the PHP changes and added a backport changelog entry to this PR.

[aaronrobertshaw]

Before we merge this one, we might need to update a couple of tests for the block style variations support and theme.json resolver. I'll sort those out on WordPress/wordpress-develop#6824 and then bring those back across to this PR.

[aaronrobertshaw]

The unit test updates are pretty basic but cover:

• That a partial using a slug overrides one supplied directly through register_block_style (duplicate UI option issue)
• That a partial supplied block style variation is registered and resolved by its slug (styles not generating correctly if it relied on title)

[sirreal]

It looks like tests have been failing on trunk since this merged and these changes look suspect. @aaronrobertshaw @oandregal have you noticed the test failures? Can you confirm whether they're related or not?

1) Gutenberg_REST_Block_Editor_Settings_Controller_Test::test_get_items
Undefined array key "WithSlug"

Here's a recent example run.

[aaronrobertshaw]

The error does appear related, we'll look into it 👀

[aaronrobertshaw]

The changes to the tests have been reverted in #62579 while we investigate the issue via #62587

[ellatrix]

I just cherry-picked this PR to the wp/6.6-beta-3 branch to get it included in the next release: 7cfc6c5