Add generic classnames to children of Navigation (#33918)

* Add generic classnames to children of Navigation * Make server side render recognise navigation child logic * Add generic class to submenu containers. * Fix render issue * Add doc comment and fix php linting issues * Add generic class to submenu icons. * Update test snapshots and fix php lint issues.
WordPress · Aug 12, 2021 · 65b18b9 · 65b18b9
1 parent e65a777
commit 65b18b9
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 33 deletions.
diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js
@@ -34,7 +34,7 @@ export default function HomeEdit( {
 
 	const { textColor, backgroundColor, style } = context;
 	const blockProps = useBlockProps( {
-		className: classnames( {
+		className: classnames( 'wp-block-navigation-item', {
 			'has-text-color': !! textColor || !! style?.color?.text,
 			[ `has-${ textColor }-color` ]: !! textColor,
 			'has-background': !! backgroundColor || !! style?.color?.background,
@@ -58,7 +58,7 @@ export default function HomeEdit( {
 		<>
 			<div { ...blockProps }>
 				<a
-					className="wp-block-home-link__content"
+					className="wp-block-home-link__content wp-block-navigation-item__content"
 					href={ homeUrl }
 					onClick={ preventDefault }
 				>

diff --git a/packages/block-library/src/home-link/index.php b/packages/block-library/src/home-link/index.php
@@ -99,7 +99,7 @@ function block_core_home_link_build_li_wrapper_attributes( $context ) {
 		$font_sizes['css_classes']
 	);
 	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
-	$css_classes     = trim( implode( ' ', $classes ) );
+	$css_classes     = trim( implode( ' ', $classes ) ) . ' wp-block-navigation-item';
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
@@ -127,7 +127,7 @@ function render_block_core_home_link( $attributes, $content, $block ) {
 
 	$wrapper_attributes = block_core_home_link_build_li_wrapper_attributes( $block->context );
 
-	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content"';
+	$html = '<li ' . $wrapper_attributes . '><a class="wp-block-home-link__content wp-block-navigation-item__content"';
 
 	// Start appending HTML attributes to anchor tag.
 	$html .= ' href="' . esc_url( home_url() ) . '"';

diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -469,7 +469,7 @@ export default function NavigationLinkEdit( {
 
 	const blockProps = useBlockProps( {
 		ref: listItemRef,
-		className: classnames( {
+		className: classnames( 'wp-block-navigation-item', {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
@@ -496,19 +496,23 @@ export default function NavigationLinkEdit( {
 	const innerBlocksColors = getColors( context, true );
 	const innerBlocksProps = useInnerBlocksProps(
 		{
-			className: classnames( 'wp-block-navigation-link__container', {
-				'is-parent-of-selected-block': isParentOfSelectedBlock,
-				'has-text-color': !! (
-					innerBlocksColors.textColor ||
-					innerBlocksColors.customTextColor
-				),
-				[ `has-${ innerBlocksColors.textColor }-color` ]: !! innerBlocksColors.textColor,
-				'has-background': !! (
-					innerBlocksColors.backgroundColor ||
-					innerBlocksColors.customBackgroundColor
-				),
-				[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]: !! innerBlocksColors.backgroundColor,
-			} ),
+			className: classnames(
+				'wp-block-navigation-link__container',
+				'wp-block-navigation__submenu-container',
+				{
+					'is-parent-of-selected-block': isParentOfSelectedBlock,
+					'has-text-color': !! (
+						innerBlocksColors.textColor ||
+						innerBlocksColors.customTextColor
+					),
+					[ `has-${ innerBlocksColors.textColor }-color` ]: !! innerBlocksColors.textColor,
+					'has-background': !! (
+						innerBlocksColors.backgroundColor ||
+						innerBlocksColors.customBackgroundColor
+					),
+					[ `has-${ innerBlocksColors.backgroundColor }-background-color` ]: !! innerBlocksColors.backgroundColor,
+				}
+			),
 			style: {
 				color: innerBlocksColors.customTextColor,
 				backgroundColor: innerBlocksColors.customBackgroundColor,
@@ -527,9 +531,13 @@ export default function NavigationLinkEdit( {
 		}
 	);
 
-	const classes = classnames( 'wp-block-navigation-link__content', {
-		'wp-block-navigation-link__placeholder': ! url,
-	} );
+	const classes = classnames(
+		'wp-block-navigation-link__content',
+		'wp-block-navigation-item__content',
+		{
+			'wp-block-navigation-link__placeholder': ! url,
+		}
+	);
 
 	let missingText = '';
 	switch ( type ) {
@@ -712,7 +720,7 @@ export default function NavigationLinkEdit( {
 						</Popover>
 					) }
 					{ hasDescendants && showSubmenuIcon && (
-						<span className="wp-block-navigation-link__submenu-icon">
+						<span className="wp-block-navigation-link__submenu-icon wp-block-navigation__submenu-icon">
 							<ItemSubmenuIcon />
 						</span>
 					) }

diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
@@ -160,13 +160,13 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => $css_classes . ( $has_submenu ? ' has-child' : '' ) .
+			'class' => $css_classes . ' wp-block-navigation-item' . ( $has_submenu ? ' has-child' : '' ) .
 				( $is_active ? ' current-menu-item' : '' ),
 			'style' => $style_attribute,
 		)
 	);
 	$html               = '<li ' . $wrapper_attributes . '>' .
-		'<a class="wp-block-navigation-link__content" ';
+		'<a class="wp-block-navigation-link__content wp-block-navigation-item__content" ';
 
 	// Start appending HTML attributes to anchor tag.
 	if ( isset( $attributes['url'] ) ) {
@@ -220,7 +220,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 
 	if ( isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) {
 		// The submenu icon can be hidden by a CSS rule on the Navigation Block.
-		$html .= '<span class="wp-block-navigation-link__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
+		$html .= '<span class="wp-block-navigation-link__submenu-icon wp-block-navigation__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
 	}
 
 	$html .= '</a>';
@@ -233,7 +233,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		}
 
 		$html .= sprintf(
-			'<ul class="wp-block-navigation-link__container">%s</ul>',
+			'<ul class="wp-block-navigation-link__container wp-block-navigation__submenu-container">%s</ul>',
 			$inner_blocks_html
 		);
 	}

diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json
@@ -30,6 +30,9 @@
 		},
 		"customOverlayTextColor": {
 			"type": "string"
+		},
+		"isNavigationChild": {
+			"type": "boolean"
 		}
 	},
 	"usesContext": [

diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -69,6 +70,11 @@ export default function PageListEdit( {
 		context.customOverlayBackgroundColor,
 	] );
 
+	useEffect( () => {
+		const isNavigationChild = isEmpty( context ) ? false : true;
+		setAttributes( { isNavigationChild } );
+	}, [] );
+
 	const { textColor, backgroundColor, showSubmenuIcon, style } =
 		context || {};
 

diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php
@@ -128,14 +128,15 @@ function block_core_page_list_build_css_font_sizes( $context ) {
 /**
  * Outputs Page list markup from an array of pages with nested children.
  *
+ * @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.
  * @param array   $colors Color information for overlay styles.
  * @param integer $depth The nesting depth.
  *
  * @return string List markup.
  */
-function block_core_page_list_render_nested_page_list( $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
+function block_core_page_list_render_nested_page_list( $is_navigation_child, $nested_pages, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) {
 	if ( empty( $nested_pages ) ) {
 		return;
 	}
@@ -149,6 +150,12 @@ function block_core_page_list_render_nested_page_list( $nested_pages, $active_pa
 			$css_class .= ' has-child';
 		}
 
+		if ( $is_navigation_child ) {
+			$css_class .= ' wp-block-navigation-item';
+		}
+
+		$navigation_child_content_class = $is_navigation_child ? ' wp-block-navigation-item__content' : '';
+
 		// If this is the first level of submenus, include the overlay colors.
 		if ( 1 === $depth && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) {
 			$css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) );
@@ -158,13 +165,20 @@ function block_core_page_list_render_nested_page_list( $nested_pages, $active_pa
 		}
 
 		$markup .= '<li class="wp-block-pages-list__item' . $css_class . '"' . $style_attribute . '>';
-		$markup .= '<a class="wp-block-pages-list__item__link" href="' . esc_url( $page['link'] ) . '">' . wp_kses(
+		$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'] ) ) {
-			$markup .= '<span class="wp-block-page-list__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 .= '<ul class="submenu-container">' . block_core_page_list_render_nested_page_list( $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '</ul>';
+			if ( $is_navigation_child ) {
+				$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 .= '<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 .= '</li>';
 	}
@@ -258,9 +272,11 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
 
+	$is_navigation_child = array_key_exists( 'isNavigationChild', $attributes ) ? $attributes['isNavigationChild'] : ! empty( $block->context );
+
 	$wrapper_markup = '<ul %1$s>%2$s</ul>';
 
-	$items_markup = block_core_page_list_render_nested_page_list( $nested_pages, $active_page_ancestor_ids, $colors );
+	$items_markup = block_core_page_list_render_nested_page_list( $is_navigation_child, $nested_pages, $active_page_ancestor_ids, $colors );
 
 	if ( $block->context && $block->context['showSubmenuIcon'] ) {
 		$css_classes .= ' show-submenu-icons';

diff --git a/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap b/packages/e2e-tests/specs/experiments/__snapshots__/navigation-editor.test.js.snap
@@ -4,7 +4,7 @@ exports[`Navigation editor allows creation of a menu when there are existing men
 
 exports[`Navigation editor allows creation of a menu when there are no current menu items 1`] = `
 "<!-- wp:navigation {\\"orientation\\":\\"vertical\\"} -->
-<!-- wp:page-list /-->
+<!-- wp:page-list {\\"isNavigationChild\\":true} /-->
 <!-- /wp:navigation -->"
 `;
 

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 {\\"orientation\\":\\"horizontal\\"} -->
-<!-- wp:page-list /-->
+<!-- wp:page-list {\\"isNavigationChild\\":true} /-->
 <!-- /wp:navigation -->"
 `;