"elements" styles for custom blocks in `theme.json` are ignored / not loaded

[flixos90]

Generally, styling a custom block type (not a core/... block type) via theme.json works as expected, as long as you're applying styles to the overall block (i.e. the block wrapper element).

However, if you apply styles to specific elements within the block, those are currently ignored and not loaded in the frontend.

I have tracked down the source of the problem being ​these lines within wp_add_global_styles_for_blocks(). For some reason, only "elements" styles for core/... blocks are being loaded. While the other two checks for core/ block names in this function make sense to determine whether to attach the inline styles to the block specific style handle or the global-styles handle, this particular core/ check is confusing to see here, and causes this specific bug.

It looks like this bug was introduced together with the overall feature in Gutenberg via ​https://github.com/WordPress/gutenberg/pull/41446 (follow up to ​https://github.com/WordPress/gutenberg/pull/41160), both of which were committed to WordPress core via [54118].

To replicate this bug, use a block theme and any custom block type that has inner elements that are eligible for specific styling via theme.json (e.g. a heading, a link, or a cite element). Then add an entry styles.blocks[ blockName ].elements[ element ] with some custom styles to theme.json. You will see that whatever styles you put there will not be applied in the frontend even if the block is present.

• Add a new private function to centralize lookup logic based on theme.json path.
• Add test coverage, both an actual unit test for the new function and integration tests as part of wp_add_global_styles_for_blocks().
• Fix lookup logic to include custom block element styles and make it more resilient, as the block name should always be at a specific position.

Trac ticket: https://core.trac.wordpress.org/ticket/57868

@glendaviesnz @scruffian Would be great to get your reviews on this since you worked on the original code in ​https://github.com/WordPress/gutenberg/pull/41446.

I worked on test coverage first. Seeing them fail on ​https://github.com/WordPress/wordpress-develop/pull/4174/commits/308066bd8493d5aad4b253f5bd034e750259b3bd but pass on ​https://github.com/WordPress/wordpress-develop/pull/4174/commits/d1dcd9d5bb3a16d8d820741f3fd206e556b5db9e shows that the updated logic correctly fixes the underlying bug.

This tested well for me. I added:

{{{json

"styles": {

"blocks": {

"core/quote": {

"elements": {

"cite": {

"color": {

"text": "blue",
"background": "yellow"

}

}

}

}

"coblocks/accordion": {

"elements": {

"h2": {

"color": {

"text": "red",
"background": "black"

}

}

}

}

}}}
and without this patch element styles for the core and custom block displayed in the editor, but only the core block element style showed in the frontend. With this patch applied both element styles displayed in the editor and frontend.

Thanks for looking at this.