[wp-trac] [WordPress Trac] #64838: Fix: Block pseudo-state styles incorrectly applied to default state

[WordPress Trac]

#64838: Fix: Block pseudo-state styles incorrectly applied to default state
--------------------------+-----------------------------
 Reporter:  onemaggie     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  General       |    Version:
 Severity:  normal        |   Keywords:
  Focuses:                |
--------------------------+-----------------------------
 Backport for https://github.com/WordPress/gutenberg/pull/76326/

 == What? ==

 When a block defines a custom feature selector in its {{{block.json}}}
 (e.g. {{{core/button}}} uses {{{.wp-block-button}}} for {{{writingMode}}}
 rather than the root {{{.wp-block-button .wp-block-button__link}}}),
 styles set on a pseudo-state like {{{:hover}}} via theme.json were being
 output under the default-state selector instead of the pseudo-state
 selector.

 == Why? ==

 This bug will become more apparent when there's a UI to change the state
 of the button block after
 https://github.com/WordPress/gutenberg/pull/75627 lands.

 == How? ==

 In {{{get_block_nodes}}}, the metadata node for a block pseudo-state was
 built with the original {{{$feature_selectors}}} (e.g. {{{.wp-block-
 button}}}) rather than the pseudo-scoped version (e.g. {{{.wp-block-
 button:hover}}}). The fix builds a {{{$pseudo_feature_selectors}}} array
 that appends the pseudo-selector to every feature selector string before
 the node is created.

 A test has been added to catch regressions.

 == Testing Instructions ==

 Add writing mode to a button block on hover in theme.json, check the
 frontend and you will see the CSS generated:

 Before: {{{:root :where(.wp-block-button) { writing-mode: vertical-rl;
 }}}}

 After: {{{:root :where(.wp-block-button:hover) { writing-mode: vertical-
 rl; }}}}

 The unit tests should all pass too.

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