Skip to content

Commit 43f60f4

Browse files
audrasjbaudrasjb
committed
Editor: Support the current state for Navigation Submenu in theme.json.
This changeset backports the `WP_Theme_JSON` changes from GB76367, and is a follow-up to #64806. Themes can style the current link inside a Navigation Submenu dropdown with `-current` on `core/navigation-submenu` in `theme.json`, including its `:hover`, `:focus`, `:focus-visible` and `:active states`. The block's `selectors.states` selector arrives with the Gutenberg package sync, so the new test uses `get_styles_for_block()` with explicit style nodes, like the existing custom state tests. Developed in: - #14284 - WordPress/gutenberg#76367 Follow-up to #62641. Props onemaggie. Fixes #66312. See #64806. git-svn-id: https://develop.svn.wordpress.org/trunk@64600 602fd350-edb4-49c9-b593-d223f7449a82
1 parent 00dc70f commit 43f60f4

2 files changed

Lines changed: 57 additions & 3 deletions

File tree

‎src/wp-includes/class-wp-theme-json.php‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -685,11 +685,13 @@ class WP_Theme_JSON {
685685
* The valid pseudo-selectors that can be used for blocks.
686686
*
687687
* @since 7.0
688+
* @since 7.2.0 Added `core/navigation-submenu`.
688689
* @var array
689690
*/
690691
const VALID_BLOCK_PSEUDO_SELECTORS = array(
691-
'core/button' => array( ':hover', ':focus', ':focus-visible', ':active' ),
692-
'core/navigation-link' => array( ':hover', ':focus', ':focus-visible', ':active' ),
692+
'core/button' => array( ':hover', ':focus', ':focus-visible', ':active' ),
693+
'core/navigation-link' => array( ':hover', ':focus', ':focus-visible', ':active' ),
694+
'core/navigation-submenu' => array( ':hover', ':focus', ':focus-visible', ':active' ),
693695
);
694696

695697
/**
@@ -708,10 +710,12 @@ class WP_Theme_JSON {
708710
* `.wp-block-navigation-item.current-menu-item:hover`.
709711
*
710712
* @since 7.1.0
713+
* @since 7.2.0 Added `core/navigation-submenu`.
711714
* @var array
712715
*/
713716
const VALID_BLOCK_CUSTOM_STATES = array(
714-
'core/navigation-link' => array( '-current' ),
717+
'core/navigation-link' => array( '-current' ),
718+
'core/navigation-submenu' => array( '-current' ),
715719
);
716720

717721
/**

‎tests/phpunit/tests/theme/wpThemeJson.php‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10062,6 +10062,56 @@ public function test_block_custom_states_ignores_non_whitelisted() {
1006210062
$this->assertStringNotContainsString( 'current-menu-item', $stylesheet_unsupported );
1006310063
}
1006410064

10065+
/**
10066+
* Test that core/navigation-submenu supports -current and its pseudo-selectors
10067+
* independently from core/navigation-link, using its own CSS selector.
10068+
*
10069+
* @covers WP_Theme_JSON::get_styles_for_block
10070+
*
10071+
* @ticket 66312
10072+
*/
10073+
public function test_block_custom_states_navigation_submenu() {
10074+
$theme_json = new WP_Theme_JSON(
10075+
array(
10076+
'version' => WP_Theme_JSON::LATEST_SCHEMA,
10077+
'styles' => array(
10078+
'blocks' => array(
10079+
'core/navigation-submenu' => array(
10080+
'-current' => array(
10081+
'color' => array(
10082+
'text' => 'red',
10083+
'background' => 'blue',
10084+
),
10085+
':hover' => array(
10086+
'color' => array(
10087+
'text' => 'white',
10088+
),
10089+
),
10090+
),
10091+
),
10092+
),
10093+
),
10094+
)
10095+
);
10096+
10097+
$current_node = array(
10098+
'path' => array( 'styles', 'blocks', 'core/navigation-submenu', '-current' ),
10099+
'selector' => '.wp-block-navigation .wp-block-navigation-submenu .current-menu-item',
10100+
);
10101+
$hover_node = array(
10102+
'path' => array( 'styles', 'blocks', 'core/navigation-submenu', '-current', ':hover' ),
10103+
'selector' => '.wp-block-navigation .wp-block-navigation-submenu .current-menu-item:hover',
10104+
);
10105+
10106+
$expected = ':root :where(.wp-block-navigation .wp-block-navigation-submenu .current-menu-item){background-color: blue;color: red;}';
10107+
$expected .= ':root :where(.wp-block-navigation .wp-block-navigation-submenu .current-menu-item:hover){color: white;}';
10108+
10109+
$actual = $theme_json->get_styles_for_block( $current_node );
10110+
$actual .= $theme_json->get_styles_for_block( $hover_node );
10111+
10112+
$this->assertSame( $expected, $actual );
10113+
}
10114+
1006510115
/**
1006610116
* Tests that append_to_selector correctly appends to single and
1006710117
* compound (comma-separated) selectors.

0 commit comments

Comments
 (0)