[Button Block]: add support for pseudo elements for the block and its variations on theme.json #71418
Conversation
| Flaky tests detected in af55dd7. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17399082575
|
MaggieCabrera requested review from getdave, jeryj, matiasbenedetto, mikachan, richtabor and scruffian MaggieCabrera changed the title MaggieCabrera added [Type] Enhancement MaggieCabrera requested review from spacedmonkey and tellthemachines as code owners | The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @pablost88, @WinsleyJ. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
| @jasmussen I'm going on sabbatical before this is going to land, but maybe we can figure out a UI for this even if we iterate on it later? I think it would be a big win, as you know there's been a lot of feedback asking for this feature over at #38277 |
| I'll put it on my radar! Enjoy the break. |
scruffian force-pushed the try-pseudoelements-blocks branch from af55dd7 to 37cb2fc Compare 
mikachan left a comment
mikachan left a comment There was a problem hiding this comment.
This is working well! I've left a few small suggestions.
| $style_variation_declarations[ $style_variation['selector'] ] = static::compute_style_properties( $style_variation_node, $settings, null, $this->theme_json ); | ||
| | ||
| // Process pseudo-selectors for this variation (e.g., :hover, :focus) | ||
| $block_name = isset( $block_metadata['name'] ) ? $block_metadata['name'] : ( in_array( 'blocks', $block_metadata['path'], true ) && count( $block_metadata['path'] ) >= 3 ? $block_metadata['path'][2] : null ); |
There was a problem hiding this comment.
We're extracting the block name in three different places (line 2994, 3028, and 3070. Maybe we could move this to a helper function so it's extracted consistently in each place?
Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>
Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>
Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>
Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>
Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>
| Nice! Thank you for working on this. I can remove another CSS :) |
What?
Closes #55359
Adds support for pseudo elements on the
core/buttonblock 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 #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:
Testing Instructions for Keyboard
Screenshots or screencast