Enable open on click for Page List inside Navigation. (#34675)

* Add a Dropdown block for use in Navigation * display dropdowns below buttons in editor * Add open on click functionality. * Adjustments to click behaviour. * Fix submenu logic * Transform nav links to submenus * Change block name to Submenu and update classnames * Add submenu transform to navigation link. * Remove button default styling * Don't split at end. * Add block fixture. * Fix php lint errors. * Update submenu icon classname. * Use Submenu in Page List conversion to blocks. * Don't lose children when transforming to Submenu. * Fix link conversion in Page List block. * Add link to empty submenu and default navigation class. * Introduce hover/click toggle on Navigation. * Don't add link in submenu straightaway. * Open link control on parent element when hover is set. * Always show icons when opening on click. * Open submenus on click in the editor. * Fix button styles and change toggle label. * Update navigation fixture and fix php lint errors. * Fix php lint error. * Fix php lint error. * Try hiding submenu in block inserter. * Update menu items to blocks conversion. * Update menu items to blocks test. * Fix navigation link top level item status. * Update and add new e2e test for open on click. * Fix undo/redo trap. * Fix styling for nested submenus in the editor. * Remove obsolete lint ignore * Display block label in list view. * Fix dropdown z-index * Switch toggle position * Enable open on click for Page List inside Nav. * Add doc comments. * Update e2e snapshot. * Simulate open on click in the editor. * Fix toggle dropdown styles. * Target direct parent in toggle script. * Update effect when context changes. * Update e2e snapshot. * Fix button styles.
WordPress · Sep 15, 2021 · d065e74 · d065e74
1 parent a9da8a9
commit d065e74
Show file tree

Hide file tree

Showing 12 changed files with 149 additions and 52 deletions.
diff --git a/packages/block-library/src/navigation-submenu/block.json b/packages/block-library/src/navigation-submenu/block.json
@@ -60,7 +60,6 @@
 		"reusable": false,
 		"html": false
 	},
-	"viewScript": "file:./view.min.js",
 	"editorStyle": "wp-block-navigation-submenu-editor",
 	"style": "wp-block-navigation-submenu"
 }
diff --git a/packages/block-library/src/navigation-submenu/index.php b/packages/block-library/src/navigation-submenu/index.php
@@ -123,9 +123,6 @@ function block_core_navigation_submenu_render_submenu_icon() {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation_submenu( $attributes, $content, $block ) {
-	if ( ! wp_script_is( 'wp-block-navigation-submenu-view' ) ) {
-		wp_enqueue_script( 'wp-block-navigation-submenu-view' );
-	}
 
 	$navigation_link_has_id = isset( $attributes['id'] ) && is_numeric( $attributes['id'] );
 	$is_post_type           = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind'];

diff --git a/packages/block-library/src/navigation-submenu/style.scss b/packages/block-library/src/navigation-submenu/style.scss
@@ -2,25 +2,9 @@
 	position: relative;
 	display: flex;
 
-	button.wp-block-navigation__submenu-icon.wp-block-navigation__submenu-icon.wp-block-navigation__submenu-icon.wp-block-navigation__submenu-icon {
-		padding: $grid-unit $grid-unit-20;
-		background-color: inherit;
-		color: currentColor;
-		border: none;
-	}
-
 	.wp-block-navigation__submenu-icon svg {
 		stroke: currentColor;
 	}
-
-	// Show submenus on click.
-	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
-		visibility: visible;
-		opacity: 1;
-		width: auto;
-		height: auto;
-		min-width: 200px;
-	}
 }
 
 button.wp-block-navigation-item__content {

diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -218,7 +218,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	unset( $attributes['rgbTextColor'], $attributes['rgbBackgroundColor'] );
 
-	$should_load_view_script = ! empty( $attributes['isResponsive'] ) && ! wp_script_is( 'wp-block-navigation-view' );
+	$should_load_view_script = ! wp_script_is( 'wp-block-navigation-view' ) && ( ! empty( $attributes['isResponsive'] ) || $attributes['openSubmenusOnClick'] || $attributes['showSubmenuIcon'] );
 	if ( $should_load_view_script ) {
 		wp_enqueue_script( 'wp-block-navigation-view' );
 	}

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -90,6 +90,14 @@
 			stroke: currentColor;
 		}
 	}
