[wp-trac] [WordPress Trac] #57868: "elements" styles for custom blocks in `theme.json` are ignored / not loaded

[WordPress Trac]

#57868: "elements" styles for custom blocks in `theme.json` are ignored / not
loaded
--------------------------+-------------------------
 Reporter:  flixos90      |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  6.3
Component:  Editor        |    Version:  6.1
 Severity:  normal        |   Keywords:  needs-patch
  Focuses:                |
--------------------------+-------------------------
 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
 [https://github.com/WordPress/wordpress-
 develop/blob/6eeeeaaea5c42bc4f33b62113ff5cb53a03ca3d3/src/wp-includes
 /global-styles-and-settings.php#L359-L362 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/57868>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform