Make WordPress Core

Opened 3 months ago

Last modified 3 months ago

#57868 new defect (bug)

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

Reported by: flixos90's profile flixos90 Owned by:
Milestone: 6.3 Priority: normal
Severity: normal Version: 6.1
Component: Editor Keywords: has-patch has-unit-tests
Focuses: Cc:

Description

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.

Change History (3)

This ticket was mentioned in PR #4174 on WordPress/wordpress-develop by @flixos90.


3 months ago
#1

  • Keywords has-patch has-unit-tests added; needs-patch removed
  • 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

@flixos90 commented on PR #4174:


3 months ago
#2

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

@glendaviesnz commented on PR #4174:


3 months ago
#3

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.

Note: See TracTickets for help on using tickets.