@wordpress/block-library 7.0.1 → 7.0.2

package/src/navigation/edit/navigation-menu-selector.js

@@ -2,8 +2,8 @@
  * WordPress dependencies
  */
 import { MenuGroup, MenuItem } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
+import { __, sprintf } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/html-entities';
 import { addQueryArgs } from '@wordpress/url';
 
 /**
@@ -13,20 +13,27 @@ import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 import useConvertClassicMenu from '../use-convert-classic-menu';
 import useCreateNavigationMenu from './use-create-navigation-menu';
-import ExistingMenusOptions from './existing-menus-options';
 
 export default function NavigationMenuSelector( {
 	clientId,
 	onSelect,
 	onCreateNew,
-	canUserCreateNavigation = false,
-	canUserSwitchNavigation = false,
+	showManageActions = false,
+	actionLabel,
 } ) {
+	/* translators: %s: The name of a menu. */
+	const createActionLabel = __( "Create from '%s'" );
+
+	actionLabel = actionLabel || createActionLabel;
+
+	const { menus: classicMenus } = useNavigationEntities();
+
 	const {
-		menus: classicMenus,
-		hasMenus: hasClassicMenus,
-	} = useNavigationEntities();
-	const { navigationMenus } = useNavigationMenu();
+		navigationMenus,
+		canUserCreateNavigationMenu,
+		canUserUpdateNavigationMenu,
+		canSwitchNavigationMenu,
+	} = useNavigationMenu();
 
 	const createNavigationMenu = useCreateNavigationMenu( clientId );
 
