@wordpress/block-library 6.0.20 → 6.1.0

package/src/navigation/block.json

@@ -1,14 +1,11 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/navigation",
 	"title": "Navigation",
 	"category": "theme",
 	"description": "A collection of blocks that allow visitors to get around your site.",
-	"keywords": [
-		"menu",
-		"navigation",
-		"links"
-	],
+	"keywords": [ "menu", "navigation", "links" ],
 	"textdomain": "default",
 	"attributes": {
 		"ref": {
@@ -44,6 +41,10 @@
 			"type": "string",
 			"default": "mobile"
 		},
+		"hasIcon": {
+			"type": "boolean",
+			"default": true
+		},
 		"__unstableLocation": {
 			"type": "string"
 		},
@@ -78,10 +79,7 @@
 		"orientation": "orientation"
 	},
 	"supports": {
-		"align": [
-			"wide",
-			"full"
-		],
+		"align": [ "wide", "full" ],
 		"anchor": true,
 		"html": false,
 		"inserter": true,
@@ -97,7 +95,11 @@
 			}
 		},
 		"spacing": {
-			"units": [ "px", "em", "rem", "vh", "vw" ]
+			"blockGap": true,
+			"units": [ "px", "em", "rem", "vh", "vw" ],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
 		},
 		"__experimentalLayout": {
 			"allowSwitching": false,

package/src/navigation/edit/index.js

@@ -45,6 +45,7 @@ import { __ } from '@wordpress/i18n';
  */
 import useListViewModal from './use-list-view-modal';
 import useNavigationMenu from '../use-navigation-menu';
+import useNavigationEntities from '../use-navigation-entities';
 import Placeholder from './placeholder';
 import PlaceholderPreview from './placeholder/placeholder-preview';
 import ResponsiveWrapper from './responsive-wrapper';
@@ -54,6 +55,7 @@ import NavigationMenuNameControl from './navigation-menu-name-control';
 import UnsavedInnerBlocks from './unsaved-inner-blocks';
 import NavigationMenuDeleteControl from './navigation-menu-delete-control';
 import useNavigationNotice from './use-navigation-notice';
+import OverlayMenuIcon from './overlay-menu-icon';
 
 const EMPTY_ARRAY = [];
 
@@ -116,6 +118,7 @@ function Navigation( {
 			orientation = 'horizontal',
 			flexWrap = 'wrap',
 		} = {},
+		hasIcon,
 	} = attributes;
 
 	let areaMenu,
@@ -151,10 +154,15 @@ function Navigation( {
 		`navigationMenu/${ ref }`
 	);
 
+	// Preload classic menus, so that they don't suddenly pop-in when viewing
+	// the Select Menu dropdown.
+	useNavigationEntities();
+
 	const {
 		hasUncontrolledInnerBlocks,
 		uncontrolledInnerBlocks,
 		isInnerBlockSelected,
+		hasSubmenus,
 	} = useSelect(
 		( select ) => {
 			const { getBlock, getBlocks, hasSelectedInnerBlock } = select(
@@ -207,6 +215,8 @@ function Navigation( {
 		false
 	);
 
+	const [ overlayMenuPreview, setOverlayMenuPreview ] = useState( false );
+
 	const {
 		isNavigationMenuResolved,
 		isNavigationMenuMissing,
@@ -461,6 +471,13 @@ function Navigation( {
 		? CustomPlaceholder
 		: Placeholder;
 
+	const isResponsive = 'never' !== overlayMenu;
+
+	const overlayMenuPreviewClasses = classnames(
+		'wp-block-navigation__overlay-menu-preview',
+		{ open: overlayMenuPreview }
+	);
+
 	return (
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider>
@@ -474,12 +491,15 @@ function Navigation( {
 							>
 								{ ( { onClose } ) => (
 									<NavigationMenuSelector
+										clientId={ clientId }
 										onSelect={ ( { id } ) => {
 											setRef( id );
 											onClose();
 										} }
 										onCreateNew={ startWithEmptyMenu }
-										showCreate={ canUserCreateNavigation }
+										canUserCreateNavigation={
+											canUserCreateNavigation
+										}
 									/>
 								) }
 							</ToolbarDropdownMenu>
@@ -491,6 +511,33 @@ function Navigation( {
 				<InspectorControls>
 					{ hasSubmenuIndicatorSetting && (
 						<PanelBody title={ __( 'Display' ) }>
+							{ isResponsive && (
+								<Button
+									className={ overlayMenuPreviewClasses }
+									onClick={ () => {
+										setOverlayMenuPreview(
+											! overlayMenuPreview
+										);
+									} }
+								>
+									{ hasIcon && <OverlayMenuIcon /> }
+									{ ! hasIcon && (
+										<span>{ __( 'Menu' ) }</span>
+									) }
+								</Button>
+							) }
+							{ overlayMenuPreview && (
+								<ToggleControl
+									label={ __( 'Show icon button' ) }
+									help={ __(
+										'Configure the visual appearance of the button opening the overlay menu.'
+									) }
+									onChange={ ( value ) =>
+										setAttributes( { hasIcon: value } )
+									}
+									checked={ hasIcon }
+								/>
+							) }
 							<h3>{ __( 'Overlay Menu' ) }</h3>
 							<ToggleGroupControl
 								label={ __( 'Configure overlay menu' ) }
@@ -517,26 +564,35 @@ function Navigation( {
 									label={ __( 'Always' ) }
 								/>
 							</ToggleGroupControl>
-							<h3>{ __( 'Submenus' ) }</h3>
-							<ToggleControl
-								checked={ openSubmenusOnClick }
-								onChange={ ( value ) => {
-									setAttributes( {
-										openSubmenusOnClick: value,
-									} );
-								} }
-								label={ __( 'Open on click' ) }
-							/>
-							{ ! attributes.openSubmenusOnClick && (
-								<ToggleControl
-									checked={ showSubmenuIcon }
-									onChange={ ( value ) => {
-										setAttributes( {
-											showSubmenuIcon: value,
-										} );
-									} }
-									label={ __( 'Show icons' ) }
-								/>
+							{ hasSubmenus && (
+								<>
+									<h3>{ __( 'Submenus' ) }</h3>
+									<ToggleControl
+										checked={ openSubmenusOnClick }
+										onChange={ ( value ) => {
+											setAttributes( {
+												openSubmenusOnClick: value,
+												...( value && {
+													showSubmenuIcon: true,
+												} ), // Make sure arrows are shown when we toggle this on.
+											} );
+										} }
+										label={ __( 'Open on click' ) }
+									/>
+
+									<ToggleControl
+										checked={ showSubmenuIcon }
+										onChange={ ( value ) => {
+											setAttributes( {
+												showSubmenuIcon: value,
+											} );
+										} }
+										disabled={
+											attributes.openSubmenusOnClick
+										}
+										label={ __( 'Show arrow' ) }
+									/>
+								</>
 							) }
 						</PanelBody>
 					) }
@@ -628,8 +684,10 @@ function Navigation( {
 						<ResponsiveWrapper
 							id={ clientId }
 							onToggle={ setResponsiveMenuVisibility }
+							label={ __( 'Menu' ) }
+							hasIcon={ hasIcon }
 							isOpen={ isResponsiveMenuOpen }
-							isResponsive={ 'never' !== overlayMenu }
+							isResponsive={ isResponsive }
 							isHiddenByDefault={ 'always' === overlayMenu }
 							classNames={ overlayClassnames }
 							styles={ overlayStyles }

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

@@ -27,7 +27,9 @@ const ALLOWED_BLOCKS = [
 	'core/navigation-submenu',
 ];
 
-const DEFAULT_BLOCK = [ 'core/navigation-link' ];
+const DEFAULT_BLOCK = {
+	name: 'core/navigation-link',
+};
 
 const LAYOUT = {
 	type: 'default',

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

@@ -11,18 +11,47 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 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';
 
 export default function NavigationMenuSelector( {
+	clientId,
 	onSelect,
 	onCreateNew,
-	showCreate = false,
+	canUserCreateNavigation = false,
 } ) {
+	const {
+		menus: classicMenus,
+		hasMenus: hasClassicMenus,
+	} = useNavigationEntities();
 	const { navigationMenus } = useNavigationMenu();
 	const ref = useEntityId( 'postType', 'wp_navigation' );
 
+	const createNavigationMenu = useCreateNavigationMenu( clientId );
+
+	const onFinishMenuCreation = async (
+		blocks,
+		navigationMenuTitle = null
+	) => {
+		if ( ! canUserCreateNavigation ) {
+			return;
+		}
+
+		const navigationMenu = await createNavigationMenu(
+			navigationMenuTitle,
+			blocks
+		);
+		onSelect( navigationMenu );
+	};
+
+	const convertClassicMenuToBlocks = useConvertClassicMenu(
+		onFinishMenuCreation
+	);
+
 	return (
 		<>
-			<MenuGroup>
+			<MenuGroup label={ __( 'Menus' ) }>
 				<MenuItemsChoice
 					value={ ref }
 					onSelect={ ( selectedId ) =>
@@ -46,19 +75,40 @@ export default function NavigationMenuSelector( {
 					} ) }
 				/>
 			</MenuGroup>
-			{ showCreate && (
-				<MenuGroup>
-					<MenuItem onClick={ onCreateNew }>
-						{ __( 'Create new menu' ) }
-					</MenuItem>
-					<MenuItem
-						href={ addQueryArgs( 'edit.php', {
-							post_type: 'wp_navigation',
-						} ) }
-					>
-						{ __( 'Manage menus' ) }
-					</MenuItem>
-				</MenuGroup>
+			{ canUserCreateNavigation && (
+				<>
+					{ hasClassicMenus && (
+						<MenuGroup label={ __( 'Classic Menus' ) }>
+							{ classicMenus.map( ( menu ) => {
+								return (
+									<MenuItem
+										onClick={ () => {
+											convertClassicMenuToBlocks(
+												menu.id,
+												menu.name
+											);
+										} }
+										key={ menu.id }
+									>
+										{ decodeEntities( menu.name ) }
+									</MenuItem>
+								);
+							} ) }
+						</MenuGroup>
+					) }
+					<MenuGroup label={ __( 'Tools' ) }>
+						<MenuItem onClick={ onCreateNew }>
+							{ __( 'Create new menu' ) }
+						</MenuItem>
+						<MenuItem
+							href={ addQueryArgs( 'edit.php', {
+								post_type: 'wp_navigation',
+							} ) }
+						>
+							{ __( 'Manage menus' ) }
+						</MenuItem>
+					</MenuGroup>
+				</>
 			) }
 		</>
 	);

package/src/navigation/edit/overlay-menu-icon.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Rect } from '@wordpress/primitives';
+
+export default function OverlayMenuIcon() {
+	return (
+		<SVG
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			width="24"
+			height="24"
+			role="img"
+			aria-hidden="true"
+			focusable="false"
+		>
+			<Rect x="4" y="7.5" width="16" height="1.5" />
+			<Rect x="4" y="15" width="16" height="1.5" />
+		</SVG>
+	);
+}

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

@@ -9,7 +9,6 @@ import {
 	MenuGroup,
 	MenuItem,
 } from '@wordpress/components';
-import { useCallback, useState, useEffect } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { navigation, Icon } from '@wordpress/icons';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -20,14 +19,13 @@ import { decodeEntities } from '@wordpress/html-entities';
 
 import useNavigationEntities from '../../use-navigation-entities';
 import PlaceholderPreview from './placeholder-preview';
-import menuItemsToBlocks from '../../menu-items-to-blocks';
 import useNavigationMenu from '../../use-navigation-menu';
 import useCreateNavigationMenu from '../use-create-navigation-menu';
+import useConvertClassicMenu from '../../use-convert-classic-menu';
 
 const ExistingMenusDropdown = ( {
-	canSwitchNavigationMenu,
+	showNavigationMenus,
 	navigationMenus,
-	setSelectedMenu,
 	onFinish,
 	menus,
 	onCreateFromMenu,
@@ -38,6 +36,10 @@ const ExistingMenusDropdown = ( {
 		iconPosition: 'right',
 		className: 'wp-block-navigation-placeholder__actions__dropdown',
 	};
+
+	const hasNavigationMenus = !! navigationMenus?.length;
+	const hasClassicMenus = !! menus?.length;
+
 	return (
 		<DropdownMenu
 			text={ __( 'Select menu' ) }
@@ -47,13 +49,12 @@ const ExistingMenusDropdown = ( {
 		>
 			{ ( { onClose } ) => (
 				<>
-					<MenuGroup label={ __( 'Menus' ) }>
-						{ canSwitchNavigationMenu &&
-							navigationMenus?.map( ( menu ) => {
+					{ showNavigationMenus && hasNavigationMenus && (
+						<MenuGroup label={ __( 'Menus' ) }>
+							{ navigationMenus.map( ( menu ) => {
 								return (
 									<MenuItem
 										onClick={ () => {
-											setSelectedMenu( menu.id );
 											onFinish( menu );
 										} }
 										onClose={ onClose }
@@ -65,15 +66,18 @@ const ExistingMenusDropdown = ( {
 									</MenuItem>
 								);
 							} ) }
-					</MenuGroup>
-					{ showClassicMenus && (
+						</MenuGroup>
+					) }
+					{ showClassicMenus && hasClassicMenus && (
 						<MenuGroup label={ __( 'Classic Menus' ) }>
-							{ menus?.map( ( menu ) => {
+							{ menus.map( ( menu ) => {
 								return (
 									<MenuItem
 										onClick={ () => {
-											setSelectedMenu( menu.id );
-											onCreateFromMenu( menu.name );
+											onCreateFromMenu(
+												menu.id,
+												menu.name
+											);
 										} }
 										onClose={ onClose }
 										key={ menu.id }
@@ -97,9 +101,6 @@ export default function NavigationPlaceholder( {
 	hasResolvedNavigationMenus,
 	canUserCreateNavigation = false,
 } ) {
-	const [ selectedMenu, setSelectedMenu ] = useState();
-	const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );
-	const [ menuName, setMenuName ] = useState( '' );
 	const createNavigationMenu = useCreateNavigationMenu( clientId );
 
 	const onFinishMenuCreation = async (
@@ -117,39 +118,18 @@ export default function NavigationPlaceholder( {
 		onFinish( navigationMenu, blocks );
 	};
 
+	const convertClassicMenu = useConvertClassicMenu( onFinishMenuCreation );
+
 	const {
 		isResolvingPages,
 		menus,
 		isResolvingMenus,
-		menuItems,
-		hasResolvedMenuItems,
 		hasPages,
 		hasMenus,
-	} = useNavigationEntities( selectedMenu );
+	} = useNavigationEntities();
 
 	const isStillLoading = isResolvingPages || isResolvingMenus;
 
-	const createFromMenu = useCallback(
-		( name ) => {
-			const { innerBlocks: blocks } = menuItemsToBlocks( menuItems );
-			onFinishMenuCreation( blocks, name );
-		},
-		[ menuItems, menuItemsToBlocks, onFinish ]
-	);
-
-	const onCreateFromMenu = ( name ) => {
-		// If we have menu items, create the block right away.
-		if ( hasResolvedMenuItems ) {
-			createFromMenu( name );
-			return;
-		}
-
-		// Otherwise, create the block when resolution finishes.
-		setIsCreatingFromMenu( true );
-		// Store the name to use later.
-		setMenuName( name );
-	};
-
 	const onCreateEmptyMenu = () => {
 		onFinishMenuCreation( [] );
 	};
@@ -159,17 +139,14 @@ export default function NavigationPlaceholder( {
 		onFinishMenuCreation( block );
 	};
 
-	useEffect( () => {
-		// If the user selected a menu but we had to wait for menu items to
-		// finish resolving, then create the block once resolution finishes.
-		if ( isCreatingFromMenu && hasResolvedMenuItems ) {
-			createFromMenu( menuName );
-			setIsCreatingFromMenu( false );
-		}
-	}, [ isCreatingFromMenu, hasResolvedMenuItems, menuName ] );
-
 	const { navigationMenus } = useNavigationMenu();
 
+	const hasNavigationMenus = !! navigationMenus?.length;
+
+	const showSelectMenus =
+		( canSwitchNavigationMenu || canUserCreateNavigation ) &&
+		( hasNavigationMenus || hasMenus );
+
 	return (
 		<>
 			{ ( ! hasResolvedNavigationMenus || isStillLoading ) && (
@@ -187,17 +164,16 @@ export default function NavigationPlaceholder( {
 
 							<hr />
 
-							{ hasMenus || navigationMenus?.length ? (
+							{ showSelectMenus ? (
 								<>
 									<ExistingMenusDropdown
-										canSwitchNavigationMenu={
+										showNavigationMenus={
 											canSwitchNavigationMenu
 										}
 										navigationMenus={ navigationMenus }
-										setSelectedMenu={ setSelectedMenu }
 										onFinish={ onFinish }
 										menus={ menus }
-										onCreateFromMenu={ onCreateFromMenu }
+										onCreateFromMenu={ convertClassicMenu }
 										showClassicMenus={
 											canUserCreateNavigation
 										}

package/src/navigation/edit/responsive-wrapper.js

@@ -8,9 +8,13 @@ import classnames from 'classnames';
  */
 import { close, Icon } from '@wordpress/icons';
 import { Button } from '@wordpress/components';
-import { SVG, Rect } from '@wordpress/primitives';
 import { __ } from '@wordpress/i18n';
 
+/**
+ * Internal dependencies
+ */
+import OverlayMenuIcon from './overlay-menu-icon';
+
 export default function ResponsiveWrapper( {
 	children,
 	id,
@@ -20,6 +24,7 @@ export default function ResponsiveWrapper( {
 	isHiddenByDefault,
 	classNames,
 	styles,
+	hasIcon,
 } ) {
 	if ( ! isResponsive ) {
 		return children;
@@ -57,18 +62,12 @@ export default function ResponsiveWrapper( {
 					className={ openButtonClasses }
 					onClick={ () => onToggle( true ) }
 				>
-					<SVG
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 24 24"
-						width="24"
-						height="24"
-						role="img"
-						aria-hidden="true"
-						focusable="false"
-					>
-						<Rect x="4" y="7.5" width="16" height="1.5" />
-						<Rect x="4" y="15" width="16" height="1.5" />
-					</SVG>
+					{ hasIcon && <OverlayMenuIcon /> }
+					{ ! hasIcon && (
+						<span className="wp-block-navigation__toggle_button_label">
+							{ __( 'Menu' ) }
+						</span>
+					) }
 				</Button>
 			) }
 

package/src/navigation/editor.scss

@@ -12,11 +12,10 @@
 		padding-left: 0;
 	}
 
-	// Revert any left/right margins.
+	// Revert any margins.
 	// This also makes it work with classic theme auto margins.
 	.wp-block-navigation-item.wp-block {
-		margin-left: revert;
-		margin-right: revert;
+		margin: revert;
 	}
 }
 
@@ -574,3 +573,19 @@ body.editor-styles-wrapper
 	justify-content: center;
 	margin-bottom: $grid-unit-20;
 }
+
+.wp-block-navigation__overlay-menu-preview {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	background-color: $gray-100;
+	padding: 0 $grid-unit-30;
+	height: $grid-unit-40 * 2;
+	margin-bottom: $grid-unit-15;
+
+	&.open {
+		box-shadow: inset 0 0 0 $border-width $gray-200;
+		outline: 1px solid transparent; // Box shadow is removed in high contrast mode, a transparent outline is made opaque.
+		background-color: $white;
+	}
+}

package/src/navigation/index.php

@@ -343,6 +343,8 @@ function block_core_navigation_get_fallback_blocks() {
 	 * To customise the blocks provided return an array of blocks - these should be valid
 	 * children of the `core/navigation` block.
 	 *
+	 * @since 5.9.0
+	 *
 	 * @param array[] default fallback blocks provided by the default block mechanic.
 	 */
 	return apply_filters( 'block_core_navigation_render_fallback', $fallback_blocks );
@@ -351,9 +353,9 @@ function block_core_navigation_get_fallback_blocks() {
 /**
  * Renders the `core/navigation` block on server.
  *
- * @param array $attributes The block attributes.
- * @param array $content The saved content.
- * @param array $block The parsed block.
+ * @param array    $attributes The block attributes.
+ * @param string   $content    The saved content.
+ * @param WP_Block $block      The parsed block.
  *
  * @return string Returns the post content with the legacy widget added.
  */
@@ -537,8 +539,12 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$is_hidden_by_default ? 'always-shown' : '',
 	);
 
+	$toggle_button_icon        = '<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg>';
+	$should_display_icon_label = isset( $attributes['hasIcon'] ) && true === $attributes['hasIcon'];
+	$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"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
+		'<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">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" aria-label="%8$s">
@@ -549,14 +555,15 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 					</div>
 				</div>
 			</div>',
-		$modal_unique_id,
+		esc_attr( $modal_unique_id ),
 		$inner_blocks_html,
 		__( 'Open menu' ), // Open button label.
 		__( 'Close menu' ), // Close button label.
-		implode( ' ', $responsive_container_classes ),
-		implode( ' ', $open_button_classes ),
-		$colors['overlay_inline_styles'],
-		__( 'Menu' )
+		esc_attr( implode( ' ', $responsive_container_classes ) ),
+		esc_attr( implode( ' ', $open_button_classes ) ),
+		safecss_filter_attr( $colors['overlay_inline_styles'] ),
+		__( 'Menu' ),
+		$toggle_button_content
 	);
 
 	return sprintf(
@@ -569,8 +576,8 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 /**
  * Register the navigation block.
  *
- * @throws WP_Error An WP_Error exception parsing the block definition.
  * @uses render_block_core_navigation()
+ * @throws WP_Error An WP_Error exception parsing the block definition.
  */
 function register_block_core_navigation() {
 	register_block_type_from_metadata(