Make WordPress Core

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's profile 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

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

  1. Confirm Theme.json unit tests are passing:

npm run test:php -- --filter Tests_Theme_wpThemeJson

  1. Register a custom block style variation for a block that uses the Selectors API with compound selector or something with a CSS function in it. The List block sparked the original issue fixed by this PR, see snippet below for List block style.
    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)',
                                            ),
                                    ),
                            ),
                    ),
            )
    
  1. Edit a post, add a List block to it, and apply the custom block style from the last step.
  2. Save the post and view on the frontend.
  3. Confirm the List block's border styles are now reflected there as well (they still should not be recursively applied to nested lists)
  4. In the site editor, add some global styles for the Image block.
    • Add a border to all images
    • Add a different border to the rounded Image block style
  5. Confirm the borders for images continue to work as before.
  6. Make sure other blocks using the selectors API to set custom selectors within block.json work e.g. Post Featured Image, Avatar, List Item.
  7. Check blocks like Button, that still use old __experimentalSelector property in block.json

#### Screenshots

Before After
https://github.com/user-attachments/assets/5a955857-2053-4202-b63b-25c3810017ee https://github.com/user-attachments/assets/a17ac20a-91e0-43f4-bee1-32188eb9ad44
Note: See TracTickets for help on using tickets.