[Button Block]: add support for pseudo elements for the block and its variations on theme.json by MaggieCabrera · Pull Request #71418 · WordPress/gutenberg

MaggieCabrera · 2025-08-29T18:04:10Z

What?

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 #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"
						}
					}
				}
			}
		}
	}
}

Testing Instructions for Keyboard

Screenshots or screencast

github-actions · 2025-08-29T18:35:12Z

Flaky tests detected in af55dd7.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17399082575
📝 Reported issues:

[Flaky Test] Redirection after template creation #60678 in /test/e2e/specs/site-editor/site-editor-url-navigation.spec.js

github-actions · 2025-09-05T09:58:07Z

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 props-bot label.

Unlinked Accounts

The 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.

Unlinked contributors: pablost88, WinsleyJ.

Co-authored-by: MaggieCabrera <onemaggie@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: mikachan <mikachan@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: masteradhoc <masteradhoc@git.wordpress.org>
Co-authored-by: philhoyt <philhoyt@git.wordpress.org>
Co-authored-by: Zealth57 <elrae@git.wordpress.org>
Co-authored-by: joemcgill <joemcgill@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

MaggieCabrera · 2025-09-05T10:13:10Z

@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

jasmussen · 2025-09-05T10:48:46Z

I'll put it on my radar! Enjoy the break.

mikachan

This is working well! I've left a few small suggestions.

mikachan · 2025-11-19T21:17:01Z

 				$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 );


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?

Done in 005f04e

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

scruffian

Looking good!

iamtakashi · 2025-11-20T13:42:38Z

Nice! Thank you for working on this. I can remove another CSS :)

MaggieCabrera · 2026-03-04T12:30:51Z

This made it to 7.0 in the end. My draft for the dev notes is over here

jasmussen · 2026-03-04T13:34:29Z

Kudos! Nice work.

tellthemachines · 2026-04-21T03:11:02Z

