From 89998fdfd4d8763cd7396e040db0a85f0c59b13e Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 16 Dec 2022 14:44:51 +0200 Subject: [PATCH] Adds page list as child of submenu (#46414) * adds page list as child of submenu and disables direct insert * fix page link CSS when adding to submenu, enable transform to pagelist, restore direct insert * try to not render a wrapper if page list block is nested * Fixes styling, aligns off canvas implementation to list view, fixes styling bug of page list Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com> Co-authored-by: Maggie <3593343+MaggieCabrera@users.noreply.github.com> Co-authored-by: Ben Dwyer <275961+scruffian@users.noreply.github.com> * fix fixture * add missing useEffect * Fixes markup rendering in the editor to avoid a double LI element Co-authored-by: Ben Dwyer <275961+scruffian@users.noreply.github.com> Co-authored-by: Maggie <3593343+MaggieCabrera@users.noreply.github.com> * added submenu container class to the page list item uls * Ensure submenus are correctly positioned in the editor * add a comment Co-authored-by: Andrei Draganescu Co-authored-by: Dave Smith <444434+getdave@users.noreply.github.com> Co-authored-by: Maggie <3593343+MaggieCabrera@users.noreply.github.com> Co-authored-by: Ben Dwyer <275961+scruffian@users.noreply.github.com> Co-authored-by: Ben Dwyer Co-authored-by: MaggieCabrera --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/page-list-item/edit.js | 92 ++++++++++++++++++- .../block-library/src/page-list/block.json | 4 + packages/block-library/src/page-list/edit.js | 41 ++++++--- .../block-library/src/page-list/editor.scss | 4 + .../block-library/src/page-list/index.php | 12 ++- .../fixtures/blocks/core__page-list.json | 3 +- 7 files changed, 133 insertions(+), 25 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 14f800f140aee3..25fe5746a04122 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -429,7 +429,7 @@ Display a list of all pages. ([Source](https://github.com/WordPress/gutenberg/tr - **Name:** core/page-list - **Category:** widgets - **Supports:** typography (fontSize, lineHeight), ~~html~~, ~~reusable~~ -- **Attributes:** parentPageID +- **Attributes:** isNested, parentPageID ## Page List Item diff --git a/packages/block-library/src/page-list-item/edit.js b/packages/block-library/src/page-list-item/edit.js index db8e0a5c173736..aa0836e774848b 100644 --- a/packages/block-library/src/page-list-item/edit.js +++ b/packages/block-library/src/page-list-item/edit.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { InnerBlocks } from '@wordpress/block-editor'; +import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor'; import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; @@ -30,10 +30,95 @@ function useFrontPageId() { }, [] ); } +/** + * Determine the colors for a menu. + * + * Order of priority is: + * 1: Overlay custom colors (if submenu) + * 2: Overlay theme colors (if submenu) + * 3: Custom colors + * 4: Theme colors + * 5: Global styles + * + * @param {Object} context + * @param {boolean} isSubMenu + */ +function getColors( context, isSubMenu ) { + const { + textColor, + customTextColor, + backgroundColor, + customBackgroundColor, + overlayTextColor, + customOverlayTextColor, + overlayBackgroundColor, + customOverlayBackgroundColor, + style, + } = context; + + const colors = {}; + + if ( isSubMenu && !! customOverlayTextColor ) { + colors.customTextColor = customOverlayTextColor; + } else if ( isSubMenu && !! overlayTextColor ) { + colors.textColor = overlayTextColor; + } else if ( !! customTextColor ) { + colors.customTextColor = customTextColor; + } else if ( !! textColor ) { + colors.textColor = textColor; + } else if ( !! style?.color?.text ) { + colors.customTextColor = style.color.text; + } + + if ( isSubMenu && !! customOverlayBackgroundColor ) { + colors.customBackgroundColor = customOverlayBackgroundColor; + } else if ( isSubMenu && !! overlayBackgroundColor ) { + colors.backgroundColor = overlayBackgroundColor; + } else if ( !! customBackgroundColor ) { + colors.customBackgroundColor = customBackgroundColor; + } else if ( !! backgroundColor ) { + colors.backgroundColor = backgroundColor; + } else if ( !! style?.color?.background ) { + colors.customTextColor = style.color.background; + } + + return colors; +} + export default function PageListItemEdit( { context, attributes } ) { const { id, label, link, hasChildren } = attributes; const isNavigationChild = 'showSubmenuIcon' in context; const frontPageId = useFrontPageId(); + + const innerBlocksColors = getColors( context, true ); + + const blockProps = useBlockProps( { + className: classnames( + 'wp-block-pages-list__item', + 'wp-block-navigation__submenu-container', + { + '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, + }, + } ); + + const innerBlocksProps = useInnerBlocksProps( blockProps ); + return (
  • - - + { ...innerBlocksProps } + > ) }
    • diff --git a/packages/block-library/src/page-list/block.json b/packages/block-library/src/page-list/block.json index e8ff316a9fb4f6..4f4f45c4bb4748 100644 --- a/packages/block-library/src/page-list/block.json +++ b/packages/block-library/src/page-list/block.json @@ -11,6 +11,10 @@ "parentPageID": { "type": "integer", "default": 0 + }, + "isNested": { + "type": "boolean", + "default": false } }, "usesContext": [ diff --git a/packages/block-library/src/page-list/edit.js b/packages/block-library/src/page-list/edit.js index 7372191723f466..219822ed87944f 100644 --- a/packages/block-library/src/page-list/edit.js +++ b/packages/block-library/src/page-list/edit.js @@ -25,7 +25,7 @@ import { Button, } from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; -import { useMemo, useState } from '@wordpress/element'; +import { useMemo, useState, useEffect } from '@wordpress/element'; import { useEntityRecords } from '@wordpress/core-data'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -189,20 +189,33 @@ export default function PageListEdit( { const { replaceBlock, selectBlock } = useDispatch( blockEditorStore ); - const { parentNavBlockClientId } = useSelect( ( select ) => { - const { getSelectedBlockClientId, getBlockParentsByBlockName } = - select( blockEditorStore ); - - const _selectedBlockClientId = getSelectedBlockClientId(); + const { parentNavBlockClientId, isNested } = useSelect( + ( select ) => { + const { getSelectedBlockClientId, getBlockParentsByBlockName } = + select( blockEditorStore ); + + const _selectedBlockClientId = getSelectedBlockClientId(); + + return { + parentNavBlockClientId: getBlockParentsByBlockName( + _selectedBlockClientId, + 'core/navigation', + true + )[ 0 ], + isNested: + getBlockParentsByBlockName( + clientId, + 'core/navigation-submenu', + true + ).length > 0, + }; + }, + [ clientId ] + ); - return { - parentNavBlockClientId: getBlockParentsByBlockName( - _selectedBlockClientId, - 'core/navigation', - true - )[ 0 ], - }; - }, [] ); + useEffect( () => { + setAttributes( { isNested } ); + }, [ isNested ] ); return ( <> diff --git a/packages/block-library/src/page-list/editor.scss b/packages/block-library/src/page-list/editor.scss index 83a70bafd94853..4cda6018220d32 100644 --- a/packages/block-library/src/page-list/editor.scss +++ b/packages/block-library/src/page-list/editor.scss @@ -22,6 +22,10 @@ } } +.wp-block-navigation .wp-block-navigation__submenu-container > .wp-block-page-list { + display: block; // This is needed to make sure the page list container is 100% wide, so that the children are correctly positioned. +} + // Make links unclickable in the editor. .wp-block-pages-list__item__link { pointer-events: none; diff --git a/packages/block-library/src/page-list/index.php b/packages/block-library/src/page-list/index.php index 7944f6f3a84ad6..3ae63047e27485 100644 --- a/packages/block-library/src/page-list/index.php +++ b/packages/block-library/src/page-list/index.php @@ -139,13 +139,14 @@ function block_core_page_list_build_css_font_sizes( $context ) { * @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 boolean $is_nested Whether the submenu is nested or not. * @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( $open_submenus_on_click, $show_submenu_icons, $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, $is_nested, $active_page_ancestor_ids = array(), $colors = array(), $depth = 0 ) { if ( empty( $nested_pages ) ) { return; } @@ -173,7 +174,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click, $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'] ) ) { + if ( ( ( 0 < $depth && ! $is_nested ) || $is_nested ) && isset( $colors['overlay_css_classes'], $colors['overlay_inline_styles'] ) ) { $css_class .= ' ' . trim( implode( ' ', $colors['overlay_css_classes'] ) ); if ( '' !== $colors['overlay_inline_styles'] ) { $style_attribute = sprintf( ' style="%s"', esc_attr( $colors['overlay_inline_styles'] ) ); @@ -212,7 +213,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click, if ( $is_navigation_child ) { $markup .= ' wp-block-navigation__submenu-container'; } - $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 ) . ''; + $markup .= '">' . block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $page['children'], $is_nested, $active_page_ancestor_ids, $colors, $depth + 1 ) . ''; } $markup .= ''; } @@ -253,6 +254,7 @@ function render_block_core_page_list( $attributes, $content, $block ) { ++$block_id; $parent_page_id = $attributes['parentPageID']; + $is_nested = $attributes['isNested']; $all_pages = get_pages( array( @@ -321,9 +323,9 @@ function render_block_core_page_list( $attributes, $content, $block ) { $show_submenu_icons = array_key_exists( 'showSubmenuIcon', $block->context ) ? $block->context['showSubmenuIcon'] : false; - $wrapper_markup = '
      %2$s
    '; + $wrapper_markup = $is_nested ? '%2$s' : '
      %2$s
    '; - $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 ); + $items_markup = block_core_page_list_render_nested_page_list( $open_submenus_on_click, $show_submenu_icons, $is_navigation_child, $nested_pages, $is_nested, $active_page_ancestor_ids, $colors ); $wrapper_attributes = get_block_wrapper_attributes( array( diff --git a/test/integration/fixtures/blocks/core__page-list.json b/test/integration/fixtures/blocks/core__page-list.json index b1992a437b8849..2552d5e093c777 100644 --- a/test/integration/fixtures/blocks/core__page-list.json +++ b/test/integration/fixtures/blocks/core__page-list.json @@ -3,7 +3,8 @@ "name": "core/page-list", "isValid": true, "attributes": { - "parentPageID": 0 + "parentPageID": 0, + "isNested": false }, "innerBlocks": [] }