Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Experiment: Replicate Navigation block using directives (Alpinejs) #44289

Closed
wants to merge 10 commits into from
Closed

Experiment: Replicate Navigation block using directives (Alpinejs) #44289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7de6de2
Merge branch 'trunk' into navigation-block-with-directives
SantosGuillamot Sep 19, 2022
cc19f6a
Replace micromodal for Alpinejs directives
SantosGuillamot Sep 20, 2022
c44fbb7
Remove micromodal attributes
SantosGuillamot Sep 20, 2022
c406a3d
Focus first element of the menu
SantosGuillamot Sep 20, 2022
473f140
Go back to hamburger button when closing modal
SantosGuillamot Sep 21, 2022
a134608
Remove scripts versions to prevent redirections
SantosGuillamot Sep 21, 2022
0a0598f
Move focus logic to x-effect
luisherranz Sep 21, 2022
b4ebb34
Change view.js in navigation block for directives
SantosGuillamot Sep 22, 2022
31871e8
Fix linting errors
SantosGuillamot Sep 23, 2022
df54ee4
Fix more linting errors
SantosGuillamot Sep 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions packages/block-library/src/navigation-submenu/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,10 +157,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {

$wrapper_attributes = get_block_wrapper_attributes(
array(
'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) .
'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) .
( $open_on_click ? ' open-on-click' : '' ) . ( $open_on_hover_and_click ? ' open-on-hover-click' : '' ) .
( $is_active ? ' current-menu-item' : '' ),
'style' => $style_attribute,
'style' => $style_attribute,
'x-data' => '{open: false}',
'x-on:click.outside' => 'open = false',
'x-on:keydown.escape' => 'open = false',
)
);

Expand Down Expand Up @@ -214,11 +217,11 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
if ( $show_submenu_indicators ) {
// The submenu icon is rendered in a button here
// so that there's a clickable element to open the submenu.
$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
$html .= '<button x-on:click="open = ! open" aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" :aria-expanded="open ? true : false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
}
} else {
// If menus open on click, we render the parent as a button.
$html .= '<button aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
$html .= '<button x-on:click="open = ! open" aria-label="' . esc_attr( $aria_label ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" :aria-expanded="open ? true : false"';

// Wrap title with span to isolate it from submenu icon.
$html .= '<span class="wp-block-navigation-item__label">';
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/navigation/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,7 +130,6 @@
}
}
},
"viewScript": [ "file:./view.min.js", "file:./view-modal.min.js" ],
"editorStyle": "wp-block-navigation-editor",
"style": "wp-block-navigation"
}
47 changes: 32 additions & 15 deletions packages/block-library/src/navigation/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -421,15 +421,26 @@ function render_block_core_navigation( $attributes, $content, $block ) {
*/
$has_old_responsive_attribute = ! empty( $attributes['isResponsive'] ) && $attributes['isResponsive'];
$is_responsive_menu = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'] || $has_old_responsive_attribute;
$should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( $is_responsive_menu || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
if ( $should_load_view_script ) {
wp_enqueue_script( 'wp-block-navigation-view' );
}

$should_load_modal_view_script = isset( $attributes['overlayMenu'] ) && 'never' !== $attributes['overlayMenu'];
if ( $should_load_modal_view_script ) {
wp_enqueue_script( 'wp-block-navigation-view-modal' );
}
// Register @alpine/focus plugin.
wp_register_script(
'AlpineJS_focus',
'https://unpkg.com/@alpinejs/focus@3.10.3/dist/cdn.min.js',
array(),
null,
true // Load it in the footer.
);
wp_enqueue_script( 'AlpineJS_focus' );

// Register Alpine.
wp_register_script(
'AlpineJS',
'https://unpkg.com/alpinejs@3.10.3/dist/cdn.min.js',
array( 'AlpineJS_focus' ),
null,
true // Load it in the footer.
);
wp_enqueue_script( 'AlpineJS' );

$inner_blocks = $block->inner_blocks;

Expand Down Expand Up @@ -559,7 +570,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
foreach ( $inner_blocks as $inner_block ) {
if ( ( 'core/navigation-link' === $inner_block->name || 'core/home-link' === $inner_block->name || 'core/site-title' === $inner_block->name || 'core/site-logo' === $inner_block->name || 'core/navigation-submenu' === $inner_block->name ) && ! $is_list_open ) {
$is_list_open = true;
$inner_blocks_html .= '<ul class="wp-block-navigation__container">';
$inner_blocks_html .= '<ul x-ref="items" class="wp-block-navigation__container">';
}
if ( 'core/navigation-link' !== $inner_block->name && 'core/home-link' !== $inner_block->name && 'core/site-title' !== $inner_block->name && 'core/site-logo' !== $inner_block->name && 'core/navigation-submenu' !== $inner_block->name && $is_list_open ) {
$is_list_open = false;
Expand Down Expand Up @@ -632,11 +643,17 @@ function render_block_core_navigation( $attributes, $content, $block ) {
$toggle_aria_label_close = $should_display_icon_label ? 'aria-label="' . __( 'Close menu' ) . '"' : ''; // Close button label.

$responsive_container_markup = sprintf(
'<button aria-haspopup="true" %3$s class="%6$s" data-micromodal-trigger="%1$s">%9$s</button>
<div class="%5$s" style="%7$s" id="%1$s">
<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
<button %4$s data-micromodal-close class="wp-block-navigation__responsive-container-close">%10$s</button>
'<button x-ref="hamburger" x-on:click="open = true" aria-haspopup="true" %3$s class="%6$s">%9$s</button>
<div
x-on:keydown.escape="open = false"
:class="open && \'is-menu-open\ has-modal-open\'"
:aria-hidden="open ? false : true"
class="%5$s" style="%7$s"
id="%1$s"
>
<div class="wp-block-navigation__responsive-close" tabindex="-1">
<div x-trap="open" x-effect="open === true ? $focus.within($refs.items).first() : $focus.focus($refs.hamburger)" class="wp-block-navigation__responsive-dialog" aria-label="%8$s" aria-modal="true" role="dialog">
<button x-on:click="open = false" %4$s class="wp-block-navigation__responsive-container-close">%10$s</button>
<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
%2$s
</div>
Expand All @@ -656,7 +673,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
);

return sprintf(
'<nav %1$s>%2$s</nav>',
'<nav %1$s x-data="{open: false}">%2$s</nav>',
$wrapper_attributes,
$responsive_container_markup
);
Expand Down
68 changes: 0 additions & 68 deletions packages/block-library/src/navigation/view-modal.js
View file
Open in desktop

This file was deleted.

74 changes: 0 additions & 74 deletions packages/block-library/src/navigation/view.js
View file
Open in desktop

This file was deleted.