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: |
|
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
@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.
theme.json
path.wp_add_global_styles_for_blocks()
.Trac ticket: https://core.trac.wordpress.org/ticket/57868