Skip to content

Commit

Permalink
Adds page list as child of submenu (#46414)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
Co-authored-by: Maggie <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>

* fix fixture

* add missing useEffect

* Fixes markup rendering in the editor to avoid a double LI element

Co-authored-by: Ben Dwyer <[email protected]>
Co-authored-by: Maggie <[email protected]>

* 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 <[email protected]>
Co-authored-by: Dave Smith <[email protected]>
Co-authored-by: Maggie <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>
Co-authored-by: Ben Dwyer <[email protected]>
Co-authored-by: MaggieCabrera <[email protected]>
  • Loading branch information
7 people authored Dec 16, 2022
1 parent 7ab478b commit 89998fd
Show file tree
Hide file tree
Showing 7 changed files with 133 additions and 25 deletions.
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
92 changes: 88 additions & 4 deletions packages/block-library/src/page-list-item/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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 (
<li
key={ id }
Expand Down Expand Up @@ -84,9 +169,8 @@ export default function PageListItemEdit( { context, attributes } ) {
'wp-block-navigation__submenu-container':
isNavigationChild,
} ) }
>
<InnerBlocks />
</ul>
{ ...innerBlocksProps }
></ul>
</>
) }
</li>
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/page-list/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@
"parentPageID": {
"type": "integer",
"default": 0
},
"isNested": {
"type": "boolean",
"default": false
}
},
"usesContext": [
Expand Down
41 changes: 27 additions & 14 deletions packages/block-library/src/page-list/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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 (
<>
Expand Down
4 changes: 4 additions & 0 deletions packages/block-library/src/page-list/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 7 additions & 5 deletions packages/block-library/src/page-list/index.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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'] ) );
Expand Down Expand Up @@ -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 ) . '</ul>';
$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 ) . '</ul>';
}
$markup .= '</li>';
}
Expand Down Expand Up @@ -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(
Expand Down Expand Up @@ -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 = '<ul %1$s>%2$s</ul>';
$wrapper_markup = $is_nested ? '%2$s' : '<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 );
$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(
Expand Down
3 changes: 2 additions & 1 deletion test/integration/fixtures/blocks/core__page-list.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@
"name": "core/page-list",
"isValid": true,
"attributes": {
"parentPageID": 0
"parentPageID": 0,
"isNested": false
},
"innerBlocks": []
}
Expand Down

1 comment on commit 89998fd

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/3713205629
📝 Reported issues:

Please sign in to comment.