@wordpress/block-library 7.1.1 → 7.3.1

package/src/navigation/edit/unsaved-inner-blocks.js

@@ -10,7 +10,7 @@ import { useInnerBlocksProps } from '@wordpress/block-editor';
 import { Disabled, Spinner } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
-import { useContext, useEffect, useRef } from '@wordpress/element';
+import { useContext, useEffect, useRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,6 +25,22 @@ const DRAFT_MENU_PARAMS = [
 	{ status: 'draft', per_page: -1 },
 ];
 
+const DEFAULT_BLOCK = {
+	name: 'core/navigation-link',
+};
+
+const ALLOWED_BLOCKS = [
+	'core/navigation-link',
+	'core/search',
+	'core/social-links',
+	'core/page-list',
+	'core/spacer',
+	'core/home-link',
+	'core/site-title',
+	'core/site-logo',
+	'core/navigation-submenu',
+];
+
 export default function UnsavedInnerBlocks( {
 	blockProps,
 	blocks,
@@ -33,6 +49,33 @@ export default function UnsavedInnerBlocks( {
 	onSave,
 	hasSelection,
 } ) {
+	const originalBlocks = useRef();
+
+	useEffect( () => {
+		// Initially store the uncontrolled inner blocks for
+		// dirty state comparison.
+		if ( ! originalBlocks?.current ) {
+			originalBlocks.current = blocks;
+		}
+	}, [ blocks ] );
+
+	// If the current inner blocks object is different in any way
+	// from the original inner blocks from the post content then the
+	// user has made changes to the inner blocks. At this point the inner
+	// blocks can be considered "dirty".
+	const innerBlocksAreDirty = blocks !== originalBlocks.current;
+
+	const shouldDirectInsert = useMemo(
+		() =>
+			blocks.every(
+				( { name } ) =>
+					name === 'core/navigation-link' ||
+					name === 'core/navigation-submenu' ||
+					name === 'core/page-list'
+			),
+		[ blocks ]
+	);
+
 	// The block will be disabled in a block preview, use this as a way of
 	// avoiding the side-effects of this component for block previews.
 	const isDisabled = useContext( Disabled.Context );
@@ -40,6 +83,9 @@ export default function UnsavedInnerBlocks( {
 
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		renderAppender: hasSelection ? undefined : false,
+		allowedBlocks: ALLOWED_BLOCKS,
+		__experimentalDefaultBlock: DEFAULT_BLOCK,
+		__experimentalDirectInsert: shouldDirectInsert,
 	} );
 
 	const {
@@ -97,7 +143,8 @@ export default function UnsavedInnerBlocks( {
 			savingLock.current ||
 			! hasResolvedDraftNavigationMenus ||
 			! hasResolvedNavigationMenus ||
-			! hasSelection
+			! hasSelection ||
+			! innerBlocksAreDirty
 		) {
 			return;
 		}
@@ -118,19 +165,21 @@ export default function UnsavedInnerBlocks( {
 		blocks,
 	] );
 
+	const Wrapper = isSaving ? Disabled : 'div';
+
 	return (
-		<div className="wp-block-navigation__unsaved-changes">
-			<Disabled
+		<Wrapper className="wp-block-navigation__unsaved-changes">
+			<div
 				className={ classnames(
 					'wp-block-navigation__unsaved-changes-overlay',
 					{
-						'is-saving': hasSelection,
+						'is-saving': isSaving,
 					}
 				) }
 			>
 				<div { ...innerBlocksProps } />
-			</Disabled>
-			{ hasSelection && <Spinner /> }
-		</div>
+			</div>
+			{ isSaving && <Spinner /> }
+		</Wrapper>
 	);
 }

package/src/navigation/index.php

@@ -361,10 +361,14 @@ function block_core_navigation_get_fallback_blocks() {
  */
 function render_block_core_navigation( $attributes, $content, $block ) {
 
+	static $seen_menu_names = array();
+
 	// Flag used to indicate whether the rendered output is considered to be
 	// a fallback (i.e. the block has no menu associated with it).
 	$is_fallback = false;
 
+	$nav_menu_name = '';
+
 	/**
 	 * Deprecated:
 	 * The rgbTextColor and rgbBackgroundColor attributes
@@ -428,6 +432,14 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 			return '';
 		}
 
+		$nav_menu_name = $navigation_post->post_title;
+
+		if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) {
+			++$seen_menu_names[ $nav_menu_name ];
+		} else {
+			$seen_menu_names[ $nav_menu_name ] = 1;
+		}
+
 		$parsed_blocks = parse_blocks( $navigation_post->post_content );
 
 		// 'parse_blocks' includes a null block with '\n\n' as the content when
@@ -474,6 +486,10 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$layout_class .= ' no-wrap';
 	}
 
+	// Manually add block support text decoration as CSS class.
+	$text_decoration       = _wp_array_get( $attributes, array( 'style', 'typography', 'textDecoration' ), null );
+	$text_decoration_class = sprintf( 'has-text-decoration-%s', $text_decoration );
+
 	$colors     = block_core_navigation_build_css_colors( $attributes );
 	$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
 	$classes    = array_merge(
@@ -481,7 +497,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$font_sizes['css_classes'],
 		$is_responsive_menu ? array( 'is-responsive' ) : array(),
 		$layout_class ? array( $layout_class ) : array(),
-		$is_fallback ? array( 'is-fallback' ) : array()
+		$is_fallback ? array( 'is-fallback' ) : array(),
+		$text_decoration ? array( $text_decoration_class ) : array()
 	);
 
 	$inner_blocks_html = '';
@@ -508,10 +525,18 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : '';
 
+	// If the menu name has been used previously then append an ID
+	// to the name to ensure uniqueness across a given post.
+	if ( isset( $seen_menu_names[ $nav_menu_name ] ) && $seen_menu_names[ $nav_menu_name ] > 1 ) {
+		$count         = $seen_menu_names[ $nav_menu_name ];
+		$nav_menu_name = $nav_menu_name . ' ' . ( $count );
+	}
+
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
-			'class' => implode( ' ', $classes ),
-			'style' => $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'],
+			'class'      => implode( ' ', $classes ),
+			'style'      => $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'],
+			'aria-label' => $nav_menu_name,
 		)
 	);
 

package/src/navigation/style.scss

@@ -51,25 +51,27 @@ $navigation-icon-size: 24px;
 		padding: 0;
 	}
 
-	// Force links to inherit text decoration applied to navigation block.
-	// The extra selector adds specificity to ensure it works when user-set.
-	&[style*="text-decoration"] {
-		.wp-block-navigation-item,
-		.wp-block-navigation__submenu-container {
-			text-decoration: inherit;
+	// The following rules provide class based application of user selected text
+	// decoration via block supports.
+	&.has-text-decoration-underline .wp-block-navigation-item__content {
+		text-decoration: underline;
+
+		&:focus,
+		&:active {
+			text-decoration: underline;
 		}
+	}
 
-		a {
-			text-decoration: inherit;
+	&.has-text-decoration-line-through .wp-block-navigation-item__content {
+		text-decoration: line-through;
 
-			&:focus,
-			&:active {
-				text-decoration: inherit;
-			}
+		&:focus,
+		&:active {
+			text-decoration: line-through;
 		}
 	}
 
-	&:not([style*="text-decoration"]) {
+	&:where(:not([class*="has-text-decoration"])) {
 		a {
 			text-decoration: none;
 

package/src/navigation/use-navigation-entities.js

@@ -1,11 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-import {
-	store as coreStore,
-	__experimentalUseEntityRecords as useEntityRecords,
-} from '@wordpress/core-data';
+import { __experimentalUseEntityRecords as useEntityRecords } from '@wordpress/core-data';
 
 /**
  * @typedef {Object} NavigationEntitiesData
@@ -29,82 +25,50 @@ import {
  * @return { NavigationEntitiesData } the entity data.
  */
 export default function useNavigationEntities( menuId ) {
-	return {
-		...usePageEntities(),
-		...useMenuEntities(),
-		...useMenuItemEntities( menuId ),
-	};
-}
+	const {
+		records: menus,
+		isResolving: isResolvingMenus,
+		hasResolved: hasResolvedMenus,
+	} = useEntityRecords( 'root', 'menu', { per_page: -1, context: 'view' } );
 
-function useMenuEntities() {
-	const { records, isResolving, hasResolved } = useEntityRecords(
+	const {
+		records: pages,
+		isResolving: isResolvingPages,
+		hasResolved: hasResolvedPages,
+	} = useEntityRecords( 'postType', 'page', {
+		parent: 0,
+		order: 'asc',
+		orderby: 'id',
+		per_page: -1,
+		context: 'view',
+	} );
+
+	const {
+		records: menuItems,
+		hasResolved: hasResolvedMenuItems,
+	} = useEntityRecords(
 		'root',
-		'menu',
-		{ per_page: -1, context: 'view' }
+		'menuItem',
+		{
+			menus: menuId,
+			per_page: -1,
+			context: 'view',
+		},
+		{ enabled: !! menuId }
 	);
 
 	return {
-		menus: records,
-		isResolvingMenus: isResolving,
-		hasResolvedMenus: hasResolved,
-		hasMenus: !! ( hasResolved && records?.length ),
-	};
-}
-
-function useMenuItemEntities( menuId ) {
-	const { menuItems, hasResolvedMenuItems } = useSelect(
-		( select ) => {
-			const { getMenuItems, hasFinishedResolution } = select( coreStore );
-
-			const hasSelectedMenu = menuId !== undefined;
-			const menuItemsParameters = hasSelectedMenu
-				? [
-						{
-							menus: menuId,
-							per_page: -1,
-							context: 'view',
-						},
-				  ]
-				: undefined;
+		pages,
+		isResolvingPages,
+		hasResolvedPages,
+		hasPages: !! ( hasResolvedPages && pages?.length ),
 
-			return {
-				menuItems: hasSelectedMenu
-					? getMenuItems( ...menuItemsParameters )
-					: undefined,
-				hasResolvedMenuItems: hasSelectedMenu
-					? hasFinishedResolution(
-							'getMenuItems',
-							menuItemsParameters
-					  )
-					: false,
-			};
-		},
-		[ menuId ]
-	);
+		menus,
+		isResolvingMenus,
+		hasResolvedMenus,
+		hasMenus: !! ( hasResolvedMenus && menus?.length ),
 
-	return {
 		menuItems,
 		hasResolvedMenuItems,
 	};
 }
-
-function usePageEntities() {
-	const { records, isResolving, hasResolved } = useEntityRecords(
-		'postType',
-		'page',
-		{
-			parent: 0,
-			order: 'asc',
-			orderby: 'id',
-			per_page: -1,
-			context: 'view',
-		}
-	);
-
-	return {
-		pages: records,
-		isResolvingPages: isResolving,
-		hasResolvedPages: hasResolved,
-		hasPages: !! ( hasResolved && records?.length ),
-	};
-}

package/src/navigation/use-navigation-menu.js

@@ -60,6 +60,10 @@ export default function useNavigationMenu( ref ) {
 					! ref ||
 					( hasResolvedNavigationMenu && ! rawNavigationMenu ),
 				canSwitchNavigationMenu,
+				isResolvingNavigationMenus: isResolving(
+					'getEntityRecords',
+					navigationMenuMultipleArgs
+				),
 				hasResolvedNavigationMenus: hasFinishedResolution(
 					'getEntityRecords',
 					navigationMenuMultipleArgs

package/src/navigation-link/block.json

@@ -52,6 +52,7 @@
 		"fontSize",
 		"customFontSize",
 		"showSubmenuIcon",
+		"maxNestingLevel",
 		"style"
 	],
 	"supports": {

package/src/navigation-link/edit.js

@@ -18,6 +18,7 @@ import {
 	ToolbarButton,
 	Tooltip,
 	ToolbarGroup,
+	KeyboardShortcuts,
 } from '@wordpress/components';
 import { displayShortcut, isKeyboardEvent, ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
@@ -48,8 +49,6 @@ import { store as coreStore } from '@wordpress/core-data';
  */
 import { name } from './block.json';
 
-const MAX_NESTING = 5;
-
 /**
  * A React hook to determine if it's dragging within the target element.
  *
@@ -265,6 +264,64 @@ export const updateNavigationLinkBlockAttributes = (
 	} );
 };
 
+const useIsInvalidLink = ( kind, type, id ) => {
+	const isPostType =
+		kind === 'post-type' || type === 'post' || type === 'page';
+	const hasId = Number.isInteger( id );
+	const postStatus = useSelect(
+		( select ) => {
+			if ( ! isPostType ) {
+				return null;
+			}
+			const { getEntityRecord } = select( coreStore );
+			return getEntityRecord( 'postType', type, id )?.status;
+		},
+		[ isPostType, type, id ]
+	);
+
+	// Check Navigation Link validity if:
+	// 1. Link is 'post-type'.
+	// 2. It has an id.
+	// 3. It's neither null, nor undefined, as valid items might be either of those while loading.
+	// If those conditions are met, check if
+	// 1. The post status is published.
+	// 2. The Navigation Link item has no label.
+	// If either of those is true, invalidate.
+	const isInvalid =
+		isPostType && hasId && postStatus && 'trash' === postStatus;
+	const isDraft = 'draft' === postStatus;
+
+	return [ isInvalid, isDraft ];
+};
+
+const useMissingText = ( type ) => {
+	let missingText = '';
+
+	switch ( type ) {
+		case 'post':
+			/* translators: label for missing post in navigation link block */
+			missingText = __( 'Select post' );
+			break;
+		case 'page':
+			/* translators: label for missing page in navigation link block */
+			missingText = __( 'Select page' );
+			break;
+		case 'category':
+			/* translators: label for missing category in navigation link block */
+			missingText = __( 'Select category' );
+			break;
+		case 'tag':
+			/* translators: label for missing tag in navigation link block */
+			missingText = __( 'Select tag' );
+			break;
+		default:
+			/* translators: label for missing values in navigation link block */
+			missingText = __( 'Add link' );
+	}
+
+	return missingText;
+};
+
 /**
  * Removes HTML from a given string.
  * Note the does not provide XSS protection or otherwise attempt
@@ -329,6 +386,7 @@ export default function NavigationLinkEdit( {
 	clientId,
 } ) {
 	const {
+		id,
 		label,
 		type,
 		opensInNewTab,
@@ -339,6 +397,9 @@ export default function NavigationLinkEdit( {
 		kind,
 	} = attributes;
 
+	const [ isInvalid, isDraft ] = useIsInvalidLink( kind, type, id );
+	const { maxNestingLevel } = context;
+
 	const link = {
 		url,
 		opensInNewTab,
@@ -390,7 +451,7 @@ export default function NavigationLinkEdit( {
 					getBlockParentsByBlockName( clientId, [
 						name,
 						'core/navigation-submenu',
-					] ).length >= MAX_NESTING,
+					] ).length >= maxNestingLevel,
 				isTopLevelLink:
 					getBlockName( getBlockRootClientId( clientId ) ) ===
 					'core/navigation',
@@ -589,36 +650,23 @@ export default function NavigationLinkEdit( {
 		onKeyDown,
 	} );
 
-	if ( ! url ) {
+	if ( ! url || isInvalid || isDraft ) {
 		blockProps.onClick = () => setIsLinkOpen( true );
 	}
 
 	const classes = classnames( 'wp-block-navigation-item__content', {
-		'wp-block-navigation-link__placeholder': ! url,
+		'wp-block-navigation-link__placeholder': ! url || isInvalid || isDraft,
 	} );
 
-	let missingText = '';
-	switch ( type ) {
-		case 'post':
-			/* translators: label for missing post in navigation link block */
-			missingText = __( 'Select post' );
-			break;
-		case 'page':
-			/* translators: label for missing page in navigation link block */
-			missingText = __( 'Select page' );
-			break;
-		case 'category':
-			/* translators: label for missing category in navigation link block */
-			missingText = __( 'Select category' );
-			break;
-		case 'tag':
-			/* translators: label for missing tag in navigation link block */
-			missingText = __( 'Select tag' );
-			break;
-		default:
-			/* translators: label for missing values in navigation link block */
-			missingText = __( 'Add link' );
-	}
+	const missingText = useMissingText( type, isInvalid, isDraft );
+	/* translators: Whether the navigation link is Invalid or a Draft. */
+	const placeholderText = `(${
+		isInvalid ? __( 'Invalid' ) : __( 'Draft' )
+	})`;
+	const tooltipText =
+		isInvalid || isDraft
+			? __( 'This item has been deleted, or is a draft' )
+			: __( 'This item is missing a link' );
 
 	return (
 		<Fragment>
@@ -677,46 +725,90 @@ export default function NavigationLinkEdit( {
 					{ /* eslint-enable */ }
 					{ ! url ? (
 						<div className="wp-block-navigation-link__placeholder-text">
-							<Tooltip
-								position="top center"
-								text={ __( 'This item is missing a link' ) }
-							>
-								<span>{ missingText }</span>
+							<Tooltip position="top center" text={ tooltipText }>
+								<>
+									<span>{ missingText }</span>
+									<span className="wp-block-navigation-link__missing_text-tooltip">
+										{ tooltipText }
+									</span>
+								</>
 							</Tooltip>
 						</div>
 					) : (
-						<RichText
-							ref={ ref }
-							identifier="label"
-							className="wp-block-navigation-item__label"
-							value={ label }
-							onChange={ ( labelValue ) =>
-								setAttributes( {
-									label: labelValue,
-								} )
-							}
-							onMerge={ mergeBlocks }
-							onReplace={ onReplace }
-							__unstableOnSplitAtEnd={ () =>
-								insertBlocksAfter(
-									createBlock( 'core/navigation-link' )
-								)
-							}
-							aria-label={ __( 'Navigation link text' ) }
-							placeholder={ itemLabelPlaceholder }
-							withoutInteractiveFormatting
-							allowedFormats={ [
-								'core/bold',
-								'core/italic',
-								'core/image',
-								'core/strikethrough',
-							] }
-							onClick={ () => {
-								if ( ! url ) {
-									setIsLinkOpen( true );
-								}
-							} }
-						/>
+						<>
+							{ ! isInvalid && ! isDraft && (
+								<>
+									<RichText
+										ref={ ref }
+										identifier="label"
+										className="wp-block-navigation-item__label"
+										value={ label }
+										onChange={ ( labelValue ) =>
+											setAttributes( {
+												label: labelValue,
+											} )
+										}
+										onMerge={ mergeBlocks }
+										onReplace={ onReplace }
+										__unstableOnSplitAtEnd={ () =>
+											insertBlocksAfter(
+												createBlock(
+													'core/navigation-link'
+												)
+											)
+										}
+										aria-label={ __(
+											'Navigation link text'
+										) }
+										placeholder={ itemLabelPlaceholder }
+										withoutInteractiveFormatting
+										allowedFormats={ [
+											'core/bold',
+											'core/italic',
+											'core/image',
+											'core/strikethrough',
+										] }
+										onClick={ () => {
+											if ( ! url ) {
+												setIsLinkOpen( true );
+											}
+										} }
+									/>
+									{ description && (
+										<span className="wp-block-navigation-item__description">
+											{ description }
+										</span>
+									) }
+								</>
+							) }
+							{ ( isInvalid || isDraft ) && (
+								<div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">
+									<KeyboardShortcuts
+										shortcuts={ {
+											enter: () =>
+												isSelected &&
+												setIsLinkOpen( true ),
+										} }
+									/>
+									<Tooltip
+										position="top center"
+										text={ tooltipText }
+									>
+										<>
+											<span>
+												{
+													/* Trim to avoid trailing white space when the placeholder text is not present */
+													`${ label } ${ placeholderText }`.trim()
+												}
+											</span>
+											<span className="wp-block-navigation-link__missing_text-tooltip">
+												{ tooltipText }
+											</span>
+										</>
+									</Tooltip>
+								</div>
+							) }
+						</>
 					) }
 					{ isLinkOpen && (
 						<Popover

package/src/navigation-link/editor.scss

@@ -55,7 +55,18 @@
 	}
 }
 
+.wp-block-navigation-link__invalid-item {
+	color: #000;
+}
 
+.wp-block-navigation-link__missing_text-tooltip {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+}
 /**
  * Menu item setup state. Is shown when a menu item has no URL configured.
  */