Element block styles from theme.json not applied in frontend

[glendaviesnz]

Description

Since #41160 was merged, custom block element styles in a theme.json file are not being applied in the frontend, but are still applied in the editor.

Step-by-step reproduction instructions

• In a block based theme add the following to theme.json styles.blocks section

			"core/columns": {
				"elements": {
					"h2": {
						"color": {
							"text": "red",
							"background": "black"
						},
						"typography": {
							"fontSize": "var(--wp--preset--font-size--small)"
						}
					}
				}
			}

• Add a columns block and within it nest an h2 header, and see if it displays with black background and red text in editor and frontend.

Screenshots, screen recording, code snippet

Before #41160 :

After:

Environment info

No response

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

[glendaviesnz]

@scruffian I will try and get some time this afternoon to take a look at this, but if not you may have some thoughts overnight as probably good to get a fix into 13.4 if possible

[ramonjd]

I'm seeing the following error:

Notice: Undefined index: name in /var/www/html/wp-content/plugins/gutenberg/lib/compat/wordpress-6.1/get-global-styles-and-settings.php on line 19

Looks like the following line –

$block_name = str_replace( 'core/', '', $metadata['name'] );

– is trying to grab a name from this object:

array(2) { ["path"]=> array(5) { [0]=> string(6) "styles" [1]=> string(6) "blocks" [2]=> string(12) "core/columns" [3]=> string(8) "elements" [4]=> string(2) "h2" } ["selector"]=> string(20) ".wp-block-columns h2" }

Not sure if the fix is in that method yet!

Edit:

I am very sure this is not the right fix, but it demonstrates that we need to handle block styles separately

Example

function wp_add_global_styles_for_blocks() {
	$tree = WP_Theme_JSON_Resolver_Gutenberg::get_merged_data();
	// TODO some nodes dont have a name...
	$block_nodes = $tree->get_styles_block_nodes();
	foreach ( $block_nodes as $metadata ) {
		$block_css = $tree->get_styles_for_block( $metadata );

		if ( isset( $metadata['name'] ) ) {
			$block_name = str_replace( 'core/', '', $metadata['name'] );
			// These block styles are added on block_render.
			// This hooks inline CSS to them so that they are loaded conditionally
			// based on whether or not the block is used on the page.
			wp_add_inline_style( 'wp-block-' . $block_name, $block_css );
		}

		if ( ! isset( $metadata['name'] ) && ! empty( $metadata['path'] ) ) {
			$result = array_values(
				array_filter(
					$metadata['path'],
					function ( $item ) {
						if ( strpos( $item, 'core/' ) !== false ) {
							return true;
						}
						return false;
					}
				)
			);
			if ( isset( $result[0] ) ) {
				$block_name = str_replace( 'core/', '', $result[0] );
				wp_add_inline_style( 'wp-block-' . $block_name, $block_css );
			}
		}
	}
}

[glendaviesnz]

I am very sure this is not the right fix, but it demonstrates that we need to handle block styles separately

This fix works for me @ramonjd . The one issue with it I can see is that it outputs the styles even if the particular block/element combination is not in the content ... but it is difficult to see an easy workaround for that as with the example given parsing all the column blocks on the page to see if they contain an h2 would be expensive.

[priethor]

Hi @glendaviesnz ! I'm preparing cherry-picking for 13.4. Is this PR still intended to land before the 13.4 stable release?

[glendaviesnz]

Hi @glendaviesnz ! I'm preparing cherry-picking for 13.4. Is this PR still intended to land before the 13.4 stable release?

It would be nice, but it would also be good to get some input from @scruffian on this first as we may be overlooking something that he had intended by not allowing for this in the original PR. I think he is back from AFK now so will see if he has time to verify it.

[scruffian]

This has been merged. @priethor can we get it into 13.4?

[priethor]

Sure, I'll cherry-pick the commit 👍