Opened 3 weeks ago
Last modified 2 weeks ago
#62471 new defect (bug)
Fix malformed variation selector in theme.json when block uses non-trival CSS selector
Reported by: | aaronrobertshaw | Owned by: | |
---|---|---|---|
Milestone: | Awaiting Review | Priority: | normal |
Severity: | normal | Version: | trunk |
Component: | Editor | Keywords: | gutenberg-merge has-patch has-unit-tests has-testing-info |
Focuses: | Cc: |
Description
This ticket tracks the backport of PHP files for the following Gutenberg updates:
https://github.com/WordPress/gutenberg/pull/67061
The old approach to converting a block's CSS selectors for block style variations was fairly simplistic. It worked when a block used a simple class based selector however as blocks evolve and the Selectors API is used more, it needs to handle more complex selectors such as the List block's .wp-block-list:not(.wp-block-list .wp-block-list)
.
The changes in the linked Gutenberg PR prevent generation of malformed block style variation selectors when a block's selector leverages a CSS function such as :not()
or chains multiple classes e.g. .wp-block-list.my-custom-class
.
Change History (2)
This ticket was mentioned in PR #7825 on WordPress/wordpress-develop by @aaronrobertshaw.
3 weeks ago
#1
- Keywords has-patch has-unit-tests added
#2
@
2 weeks ago
- Keywords has-testing-info added
Test report on Github: https://github.com/WordPress/wordpress-develop/pull/7825#pullrequestreview-2449938306
This PR backports the PHP changes from https://github.com/WordPress/gutenberg/pull/67061
The old approach to converting a block's CSS selectors for block style variations was fairly simplistic. It worked when a block used a simple class based selector however as blocks evolve and the Selectors API is used more, it needs to handle more complex selectors such as the List block's .wp-block-list:not(.wp-block-list .wp-block-list).
The changes in the linked Gutenberg PR prevent generation of malformed block style variation selectors when a block's selector leverages a CSS function such as :not() or chains multiple classes e.g. .wp-block-list.my-custom-class.
Trac ticket: https://core.trac.wordpress.org/ticket/62471
#### Test Instructions
register_block_style( 'core/list', array( 'name' => 'my-list-border', 'label' => __( 'my list border' ), 'style_data' => array( 'border' => array( 'color' => 'green', 'style' => 'solid', 'width' => '2px', ), 'color' => array( 'background' => '#FBFAF3', ), 'spacing' => array( 'padding' => array( 'bottom' => 'var(--wp--preset--spacing--30)', 'left' => 'var(--wp--preset--spacing--50)', 'right' => 'var(--wp--preset--spacing--50)', 'top' => 'var(--wp--preset--spacing--30)', ), ), ), ), )
__experimentalSelector
property in block.json#### Screenshots