Adding a block style with a border to a list block does not work on the front screen

[shimotmk]

Description

Adding a style with a border using style_data in register_block_style does not work on the front screen

Group etc. work

Step-by-step reproduction instructions

1. Add a bordered register_block_style to the list block using a plugin.

Example:

/**
 * Register_block_style
 */
function my_plugin_init() {
	register_block_style(
		'core/list',
		array(
			'name'       => 'my-list-border',
			'label'      => __( 'my list border' ),
			'style_data' => array(
				'border' => array(
					'color' => '#111111',
					'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)',
					),
				),
			),
		),
	);

	register_block_style(
		'core/group',
		array(
			'name'       => 'my-group-border',
			'label'      => __( 'my group border' ),
			'style_data' => array(
				'border' => array(
					'color' => '#111111',
					'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)',
					),
				),
			),
		),
	);
	
	register_block_style(
		'core/image',
		array(
			'name'       => 'my-image-border',
			'label'      => __( 'my image border' ),
			'style_data' => array(
				'border' => array(
					'color' => '#111111',
					'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)',
					),
				),
			),
		),
	);
}
add_action( 'init', 'my_plugin_init' );

2. Go to the post page

3. Place the list block and apply the block style from earlier

4. You can see that the style is not reflected on the front screen.

Screenshots, screen recording, code snippet

list.mov

Environment info

• WordPress 6.7-RC4
• Gutenberg 19.6.1
• Twenty Twenty-Five 1.0

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[yogeshbhutkar]

I was able to reproduce this issue on Gutenberg Plugin 19.6.1 and WordPress version 6.8-alpha-59361

[Anuj-Rathore24]

Hi @shimotmk👋,

I have provided a solution for this in PR🙇, but in the meanwhile you can also use this method for applying your style changes,

register_block_style(
    'core/list',
    array(
        'name'         => 'my-list-border',
        'label'        => __( 'My List Border' ),
        'inline_style' => '
            .is-style-my-list-border {
                border: 2px solid #111111;
                background-color: #FBFAF3;
                padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
            }
        ',
    )
);

[aaronrobertshaw]

I've done some preliminary digging into the root cause of this issue today however it might take some more time before a solid solution is ready for review. In the meantime, there is a little more information available on the bug in my review of the initial proposed fix.

There are a couple of potential issues that I'll address with a PR soon:

1. The border selector for the list block should try and maintain 0-1-0 specificity if it can. To that end, the :not() portion of the selector can be wrapped in :where()
2. The generation of block style variation selectors isn't working for this list block example but does appear to for the Image block which also uses the Selectors API
3. The generation of block style variation stylesheets relies on passing a scope option to theme.json to scope all selectors by. This might also be another source of the invalid selectors for the List block's custom style here.

[aaronrobertshaw]

After digging deeper, I believe I've isolated the cause of the malformed block style variation selectors on the frontend.

The short explanation is the replacement of block selectors with the variation selector was expecting the block class to only be used preceding another selector, such as with the image block e.g. .wp-block-image img. This failed to correctly replace the block class when the selector would contain a CSS function e.g. :not() in the case of the List block, or even just two classes chained together .wp-block-test.wp-block-test.

I have a draft PR up in #67061. I'm out of time today, but tomorrow I'll create a backport for that PR, give it a further test, then flag it ready for review.