Make WordPress Core

Opened 15 months ago

Closed 11 months ago

Last modified 8 months ago

#57868 closed defect (bug) (fixed)

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

Reported by: flixos90's profile flixos90 Owned by: flixos90's profile flixos90
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 (11)

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


15 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:


15 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:


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

#4 @oglekler
11 months ago

  • Keywords needs-testing added

This ticket was mentioned in Slack in #core by oglekler. View the logs.


11 months ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


11 months ago

#7 @audrasjb
11 months ago

  • Milestone changed from 6.3 to 6.4

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.

#8 @flixos90
11 months ago

  • Keywords needs-testing removed
  • Milestone changed from 6.4 to 6.3

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.

#9 @flixos90
11 months ago

  • Owner set to flixos90
  • Resolution set to fixed
  • Status changed from new to closed

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.

#11 @zpericic
8 months ago

#59404 was marked as a duplicate.

Note: See TracTickets for help on using tickets.