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

[WordPress Trac]

#64263: Backport: Add support for pseudo classes 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                    |  Resolution:
 Keywords:  has-patch has-unit-tests  |     Focuses:
--------------------------------------+---------------------

Old description:

> == 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)]]

New description:

 == What?
 Backport for https://github.com/WordPress/gutenberg/pull/71418

 Adds support for pseudo classes 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 classes,
 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 classes 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 classes 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)]]

--

Comment (by joedolson):

 @scruffian So this ticket is more clear, I'm correcting the text in this
 issue from `pseudo elements` to `pseudo classes`, since that's what this
 is actually about.

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