"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.

[audrasjb]

As per today's bug scrub and since 6.3 RC1 is planned tomorrow, let's move it to 6.4.
Feel free to remilestone it to 6.4 if you feel it can be committed in the next few hours.

[flixos90]

I have tested the PR and it works as expected. Note that there was already previous testing feedback on the PR with additional details, confirming that the fix works as expected: ​https://github.com/WordPress/wordpress-develop/pull/4174#issuecomment-1457122008

At this point the PR needs code review approval. I feel confident about the fix, but needless to say I'd like to have someone else review and approve as well.

Given this is a bug that can be quite limiting in block theme development, I'd love if we could get this committed before 6.3-RC1, so I'll set it back to the milestone for visibility and would appreciate a review. If it's approved, happy to commit this by tomorrow in time for RC release. Otherwise, we'd have to punt it but due to its nature I would prefer not to do that unless we really have to.

[flixos90]

In 56254:

Editor: Fix bug where it was not possible to style custom block elements in theme.json.

This changeset resolves a bug where WordPress would only allow HTML elements within core's own blocks to be styled in theme.json. Prior to this change, any theme.json rules applying to elements in custom blocks were ignored. With this fix it is now possible to style third-party block elements in theme.json.

Props flixos90, azaozz, costdev, glendaviesnz, spacedmonkey, oandregal.
Fixes #57868.

Committed in https://core.trac.wordpress.org/changeset/56254

[zpericic]

#59404 was marked as a duplicate.