Block Styles: Ensure unique classname generation for variations

[aaronrobertshaw]

Fixes: #64422

What?

Simplifies block style variation class name generation to ensure unique class.

Why?

Avoids potential for non-unique class names and conflicting styles when exact copies of a block are inserted via a repeated pattern.

Background

Originally the block style variation block support followed the same approach as styles generated by the elements block support. This entailed needing to generate a predictable classname in two separate filters ruling out the prior use of wp_unique_id.

The recent changes to these supports, such that their styles and class are generated in a single filter, mean the generated classname no longer needs to be a hash based off the block's attributes. Not only does this make the classname simpler and shorter but it also avoids the issue flagged in #64422 where exact copies of a block inserted via patterns result in the same ID and potentially conflicting styles.

How?

Replace the hashing of block attributes in the block style variation classnames with a call to wp_unique_id.

Testing Instructions

Confirm unique classnames on frontend

1. Create a pattern
2. Add a button with the Outline block styles to the pattern
3. Save the pattern and edit a post
4. Insert the above pattern 3 times in the post
5. Save and view the post on the frontend
6. Inspect a button and search the markup for is-style-outline-. You should find CSS with three styles matching that pattern however they should now all be unique.

Ensure no regressions for block style variations on the frontend

1. Add some custom block style variations to your theme. See #57908 for detailed examples or the snippet below for a quick option.
2. Add suitable content to a page, making sure there is enough that nested applications of block style variations can occur
3. In the site editor, apply the custom block style variations to various content, including in a nested fashion
4. Save and confirm the correct styling on the frontend

Example block style variation theme.json partial (place under `/styles`)

{
	"$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"
				}
			}
		}
	}
}

Screenshots or screencast

Simple unique classnames for exact copies of blocks

Block Style Variations still working

Screen.Recording.2024-08-14.at.9.24.28.PM.mp4

[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: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: asafm7 <asafm7@git.wordpress.org>

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

[github-actions]

Flaky tests detected in 9065b90.
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/10389961399
📝 Reported issues:

• [Flaky Test] can be inserted after refresh #55509 in /test/e2e/specs/editor/various/patterns.spec.js

[ramonjd]

✅ Unique ids appear for style variations inside multiple patterns on the frontend
✅ Unique style variations rules are being generated for global styles on the frontend, e.g., :root :where(.wp-block-group.is-style-section-a--17)