[wp-trac] [WordPress Trac] #64263: Backport: Add support for pseudo elements for the block and its variations on theme.json

[WordPress Trac]

#64263: Backport: Add support for pseudo elements for the block and its variations
on theme.json
--------------------------+-----------------------
 Reporter:  scruffian     |      Owner:  (none)
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  7.0
Component:  Editor        |    Version:
 Severity:  normal        |   Keywords:  has-patch
  Focuses:                |
--------------------------+-----------------------
 == What?
 Backport for https://github.com/WordPress/gutenberg/pull/71418

 Adds support for pseudo elements on the `core/button` block for (
 ':hover', ':focus', ':focus-visible', ':active' ) at the theme.json level.
 This is also allowing the block's variations to control the same pseudo
 elements, so now we can style hover for the outline variation too.

 == Why?
 This is needed ahead of
 https://github.com/WordPress/gutenberg/issues/38277 since right now we are
 only supporting pseudo elements on links and button elements, we also want
 to support them at the block level. This PR brings them in alignment and
 opens the door to support things like :hover for other blocks that don't
 have an element (like group for example)

 == How?
 By allowing the pseudo elements for the specific blocks in
 VALID_BLOCK_PSEUDO_SELECTORS, in a similar way we do for elements.

 == Testing Instructions
 Add the following to your theme and check that it behaves as expected on
 the frontend:

 {{{
 "styles": {
         "blocks": {
                 "core/button": {
                         "color": {
                                 "background": "blue"
                         },
                         ":hover": {
                                 "color": {
                                         "background": "green"
                                 }
                         },
                         ":focus": {
                                 "color": {
                                         "background": "purple"
                                 }
                         },
                         "variations": {
                                 "outline": {
                                         ":hover": {
                                                 "color": {
                                                         "background":
 "pink"
                                                 }
                                         }
                                 }
                         }
                 }
         }
 }
 }}}

 == Screenshots

 [[Image(https://github.com/user-
 attachments/assets/7e215a0c-f841-4650-b2a0-a2d2f3f4dd49)]]

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