diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js index 464ccf18d144eb..b5a80e4e05279f 100644 --- 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( { <>
diff --git a/packages/block-library/src/home-link/index.php b/packages/block-library/src/home-link/index.php index eafd27461c0972..3722c6a11ea327 100644 --- 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 = '
  • ) } { hasDescendants && showSubmenuIcon && ( - + ) } diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 3969318e5cac7c..4a6ede4a48376b 100644 --- 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 = '
  • ' . - 'context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'] && $has_submenu ) { // The submenu icon can be hidden by a CSS rule on the Navigation Block. - $html .= '' . block_core_navigation_link_render_submenu_icon() . ''; + $html .= '' . block_core_navigation_link_render_submenu_icon() . ''; } $html .= ''; @@ -233,7 +233,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) { } $html .= sprintf( - '', + '', $inner_blocks_html ); } diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json index cf4a8ec7cbdf98..95dce8bc0a7bf8 100644 --- 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 index ca4c1a324319d6..9818a320c326e4 100644 --- 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 index 2b615ae9747414..21a9ed8b1af2e1 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -128,6 +128,7 @@ 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. @@ -135,7 +136,7 @@ function block_core_page_list_build_css_font_sizes( $context ) { * * @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 .= '
  • '; - $markup .= '' . wp_kses( + $markup .= '' . wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) ) . ''; if ( isset( $page['children'] ) ) { - $markup .= ''; - $markup .= ''; + if ( $is_navigation_child ) { + $markup .= ''; + } + $markup .= ''; } $markup .= '
    • '; } @@ -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 = ''; - $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 index a9e5aadca01814..89f22e7ad5236c 100644 --- 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`] = ` " - + " `; 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 index 04b55f609cdabf..40204d478b4af8 100644 --- 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`] = ` " - + " `;