+
+	// Styles for button toggles.
+	button.wp-block-navigation__submenu-icon.wp-block-navigation__submenu-icon.wp-block-navigation__submenu-icon.wp-block-navigation__submenu-icon {
+		padding: $grid-unit $grid-unit-20;
+		background-color: inherit;
+		color: currentColor;
+		border: none;
+	}
 }
 
 // Styles for submenu flyout.
@@ -187,6 +195,15 @@
 		height: auto;
 		min-width: 200px;
 	}
+
+	// Show submenus on click.
+	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
+		visibility: visible;
+		opacity: 1;
+		width: auto;
+		height: auto;
+		min-width: 200px;
+	}
 }
 
 // Submenu indentation when there's a background.

diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
@@ -3,6 +3,7 @@
  */
 import MicroModal from 'micromodal';
 
+// Responsive navigation toggle.
 function navigationToggleModal( modal ) {
 	const triggerButton = document.querySelector(
 		`button[data-micromodal-trigger="${ modal.id }"]`
@@ -25,3 +26,69 @@ MicroModal.init( {
 	onClose: navigationToggleModal,
 	openClass: 'is-menu-open',
 } );
+
+// Open on click functionality.
+function closeSubmenus( element ) {
+	element
+		.querySelectorAll( '[aria-expanded="true"]' )
+		.forEach( function ( toggle ) {
+			toggle.setAttribute( 'aria-expanded', 'false' );
+		} );
+}
+
+function toggleSubmenuOnClick( event ) {
+	const buttonToggle = event.target.closest( '[aria-expanded]' );
+	const isSubmenuOpen = buttonToggle.getAttribute( 'aria-expanded' );
+
+	if ( isSubmenuOpen === 'true' ) {
+		closeSubmenus( buttonToggle.closest( '.wp-block-navigation-item' ) );
+	} else {
+		// Close all sibling submenus.
+		const parentElement = buttonToggle.closest(
+			'.wp-block-navigation-item'
+		);
+		const navigationParent = buttonToggle.closest(
+			'.wp-block-navigation__submenu-container, .wp-block-navigation__container, .wp-block-page-list'
+		);
+		navigationParent
+			.querySelectorAll( '.wp-block-navigation-item' )
+			.forEach( function ( child ) {
+				if ( child !== parentElement ) {
+					closeSubmenus( child );
+				}
+			} );
+		// Open submenu.
+		buttonToggle.setAttribute( 'aria-expanded', 'true' );
+	}
+}
+
+const submenuButtons = document.querySelectorAll(
+	'.wp-block-navigation-submenu__toggle'
+);
+
+submenuButtons.forEach( function ( button ) {
+	button.addEventListener( 'click', toggleSubmenuOnClick );
+} );
+
+// Close on click outside.
+document.addEventListener( 'click', function ( event ) {
+	const navigationBlocks = document.querySelectorAll(
+		'.wp-block-navigation'
+	);
+	navigationBlocks.forEach( function ( block ) {
+		if ( ! block.contains( event.target ) ) {
+			closeSubmenus( block );
+		}
+	} );
+} );
+// Close on focus outside.
+document.addEventListener( 'keyup', function ( event ) {
+	const submenuBlocks = document.querySelectorAll(
+		'.wp-block-navigation-item.has-child'
+	);
+	submenuBlocks.forEach( function ( block ) {
+		if ( ! block.contains( event.target ) ) {
+			closeSubmenus( block );
+		}
+	} );
+} );
diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json
@@ -33,6 +33,12 @@
 		},
 		"isNavigationChild": {
 			"type": "boolean"
+		},
+		"showSubmenuIcon": {
+			"type": "boolean"
+		},
+		"openSubmenusOnClick" : {
+			"type": "boolean"
 		}
 	},
 	"usesContext": [
@@ -47,7 +53,8 @@
 		"fontSize",
 		"customFontSize",
 		"showSubmenuIcon",
-		"style"
+		"style",
+		"openSubmenusOnClick"
 	],
 	"supports": {
 		"reusable": false,

diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
@@ -69,8 +69,7 @@ export default function PageListEdit( {
 		context.customOverlayBackgroundColor,
 	] );
 
-	const { textColor, backgroundColor, showSubmenuIcon, style } =
-		context || {};
+	const { textColor, backgroundColor, style } = context || {};
 
 	const [ allowConvertToLinks, setAllowConvertToLinks ] = useState( false );
 
@@ -83,7 +82,6 @@ export default function PageListEdit( {
 				'background-color',
 				backgroundColor
 			) ]: !! backgroundColor,
-			'show-submenu-icons': !! showSubmenuIcon,
 		} ),
 		style: { ...style?.color },
 	} );
