From 328259872dd6f55f94437c0a35eeab33a2fc959e Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 6 Aug 2021 14:17:54 +1000 Subject: [PATCH 1/7] Add generic classnames to children of Navigation --- packages/block-library/src/home-link/edit.js | 4 ++-- packages/block-library/src/home-link/index.php | 4 ++-- .../block-library/src/navigation-link/edit.js | 14 +++++++++----- .../block-library/src/navigation-link/index.php | 4 ++-- packages/block-library/src/page-list/index.php | 16 ++++++++++++---- 5 files changed, 27 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/home-link/edit.js b/packages/block-library/src/home-link/edit.js index 464ccf18d144e..b5a80e4e05279 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 eafd27461c097..3722c6a11ea32 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 = '
  • $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 = '
  • ' . - ''; - $markup .= '' . wp_kses( + $markup .= '' . wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) ) . ''; if ( isset( $page['children'] ) ) { $markup .= ''; - $markup .= '
      ' . block_core_page_list_render_nested_page_list( $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '
    '; + $markup .= '
      ' . block_core_page_list_render_nested_page_list( $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '
    '; } $markup .= '
    • '; } @@ -258,9 +264,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 = ! 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'; From 7c6c81ebf5e379bacff9f1d54be565ca25573af3 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 9 Aug 2021 15:03:23 +1000 Subject: [PATCH 2/7] Make server side render recognise navigation child logic --- packages/block-library/src/page-list/block.json | 3 +++ packages/block-library/src/page-list/edit.js | 4 ++++ packages/block-library/src/page-list/index.php | 2 +- 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json index cf4a8ec7cbdf9..95dce8bc0a7bf 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 ca4c1a324319d..2ad19216c035d 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,9 @@ export default function PageListEdit( { context.customOverlayBackgroundColor, ] ); + 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 dff2a8adfd764..975748d7c20dc 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -264,7 +264,7 @@ 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 = ! empty( $block->context ); + $is_navigation_child = array_key_exists('isNavigationChild', $attributes) ? $attributes['isNavigationChild'] : ! empty( $block->context); $wrapper_markup = '
      %2$s
    '; From c0fed603a08676906f99124adcdeeffdbda5f9f7 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 9 Aug 2021 17:17:38 +1000 Subject: [PATCH 3/7] Add generic class to submenu containers. --- .../block-library/src/navigation-link/edit.js | 30 +++++++++++-------- .../src/navigation-link/index.php | 2 +- .../block-library/src/page-list/index.php | 7 ++++- 3 files changed, 24 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index abcb722dff2b9..c5b93f3470e6c 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -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, diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 1240453df00f1..7e1e5b9469a64 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -233,7 +233,7 @@ function render_block_core_navigation_link( $attributes, $content, $block ) { } $html .= sprintf( - '
      %s
    ', + '
      %s
    ', $inner_blocks_html ); } diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index 975748d7c20dc..62c8259956ede 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -170,7 +170,12 @@ function block_core_page_list_render_nested_page_list( $is_navigation_child, $ne ) . ''; if ( isset( $page['children'] ) ) { $markup .= ''; - $markup .= '
      ' . block_core_page_list_render_nested_page_list( $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '
    '; + $markup .= '
      ' . block_core_page_list_render_nested_page_list( $is_navigation_child, $page['children'], $active_page_ancestor_ids, $colors, $depth + 1 ) . '
    '; } $markup .= ''; } From cd2e19ee23c25b81d8c079894469bf4bf0d2a7d1 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 9 Aug 2021 17:41:38 +1000 Subject: [PATCH 4/7] Fix render issue --- packages/block-library/src/page-list/edit.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index 2ad19216c035d..9818a320c326e 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -70,8 +70,10 @@ export default function PageListEdit( { context.customOverlayBackgroundColor, ] ); - const isNavigationChild = isEmpty( context ) ? false : true; - setAttributes( { isNavigationChild } ); + useEffect( () => { + const isNavigationChild = isEmpty( context ) ? false : true; + setAttributes( { isNavigationChild } ); + }, [] ); const { textColor, backgroundColor, showSubmenuIcon, style } = context || {}; From 76794d551b025cfb573fb1edd026740d45717f18 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 9 Aug 2021 17:44:01 +1000 Subject: [PATCH 5/7] Add doc comment and fix php linting issues --- packages/block-library/src/page-list/index.php | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index 62c8259956ede..7a726867400a7 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. @@ -149,7 +150,7 @@ function block_core_page_list_render_nested_page_list( $is_navigation_child, $ne $css_class .= ' has-child'; } - if( $is_navigation_child ) { + if ( $is_navigation_child ) { $css_class .= ' wp-block-navigation-item'; } From 6b153bbb40186caef001e1f91565c53cb2804a42 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Mon, 9 Aug 2021 17:54:46 +1000 Subject: [PATCH 6/7] Add generic class to submenu icons. --- packages/block-library/src/navigation-link/edit.js | 2 +- packages/block-library/src/navigation-link/index.php | 2 +- packages/block-library/src/page-list/index.php | 4 +++- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index c5b93f3470e6c..9df12f2681bc5 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -720,7 +720,7 @@ export default function NavigationLinkEdit( { ) } { hasDescendants && showSubmenuIcon && ( - + ) } diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php index 7e1e5b9469a64..4a6ede4a48376 100644 --- a/packages/block-library/src/navigation-link/index.php +++ b/packages/block-library/src/navigation-link/index.php @@ -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 .= '' . block_core_navigation_link_render_submenu_icon() . ''; + $html .= '' . block_core_navigation_link_render_submenu_icon() . ''; } $html .= ''; diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index 7a726867400a7..d2c5c13f54123 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -170,7 +170,9 @@ function block_core_page_list_render_nested_page_list( $is_navigation_child, $ne wp_kses_allowed_html( 'post' ) ) . ''; if ( isset( $page['children'] ) ) { - $markup .= ''; + if ( $is_navigation_child ) { + $markup .= ''; + } $markup .= '
      - + " `; 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 04b55f609cdab..40204d478b4af 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`] = ` " - + " `;