Editor: Fix link color CSS cascade conflict for duplicate blocks with identical markup#12126
Editor: Fix link color CSS cascade conflict for duplicate blocks with identical markup#12126USERSATOSHI wants to merge 3 commits into
Conversation
Test using WordPress PlaygroundThe 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
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
|
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 Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Trac ticket: https://core.trac.wordpress.org/ticket/65435
Description
This fixes a CSS cascade bug where identical block content produces duplicate
wp-elements-*class names, causing parent block element styles (e.g. link colors) to incorrectly override child block styles.Root cause
wp_get_elements_class_name()generates CSS class names viamd5( serialize( $block ) ).When two blocks have identical parsed data (e.g. two Paragraph blocks with the same text, one standalone and one inside a Group), they produce the same class.
The Style Engine deduplicates the rule, and since the parent Group's rule renders later in DOM order, it overrides the child Paragraph's style.
A contributing factor:
elements.phpis required beforelayout.phpinwp-settings.php, sowp_render_elements_support_styles()runs beforewp_add_parent_layout_to_parsed_block().If layout ran first, nested blocks would have a
parentLayoutkey, producing different hashes.Fix
Introduces a collision tracker via
static $seen_hashesinwp_get_elements_class_name(). When a hash collision is detected, an incrementing counter is appended before re-hashing, producing a unique class name per duplicate instance. This ensures the Style Engine outputs distinct CSS rules for each block instance, preserving correct cascade order.Testing
Added Test cases for these cases.
tests/phpunit/tests/block-supports/wpRenderElementsSupportStyles.php::test_elements_block_support_styles_with_duplicate_blockstests/phpunit/tests/block-supports/wpRenderElementsSupport.php::test_elements_block_support_class_with_duplicate_blocksScreenshots
Credits
References
Use of AI Tools
AI assistance: Yes
Tool(s): OpenCode
Model(s): deepseek-v4-flash-free
Used for: I used AI only for creating the test scaffolding. Code is reviewed and written by me.
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.