@wordpress/block-library 8.5.0 → 8.7.0

package/src/navigation/index.php

@@ -348,7 +348,7 @@ function block_core_navigation_maybe_use_classic_menu_fallback() {
 	$wp_insert_post_result = wp_insert_post(
 		array(
 			'post_content' => $classic_nav_menu_blocks,
-			'post_title'   => $classic_nav_menu->slug,
+			'post_title'   => $classic_nav_menu->name,
 			'post_name'    => $classic_nav_menu->slug,
 			'post_status'  => 'publish',
 			'post_type'    => 'wp_navigation',
@@ -431,37 +431,6 @@ function block_core_navigation_block_contains_core_navigation( $inner_blocks ) {
 	return false;
 }
 
-/**
- * Create and returns a navigation menu containing a page-list as a fallback.
- *
- * @return array the newly created navigation menu.
- */
-function block_core_navigation_get_default_pages_fallback() {
-	$registry = WP_Block_Type_Registry::get_instance();
-
-	// If `core/page-list` is not registered then use empty blocks.
-	$default_blocks = $registry->is_registered( 'core/page-list' ) ? '<!-- wp:page-list /-->' : '';
-
-	// Create a new navigation menu from the fallback blocks.
-	$wp_insert_post_result = wp_insert_post(
-		array(
-			'post_content' => $default_blocks,
-			'post_title'   => 'Navigation', // TODO - use the template slug in future.
-			'post_name'    => 'Navigation', // TODO - use the template slug in future.
-			'post_status'  => 'publish',
-			'post_type'    => 'wp_navigation',
-		),
-		true // So that we can check whether the result is an error.
-	);
-
-	if ( is_wp_error( $wp_insert_post_result ) ) {
-		return;
-	}
-
-	// Fetch the most recently published navigation which will be the default one created above.
-	return block_core_navigation_get_most_recently_published_navigation();
-}
-
 /**
  * Retrieves the appropriate fallback to be used on the front of the
  * site when there is no menu assigned to the Nav block.
@@ -472,7 +441,18 @@ function block_core_navigation_get_default_pages_fallback() {
  * @return array the array of blocks to be used as a fallback.
  */
 function block_core_navigation_get_fallback_blocks() {
-	// Get the most recently published Navigation post.
+	$page_list_fallback = array(
+		array(
+			'blockName' => 'core/page-list',
+		),
+	);
+
+	$registry = WP_Block_Type_Registry::get_instance();
+
+	// If `core/page-list` is not registered then return empty blocks.
+	$fallback_blocks = $registry->is_registered( 'core/page-list' ) ? $page_list_fallback : array();
+
+	// Default to a list of Pages.
 	$navigation_post = block_core_navigation_get_most_recently_published_navigation();
 
 	// If there are no navigation posts then try to find a classic menu
@@ -481,15 +461,14 @@ function block_core_navigation_get_fallback_blocks() {
 		$navigation_post = block_core_navigation_maybe_use_classic_menu_fallback();
 	}
 
-	// If there are no navigation posts then default to a list of Pages.
-	if ( ! $navigation_post ) {
-		$navigation_post = block_core_navigation_get_default_pages_fallback();
-	}
-
-	// Use the first non-empty Navigation as fallback, there should always be one.
+	// Use the first non-empty Navigation as fallback if available.
 	if ( $navigation_post ) {
 		$parsed_blocks  = parse_blocks( $navigation_post->post_content );
 		$maybe_fallback = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
+
+		// Normalizing blocks may result in an empty array of blocks if they were all `null` blocks.
+		// In this case default to the (Page List) fallback.
+		$fallback_blocks = ! empty( $maybe_fallback ) ? $maybe_fallback : $fallback_blocks;
 	}
 
 	// Normalizing blocks may result in an empty array of blocks if they were all `null` blocks.

package/src/navigation/style.scss

@@ -689,10 +689,12 @@ button.wp-block-navigation-item__content {
 .wp-block-navigation__responsive-close {
 	width: 100%;
 
-	// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
-	max-width: var(--wp--style--global--wide-size, 100%);
-	margin-left: auto;
-	margin-right: auto;
+	.has-modal-open & {
+		// Try to inherit wide-width when defined, so the X can align to a top-right aligned menu.
+		max-width: var(--wp--style--global--wide-size, 100%);
+		margin-left: auto;
+		margin-right: auto;
+	}
 
 	// This element is not keyboard accessible, and is focusable only using the mouse.
 	// It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen,

package/src/navigation-link/edit.js

@@ -225,15 +225,6 @@ export default function NavigationLinkEdit( {
 		[ clientId ]
 	);
 
-	useEffect( () => {
-		// This side-effect should not create an undo level as those should
-		// only be created via user interactions. Mark this change as
-		// not persistent to avoid undo level creation.
-		// See https://github.com/WordPress/gutenberg/issues/34564.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { isTopLevelLink } );
-	}, [ isTopLevelLink ] );
-
 	/**
 	 * Transform to submenu block.
 	 */

package/src/navigation-link/index.php

@@ -9,18 +9,17 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
  *
- * @param  array $context    Navigation block context.
- * @param  array $attributes Block attributes.
+ * @param  array $context     Navigation block context.
+ * @param  array $attributes  Block attributes.
+ * @param  bool  $is_sub_menu Whether the link is part of a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_link_build_css_colors( $context, $attributes ) {
+function block_core_navigation_link_build_css_colors( $context, $attributes, $is_sub_menu = false ) {
 	$colors = array(
 		'css_classes'   => array(),
 		'inline_styles' => '',
 	);
 
-	$is_sub_menu = isset( $attributes['isTopLevelLink'] ) ? ( ! $attributes['isTopLevelLink'] ) : false;
-
 	// Text color.
 	$named_text_color  = null;
 	$custom_text_color = null;
@@ -174,17 +173,16 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$colors          = block_core_navigation_link_build_css_colors( $block->context, $attributes );
 	$font_sizes      = block_core_navigation_link_build_css_font_sizes( $block->context );
 	$classes         = array_merge(
-		$colors['css_classes'],
 		$font_sizes['css_classes']
 	);
-	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$style_attribute = $font_sizes['inline_styles'];
 
 	$css_classes = trim( implode( ' ', $classes ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_queried_object_id() === (int) $attributes['id'] );
+	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
+	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(

package/src/navigation-link/link-ui.js

@@ -165,7 +165,6 @@ export function LinkUI( props ) {
 			placement="bottom"
 			onClose={ props.onClose }
 			anchor={ props.anchor }
-			__unstableSlotName={ '__unstable-block-tools-after' }
 			shift
 		>
 			<LinkControl

package/src/navigation-submenu/edit.js

@@ -224,16 +224,6 @@ export default function NavigationSubmenuEdit( {
 		}
 	}, [] );
 
-	// Store the colors from context as attributes for rendering.
-	useEffect( () => {
-		// This side-effect should not create an undo level as those should
-		// only be created via user interactions. Mark this change as
-		// not persistent to avoid undo level creation.
-		// See https://github.com/WordPress/gutenberg/issues/34564.
-		__unstableMarkNextChangeAsNotPersistent();
-		setAttributes( { isTopLevelItem } );
-	}, [ isTopLevelItem ] );
-
 	/**
 	 * The hook shouldn't be necessary but due to a focus loss happening
 	 * when selecting a suggestion in the link popover, we force close on block unselection.

package/src/navigation-submenu/index.php

@@ -9,72 +9,11 @@
  * Build an array with CSS classes and inline styles defining the colors
  * which will be applied to the navigation markup in the front-end.
  *
- * @param  array $context    Navigation block context.
- * @param  array $attributes Block attributes.
+ * @param  array $context     Navigation block context.
+ * @param  array $attributes  Block attributes.
+ * @param  bool  $is_sub_menu Whether the block is a sub-menu.
  * @return array Colors CSS classes and inline styles.
  */
-function block_core_navigation_submenu_build_css_colors( $context, $attributes ) {
-	$colors = array(
-		'css_classes'   => array(),
-		'inline_styles' => '',
-	);
-
-	$is_sub_menu = isset( $attributes['isTopLevelItem'] ) ? ( ! $attributes['isTopLevelItem'] ) : false;
-
-	// Text color.
-	$named_text_color  = null;
-	$custom_text_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayTextColor', $context ) ) {
-		$custom_text_color = $context['customOverlayTextColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayTextColor', $context ) ) {
-		$named_text_color = $context['overlayTextColor'];
-	} elseif ( array_key_exists( 'customTextColor', $context ) ) {
-		$custom_text_color = $context['customTextColor'];
-	} elseif ( array_key_exists( 'textColor', $context ) ) {
-		$named_text_color = $context['textColor'];
-	} elseif ( isset( $context['style']['color']['text'] ) ) {
-		$custom_text_color = $context['style']['color']['text'];
-	}
-
-	// If has text color.
-	if ( ! is_null( $named_text_color ) ) {
-		// Add the color class.
-		array_push( $colors['css_classes'], 'has-text-color', sprintf( 'has-%s-color', $named_text_color ) );
-	} elseif ( ! is_null( $custom_text_color ) ) {
-		// Add the custom color inline style.
-		$colors['css_classes'][]  = 'has-text-color';
-		$colors['inline_styles'] .= sprintf( 'color: %s;', $custom_text_color );
-	}
-
-	// Background color.
-	$named_background_color  = null;
-	$custom_background_color = null;
-
-	if ( $is_sub_menu && array_key_exists( 'customOverlayBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customOverlayBackgroundColor'];
-	} elseif ( $is_sub_menu && array_key_exists( 'overlayBackgroundColor', $context ) ) {
-		$named_background_color = $context['overlayBackgroundColor'];
-	} elseif ( array_key_exists( 'customBackgroundColor', $context ) ) {
-		$custom_background_color = $context['customBackgroundColor'];
-	} elseif ( array_key_exists( 'backgroundColor', $context ) ) {
-		$named_background_color = $context['backgroundColor'];
-	} elseif ( isset( $context['style']['color']['background'] ) ) {
-		$custom_background_color = $context['style']['color']['background'];
-	}
-
-	// If has background color.
-	if ( ! is_null( $named_background_color ) ) {
-		// Add the background-color class.
-		array_push( $colors['css_classes'], 'has-background', sprintf( 'has-%s-background-color', $named_background_color ) );
-	} elseif ( ! is_null( $custom_background_color ) ) {
-		// Add the custom background-color inline style.
-		$colors['css_classes'][]  = 'has-background';
-		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $custom_background_color );
-	}
-
-	return $colors;
-}
 
 /**
  * Build an array with CSS classes and inline styles defining the font sizes
@@ -130,7 +69,6 @@ function block_core_navigation_submenu_render_submenu_icon() {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation_submenu( $attributes, $content, $block ) {
-
 	$navigation_link_has_id = isset( $attributes['id'] ) && is_numeric( $attributes['id'] );
 	$is_post_type           = isset( $attributes['kind'] ) && 'post-type' === $attributes['kind'];
 	$is_post_type           = $is_post_type || isset( $attributes['type'] ) && ( 'post' === $attributes['type'] || 'page' === $attributes['type'] );
@@ -145,17 +83,13 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 		return '';
 	}
 
-	$colors          = block_core_navigation_submenu_build_css_colors( $block->context, $attributes );
 	$font_sizes      = block_core_navigation_submenu_build_css_font_sizes( $block->context );
-	$classes         = array_merge(
-		$colors['css_classes'],
-		$font_sizes['css_classes']
-	);
-	$style_attribute = ( $colors['inline_styles'] . $font_sizes['inline_styles'] );
+	$style_attribute = $font_sizes['inline_styles'];
 
-	$css_classes = trim( implode( ' ', $classes ) );
+	$css_classes = trim( implode( ' ', $font_sizes['css_classes'] ) );
 	$has_submenu = count( $block->inner_blocks ) > 0;
-	$is_active   = ! empty( $attributes['id'] ) && ( get_queried_object_id() === (int) $attributes['id'] );
+	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
+	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
 	$show_submenu_indicators = isset( $block->context['showSubmenuIcon'] ) && $block->context['showSubmenuIcon'];
 	$open_on_click           = isset( $block->context['openSubmenusOnClick'] ) && $block->context['openSubmenusOnClick'];
@@ -250,6 +184,34 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	}
 
 	if ( $has_submenu ) {
+		// Copy some attributes from the parent block to this one.
+		// Ideally this would happen in the client when the block is created.
+		if ( array_key_exists( 'overlayTextColor', $block->context ) ) {
+			$attributes['textColor'] = $block->context['overlayTextColor'];
+		}
+		if ( array_key_exists( 'overlayBackgroundColor', $block->context ) ) {
+			$attributes['backgroundColor'] = $block->context['overlayBackgroundColor'];
+		}
+		if ( array_key_exists( 'customOverlayTextColor', $block->context ) ) {
+			$attributes['style']['color']['text'] = $block->context['customOverlayTextColor'];
+		}
+		if ( array_key_exists( 'customOverlayBackgroundColor', $block->context ) ) {
+			$attributes['style']['color']['background'] = $block->context['customOverlayBackgroundColor'];
+		}
+
+		// This allows us to be able to get a response from gutenberg_apply_colors_support.
+		$block->block_type->supports['color'] = true;
+		$colors_supports                      = gutenberg_apply_colors_support( $block->block_type, $attributes );
+		$css_classes                          = 'wp-block-navigation__submenu-container';
+		if ( array_key_exists( 'class', $colors_supports ) ) {
+			$css_classes .= ' ' . $colors_supports['class'];
+		}
+
+		$style_attribute = '';
+		if ( array_key_exists( 'style', $colors_supports ) ) {
+			$style_attribute = $colors_supports['style'];
+		}
+
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {
 			$inner_blocks_html .= $inner_block->render();
@@ -263,10 +225,19 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 			$html = $tag_processor->get_updated_html();
 		}
 
+		$wrapper_attributes = get_block_wrapper_attributes(
+			array(
+				'class' => $css_classes,
+				'style' => $style_attribute,
+			)
+		);
+
 		$html .= sprintf(
-			'<ul class="wp-block-navigation__submenu-container">%s</ul>',
+			'<ul %s>%s</ul>',
+			$wrapper_attributes,
 			$inner_blocks_html
 		);
+
 	}
 
 	$html .= '</li>';

package/src/nextpage/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Page Break block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:nextpage -->
+<!--nextpage-->
+<!-- /wp:nextpage --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Page Break block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:nextpage -->
+<!--nextpage-->
+<!-- /wp:nextpage --></div>
+<!-- /wp:group -->"
+`;

package/src/nextpage/test/transforms.native.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Page Break';
+const initialHtml = `
+<!-- wp:nextpage -->
+<!--nextpage-->
+<!-- /wp:nextpage -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/page-list/edit.js

@@ -25,9 +25,9 @@ import {
 	Button,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useMemo, useState, useEffect } from '@wordpress/element';
+import { useMemo, useState, useEffect, useCallback } from '@wordpress/element';
 import { useEntityRecords } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -53,7 +53,9 @@ function BlockContent( {
 	if ( ! hasResolvedPages ) {
 		return (
 			<div { ...blockProps }>
-				<Spinner />
+				<div className="wp-block-page-list__loading-indicator-container">
+					<Spinner className="wp-block-page-list__loading-indicator" />
+				</div>
 			</div>
 		);
 	}
@@ -111,29 +113,6 @@ function BlockContent( {
 	}
 }
 
-function ConvertToLinks( { onClick, disabled } ) {
-	const [ isOpen, setOpen ] = useState( false );
-	const openModal = () => setOpen( true );
-	const closeModal = () => setOpen( false );
-
-	return (
-		<>
-			<BlockControls group="other">
-				<ToolbarButton title={ __( 'Edit' ) } onClick={ openModal }>
-					{ __( 'Edit' ) }
-				</ToolbarButton>
-			</BlockControls>
-			{ isOpen && (
-				<ConvertToLinksModal
-					onClick={ onClick }
-					onClose={ closeModal }
-					disabled={ disabled }
-				/>
-			) }
-		</>
-	);
-}
-
 export default function PageListEdit( {
 	context,
 	clientId,
@@ -141,6 +120,9 @@ export default function PageListEdit( {
 	setAttributes,
 } ) {
 	const { parentPageID } = attributes;
+	const [ isOpen, setOpen ] = useState( false );
+	const openModal = useCallback( () => setOpen( true ), [] );
+	const closeModal = () => setOpen( false );
 
 	const { records: pages, hasResolved: hasResolvedPages } = useEntityRecords(
 		'postType',
@@ -218,7 +200,11 @@ export default function PageListEdit( {
 			const hasChildren = pagesByParentId.has( page.id );
 			const pageProps = {
 				id: page.id,
-				label: page.title?.rendered,
+				label:
+					// translators: displayed when a page has an empty title.
+					page.title?.rendered?.trim() !== ''
+						? page.title?.rendered
+						: __( '(no title)' ),
 				title: page.title?.rendered,
 				link: page.url,
 				hasChildren,
@@ -261,34 +247,69 @@ export default function PageListEdit( {
 		parentPageID,
 	] );
 
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/page-list-item' ],
-		renderAppender: false,
-		__unstableDisableDropZone: true,
-		templateLock: 'all',
-		onInput: NOOP,
-		onChange: NOOP,
-		value: blockList,
-	} );
-
-	const { isNested } = useSelect(
+	const {
+		isNested,
+		hasSelectedChild,
+		parentBlock,
+		hasDraggedChild,
+		isChildOfNavigation,
+	} = useSelect(
 		( select ) => {
-			const { getBlockParentsByBlockName } = select( blockEditorStore );
+			const {
+				getBlockParentsByBlockName,
+				hasSelectedInnerBlock,
+				getBlockRootClientId,
+				hasDraggedInnerBlock,
+			} = select( blockEditorStore );
 			const blockParents = getBlockParentsByBlockName(
 				clientId,
 				'core/navigation-submenu',
 				true
 			);
+			const navigationBlockParents = getBlockParentsByBlockName(
+				clientId,
+				'core/navigation',
+				true
+			);
 			return {
 				isNested: blockParents.length > 0,
+				isChildOfNavigation: navigationBlockParents.length > 0,
+				hasSelectedChild: hasSelectedInnerBlock( clientId, true ),
+				hasDraggedChild: hasDraggedInnerBlock( clientId, true ),
+				parentBlock: getBlockRootClientId( clientId ),
 			};
 		},
 		[ clientId ]
 	);
 
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: [ 'core/page-list-item' ],
+		renderAppender: false,
+		__unstableDisableDropZone: true,
+		templateLock: isChildOfNavigation ? false : 'all',
+		onInput: NOOP,
+		onChange: NOOP,
+		value: blockList,
+	} );
+
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( hasSelectedChild || hasDraggedChild ) {
+			openModal();
+			selectBlock( parentBlock );
+		}
+	}, [
+		hasSelectedChild,
+		hasDraggedChild,
+		parentBlock,
+		selectBlock,
+		openModal,
+	] );
+
 	useEffect( () => {
 		setAttributes( { isNested } );
-	}, [ isNested ] );
+	}, [ isNested, setAttributes ] );
 
 	return (
 		<>
@@ -323,10 +344,23 @@ export default function PageListEdit( {
 				) }
 			</InspectorControls>
 			{ allowConvertToLinks && (
-				<ConvertToLinks
-					disabled={ ! hasResolvedPages }
-					onClick={ convertToNavigationLinks }
-				/>
+				<>
+					<BlockControls group="other">
+						<ToolbarButton
+							title={ __( 'Edit' ) }
+							onClick={ openModal }
+						>
+							{ __( 'Edit' ) }
+						</ToolbarButton>
+					</BlockControls>
+					{ isOpen && (
+						<ConvertToLinksModal
+							onClick={ convertToNavigationLinks }
+							onClose={ closeModal }
+							disabled={ ! hasResolvedPages }
+						/>
+					) }
+				</>
 			) }
 			<BlockContent
 				blockProps={ blockProps }

package/src/page-list/editor.scss

@@ -61,3 +61,9 @@
 .wp-block-page-list .components-notice {
 	margin-left: 0;
 }
+
+// Space spinner to give it breathing
+// room when block is selected and has focus outline.
+.wp-block-page-list__loading-indicator-container {
+	padding: $grid-unit-10 $grid-unit-15;
+}

package/src/page-list-item/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
@@ -36,7 +35,7 @@ function useFrontPageId() {
 }
 
 export default function PageListItemEdit( { context, attributes } ) {
-	const { id, label, link, hasChildren } = attributes;
+	const { id, label, link, hasChildren, title } = attributes;
 	const isNavigationChild = 'showSubmenuIcon' in context;
 	const frontPageId = useFrontPageId();
 
@@ -81,7 +80,7 @@ export default function PageListItemEdit( { context, attributes } ) {
 					} ) }
 					href={ link }
 				>
-					{ decodeEntities( label ) }
+					{ decodeEntities( title ) }
 				</a>
 			) }
 			{ hasChildren && (