Skip to content

Commit

Permalink
Polish experimental navigation block (#50670)
Browse files Browse the repository at this point in the history 
* Remove unnecessary `async` in `effects`

* Fix page list block and multiple submenus

* Use `requestUtils.createPage` in Page list tests

* Rename effect to `initMenu`

* Fix typo
  • Loading branch information
@SantosGuillamot
SantosGuillamot authored May 19, 2023
1 parent ac28fa6 commit f91be8d
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 23 deletions.
25 changes: 5 additions & 20 deletions lib/experimental/interactivity-api/blocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ function gutenberg_block_core_file_add_directives_to_content( $block_content, $b
* data-wp-class.has-modal-open="context.core.navigation.isMenuOpen"
* data-wp-class.is-menu-open="context.core.navigation.isMenuOpen"
* data-wp-bind.aria-hidden="!context.core.navigation.isMenuOpen"
* data-wp-effect="effects.core.navigation.initModal"
* data-wp-on.keydow="actions.core.navigation.handleMenuKeydown"
* data-wp-effect="effects.core.navigation.initMenu"
* data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
* data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
* tabindex="-1"
* >
Expand Down Expand Up @@ -97,21 +97,6 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
// If the open modal button not found, we handle submenus immediately.
$w = new WP_HTML_Tag_Processor( $w->get_updated_html() );

// Add directives to the menu container.
if ( $w->next_tag(
array(
'tag_name' => 'UL',
'class_name' => 'wp-block-navigation__container',
)
) ) {
$w->set_attribute( 'data-wp-class.is-menu-open', 'context.core.navigation.isMenuOpen' );
$w->set_attribute( 'data-wp-bind.aria-hidden', '!context.core.navigation.isMenuOpen' );
$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
$w->set_attribute( 'tabindex', '-1' );
};

gutenberg_block_core_navigation_add_directives_to_submenu( $w );

return $w->get_updated_html();
Expand All @@ -127,7 +112,7 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
$w->set_attribute( 'data-wp-class.has-modal-open', 'context.core.navigation.isMenuOpen' );
$w->set_attribute( 'data-wp-class.is-menu-open', 'context.core.navigation.isMenuOpen' );
$w->set_attribute( 'data-wp-bind.aria-hidden', '!context.core.navigation.isMenuOpen' );
$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
$w->set_attribute( 'tabindex', '-1' );
Expand Down Expand Up @@ -191,7 +176,7 @@ function gutenberg_block_core_navigation_add_directives_to_markup( $block_conten
* <span>Title</span>
* <ul
* class="wp-block-navigation__submenu-container"
* data-wp-effect="effects.core.navigation.initModal"
* data-wp-effect="effects.core.navigation.initMenu"
* data-wp-on.focusout="actions.core.navigation.handleMenuFocusout"
* data-wp-on.keydown="actions.core.navigation.handleMenuKeydown"
* >
Expand Down Expand Up @@ -233,7 +218,7 @@ function gutenberg_block_core_navigation_add_directives_to_submenu( $w ) {
'class_name' => 'wp-block-navigation__submenu-container',
)
) ) {
$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initModal' );
$w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' );
$w->set_attribute( 'data-wp-on.focusout', 'actions.core.navigation.handleMenuFocusout' );
$w->set_attribute( 'data-wp-on.keydown', 'actions.core.navigation.handleMenuKeydown' );
};
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/navigation/interactivity.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ store( {
effects: {
core: {
navigation: {
initModal: async ( { context, ref } ) => {
initMenu: ( { context, ref } ) => {
if ( context.core.navigation.isMenuOpen ) {
const focusableElements =
ref.querySelectorAll( focusableSelectors );
Expand All @@ -32,7 +32,7 @@ store( {
focusableElements[ focusableElements.length - 1 ];
}
},
focusFirstElement: async ( { context, ref } ) => {
focusFirstElement: ( { context, ref } ) => {
if ( context.core.navigation.isMenuOpen ) {
ref.querySelector(
'.wp-block-navigation-item > *:first-child'
Expand Down
67 changes: 66 additions & 1 deletion test/e2e/artifacts/storage-states/admin.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1,66 @@
{"cookies":[{"name":"wordpress_test_cookie","value":"WP%20Cookie%20check","domain":"localhost","path":"/","expires":-1,"httpOnly":false,"secure":false,"sameSite":"Lax"},{"name":"wordpress_23778236db82f19306f247e20a353a99","value":"admin%7C1684446357%7Cdx01QADx42SHH9s4ikPkhkS07FzxnWES5FY2SsnwL7v%7C45404d74460259bc9148f2357f2180af488d65921b10ed5981fff860afa5c8ca","domain":"localhost","path":"/wp-content/plugins","expires":-1,"httpOnly":true,"secure":false,"sameSite":"Lax"},{"name":"wordpress_23778236db82f19306f247e20a353a99","value":"admin%7C1684446357%7Cdx01QADx42SHH9s4ikPkhkS07FzxnWES5FY2SsnwL7v%7C45404d74460259bc9148f2357f2180af488d65921b10ed5981fff860afa5c8ca","domain":"localhost","path":"/wp-admin","expires":-1,"httpOnly":true,"secure":false,"sameSite":"Lax"},{"name":"wordpress_logged_in_23778236db82f19306f247e20a353a99","value":"admin%7C1684446357%7Cdx01QADx42SHH9s4ikPkhkS07FzxnWES5FY2SsnwL7v%7C8ace4a8f867bc4e587d5264662296f90fcd133710cd0dd3386a92801816bd5d1","domain":"localhost","path":"/","expires":-1,"httpOnly":true,"secure":false,"sameSite":"Lax"},{"name":"wp-settings-1","value":"editor%3Dtinymce","domain":"localhost","path":"/","expires":1715809558.14,"httpOnly":false,"secure":false,"sameSite":"Lax"},{"name":"wp-settings-time-1","value":"1684273558","domain":"localhost","path":"/","expires":1715809558.14,"httpOnly":false,"secure":false,"sameSite":"Lax"}],"nonce":"fe590a7aae","rootURL":"http://localhost:8889/index.php?rest_route=/"}
{
"cookies": [
{
"name": "wordpress_test_cookie",
"value": "WP%20Cookie%20check",
"domain": "localhost",
"path": "/",
"expires": -1,
"httpOnly": false,
"secure": false,
"sameSite": "Lax"
},
{
"name": "wordpress_23778236db82f19306f247e20a353a99",
"value": "admin%7C1684446357%7Cdx01QADx42SHH9s4ikPkhkS07FzxnWES5FY2SsnwL7v%7C45404d74460259bc9148f2357f2180af488d65921b10ed5981fff860afa5c8ca",
"domain": "localhost",
"path": "/wp-content/plugins",
"expires": -1,
"httpOnly": true,
"secure": false,
"sameSite": "Lax"
},
{
"name": "wordpress_23778236db82f19306f247e20a353a99",
"value": "admin%7C1684446357%7Cdx01QADx42SHH9s4ikPkhkS07FzxnWES5FY2SsnwL7v%7C45404d74460259bc9148f2357f2180af488d65921b10ed5981fff860afa5c8ca",
"domain": "localhost",
"path": "/wp-admin",
"expires": -1,
"httpOnly": true,
"secure": false,
"sameSite": "Lax"
},
{
"name": "wordpress_logged_in_23778236db82f19306f247e20a353a99",
"value": "admin%7C1684446357%7Cdx01QADx42SHH9s4ikPkhkS07FzxnWES5FY2SsnwL7v%7C8ace4a8f867bc4e587d5264662296f90fcd133710cd0dd3386a92801816bd5d1",
"domain": "localhost",
"path": "/",
"expires": -1,
"httpOnly": true,
"secure": false,
"sameSite": "Lax"
},
{
"name": "wp-settings-1",
"value": "editor%3Dtinymce",
"domain": "localhost",
"path": "/",
"expires": 1715809558.14,
"httpOnly": false,
"secure": false,
"sameSite": "Lax"
},
{
"name": "wp-settings-time-1",
"value": "1684273558",
"domain": "localhost",
"path": "/",
"expires": 1715809558.14,
"httpOnly": false,
"secure": false,
"sameSite": "Lax"
}
],
"nonce": "fe590a7aae",
"rootURL": "http://localhost:8889/index.php?rest_route=/"
}

0 comments on commit f91be8d

Please sign in to comment.