Changeset 56710 for trunk/src/wp-includes/blocks/navigation.php
- Timestamp:
- 09/26/2023 02:20:18 PM (3 years ago)
- File:
-
- 1 edited
-
trunk/src/wp-includes/blocks/navigation.php (modified) (12 diffs)
Legend:
- Unmodified
- Added
- Removed
-
trunk/src/wp-includes/blocks/navigation.php
r56076 r56710 66 66 return $menu_items_by_parent_id; 67 67 } 68 69 /** 70 * Add Interactivity API directives to the navigation-submenu and page-list blocks markup using the Tag Processor 71 * The final HTML of the navigation-submenu and the page-list blocks will look similar to this: 72 * 73 * <li 74 * class="has-child" 75 * data-wp-context='{ "core": { "navigation": { "isMenuOpen": false, "overlay": false } } }' 76 * data-wp-effect="effects.core.navigation.initMenu" 77 * data-wp-on.keydown="actions.core.navigation.handleMenuKeydown" 78 * data-wp-on.focusout="actions.core.navigation.handleMenuFocusout" 79 * > 80 * <button 81 * class="wp-block-navigation-submenu__toggle" 82 * data-wp-on.click="actions.core.navigation.openMenu" 83 * data-wp-bind.aria-expanded="context.core.navigation.isMenuOpen" 84 * > 85 * </button> 86 * <span>Title</span> 87 * <ul class="wp-block-navigation__submenu-container"> 88 * SUBMENU ITEMS 89 * </ul> 90 * </li> 91 * 92 * @param string $w Markup of the navigation block. 93 * @param array $block_attributes Block attributes. 94 * 95 * @return string Submenu markup with the directives injected. 96 */ 97 function block_core_navigation_add_directives_to_submenu( $w, $block_attributes ) { 98 while ( $w->next_tag( 68 } 69 70 71 /** 72 * Add Interactivity API directives to the navigation-submenu and page-list 73 * blocks markup using the Tag Processor. 74 * 75 * @param string $w Markup of the navigation block. 76 * @param array $block_attributes Block attributes. 77 * 78 * @return string Submenu markup with the directives injected. 79 */ 80 function block_core_navigation_add_directives_to_submenu( $w, $block_attributes ) { 81 while ( $w->next_tag( 82 array( 83 'tag_name' => 'LI', 84 'class_name' => 'has-child', 85 ) 86 ) ) { 87 // Add directives to the parent `<li>`. 88 $w->set_attribute( 'data-wp-interactive', true ); 89 $w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "submenuOpenedBy": {}, "type": "submenu" } } }' ); 90 $w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' ); 91 $w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' ); 92 $w->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' ); 93 if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) { 94 $w->set_attribute( 'data-wp-on--mouseenter', 'actions.core.navigation.openMenuOnHover' ); 95 $w->set_attribute( 'data-wp-on--mouseleave', 'actions.core.navigation.closeMenuOnHover' ); 96 } 97 98 // Add directives to the toggle submenu button. 99 if ( $w->next_tag( 99 100 array( 100 'tag_name' => ' LI',101 'class_name' => ' has-child',101 'tag_name' => 'BUTTON', 102 'class_name' => 'wp-block-navigation-submenu__toggle', 102 103 ) 103 104 ) ) { 104 // Add directives to the parent `<li>`. 105 $w->set_attribute( 'data-wp-interactive', true ); 106 $w->set_attribute( 'data-wp-context', '{ "core": { "navigation": { "isMenuOpen": { "click": false, "hover": false }, "overlay": false } } }' ); 107 $w->set_attribute( 'data-wp-effect', 'effects.core.navigation.initMenu' ); 108 $w->set_attribute( 'data-wp-on--focusout', 'actions.core.navigation.handleMenuFocusout' ); 109 $w->set_attribute( 'data-wp-on--keydown', 'actions.core.navigation.handleMenuKeydown' ); 110 if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) { 111 $w->set_attribute( 'data-wp-on--mouseenter', 'actions.core.navigation.openMenuOnHover' ); 112 $w->set_attribute( 'data-wp-on--mouseleave', 'actions.core.navigation.closeMenuOnHover' ); 113 } 114 115 // Add directives to the toggle submenu button. 116 if ( $w->next_tag( 117 array( 118 'tag_name' => 'BUTTON', 119 'class_name' => 'wp-block-navigation-submenu__toggle', 120 ) 121 ) ) { 122 $w->set_attribute( 'data-wp-on--click', 'actions.core.navigation.toggleMenuOnClick' ); 123 $w->set_attribute( 'data-wp-bind--aria-expanded', 'selectors.core.navigation.isMenuOpen' ); 124 }; 125 126 // Iterate through subitems if exist. 127 block_core_navigation_add_directives_to_submenu( $w, $block_attributes ); 128 } 129 return $w->get_updated_html(); 130 }; 131 132 /** 133 * Replaces view script for the Navigation block with version using Interactivity API. 134 * 135 * @param array $metadata Block metadata as read in via block.json. 136 * 137 * @return array Filtered block type metadata. 138 */ 139 function gutenberg_block_core_navigation_update_interactive_view_script( $metadata ) { 140 if ( 'core/navigation' === $metadata['name'] ) { 141 $metadata['viewScript'] = array( 'file:./interactivity.min.js' ); 142 } 143 return $metadata; 144 } 145 add_filter( 'block_type_metadata', 'gutenberg_block_core_navigation_update_interactive_view_script', 10, 1 ); 146 } 147 148 105 $w->set_attribute( 'data-wp-on--click', 'actions.core.navigation.toggleMenuOnClick' ); 106 $w->set_attribute( 'data-wp-bind--aria-expanded', 'selectors.core.navigation.isMenuOpen' ); 107 // The `aria-expanded` attribute for SSR is already added in the submenu block. 108 } 109 // Add directives to the submenu. 110 if ( $w->next_tag( 111 array( 112 'tag_name' => 'UL', 113 'class_name' => 'wp-block-navigation__submenu-container', 114 ) 115 ) ) { 116 $w->set_attribute( 'data-wp-on--focus', 'actions.core.navigation.openMenuOnFocus' ); 117 } 118 119 // Iterate through subitems if exist. 120 block_core_navigation_add_directives_to_submenu( $w, $block_attributes ); 121 } 122 return $w->get_updated_html(); 123 } 149 124 150 125 /** … … 277 252 } 278 253 279 280 281 282 283 254 /** 284 255 * Filter out empty "null" blocks from the block list. … … 293 264 $filtered = array_filter( 294 265 $parsed_blocks, 295 static function ( $block ) {266 static function ( $block ) { 296 267 return isset( $block['blockName'] ); 297 268 } … … 423 394 $is_fallback = false; 424 395 425 $nav_menu_name = '';396 $nav_menu_name = $attributes['ariaLabel'] ?? ''; 426 397 427 398 /** … … 559 530 560 531 // Manually add block support text decoration as CSS class. 561 $text_decoration = _wp_array_get( $attributes, array( 'style', 'typography', 'textDecoration' ), null );532 $text_decoration = $attributes['style']['typography']['textDecoration'] ?? null; 562 533 $text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration ); 563 534 … … 659 630 } 660 631 632 $should_load_view_script = ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) || $is_responsive_menu; 633 $view_js_file = 'wp-block-navigation-view'; 634 661 635 // If the script already exists, there is no point in removing it from viewScript. 662 $should_load_view_script = ( $is_responsive_menu || ( $has_submenus && ( $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] ) ) );663 $view_js_file = 'wp-block-navigation-view';664 636 if ( ! wp_script_is( $view_js_file ) ) { 665 637 $script_handles = $block->block_type->view_script_handles; … … 667 639 // If the script is not needed, and it is still in the `view_script_handles`, remove it. 668 640 if ( ! $should_load_view_script && in_array( $view_js_file, $script_handles, true ) ) { 669 $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file , 'wp-block-navigation-view-2') );641 $block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) ); 670 642 } 671 643 // If the script is needed, but it was previously removed, add it again. 672 644 if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) { 673 $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file , 'wp-block-navigation-view-2') );645 $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) ); 674 646 } 675 647 } 676 648 677 649 // Add directives to the submenu if needed. 678 if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN &&$has_submenus && $should_load_view_script ) {650 if ( $has_submenus && $should_load_view_script ) { 679 651 $w = new WP_HTML_Tag_Processor( $inner_blocks_html ); 680 652 $inner_blocks_html = block_core_navigation_add_directives_to_submenu( $w, $attributes ); … … 724 696 $responsive_dialog_directives = ''; 725 697 $close_button_directives = ''; 726 if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN &&$should_load_view_script ) {698 if ( $should_load_view_script ) { 727 699 $nav_element_directives = ' 728 700 data-wp-interactive 729 data-wp-context=\'{ "core": { "navigation": { " isMenuOpen": { "click": false, "hover": false }, "overlay": true, "roleAttribute": "" } } }\'701 data-wp-context=\'{ "core": { "navigation": { "overlayOpenedBy": {}, "type": "overlay", "roleAttribute": "" } } }\' 730 702 '; 731 703 $open_button_directives = ' … … 742 714 '; 743 715 $responsive_dialog_directives = ' 744 data-wp-bind--aria-modal="selectors.core.navigation. isMenuOpen"716 data-wp-bind--aria-modal="selectors.core.navigation.ariaModal" 745 717 data-wp-bind--role="selectors.core.navigation.roleAttribute" 746 718 data-wp-effect="effects.core.navigation.focusFirstElement" … … 752 724 753 725 $responsive_container_markup = sprintf( 754 '<button aria-haspopup="true" %3$s class="%6$s" data-micromodal-trigger="%1$s"%11$s>%9$s</button>726 '<button aria-haspopup="true" %3$s class="%6$s" %11$s>%9$s</button> 755 727 <div class="%5$s" style="%7$s" id="%1$s" %12$s> 756 <div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>728 <div class="wp-block-navigation__responsive-close" tabindex="-1"> 757 729 <div class="wp-block-navigation__responsive-dialog" aria-label="%8$s" %13$s> 758 <button %4$s data-micromodal-closeclass="wp-block-navigation__responsive-container-close" %14$s>%10$s</button>730 <button %4$s class="wp-block-navigation__responsive-container-close" %14$s>%10$s</button> 759 731 <div class="wp-block-navigation__responsive-container-content" id="%1$s-content"> 760 732 %2$s … … 839 811 840 812 /** 813 * Ensure that the view script has the `wp-interactivity` dependency. 814 * 815 * @since 6.4.0 816 * 817 * @global WP_Scripts $wp_scripts 818 */ 819 function block_core_navigation_ensure_interactivity_dependency() { 820 global $wp_scripts; 821 if ( 822 isset( $wp_scripts->registered['wp-block-navigation-view'] ) && 823 ! in_array( 'wp-interactivity', $wp_scripts->registered['wp-block-navigation-view']->deps, true ) 824 ) { 825 $wp_scripts->registered['wp-block-navigation-view']->deps[] = 'wp-interactivity'; 826 } 827 } 828 829 add_action( 'wp_print_scripts', 'block_core_navigation_ensure_interactivity_dependency' ); 830 831 /** 841 832 * Turns menu item data into a nested array of parsed blocks 842 833 * … … 931 922 usort( 932 923 $classic_nav_menus, 933 static function ( $a, $b ) {924 static function ( $a, $b ) { 934 925 return $b->term_id - $a->term_id; 935 926 }
Note:
See TracChangeset
for help on using the changeset viewer.
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)