`theme.json` block style variation doesn't generate CSS for a new block style registered via `register_block_style()` function

[daviedR]

Description

I tried to style a new custom block style in the theme.json via block style the variations properties (Snippet 2 below)
The block style is registered via register_block_style (Snippet 1 below).
Turns out Gutenberg doesn't generate the CSS for that block style, both in the block editor and front website.
This is the bug.

If I add a new block style via register_block_type_args filter (Snippet 3 below), it works perfectly.

Step-by-step reproduction instructions

How to replicate the bug:

1. Add the Snippet 1 (below) into the functions.php. This will register a new block style for the core/heading block via register_block_style() function.
2. Add the Snippet 2 (below) into the theme.json. This will give red and yellow colored for the core/heading block with the new title block style.
3. Go to block editor and add a core/heading block into the content.
4. Choose the Title block style.
5. The heading block is not in red and yellow colored.
6. If we check the page source, there is no generated CSS for .is-style-title in the core/heading block inline CSS.

Adding a new block style via register_block_type_args filter:

1. Add the Snippet 3 (below) into the functions.php. This will register a new block style for the core/heading block via register_block_type_args filter.
2. Reload the page that contains the core/heading block with Title block style.
3. The heading block is in red and yellow colored.
4. If we check the page source, there is a new generated CSS for .is-style-title in the core/heading block inline CSS.

Screenshots, screen recording, code snippet

Snippet 1 (functions.php):

<?php
register_block_style(
	'core/heading',
	array(
		'name'  => 'title',
		'label' => esc_html__( 'Title', 'textdomain' ),
	)
);

Snippet 2 (theme.json):

{
	...
	"styles": {
		"blocks": {
			"core/heading": {
				"variations": {
					"title": {
						"color": {
							"background": "yellow",
							"text": "red"
						}
					}
				}
			}
		}
	}
}

Snippet 3 (functions.php):

<?php
add_filter(
	'register_block_type_args',
	function( $args, $block_type ) {
		if ( 'core/heading' === $block_type ) {
			$args['styles'][] = array(
				'name'  => 'title',
				'label' => esc_html__( 'Title', 'textdomain' ),
			);
		}

		return $args;
	},
	10,
	2
);

Environment info

• WordPress 6.4.3
• Gutenberg 17.8.2

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

[carolinan]

Hi @daviedR
Thank you for the detailed issue.

As you discovered, custom block styles registered with register_block_style() does not work in this scenario. The only custom block styles that work as variations in theme.json are the ones added in the block.json files.

This is documented in the Block Editor Handbook:

It’s also worth highlighting that only variations defined in the block.json file of the block are considered “registered”: so far, > the style variations added via register_block_style or in the client are ignored.

So this is not a bug but a known limitation, and there are plans to solve it, but there is no ETA for it.
Because of this, I will close the issue as a duplicate of this earlier feature request: #49550.

[aaronrobertshaw]

and there are plans to solve it, but there is no ETA for it.

The ability to style registered block style variations via theme.json & Global Styles is part of the ongoing work around section styling. You can follow along with progress there via this tracking issue.

The current hope is that the initial implementation of extended block style variations, which will open up styling via theme.json etc, will land in Gutenberg early within the WP 6.6 release cycle.

[daviedR]

Thanks @carolinan and @aaronrobertshaw !