Block Styles: Ensure unique classname generation for variations #64511
+9
−5
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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
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
Example block style variation theme.json partial (place under `/styles`)
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