@wordpress/block-library 7.17.0 → 7.19.0

package/src/list/utils.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { createBlock } from '@wordpress/blocks';
+import { createBlock, rawHandler } from '@wordpress/blocks';
 
 export function createListBlockFromDOMElement( listElement ) {
 	const listAttributes = {
@@ -70,15 +70,7 @@ export function migrateToListV2( attributes ) {
 		list.setAttribute( 'type', type );
 	}
 
-	const listBlock = createListBlockFromDOMElement( list );
+	const [ listBlock ] = rawHandler( { HTML: list.outerHTML } );
 
-	const { values: omittedValues, ...restAttributes } = attributes;
-
-	return [
-		{
-			...restAttributes,
-			...listBlock.attributes,
-		},
-		listBlock.innerBlocks,
-	];
+	return [ listBlock.attributes, listBlock.innerBlocks ];
 }

package/src/list-item/edit.js

@@ -67,6 +67,7 @@ export default function ListItemEdit( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: [ 'core/list' ],
 		renderAppender: false,
+		__unstableDisableDropZone: true,
 	} );
 	const useEnterRef = useEnter( { content, clientId } );
 	const useSpaceRef = useSpace( clientId );

package/src/list-item/hooks/use-outdent-list-item.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -61,7 +56,9 @@ export default function useOutdentListItem( clientId ) {
 	return [
 		canOutdent,
 		useCallback( ( clientIds = getSelectedBlockClientIds() ) => {
-			clientIds = castArray( clientIds );
+			if ( ! Array.isArray( clientIds ) ) {
+				clientIds = [ clientIds ];
+			}
 
 			if ( ! clientIds.length ) return;
 

package/src/missing/test/edit-integration.native.js

@@ -40,12 +40,12 @@ describe( 'Unsupported block', () => {
 		const initialHtml = `<!-- wp:table -->
 			 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
 			 <!-- /wp:table -->`;
-		const { getByA11yLabel } = await initializeEditor( {
+		const { getByLabelText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		const missingBlock = await waitFor( () =>
-			getByA11yLabel( /Unsupported Block\. Row 1/ )
+			getByLabelText( /Unsupported Block\. Row 1/ )
 		);
 
 		const translatedTableTitle =
@@ -58,18 +58,18 @@ describe( 'Unsupported block', () => {
 		const initialHtml = `<!-- wp:table -->
 		 <figure class="wp-block-table"><table><tbody><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></tbody></table></figure>
 		 <!-- /wp:table -->`;
-		const { getByA11yLabel, getByText } = await initializeEditor( {
+		const { getByLabelText, getByText } = await initializeEditor( {
 			initialHtml,
 		} );
 
 		const missingBlock = await waitFor( () =>
-			getByA11yLabel( /Unsupported Block\. Row 1/ )
+			getByLabelText( /Unsupported Block\. Row 1/ )
 		);
 
 		fireEvent.press( missingBlock );
 
 		const helpButton = await waitFor( () =>
-			getByA11yLabel( 'Help button' )
+			getByLabelText( 'Help button' )
 		);
 
 		fireEvent.press( helpButton );

package/src/navigation/edit/index.js

@@ -6,9 +6,15 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useEffect, useRef, Platform } from '@wordpress/element';
-import { addQueryArgs } from '@wordpress/url';
 import {
+	useState,
+	useEffect,
+	useRef,
+	Platform,
+	useMemo,
+} from '@wordpress/element';
+import {
+	__experimentalOffCanvasEditor as OffCanvasEditor,
 	InspectorControls,
 	useBlockProps,
 	__experimentalRecursionProvider as RecursionProvider,
@@ -31,6 +37,8 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	Button,
 	Spinner,
+	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { speak } from '@wordpress/a11y';
@@ -60,6 +68,7 @@ import useConvertClassicToBlockMenu, {
 import useCreateNavigationMenu from './use-create-navigation-menu';
 import { useInnerBlocks } from './use-inner-blocks';
 import { detectColors } from './utils';
+import ManageMenusButton from './manage-menus-button';
 
 function Navigation( {
 	attributes,
@@ -82,6 +91,9 @@ function Navigation( {
 	hasColorSettings = true,
 	customPlaceholder: CustomPlaceholder = null,
 } ) {
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
 	const {
 		openSubmenusOnClick,
 		overlayMenu,
@@ -191,9 +203,6 @@ function Navigation( {
 		__unstableMarkNextChangeAsNotPersistent,
 	} = useDispatch( blockEditorStore );
 
-	const [ hasSavedUnsavedInnerBlocks, setHasSavedUnsavedInnerBlocks ] =
-		useState( false );
-
 	const [ isResponsiveMenuOpen, setResponsiveMenuVisibility ] =
 		useState( false );
 
@@ -227,8 +236,16 @@ function Navigation( {
 		classicMenuConversionStatus === CLASSIC_MENU_CONVERSION_PENDING;
 
 	// Only autofallback to published menus.
-	const fallbackNavigationMenus = navigationMenus?.filter(
-		( menu ) => menu.status === 'publish'
+	const fallbackNavigationMenus = useMemo(
+		() =>
+			navigationMenus
+				?.filter( ( menu ) => menu.status === 'publish' )
+				?.sort( ( menuA, menuB ) => {
+					const menuADate = new Date( menuA.date );
+					const menuBDate = new Date( menuB.date );
+					return menuADate.getTime() < menuBDate.getTime();
+				} ),
+		[ navigationMenus ]
 	);
 
 	// Attempt to retrieve and prioritize any existing navigation menu unless:
@@ -248,12 +265,6 @@ function Navigation( {
 			return;
 		}
 
-		fallbackNavigationMenus.sort( ( menuA, menuB ) => {
-			const menuADate = new Date( menuA.date );
-			const menuBDate = new Date( menuB.date );
-			return menuADate.getTime() < menuBDate.getTime();
-		} );
-
 		/**
 		 *  This fallback displays (both in editor and on front)
 		 *  a list of pages only if no menu (user assigned or
@@ -263,7 +274,12 @@ function Navigation( {
 		 */
 		__unstableMarkNextChangeAsNotPersistent();
 		setRef( fallbackNavigationMenus[ 0 ].id );
-	}, [ navigationMenus ] );
+	}, [
+		ref,
+		isCreatingNavigationMenu,
+		fallbackNavigationMenus,
+		hasUncontrolledInnerBlocks,
+	] );
 
 	useEffect( () => {
 		if (
@@ -272,7 +288,7 @@ function Navigation( {
 			fallbackNavigationMenus?.length > 0 ||
 			classicMenus?.length !== 1
 		) {
-			return false;
+			return;
 		}
 
 		// If there's non fallback navigation menus and
@@ -481,24 +497,22 @@ function Navigation( {
 
 	// Prompt the user to publish the menu they have set as a draft
 	const isDraftNavigationMenu = navigationMenu?.status === 'draft';
-	useEffect( async () => {
+	useEffect( () => {
 		hideMenuAutoPublishDraftNotice();
-		if ( ! isDraftNavigationMenu ) return;
-		try {
-			await editEntityRecord(
-				'postType',
-				'wp_navigation',
-				navigationMenu?.id,
-				{
-					status: 'publish',
-				},
-				{ throwOnError: true }
-			);
-		} catch {
+		if ( ! isDraftNavigationMenu ) {
+			return;
+		}
+		editEntityRecord(
+			'postType',
+			'wp_navigation',
+			navigationMenu?.id,
+			{ status: 'publish' },
+			{ throwOnError: true }
+		).catch( () => {
 			showMenuAutoPublishDraftNotice(
 				__( 'Error occurred while publishing the navigation menu.' )
 			);
-		}
+		} );
 	}, [ isDraftNavigationMenu, navigationMenu ] );
 
 	const stylingInspectorControls = (
@@ -648,48 +662,77 @@ function Navigation( {
 	// Consider this state as 'unsaved' and offer an uncontrolled version of inner blocks,
 	// that automatically saves the menu as an entity when changes are made to the inner blocks.
 	const hasUnsavedBlocks = hasUncontrolledInnerBlocks && ! isEntityAvailable;
-	if ( hasUnsavedBlocks ) {
+
+	const WrappedNavigationMenuSelector = ( { currentMenuId } ) => (
+		<NavigationMenuSelector
+			currentMenuId={ currentMenuId }
+			clientId={ clientId }
+			onSelectNavigationMenu={ ( menuId ) => {
+				handleUpdateMenu( menuId );
+			} }
+			onSelectClassicMenu={ async ( classicMenu ) => {
+				const navMenu = await convertClassicMenu(
+					classicMenu.id,
+					classicMenu.name,
+					'draft'
+				);
+				if ( navMenu ) {
+					handleUpdateMenu( navMenu.id, {
+						focusNavigationBlock: true,
+					} );
+				}
+			} }
+			onCreateNew={ createUntitledEmptyNavigationMenu }
+			createNavigationMenuIsSuccess={ createNavigationMenuIsSuccess }
+			createNavigationMenuIsError={ createNavigationMenuIsError }
+			/* translators: %s: The name of a menu. */
+			actionLabel={ __( "Switch to '%s'" ) }
+		/>
+	);
+
+	const isManageMenusButtonDisabled =
+		! hasManagePermissions || ! hasResolvedNavigationMenus;
+
+	if ( hasUnsavedBlocks && ! isCreatingNavigationMenu ) {
 		return (
 			<TagName { ...blockProps }>
 				<InspectorControls>
-					<PanelBody title={ __( 'Menu' ) }>
-						<NavigationMenuSelector
-							currentMenuId={ ref }
-							clientId={ clientId }
-							onSelectNavigationMenu={ ( menuId ) => {
-								handleUpdateMenu( menuId );
-							} }
-							onSelectClassicMenu={ async ( classicMenu ) => {
-								const navMenu = await convertClassicMenu(
-									classicMenu.id,
-									classicMenu.name,
-									'draft'
-								);
-								if ( navMenu ) {
-									handleUpdateMenu( navMenu.id, {
-										focusNavigationBlock: true,
-									} );
-								}
-							} }
-							onCreateNew={ createUntitledEmptyNavigationMenu }
-							createNavigationMenuIsSuccess={
-								createNavigationMenuIsSuccess
-							}
-							/* translators: %s: The name of a menu. */
-							actionLabel={ __( "Switch to '%s'" ) }
-						/>
-						<Button
-							variant="link"
-							disabled={
-								! hasManagePermissions ||
-								! hasResolvedNavigationMenus
-							}
-							href={ addQueryArgs( 'edit.php', {
-								post_type: 'wp_navigation',
-							} ) }
-						>
-							{ __( 'Manage menus' ) }
-						</Button>
+					<PanelBody
+						title={
+							isOffCanvasNavigationEditorEnabled
+								? null
+								: __( 'Menu' )
+						}
+					>
+						{ isOffCanvasNavigationEditorEnabled ? (
+							<>
+								<HStack className="wp-block-navigation-off-canvas-editor__header">
+									<Heading
+										className="wp-block-navigation-off-canvas-editor__title"
+										level={ 2 }
+									>
+										{ __( 'Menu' ) }
+									</Heading>
+									<WrappedNavigationMenuSelector
+										currentMenuId={ ref }
+									/>
+								</HStack>
+								<OffCanvasEditor
+									blocks={ innerBlocks }
+									isExpanded={ true }
+									selectBlockInCanvas={ false }
+								/>
+							</>
+						) : (
+							<>
+								<WrappedNavigationMenuSelector
+									currentMenuId={ ref }
+								/>
+								<ManageMenusButton
+									disabled={ isManageMenusButtonDisabled }
+								/>
+							</>
+						) }
 					</PanelBody>
 				</InspectorControls>
 				{ stylingInspectorControls }
@@ -705,24 +748,11 @@ function Navigation( {
 					overlayTextColor={ overlayTextColor }
 				>
 					<UnsavedInnerBlocks
+						createNavigationMenu={ createNavigationMenu }
 						blocks={ uncontrolledInnerBlocks }
-						clientId={ clientId }
 						templateLock={ templateLock }
 						navigationMenus={ navigationMenus }
 						hasSelection={ isSelected || isInnerBlockSelected }
-						hasSavedUnsavedInnerBlocks={
-							hasSavedUnsavedInnerBlocks
-						}
-						onSave={ ( post ) => {
-							// Set some state used as a guard to prevent the creation of multiple posts.
-							setHasSavedUnsavedInnerBlocks( true );
-							// Switch to using the wp_navigation entity.
-							setRef( post.id );
-
-							showNavigationMenuStatusNotice(
-								__( `New Navigation Menu created.` )
-							);
-						} }
 					/>
 				</ResponsiveWrapper>
 			</TagName>
@@ -735,44 +765,38 @@ function Navigation( {
 		return (
 			<TagName { ...blockProps }>
 				<InspectorControls>
-					<PanelBody title={ __( 'Menu' ) }>
-						<NavigationMenuSelector
-							currentMenuId={ null }
-							clientId={ clientId }
-							onSelectNavigationMenu={ ( menuId ) => {
-								handleUpdateMenu( menuId );
-							} }
-							onSelectClassicMenu={ async ( classicMenu ) => {
-								const navMenu = await convertClassicMenu(
-									classicMenu.id,
-									classicMenu.name,
-									'draft'
-								);
-								if ( navMenu ) {
-									handleUpdateMenu( navMenu.id, {
-										focusNavigationBlock: true,
-									} );
-								}
-							} }
-							onCreateNew={ createUntitledEmptyNavigationMenu }
-							createNavigationMenuIsSuccess={
-								createNavigationMenuIsSuccess
-							}
-							/* translators: %s: The name of a menu. */
-							actionLabel={ __( "Switch to '%s'" ) }
-						/>
-						<Button
-							variant="link"
-							disabled={
-								! hasManagePermissions ||
-								! hasResolvedNavigationMenus
-							}
-							href={ addQueryArgs( 'edit.php', {
-								post_type: 'wp_navigation',
-							} ) }
-						>
-							{ __( 'Manage menus' ) }
-						</Button>
+					<PanelBody
+						title={
+							isOffCanvasNavigationEditorEnabled
+								? null
+								: __( 'Menu' )
+						}
+					>
+						{ isOffCanvasNavigationEditorEnabled ? (
+							<>
+								<HStack className="wp-block-navigation-off-canvas-editor__header">
+									<Heading
+										className="wp-block-navigation-off-canvas-editor__title"
+										level={ 2 }
+									>
+										{ __( 'Menu' ) }
+									</Heading>
+									<WrappedNavigationMenuSelector
+										currentMenuId={ null }
+									/>
+								</HStack>
+								<p>Select or create a menu</p>
+							</>
+						) : (
+							<>
+								<WrappedNavigationMenuSelector
+									currentMenuId={ null }
+								/>
+								<ManageMenusButton
+									disabled={ isManageMenusButtonDisabled }
+								/>
+							</>
+						) }
 					</PanelBody>
 				</InspectorControls>
 				<Warning>
@@ -850,47 +874,42 @@ function Navigation( {
 		<EntityProvider kind="postType" type="wp_navigation" id={ ref }>
 			<RecursionProvider uniqueId={ recursionId }>
 				<InspectorControls>
-					<PanelBody title={ __( 'Menu' ) }>
-						<NavigationMenuSelector
-							currentMenuId={ ref }
-							clientId={ clientId }
-							onSelectNavigationMenu={ ( menuId ) => {
-								handleUpdateMenu( menuId );
-							} }
-							onSelectClassicMenu={ async ( classicMenu ) => {
-								const navMenu = await convertClassicMenu(
-									classicMenu.id,
-									classicMenu.name,
-									'draft'
-								);
-								if ( navMenu ) {
-									handleUpdateMenu( navMenu.id, {
-										focusNavigationBlock: true,
-									} );
-								}
-							} }
-							onCreateNew={ createUntitledEmptyNavigationMenu }
-							createNavigationMenuIsSuccess={
-								createNavigationMenuIsSuccess
-							}
-							createNavigationMenuIsError={
-								createNavigationMenuIsError
-							}
-							/* translators: %s: The name of a menu. */
-							actionLabel={ __( "Switch to '%s'" ) }
-						/>
-						<Button
-							variant="link"
-							disabled={
-								! hasManagePermissions ||
-								! hasResolvedNavigationMenus
-							}
-							href={ addQueryArgs( 'edit.php', {
-								post_type: 'wp_navigation',
-							} ) }
-						>
-							{ __( 'Manage menus' ) }
-						</Button>
+					<PanelBody
+						title={
+							isOffCanvasNavigationEditorEnabled
+								? null
+								: __( 'Menu' )
+						}
+					>
+						{ isOffCanvasNavigationEditorEnabled ? (
+							<>
+								<HStack className="wp-block-navigation-off-canvas-editor__header">
+									<Heading
+										className="wp-block-navigation-off-canvas-editor__title"
+										level={ 2 }
+									>
+										{ __( 'Menu' ) }
+									</Heading>
+									<WrappedNavigationMenuSelector
+										currentMenuId={ ref }
+									/>
+								</HStack>
+								<OffCanvasEditor
+									blocks={ innerBlocks }
+									isExpanded={ true }
+									selectBlockInCanvas={ false }
+								/>
+							</>
+						) : (
+							<>
+								<WrappedNavigationMenuSelector
+									currentMenuId={ ref }
+								/>
+								<ManageMenusButton
+									disabled={ isManageMenusButtonDisabled }
+								/>
+							</>
+						) }
 					</PanelBody>
 				</InspectorControls>
 				{ stylingInspectorControls }
@@ -917,6 +936,12 @@ function Navigation( {
 									} }
 								/>
 							) }
+						{ isOffCanvasNavigationEditorEnabled && (
+							<ManageMenusButton
+								disabled={ isManageMenusButtonDisabled }
+								className="wp-block-navigation-manage-menus-button"
+							/>
+						) }
 					</InspectorControls>
 				) }
 

package/src/navigation/edit/manage-menus-button.js

@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+import { Button } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const ManageMenusButton = ( { className = '', disabled } ) => (
+	<Button
+		variant="link"
+		disabled={ disabled }
+		className={ className }
+		href={ addQueryArgs( 'edit.php', {
+			post_type: 'wp_navigation',
+		} ) }
+	>
+		{ __( 'Manage menus' ) }
+	</Button>
+);
+
+export default ManageMenusButton;

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

@@ -10,7 +10,7 @@ import {
 	VisuallyHidden,
 } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
-import { Icon, chevronUp, chevronDown } from '@wordpress/icons';
+import { Icon, chevronUp, chevronDown, moreVertical } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { useEffect, useMemo, useState } from '@wordpress/element';
@@ -31,6 +31,9 @@ function NavigationMenuSelector( {
 	createNavigationMenuIsError,
 	toggleProps = {},
 } ) {
+	const isOffCanvasNavigationEditorEnabled =
+		window?.__experimentalEnableOffCanvasNavigationEditor === true;
+
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
@@ -161,11 +164,23 @@ function NavigationMenuSelector( {
 
 	return (
 		<DropdownMenu
-			className="wp-block-navigation__navigation-selector"
+			className={
+				isOffCanvasNavigationEditorEnabled
+					? ''
+					: 'wp-block-navigation__navigation-selector'
+			}
 			label={ selectorLabel }
-			text={ selectorLabel }
-			icon={ null }
-			toggleProps={ toggleProps }
+			text={
+				<span className="wp-block-navigation__navigation-selector-button__label">
+					{ isOffCanvasNavigationEditorEnabled ? '' : selectorLabel }
+				</span>
+			}
+			icon={ isOffCanvasNavigationEditorEnabled ? moreVertical : null }
+			toggleProps={
+				isOffCanvasNavigationEditorEnabled
+					? { isSmall: true }
+					: toggleProps
+			}
 		>
 			{ ( { onClose } ) => (
 				<>

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

@@ -85,11 +85,7 @@ export default function ResponsiveWrapper( {
 					onClick={ () => onToggle( true ) }
 				>
 					{ hasIcon && <OverlayMenuIcon icon={ icon } /> }
-					{ ! hasIcon && (
-						<span className="wp-block-navigation__toggle_button_label">
-							{ __( 'Menu' ) }
-						</span>
-					) }
+					{ ! hasIcon && __( 'Menu' ) }
 				</Button>
 			) }
 
@@ -109,11 +105,7 @@ export default function ResponsiveWrapper( {
 							onClick={ () => onToggle( false ) }
 						>
 							{ hasIcon && <Icon icon={ close } /> }
-							{ ! hasIcon && (
-								<span className="wp-block-navigation__toggle_button_label">
-									{ __( 'Close' ) }
-								</span>
-							) }
+							{ ! hasIcon && __( 'Close' ) }
 						</Button>
 						<div
 							className="wp-block-navigation__responsive-container-content"