@@ -34,7 +41,7 @@ export default function NavigationMenuSelector( {
 		blocks,
 		navigationMenuTitle = null
 	) => {
-		if ( ! canUserCreateNavigation ) {
+		if ( ! canUserCreateNavigationMenu ) {
 			return;
 		}
 
@@ -49,9 +56,15 @@ export default function NavigationMenuSelector( {
 		onFinishMenuCreation
 	);
 
+	const hasNavigationMenus = !! navigationMenus?.length;
+	const hasClassicMenus = !! classicMenus?.length;
+	const showNavigationMenus = !! canSwitchNavigationMenu;
+	const showClassicMenus = !! canUserCreateNavigationMenu;
+	const hasManagePermissions =
+		canUserCreateNavigationMenu || canUserUpdateNavigationMenu;
 	const showSelectMenus =
-		( canUserSwitchNavigation || canUserCreateNavigation ) &&
-		( navigationMenus?.length || hasClassicMenus );
+		( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
+		( hasNavigationMenus || hasClassicMenus );
 
 	if ( ! showSelectMenus ) {
 		return null;
@@ -59,24 +72,56 @@ export default function NavigationMenuSelector( {
 
 	return (
 		<>
-			<ExistingMenusOptions
-				showNavigationMenus={ canUserSwitchNavigation }
-				showClassicMenus={ canUserCreateNavigation }
-				navigationMenus={ navigationMenus }
-				classicMenus={ classicMenus }
-				onSelectNavigationMenu={ onSelect }
-				onSelectClassicMenu={ ( { id, name } ) =>
-					convertClassicMenuToBlocks( id, name )
-				}
-				/* translators: %s: The name of a menu. */
-				actionLabel={ __( "Switch to '%s'" ) }
-			/>
+			{ showNavigationMenus && hasNavigationMenus && (
+				<MenuGroup label={ __( 'Menus' ) }>
+					{ navigationMenus.map( ( menu ) => {
+						const label = decodeEntities( menu.title.rendered );
+						return (
+							<MenuItem
+								onClick={ () => {
+									onSelect( menu );
+								} }
+								key={ menu.id }
+								aria-label={ sprintf( actionLabel, label ) }
+							>
+								{ label }
+							</MenuItem>
+						);
+					} ) }
+				</MenuGroup>
+			) }
+			{ showClassicMenus && hasClassicMenus && (
+				<MenuGroup label={ __( 'Classic Menus' ) }>
+					{ classicMenus.map( ( menu ) => {
+						const label = decodeEntities( menu.name );
+						return (
+							<MenuItem
+								onClick={ () => {
+									convertClassicMenuToBlocks(
+										menu.id,
+										menu.name
+									);
+								} }
+								key={ menu.id }
+								aria-label={ sprintf(
+									createActionLabel,
+									label
+								) }
+							>
+								{ label }
+							</MenuItem>
+						);
+					} ) }
+				</MenuGroup>
+			) }
 
-			{ canUserCreateNavigation && (
+			{ showManageActions && hasManagePermissions && (
 				<MenuGroup label={ __( 'Tools' ) }>
-					<MenuItem onClick={ onCreateNew }>
-						{ __( 'Create new menu' ) }
-					</MenuItem>
+					{ canUserCreateNavigationMenu && (
+						<MenuItem onClick={ onCreateNew }>
+							{ __( 'Create new menu' ) }
+						</MenuItem>
+					) }
 					<MenuItem
 						href={ addQueryArgs( 'edit.php', {
 							post_type: 'wp_navigation',

package/src/navigation/edit/placeholder/index.js

@@ -13,15 +13,14 @@ import useNavigationEntities from '../../use-navigation-entities';
 import PlaceholderPreview from './placeholder-preview';
 import useNavigationMenu from '../../use-navigation-menu';
 import useCreateNavigationMenu from '../use-create-navigation-menu';
-import useConvertClassicMenu from '../../use-convert-classic-menu';
-import ExistingMenusOptions from '../existing-menus-options';
+import NavigationMenuSelector from '../navigation-menu-selector';
 
 export default function NavigationPlaceholder( {
 	clientId,
 	onFinish,
 	canSwitchNavigationMenu,
 	hasResolvedNavigationMenus,
-	canUserCreateNavigation = false,
+	canUserCreateNavigationMenu = false,
 } ) {
 	const createNavigationMenu = useCreateNavigationMenu( clientId );
 
@@ -29,7 +28,7 @@ export default function NavigationPlaceholder( {
 		blocks,
 		navigationMenuTitle = null
 	) => {
-		if ( ! canUserCreateNavigation ) {
+		if ( ! canUserCreateNavigationMenu ) {
 			return;
 		}
 
@@ -40,11 +39,8 @@ export default function NavigationPlaceholder( {
 		onFinish( navigationMenu, blocks );
 	};
 
-	const convertClassicMenu = useConvertClassicMenu( onFinishMenuCreation );
-
 	const {
 		isResolvingPages,
-		menus,
 		isResolvingMenus,
 		hasMenus,
 	} = useNavigationEntities();
@@ -60,7 +56,7 @@ export default function NavigationPlaceholder( {
 	const hasNavigationMenus = !! navigationMenus?.length;
 
 	const showSelectMenus =
-		( canSwitchNavigationMenu || canUserCreateNavigation ) &&
+		( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
 		( hasNavigationMenus || hasMenus );
 
 	return (
@@ -94,29 +90,9 @@ export default function NavigationPlaceholder( {
 										popoverProps={ { isAlternate: true } }
 									>
 										{ () => (
-											<ExistingMenusOptions
-												showNavigationMenus={
-													canSwitchNavigationMenu
-												}
-												navigationMenus={
-													navigationMenus
-												}
-												onSelectNavigationMenu={
-													onFinish
-												}
-												classicMenus={ menus }
-												onSelectClassicMenu={ ( {
-													id,
-													name,
-												} ) =>
-													convertClassicMenu(
-														id,
-														name
-													)
-												}
-												showClassicMenus={
-													canUserCreateNavigation
-												}
+											<NavigationMenuSelector
+												clientId={ clientId }
+												onSelect={ onFinish }
 											/>
 										) }
 									</DropdownMenu>
@@ -124,7 +100,7 @@ export default function NavigationPlaceholder( {
 								</>
 							) : undefined }
 
-							{ canUserCreateNavigation && (
+							{ canUserCreateNavigationMenu && (
 								<Button
 									variant="tertiary"
 									onClick={ onCreateEmptyMenu }

package/src/navigation/index.php

@@ -515,7 +515,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		)
 	);
 
-	$modal_unique_id = uniqid();
+	$modal_unique_id = wp_unique_id( 'modal-' );
 
 	// Determine whether or not navigation elements should be wrapped in the markup required to make it responsive,
 	// return early if they don't.
@@ -544,12 +544,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 	$toggle_button_content     = $should_display_icon_label ? $toggle_button_icon : 'Menu';
 
 	$responsive_container_markup = sprintf(
-		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s">%9$s</button>
-			<div class="%5$s" style="%7$s" id="modal-%1$s">
+		'<button aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="%1$s">%9$s</button>
+			<div class="%5$s" style="%7$s" id="%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
-						<div class="wp-block-navigation__responsive-container-content" id="modal-%1$s-content">
+						<div class="wp-block-navigation__responsive-container-content" id="%1$s-content">
 							%2$s
 						</div>
 					</div>

package/src/navigation/style.scss

@@ -85,7 +85,6 @@ $navigation-icon-size: 24px;
 		align-self: center; // This one affects nested submenu indicators.
 		line-height: 0;
 		display: inline-block;
-		vertical-align: middle;
 		font-size: inherit;
 
 		// Affect the button as well.
@@ -95,15 +94,18 @@ $navigation-icon-size: 24px;
 		border: none;
 
 		// Scale to font size.
-		margin-left: 0.25em;
 		width: 0.6em;
 		height: 0.6em;
+		margin-left: 0.25em;
 
 		svg {
 			display: inline-block;
 			stroke: currentColor;
 			width: inherit;
 			height: inherit;
+
+			// Position the arrow to balance with the the text.
+			margin-top: 0.075em;
 		}
 	}
 
@@ -216,6 +218,11 @@ $navigation-icon-size: 24px;
 				}
 			}
 
+			// Push inwards from right edge of submenu.
+			.wp-block-navigation__submenu-icon {
+				margin-right: 0.25em;
+			}
+
 			// Reset the submenu indicator for horizontal flyouts.
 			.wp-block-navigation__submenu-icon svg {
 				transform: rotate(-90deg);
@@ -245,7 +252,7 @@ $navigation-icon-size: 24px;
 	}
 
 	// Show submenus on click.
-	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
+	.wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
 		visibility: visible;
 		overflow: visible;
 		opacity: 1;
@@ -300,6 +307,18 @@ button.wp-block-navigation-item__content {
 	cursor: pointer;
 }
 
+// When set to open on click, a button element is used.
+// We pad it to include the arrow icon in the clickable area.
+// The padding can be blanket for click, since you can't set click and hide the icon.
+.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle {
+	padding-right: 0.6em + 0.25em; // Same size as icon plus margin.
+
+	+ .wp-block-navigation__submenu-icon {
+		margin-left: -0.6em;
+		pointer-events: none; // Make the icon inert to allow click on the button.
+	}
+}
+
 
 /**
  * Margins

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

@@ -65,22 +65,22 @@ export default function useNavigationMenu( ref ) {
 				),
 				navigationMenu,
 				navigationMenus,
-				canUserUpdateNavigationEntity: ref
+				canUserUpdateNavigationMenu: ref
 					? canUser( 'update', 'navigation', ref )
 					: undefined,
-				hasResolvedCanUserUpdateNavigationEntity: hasFinishedResolution(
+				hasResolvedCanUserUpdateNavigationMenu: hasFinishedResolution(
 					'canUser',
 					[ 'update', 'navigation', ref ]
 				),
-				canUserDeleteNavigationEntity: ref
+				canUserDeleteNavigationMenu: ref
 					? canUser( 'delete', 'navigation', ref )
 					: undefined,
-				hasResolvedCanUserDeleteNavigationEntity: hasFinishedResolution(
+				hasResolvedCanUserDeleteNavigationMenu: hasFinishedResolution(
 					'canUser',
 					[ 'delete', 'navigation', ref ]
 				),
-				canUserCreateNavigation: canUser( 'create', 'navigation' ),
-				hasResolvedCanUserCreateNavigation: hasFinishedResolution(
+				canUserCreateNavigationMenu: canUser( 'create', 'navigation' ),
+				hasResolvedCanUserCreateNavigationMenu: hasFinishedResolution(
 					'canUser',
 					[ 'create', 'navigation' ]
 				),

package/src/navigation-link/index.php

@@ -193,37 +193,18 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		'<span class="wp-block-navigation-item__label">';
 
 	if ( isset( $attributes['label'] ) ) {
-		$html .= wp_kses(
-			$attributes['label'],
-			array(
-				'code'   => array(),
-				'em'     => array(),
-				'img'    => array(
-					'scale' => array(),
-					'class' => array(),
-					'style' => array(),
-					'src'   => array(),
-					'alt'   => array(),
-				),
-				's'      => array(),
-				'span'   => array(
-					'style' => array(),
-				),
-				'strong' => array(),
-			)
-		);
+		$html .= wp_kses_post( $attributes['label'] );
 	}
 
 	$html .= '</span>';
+	$html .= '</a>';
+	// End anchor tag content.
 
 	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 .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_link_render_submenu_icon() . '</span>';
 	}
 
-	$html .= '</a>';
-	// End anchor tag content.
-
 	if ( $has_submenu ) {
 		$inner_blocks_html = '';
 		foreach ( $block->inner_blocks as $inner_block ) {

package/src/navigation-submenu/edit.js

@@ -38,9 +38,10 @@ import {
 	createInterpolateElement,
 } from '@wordpress/element';
 import { placeCaretAtHorizontalEdge } from '@wordpress/dom';
-import { link as linkIcon } from '@wordpress/icons';
+import { link as linkIcon, removeSubmenu } from '@wordpress/icons';
 import { store as coreStore } from '@wordpress/core-data';
 import { speak } from '@wordpress/a11y';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -294,9 +295,11 @@ export default function NavigationSubmenuEdit( {
 	};
 	const { showSubmenuIcon, openSubmenusOnClick } = context;
 	const { saveEntityRecord } = useDispatch( coreStore );
-	const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
-		blockEditorStore
-	);
+
+	const {
+		__unstableMarkNextChangeAsNotPersistent,
+		replaceBlock,
+	} = useDispatch( blockEditorStore );
 	const [ isLinkOpen, setIsLinkOpen ] = useState( false );
 	const listItemRef = useRef( null );
 	const isDraggingWithin = useIsDraggingWithin( listItemRef );
@@ -312,6 +315,7 @@ export default function NavigationSubmenuEdit( {
 		selectedBlockHasDescendants,
 		userCanCreatePages,
 		userCanCreatePosts,
+		onlyDescendantIsEmptyLink,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -319,13 +323,31 @@ export default function NavigationSubmenuEdit( {
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
 				getBlockParentsByBlockName,
+				getBlock,
 			} = select( blockEditorStore );
 
+			let _onlyDescendantIsEmptyLink;
+
 			const selectedBlockId = getSelectedBlockClientId();
 
 			const descendants = getClientIdsOfDescendants( [ clientId ] )
 				.length;
 
+			const selectedBlockDescendants = getClientIdsOfDescendants( [
+				selectedBlockId,
+			] );
+
+			// Check for a single descendant in the submenu. If that block
+			// is a link block in a "placeholder" state with no label then
+			// we can consider as an "empty" link.
+			if ( selectedBlockDescendants?.length === 1 ) {
+				const singleBlock = getBlock( selectedBlockDescendants[ 0 ] );
+
+				_onlyDescendantIsEmptyLink =
+					singleBlock?.name === 'core/navigation-link' &&
+					! singleBlock?.attributes?.label;
+			}
+
 			return {
 				isAtMaxNesting:
 					getBlockParentsByBlockName( clientId, name ).length >=
@@ -341,9 +363,7 @@ export default function NavigationSubmenuEdit( {
 					false
 				),
 				hasDescendants: !! descendants,
-				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
-					selectedBlockId,
-				] )?.length,
+				selectedBlockHasDescendants: !! selectedBlockDescendants?.length,
 				userCanCreatePages: select( coreStore ).canUser(
 					'create',
 					'pages'
@@ -352,6 +372,7 @@ export default function NavigationSubmenuEdit( {
 					'create',
 					'posts'
 				),
+				onlyDescendantIsEmptyLink: _onlyDescendantIsEmptyLink,
 			};
 		},
 		[ clientId ]
@@ -529,6 +550,14 @@ export default function NavigationSubmenuEdit( {
 
 	const ParentElement = openSubmenusOnClick ? 'button' : 'a';
 
+	function transformToLink() {
+		const newLinkBlock = createBlock( 'core/navigation-link', attributes );
+		replaceBlock( clientId, newLinkBlock );
+	}
+
+	const canConvertToLink =
+		! selectedBlockHasDescendants || onlyDescendantIsEmptyLink;
+
 	return (
 		<Fragment>
 			<BlockControls>
@@ -542,6 +571,15 @@ export default function NavigationSubmenuEdit( {
 							onClick={ () => setIsLinkOpen( true ) }
 						/>
 					) }
+
+					<ToolbarButton
+						name="revert"
+						icon={ removeSubmenu }
+						title={ __( 'Convert to Link' ) }
+						onClick={ transformToLink }
+						className="wp-block-navigation__submenu__revert"
+						isDisabled={ ! canConvertToLink }
+					/>
 				</ToolbarGroup>
 			</BlockControls>
 			<InspectorControls>
@@ -657,12 +695,12 @@ export default function NavigationSubmenuEdit( {
 							/>
 						</Popover>
 					) }
-					{ ( showSubmenuIcon || openSubmenusOnClick ) && (
-						<span className="wp-block-navigation__submenu-icon">
-							<ItemSubmenuIcon />
-						</span>
-					) }
 				</ParentElement>
+				{ ( showSubmenuIcon || openSubmenusOnClick ) && (
+					<span className="wp-block-navigation__submenu-icon">
+						<ItemSubmenuIcon />
+					</span>
+				) }
 				<div { ...innerBlocksProps } />
 			</div>
 		</Fragment>

package/src/navigation-submenu/index.php

@@ -167,25 +167,7 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 	$label = '';
 
 	if ( isset( $attributes['label'] ) ) {
-		$label .= wp_kses(
-			$attributes['label'],
-			array(
-				'code'   => array(),
-				'em'     => array(),
-				'img'    => array(
-					'scale' => array(),
-					'class' => array(),
-					'style' => array(),
-					'src'   => array(),
-					'alt'   => array(),
-				),
-				's'      => array(),
-				'span'   => array(
-					'style' => array(),
-				),
-				'strong' => array(),
-			)
-		);
+		$label .= wp_kses_post( $attributes['label'] );
 	}
 
 	$aria_label = sprintf(
@@ -245,10 +227,10 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
 
 		$html .= '</span>';
 
-		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_submenu_render_submenu_icon() . '</span>';
-
 		$html .= '</button>';
 
+		$html .= '<span class="wp-block-navigation__submenu-icon">' . block_core_navigation_submenu_render_submenu_icon() . '</span>';
+
 	}
 
 	if ( $has_submenu ) {

package/src/page-list/edit.js

@@ -12,12 +12,7 @@ import {
 	useBlockProps,
 	getColorClassName,
 } from '@wordpress/block-editor';
-import {
-	ToolbarButton,
-	Placeholder,
-	Spinner,
-	Notice,
-} from '@wordpress/components';
+import { ToolbarButton, Spinner, Notice } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useMemo, useState, memo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -77,9 +72,7 @@ export default function PageListEdit( { context, clientId } ) {
 			) }
 			{ ! hasResolvedPages && (
 				<div { ...blockProps }>
-					<Placeholder>
-						<Spinner />
-					</Placeholder>
+					<Spinner />
 				</div>
 			) }
 
@@ -196,7 +189,17 @@ const PageItems = memo( function PageItems( {
 				} ) }
 			>
 				{ hasChildren && context.openSubmenusOnClick ? (
-					<ItemSubmenuToggle title={ page.title?.rendered } />
+					<>
+						<button
+							className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
+							aria-expanded="false"
+						>
+							{ page.title?.rendered }
+						</button>
+						<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
+							<ItemSubmenuIcon />
+						</span>
+					</>
 				) : (
 					<a
 						className={ classnames(
@@ -213,7 +216,14 @@ const PageItems = memo( function PageItems( {
 				{ hasChildren && (
 					<>
 						{ ! context.openSubmenusOnClick &&
-							context.showSubmenuIcon && <ItemSubmenuToggle /> }
+							context.showSubmenuIcon && (
+								<button
+									className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"
+									aria-expanded="false"
+								>
+									<ItemSubmenuIcon />
+								</button>
+							) }
 						<ul
 							className={ classnames( 'submenu-container', {
 								'wp-block-navigation__submenu-container': isNavigationChild,
@@ -232,17 +242,3 @@ const PageItems = memo( function PageItems( {
 		);
 	} );
 } );
-
-function ItemSubmenuToggle( { title } ) {
-	return (
-		<button
-			className="wp-block-navigation-item__content wp-block-navigation-submenu__toggle"
-			aria-expanded="false"
-		>
-			{ title }
-			<span className="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon">
-				<ItemSubmenuIcon />
-			</span>
-		</button>
-	);
-}

package/src/page-list/editor.scss

@@ -27,16 +27,6 @@
 	pointer-events: none;
 }
 
-.wp-block-page-list .components-placeholder {
-	min-height: 0;
-	padding: 0;
-	background-color: inherit;
-
-	.components-spinner {
-		margin: 0.5em;
-	}
-}
-
 // Modal that shows conversion option.
 .wp-block-page-list-modal {
 	@include break-small() {