@@ -100,8 +98,12 @@ export default function PageListEdit( {
 	);
 
 	useEffect( () => {
-		setAttributes( { isNavigationChild: isParentNavigation } );
-	}, [] );
+		setAttributes( {
+			isNavigationChild: isParentNavigation,
+			openSubmenusOnClick: !! context.openSubmenusOnClick,
+			showSubmenuIcon: !! context.showSubmenuIcon,
+		} );
+	}, [ context.openSubmenusOnClick, context.showSubmenuIcon ] );
 
 	useEffect( () => {
 		if ( isParentNavigation ) {
@@ -129,6 +131,8 @@ export default function PageListEdit( {
 	const attributesWithParentStatus = {
 		...attributes,
 		isNavigationChild: isParentNavigation,
+		openSubmenusOnClick: !! context.openSubmenusOnClick,
+		showSubmenuIcon: !! context.showSubmenuIcon,
 	};
 
 	return (

diff --git a/packages/block-library/src/page-list/editor.scss b/packages/block-library/src/page-list/editor.scss
@@ -50,3 +50,17 @@
 		margin-left: $grid-unit-15;
 	}
 }
+
+// Simulate open on click behaviour in the editor by opening on focus instead.
+
+.wp-block-page-list {
+	.open-on-click:focus-within {
+		> .wp-block-navigation__submenu-container {
+			visibility: visible;
+			opacity: 1;
+			width: auto;
+			height: auto;
+			min-width: 200px;
+		}
+	}
+}
diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
@@ -128,6 +128,8 @@ function block_core_page_list_build_css_font_sizes( $context ) {
 /**
  * Outputs Page list markup from an array of pages with nested children.
  *
+ * @param boolean $open_submenus_on_click Whether to open submenus on click instead of hover.
+ * @param boolean $show_submenu_icons Whether to show submenu indicator icons.
  * @param boolean $is_navigation_child If block is a child of Navigation block.
  * @param array   $nested_pages The array of nested pages.
  * @param array   $active_page_ancestor_ids An array of ancestor ids for active page.
@@ -136,7 +138,7 @@ function block_core_page_list_build_css_font_sizes( $context ) {
  *
  * @return string List markup.
  */
-function block_core_page_list_render_nested_page_list( $is_navigation_child, $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
+function block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
 	if ( empty( $nested_pages ) ) {
 		return;
 	}
@@ -152,6 +154,12 @@ function block_core_page_list_render_nested_page_list( $is_navigation_child, $ne
 
 		if ( $is_navigation_child ) {
 			$css_class .= ' wp-block-navigation-item';
+
+			if ( $open_submenus_on_click ) {
+				$css_class .= ' open-on-click';
+			} elseif ( $show_submenu_icons ) {
+				$css_class .= ' open-on-hover-click';
+			}
 		}
 
 		$navigation_child_content_class = $is_navigation_child ? ' wp-block-navigation-item__content' : '';
@@ -165,20 +173,32 @@ function block_core_page_list_render_nested_page_list( $is_navigation_child, $ne
 		}
 
 		$markup .= '<li class="wp-block-pages-list__item' . $css_class . '"' . $style_attribute . '>';
-		$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . ' "href="' . esc_url( $page['link'] ) . '">' . wp_kses(
-			$page['title'],
-			wp_kses_allowed_html( 'post' )
-		) . '</a>';
+
+		if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
+			$markup .= '<button class="' . $navigation_child_content_class . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . wp_kses(
+				$page['title'],
+				wp_kses_allowed_html( 'post' )
+			) . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
+			'</button>';
+		} else {
+			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . ' "href="' . esc_url( $page['link'] ) . '">' . wp_kses(
+				$page['title'],
+				wp_kses_allowed_html( 'post' )
+			) . '</a>';
+		}
+
 		if ( isset( $page['children'] ) ) {
-			if ( $is_navigation_child ) {
+			if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
+				$markup .= '<button class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
 				$markup .= '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
+				$markup .= '</button>';
 			}
 			$markup .= '<ul class="submenu-container';
 			// Extra classname is added when the block is a child of Navigation.
 			if ( $is_navigation_child ) {
 				$markup .= ' wp-block-navigation__submenu-container';
 			}
-			$markup .= '">' . block_core_page_list_render_nested_page_list( $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
+			$markup .= '">' . block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
 		}
 		$markup .= '</li>';
 	}
@@ -274,13 +294,13 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$is_navigation_child = array_key_exists( 'isNavigationChild', $attributes ) ? $attributes['isNavigationChild'] : ! empty( $block->context );
 
-	$wrapper_markup = '<ul %1$s>%2$s</ul>';
+	$open_submenus_on_click = array_key_exists( 'openSubmenusOnClick', $attributes ) ? $attributes['openSubmenusOnClick'] : false;
 
-	$items_markup = block_core_page_list_render_nested_page_list( $is_navigation_child, $nested_pages, $active_page_ancestor_ids, $colors );
+	$show_submenu_icons = array_key_exists( 'showSubmenuIcon', $attributes ) ? $attributes['showSubmenuIcon'] : false;
 
-	if ( $block->context && $block->context['showSubmenuIcon'] ) {
-		$css_classes .= ' show-submenu-icons';
-	}
+	$wrapper_markup = '<ul %1$s>%2$s</ul>';
+
+	$items_markup = block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $active_page_ancestor_ids, $colors );
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(

diff --git a/packages/block-library/src/page-list/style.scss b/packages/block-library/src/page-list/style.scss
@@ -11,18 +11,6 @@
 	.wp-block-navigation-item {
 		background-color: inherit;
 	}
-
-	// Submenu icon indicator.
-	// The specific styles for the submenu indicator are inherited from the navigation block style.
-	.wp-block-page-list__submenu-icon {
-		display: none;
-	}
-
-	.show-submenu-icons {
-		.wp-block-page-list__submenu-icon {
-			display: inline-block;
-		}
-	}
 }
 
 .is-vertical .wp-block-navigation__container,

diff --git a/packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap b/packages/e2e-tests/specs/experiments/blocks/__snapshots__/navigation.test.js.snap
@@ -40,7 +40,7 @@ exports[`Navigation Creating from existing Menus creates an empty navigation blo
 
 exports[`Navigation Creating from existing Pages allows a navigation block to be created using existing pages 1`] = `
 "<!-- wp:navigation -->
-<!-- wp:page-list {\\"isNavigationChild\\":true} /-->
+<!-- wp:page-list {\\"isNavigationChild\\":true,\\"showSubmenuIcon\\":true,\\"openSubmenusOnClick\\":false} /-->
 <!-- /wp:navigation -->"
 `;