+	 * @var array
+	 */
+	const VALID_BLOCK_PSEUDO_SELECTORS = array(
+		'core/button' => array( ':hover', ':focus', ':focus-visible', ':active' ),


Does this mean that third party blocks can't add support for styling pseudo states? Or will this support be added in the future?

tellthemachines · 2026-05-04T00:58:49Z

+		if ( ! isset( $block_options['include_block_style_variations'] ) ) {
+			$block_options['include_block_style_variations'] = true;
+		}
+		$block_nodes = static::get_block_nodes( $theme_json, $selectors, $block_options );


Unless I'm missing something, this defeats the purpose of passing include_block_style_variations as an option to get_style_nodes because now it's always going to be true. What problem were we trying to solve here?

simison mentioned this pull request Sep 2, 2025

Forms: Use Core buttons instead of Jetpack buttons Automattic/jetpack#45007

Closed

3 tasks

MaggieCabrera requested review from getdave, jeryj, matiasbenedetto, mikachan, richtabor and scruffian September 5, 2025 09:57

MaggieCabrera changed the title ~~WIP: getting pseudo elements support for blocks~~ Sep 5, 2025

MaggieCabrera added [Type] Enhancement A suggestion for improvement. [Block] Buttons Affects the Buttons Block labels Sep 5, 2025

MaggieCabrera marked this pull request as ready for review September 5, 2025 09:57

MaggieCabrera requested review from spacedmonkey and tellthemachines as code owners September 5, 2025 09:57

MaggieCabrera and others added 8 commits November 17, 2025 09:21

initial try to get pseudo elements to work on blocks

79c25b9

run php format

3ce94d4

refactor theme.json schema

3716d13

remove unused definition

e279758

add support for pseudo selectors inside variations

4a6e64e

remove redundant comments

82ed4a3

fix php errors

a863948

fix duotone test

37cb2fc

scruffian force-pushed the try-pseudoelements-blocks branch from af55dd7 to 37cb2fc Compare November 17, 2025 09:30

scruffian added 2 commits November 17, 2025 09:49

fix PHP linter

a1cc83f

add backport

a76d7d8

mikachan reviewed Nov 19, 2025

View reviewed changes

Update lib/class-wp-theme-json-gutenberg.php

f26e38b

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

scruffian and others added 5 commits November 20, 2025 08:21

Update lib/class-wp-theme-json-gutenberg.php

a7d75af

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

Update lib/class-wp-theme-json-gutenberg.php

6eb2dba

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

Update lib/class-wp-theme-json-gutenberg.php

5c834d4

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

Update lib/class-wp-theme-json-gutenberg.php

bd87a59

Co-authored-by: Sarah Norris <1645628+mikachan@users.noreply.github.com>

create a helper function to extract the block name

005f04e

scruffian approved these changes Nov 20, 2025

View reviewed changes

scruffian enabled auto-merge (squash) November 20, 2025 08:33

scruffian added 2 commits November 20, 2025 08:34

fix PHP linter

4604ff9

fix test

bd14372

scruffian merged commit a203fa4 into trunk Nov 20, 2025
34 checks passed

scruffian deleted the try-pseudoelements-blocks branch November 20, 2025 11:38

github-actions Bot added this to the Gutenberg 22.2 milestone Nov 20, 2025

bgardner mentioned this pull request Nov 20, 2025

Button block: add support for pseudo elements. bgardner/powder#85

Closed

github-actions Bot mentioned this pull request Dec 16, 2025

PHP backports for WP 7.0 #74043

Closed

hchouhan mentioned this pull request Jan 24, 2026

Remove button hover CSS from theme.json when WordPress 7.0 is released webtions/shanti#5

Open

t-hamano mentioned this pull request Mar 2, 2026

7.0 Dev Note Tracking #75815

Closed

14 tasks

t-hamano mentioned this pull request Mar 7, 2026

theme.json schema: fix pseudo-class definition for button block #76272

Merged

tellthemachines mentioned this pull request Mar 28, 2026

Fix pseudo selector block style rendering in the editor #76879

Merged

tellthemachines reviewed Apr 21, 2026

View reviewed changes

tellthemachines reviewed May 4, 2026

View reviewed changes

ramonjd mentioned this pull request Jun 2, 2026

Add responsive global styles for blocks WordPress/wordpress-develop#11706

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[Button Block]: add support for pseudo elements for the block and its variations on theme.json - #71418

[Button Block]: add support for pseudo elements for the block and its variations on theme.json#71418
scruffian merged 18 commits into
trunkfrom
try-pseudoelements-blocks

MaggieCabrera commented Aug 29, 2025 •

edited

Loading

github-actions Bot commented Aug 29, 2025 •

edited

Loading

github-actions Bot commented Sep 5, 2025 •

edited

Loading

MaggieCabrera commented Sep 5, 2025

jasmussen commented Sep 5, 2025

mikachan left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mikachan Nov 19, 2025

scruffian Nov 20, 2025

Uh oh!

scruffian left a comment

Uh oh!

iamtakashi commented Nov 20, 2025

MaggieCabrera commented Mar 4, 2026 •

edited

Loading

jasmussen commented Mar 4, 2026

tellthemachines Apr 21, 2026

tellthemachines May 4, 2026

Labels

6 participants

Uh oh!

Conversation

MaggieCabrera commented Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

github-actions Bot commented Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

github-actions Bot commented Sep 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unlinked Accounts

MaggieCabrera commented Sep 5, 2025

jasmussen commented Sep 5, 2025

mikachan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

mikachan Nov 19, 2025

Choose a reason for hiding this comment

scruffian Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

scruffian left a comment

Choose a reason for hiding this comment

Uh oh!

iamtakashi commented Nov 20, 2025

MaggieCabrera commented Mar 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

jasmussen commented Mar 4, 2026

tellthemachines Apr 21, 2026

Choose a reason for hiding this comment

tellthemachines May 4, 2026

Choose a reason for hiding this comment

Labels

6 participants

MaggieCabrera commented Aug 29, 2025 •

edited

Loading

github-actions Bot commented Aug 29, 2025 •

edited

Loading

github-actions Bot commented Sep 5, 2025 •

edited

Loading

MaggieCabrera commented Mar 4, 2026 •

edited

Loading