@wordpress/block-library 8.2.0 → 8.3.0

package/src/navigation/edit/menu-inspector-controls.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import {
-	__experimentalOffCanvasEditor as OffCanvasEditor,
+	experiments as blockEditorExperiments,
 	InspectorControls,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
@@ -18,19 +18,22 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ManageMenusButton from './manage-menus-button';
 import NavigationMenuSelector from './navigation-menu-selector';
 import { LeafMoreMenu } from '../leaf-more-menu';
+import { unlock } from '../../experiments';
+import DeletedNavigationWarning from './deleted-navigation-warning';
 
 /* translators: %s: The name of a menu. */
 const actionLabel = __( "Switch to '%s'" );
 
-const ExperimentMainContent = ( {
+const MainContent = ( {
 	clientId,
 	currentMenuId,
 	isLoading,
 	isNavigationMenuMissing,
+	onCreateNew,
 } ) => {
+	const { OffCanvasEditor } = unlock( blockEditorExperiments );
 	// Provide a hierarchy of clientIds for the given Navigation block (clientId).
 	// This is required else the list view will display the entire block tree.
 	const clientIdsTree = useSelect(
@@ -45,6 +48,10 @@ const ExperimentMainContent = ( {
 		return <p>{ __( 'Select or create a menu' ) }</p>;
 	}
 
+	if ( isNavigationMenuMissing ) {
+		return <DeletedNavigationWarning onCreateNew={ onCreateNew } />;
+	}
+
 	if ( isLoading ) {
 		return <Spinner />;
 	}
@@ -53,13 +60,12 @@ const ExperimentMainContent = ( {
 		<OffCanvasEditor
 			blocks={ clientIdsTree }
 			isExpanded={ true }
-			selectBlockInCanvas={ false }
 			LeafMoreMenu={ LeafMoreMenu }
 		/>
 	);
 };
 
-const ExperimentControls = ( props ) => {
+const MenuInspectorControls = ( props ) => {
 	const {
 		createNavigationMenuIsSuccess,
 		createNavigationMenuIsError,
@@ -67,80 +73,39 @@ const ExperimentControls = ( props ) => {
 		onCreateNew,
 		onSelectClassicMenu,
 		onSelectNavigationMenu,
-	} = props;
-
-	return (
-		<>
-			<HStack className="wp-block-navigation-off-canvas-editor__header">
-				<Heading
-					className="wp-block-navigation-off-canvas-editor__title"
-					level={ 2 }
-				>
-					{ __( 'Menu' ) }
-				</Heading>
-				<NavigationMenuSelector
-					currentMenuId={ currentMenuId }
-					onSelectClassicMenu={ onSelectClassicMenu }
-					onSelectNavigationMenu={ onSelectNavigationMenu }
-					onCreateNew={ onCreateNew }
-					createNavigationMenuIsSuccess={
-						createNavigationMenuIsSuccess
-					}
-					createNavigationMenuIsError={ createNavigationMenuIsError }
-					actionLabel={ actionLabel }
-				/>
-			</HStack>
-			<ExperimentMainContent { ...props } />
-		</>
-	);
-};
-
-const DefaultControls = ( props ) => {
-	const {
-		createNavigationMenuIsSuccess,
-		createNavigationMenuIsError,
-		currentMenuId = null,
 		isManageMenusButtonDisabled,
-		onCreateNew,
-		onSelectClassicMenu,
-		onSelectNavigationMenu,
 	} = props;
 
 	return (
-		<>
-			<NavigationMenuSelector
-				currentMenuId={ currentMenuId }
-				onSelectClassicMenu={ onSelectClassicMenu }
-				onSelectNavigationMenu={ onSelectNavigationMenu }
-				onCreateNew={ onCreateNew }
-				createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
-				createNavigationMenuIsError={ createNavigationMenuIsError }
-				actionLabel={ actionLabel }
-			/>
-			<ManageMenusButton disabled={ isManageMenusButtonDisabled } />
-		</>
-	);
-};
-
-const MenuInspectorControls = ( props ) => {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
-	const menuControlsSlot = isOffCanvasNavigationEditorEnabled
-		? 'list'
-		: undefined;
-
-	return (
-		<InspectorControls __experimentalGroup={ menuControlsSlot }>
+		<InspectorControls group="list">
 			<PanelBody
-				title={
-					isOffCanvasNavigationEditorEnabled ? null : __( 'Menu' )
-				}
+				title={ process.env.IS_GUTENBERG_PLUGIN ? null : __( 'Menu' ) }
 			>
-				{ isOffCanvasNavigationEditorEnabled ? (
-					<ExperimentControls { ...props } />
-				) : (
-					<DefaultControls { ...props } />
-				) }
+				<HStack className="wp-block-navigation-off-canvas-editor__header">
+					<Heading
+						className="wp-block-navigation-off-canvas-editor__title"
+						level={ 2 }
+					>
+						{ __( 'Menu' ) }
+					</Heading>
+					<NavigationMenuSelector
+						currentMenuId={ currentMenuId }
+						onSelectClassicMenu={ onSelectClassicMenu }
+						onSelectNavigationMenu={ onSelectNavigationMenu }
+						onCreateNew={ onCreateNew }
+						createNavigationMenuIsSuccess={
+							createNavigationMenuIsSuccess
+						}
+						createNavigationMenuIsError={
+							createNavigationMenuIsError
+						}
+						actionLabel={ actionLabel }
+						isManageMenusButtonDisabled={
+							isManageMenusButtonDisabled
+						}
+					/>
+				</HStack>
+				<MainContent { ...props } />
 			</PanelBody>
 		</InspectorControls>
 	);

package/src/navigation/edit/navigation-menu-delete-control.js

@@ -37,7 +37,6 @@ export default function NavigationMenuDeleteControl( { onDelete } ) {
 						__( 'Delete %s' ),
 						title
 					) }
-					closeLabel={ __( 'Cancel' ) }
 					onRequestClose={ () => setIsConfirmModalVisible( false ) }
 				>
 					<p>

package/src/navigation/edit/navigation-menu-name-control.js

@@ -14,6 +14,7 @@ export default function NavigationMenuNameControl() {
 
 	return (
 		<TextControl
+			__nextHasNoMarginBottom
 			label={ __( 'Menu name' ) }
 			value={ title }
 			onChange={ updateTitle }

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

@@ -6,11 +6,9 @@ import {
 	MenuItem,
 	MenuItemsChoice,
 	DropdownMenu,
-	Button,
-	VisuallyHidden,
 } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { Icon, chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
+import { moreVertical } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useMemo, useState } from '@wordpress/element';
@@ -29,16 +27,11 @@ function NavigationMenuSelector( {
 	actionLabel,
 	createNavigationMenuIsSuccess,
 	createNavigationMenuIsError,
-	toggleProps = {},
 } ) {
-	const isOffCanvasNavigationEditorEnabled =
-		window?.__experimentalEnableOffCanvasNavigationEditor === true;
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
 	const [ selectorLabel, setSelectorLabel ] = useState( '' );
-	const [ isPressed, setIsPressed ] = useState( false );
-	const [ enableOptions, setEnableOptions ] = useState( false );
 	const [ isCreatingMenu, setIsCreatingMenu ] = useState( false );
 
 	actionLabel = actionLabel || createActionLabel;
@@ -59,21 +52,19 @@ function NavigationMenuSelector( {
 		'title'
 	);
 
-	const shouldEnableMenuSelector =
-		( canSwitchNavigationMenu || canUserCreateNavigationMenu ) &&
-		hasResolvedNavigationMenus &&
-		! isCreatingMenu;
-
 	const menuChoices = useMemo( () => {
 		return (
-			navigationMenus?.map( ( { id, title } ) => {
-				const label = decodeEntities( title.rendered );
+			navigationMenus?.map( ( { id, title }, index ) => {
+				const label =
+					decodeEntities( title.rendered ) ||
+					/* translators: %s is the index of the menu in the list of menus. */
+					sprintf( __( '(no title %s)' ), index + 1 );
+
 				if ( id === currentMenuId && ! isCreatingMenu ) {
 					setSelectorLabel(
 						/* translators: %s is the name of a navigation menu. */
 						sprintf( __( 'You are currently editing %s' ), label )
 					);
-					setEnableOptions( shouldEnableMenuSelector );
 				}
 				return {
 					value: id,
@@ -106,7 +97,6 @@ function NavigationMenuSelector( {
 			setSelectorLabel( __( 'Loading …' ) );
 		} else if ( noMenuSelected || noBlockMenus || menuUnavailable ) {
 			setSelectorLabel( __( 'Choose a Navigation menu' ) );
-			setEnableOptions( shouldEnableMenuSelector );
 		}
 
 		if (
@@ -123,66 +113,11 @@ function NavigationMenuSelector( {
 		isNavigationMenuResolved,
 	] );
 
-	toggleProps = {
-		...toggleProps,
-		className: 'wp-block-navigation__navigation-selector-button',
-		children: (
-			<>
-				<VisuallyHidden as="span">
-					{ __( 'Select Menu' ) }
-				</VisuallyHidden>
-				<Icon
-					icon={ isPressed ? chevronUp : chevronDown }
-					className="wp-block-navigation__navigation-selector-button__icon"
-				/>
-			</>
-		),
-		isBusy: ! enableOptions,
-		disabled: ! enableOptions,
-		__experimentalIsFocusable: true,
-		onClick: () => {
-			setIsPressed( ! isPressed );
-		},
-	};
-
-	if (
-		! hasNavigationMenus &&
-		! hasClassicMenus &&
-		! isOffCanvasNavigationEditorEnabled
-	) {
-		return (
-			<Button
-				className="wp-block-navigation__navigation-selector-button--createnew"
-				isBusy={ ! enableOptions }
-				disabled={ ! enableOptions }
-				__experimentalIsFocusable
-				onClick={ () => {
-					onCreateNew();
-					setIsCreatingMenu( true );
-					setSelectorLabel( __( 'Loading …' ) );
-					setEnableOptions( false );
-				} }
-			>
-				{ __( 'Create new menu' ) }
-			</Button>
-		);
-	}
-
-	return (
+	const NavigationMenuSelectorDropdown = (
 		<DropdownMenu
-			className={
-				isOffCanvasNavigationEditorEnabled
-					? ''
-					: 'wp-block-navigation__navigation-selector'
-			}
 			label={ selectorLabel }
-			text={ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
-			icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
-			toggleProps={
-				isOffCanvasNavigationEditorEnabled
-					? { isSmall: true }
-					: toggleProps
-			}
+			icon={ moreVertical }
+			toggleProps={ { isSmall: true } }
 		>
 			{ ( { onClose } ) => (
 				<>
@@ -207,7 +142,6 @@ function NavigationMenuSelector( {
 											setSelectorLabel(
 												__( 'Loading …' )
 											);
-											setEnableOptions( false );
 											onSelectClassicMenu( menu );
 											onClose();
 										} }
@@ -232,7 +166,6 @@ function NavigationMenuSelector( {
 									onCreateNew();
 									setIsCreatingMenu( true );
 									setSelectorLabel( __( 'Loading …' ) );
-									setEnableOptions( false );
 								} }
 							>
 								{ __( 'Create new menu' ) }
@@ -243,6 +176,8 @@ function NavigationMenuSelector( {
 			) }
 		</DropdownMenu>
 	);
+
+	return NavigationMenuSelectorDropdown;
 }
 
 export default NavigationMenuSelector;

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

@@ -26,6 +26,7 @@ export default function OverlayMenuPreview( { setAttributes, hasIcon, icon } ) {
 			/>
 
 			<ToggleGroupControl
+				__nextHasNoMarginBottom
 				label={ __( 'Icon' ) }
 				value={ icon }
 				onChange={ ( value ) => setAttributes( { icon: value } ) }

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

@@ -70,12 +70,6 @@ export default function NavigationPlaceholder( {
 							clientId={ clientId }
 							onSelectNavigationMenu={ onSelectNavigationMenu }
 							onSelectClassicMenu={ onSelectClassicMenu }
-							toggleProps={ {
-								variant: 'tertiary',
-								iconPosition: 'right',
-								className:
-									'wp-block-navigation-placeholder__actions__dropdown',
-							} }
 						/>
 
 						<hr />

package/src/navigation/index.js

@@ -20,6 +20,9 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
+		attributes: {
+			overlayMenu: 'never',
+		},
 		innerBlocks: [
 			{
 				name: 'core/navigation-link',

package/src/navigation/index.php

@@ -410,6 +410,25 @@ function block_core_navigation_filter_out_empty_blocks( $parsed_blocks ) {
 	return array_values( $filtered );
 }
 
+/**
+ * Returns true if the navigation block contains a nested navigation block.
+ *
+ * @param WP_Block_List $inner_blocks Inner block instance to be normalized.
+ * @return bool true if the navigation block contains a nested navigation block.
+ */
+function block_core_navigation_block_contains_core_navigation( $inner_blocks ) {
+	foreach ( $inner_blocks as $block ) {
+		if ( 'core/navigation' === $block->name ) {
+			return true;
+		}
+		if ( $block->inner_blocks && block_core_navigation_block_contains_core_navigation( $block->inner_blocks ) ) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
 /**
  * Retrieves the appropriate fallback to be used on the front of the
  * site when there is no menu assigned to the Nav block.
@@ -443,7 +462,8 @@ function block_core_navigation_get_fallback_blocks() {
 
 	// Use the first non-empty Navigation as fallback if available.
 	if ( $navigation_post ) {
-		$maybe_fallback = block_core_navigation_filter_out_empty_blocks( parse_blocks( $navigation_post->post_content ) );
+		$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.
@@ -511,7 +531,6 @@ function block_core_navigation_from_block_get_post_ids( $block ) {
 function render_block_core_navigation( $attributes, $content, $block ) {
 
 	static $seen_menu_names = array();
-	static $seen_ref        = 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).
@@ -582,11 +601,6 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	// Load inner blocks from the navigation post.
 	if ( array_key_exists( 'ref', $attributes ) ) {
-		if ( in_array( $attributes['ref'], $seen_ref, true ) ) {
-			return '';
-		}
-		$seen_ref[] = $attributes['ref'];
-
 		$navigation_post = get_post( $attributes['ref'] );
 		if ( ! isset( $navigation_post ) ) {
 			return '';
@@ -629,6 +643,10 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 		$inner_blocks = new WP_Block_List( $fallback_blocks, $attributes );
 	}
 
+	if ( block_core_navigation_block_contains_core_navigation( $inner_blocks ) ) {
+		return '';
+	}
+
 	/**
 	 * Filter navigation block $inner_blocks.
 	 * Allows modification of a navigation block menu items.

package/src/navigation/menu-items-to-blocks.js

@@ -97,8 +97,6 @@ function mapMenuItemsToBlocks( menuItems, level = 0 ) {
  * For more documentation on the individual fields present on a menu item please see:
  * https://core.trac.wordpress.org/browser/tags/5.7.1/src/wp-includes/nav-menu.php#L789
  *
- * Changes made here should also be mirrored in packages/edit-navigation/src/store/utils.js.
- *
  * @typedef WPNavMenuItem
  *
  * @property {Object} title       stores the raw and rendered versions of the title/label for this menu item.

package/src/navigation-link/edit.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { unescape } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -35,6 +34,7 @@ import {
 	placeCaretAtHorizontalEdge,
 	__unstableStripHTML as stripHTML,
 } from '@wordpress/dom';
+import { decodeEntities } from '@wordpress/html-entities';
 import { link as linkIcon, addSubmenu } from '@wordpress/icons';
 import {
 	store as coreStore,
@@ -312,12 +312,17 @@ export default function NavigationLinkEdit( {
 	 */
 	function removeLink() {
 		// Reset all attributes that comprise the link.
+		// It is critical that all attributes are reset
+		// to their default values otherwise this may
+		// in advertently trigger side effects because
+		// the values will have "changed".
 		setAttributes( {
-			url: '',
-			label: '',
-			id: '',
-			kind: '',
-			type: '',
+			url: undefined,
+			label: undefined,
+			id: undefined,
+			kind: undefined,
+			type: undefined,
+			opensInNewTab: false,
 		} );
 
 		// Close the link editing UI.
@@ -432,6 +437,7 @@ export default function NavigationLinkEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ label ? stripHTML( label ) : '' }
 						onChange={ ( labelValue ) => {
 							setAttributes( { label: labelValue } );
@@ -440,6 +446,7 @@ export default function NavigationLinkEdit( {
 						autoComplete="off"
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ url || '' }
 						onChange={ ( urlValue ) => {
 							updateAttributes(
@@ -463,6 +470,7 @@ export default function NavigationLinkEdit( {
 						) }
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ title || '' }
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
@@ -471,6 +479,7 @@ export default function NavigationLinkEdit( {
 						autoComplete="off"
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ rel || '' }
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );
@@ -567,7 +576,7 @@ export default function NavigationLinkEdit( {
 													// Unescape is used here to "recover" the escaped characters
 													// so they display without encoding.
 													// See `updateAttributes` for more details.
-													`${ unescape(
+													`${ decodeEntities(
 														label
 													) } ${ placeholderText }`.trim()
 												}

package/src/navigation-link/index.php

@@ -372,38 +372,6 @@ function register_block_core_navigation_link() {
 }
 add_action( 'init', 'register_block_core_navigation_link' );
 
-/**
- * Disables the display of block inspector tabs for the Navigation Link block.
- *
- * This is only a temporary measure until we have a TabPanel and mechanism that
- * will allow the Navigation Link to programmatically select a tab when edited
- * via a specific context.
- *
- * See:
- * - https://github.com/WordPress/gutenberg/issues/45951
- * - https://github.com/WordPress/gutenberg/pull/46321
- * - https://github.com/WordPress/gutenberg/pull/46271
- *
- * @param array $settings Default editor settings.
- * @return array Filtered editor settings.
- */
-function gutenberg_disable_tabs_for_navigation_link_block( $settings ) {
-	$current_tab_settings = _wp_array_get(
-		$settings,
-		array( 'blockInspectorTabs' ),
-		array()
-	);
-
-	$settings['blockInspectorTabs'] = array_merge(
-		$current_tab_settings,
-		array( 'core/navigation-link' => false )
-	);
-
-	return $settings;
-}
-
-add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_link_block' );
-
 /**
  * Enables animation of the block inspector for the Navigation Link block.
  *

package/src/navigation-submenu/edit.js

@@ -393,6 +393,7 @@ export default function NavigationSubmenuEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ label || '' }
 						onChange={ ( labelValue ) => {
 							setAttributes( { label: labelValue } );
@@ -401,6 +402,7 @@ export default function NavigationSubmenuEdit( {
 						autoComplete="off"
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ url || '' }
 						onChange={ ( urlValue ) => {
 							setAttributes( { url: urlValue } );
@@ -422,6 +424,7 @@ export default function NavigationSubmenuEdit( {
 						) }
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ title || '' }
 						onChange={ ( titleValue ) => {
 							setAttributes( { title: titleValue } );
@@ -430,6 +433,7 @@ export default function NavigationSubmenuEdit( {
 						autoComplete="off"
 					/>
 					<TextControl
+						__nextHasNoMarginBottom
 						value={ rel || '' }
 						onChange={ ( relValue ) => {
 							setAttributes( { rel: relValue } );

package/src/navigation-submenu/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { addSubmenu } from '@wordpress/icons';
+import { page, addSubmenu } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -17,7 +17,13 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon: addSubmenu,
+	icon: ( { context } ) => {
+		if ( context === 'list-view' ) {
+			return page;
+		}
+
+		return addSubmenu;
+	},
 
 	__experimentalLabel: ( { label } ) => label,
 

package/src/navigation-submenu/index.php

@@ -290,38 +290,6 @@ function register_block_core_navigation_submenu() {
 }
 add_action( 'init', 'register_block_core_navigation_submenu' );
 
-/**
- * Disables display of block inspector tabs for the Navigation Submenu block.
- *
- * This is only a temporary measure until we have a TabPanel and mechanism that
- * will allow the Navigation Submenu to programmatically select a tab when
- * edited via a specific context.
- *
- * See:
- * - https://github.com/WordPress/gutenberg/issues/45951
- * - https://github.com/WordPress/gutenberg/pull/46321
- * - https://github.com/WordPress/gutenberg/pull/46271
- *
- * @param array $settings Default editor settings.
- * @return array Filtered editor settings.
- */
-function gutenberg_disable_tabs_for_navigation_submenu_block( $settings ) {
-	$current_tab_settings = _wp_array_get(
-		$settings,
-		array( 'blockInspectorTabs' ),
-		array()
-	);
-
-	$settings['blockInspectorTabs'] = array_merge(
-		$current_tab_settings,
-		array( 'core/navigation-submenu' => false )
-	);
-
-	return $settings;
-}
-
-add_filter( 'block_editor_settings_all', 'gutenberg_disable_tabs_for_navigation_submenu_block' );
-
 /**
  * Enables animation of the block inspector for the Navigation Submenu block.
  *

package/src/page-list/block.json

@@ -33,6 +33,7 @@
 		"openSubmenusOnClick"
 	],
 	"supports": {
+		"anchor": true,
 		"reusable": false,
 		"html": false,
 		"typography": {