@wordpress/block-editor 11.0.0 → 11.2.0

package/src/components/media-replace-flow/test/index.js

@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import MediaReplaceFlow from '../';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 function TestWrapper() {

package/src/components/off-canvas-editor/appender.js

@@ -1,19 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { forwardRef, useState } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { forwardRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
 import Inserter from '../inserter';
-import { LinkUI } from './link-ui';
-import { updateAttributes } from './update-attributes';
 
 export const Appender = forwardRef( ( props, ref ) => {
-	const [ insertedBlock, setInsertedBlock ] = useState();
-
 	const { hideInserter, clientId } = useSelect( ( select ) => {
 		const {
 			getTemplateLock,
@@ -31,61 +27,20 @@ export const Appender = forwardRef( ( props, ref ) => {
 		};
 	}, [] );
 
-	const { insertedBlockAttributes } = useSelect(
-		( select ) => {
-			const { getBlockAttributes } = select( blockEditorStore );
-
-			return {
-				insertedBlockAttributes: getBlockAttributes( insertedBlock ),
-			};
-		},
-		[ insertedBlock ]
-	);
-
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-
-	const setAttributes =
-		( insertedBlockClientId ) => ( _updatedAttributes ) => {
-			updateBlockAttributes( insertedBlockClientId, _updatedAttributes );
-		};
-
-	let maybeLinkUI;
-
-	if ( insertedBlock ) {
-		maybeLinkUI = (
-			<LinkUI
-				clientId={ insertedBlock }
-				link={ insertedBlockAttributes }
-				onClose={ () => setInsertedBlock( null ) }
-				hasCreateSuggestion={ false }
-				onChange={ ( updatedValue ) => {
-					updateAttributes(
-						updatedValue,
-						setAttributes( insertedBlock ),
-						insertedBlockAttributes
-					);
-					setInsertedBlock( null );
-				} }
-			/>
-		);
-	}
-
 	if ( hideInserter ) {
 		return null;
 	}
 
 	return (
 		<div className="offcanvas-editor__appender">
-			{ maybeLinkUI }
 			<Inserter
 				ref={ ref }
 				rootClientId={ clientId }
 				position="bottom right"
 				isAppender={ true }
 				selectBlockOnInsert={ false }
-				onSelectOrClose={ ( { insertedBlockId } ) => {
-					setInsertedBlock( insertedBlockId );
-				} }
+				shouldDirectInsert={ false }
+				__experimentalIsQuick
 				{ ...props }
 			/>
 		</div>

package/src/components/off-canvas-editor/block-contents.js

@@ -7,7 +7,7 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -15,6 +15,14 @@ import { forwardRef } from '@wordpress/element';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
+import { updateAttributes } from './update-attributes';
+import { LinkUI } from './link-ui';
+import { useInsertedBlock } from './use-inserted-block';
+
+const BLOCKS_WITH_LINK_UI_SUPPORT = [
+	'core/navigation-link',
+	'core/navigation-submenu',
+];
 
 const ListViewBlockContents = forwardRef(
 	(
@@ -33,19 +41,54 @@ const ListViewBlockContents = forwardRef(
 		ref
 	) => {
 		const { clientId } = block;
-
-		const { blockMovingClientId, selectedBlockInBlockEditor } = useSelect(
+		const [ isLinkUIOpen, setIsLinkUIOpen ] = useState();
+		const {
+			blockMovingClientId,
+			selectedBlockInBlockEditor,
+			lastInsertedBlockClientId,
+		} = useSelect(
 			( select ) => {
-				const { hasBlockMovingClientId, getSelectedBlockClientId } =
-					select( blockEditorStore );
+				const {
+					hasBlockMovingClientId,
+					getSelectedBlockClientId,
+					getLastInsertedBlocksClientIds,
+				} = select( blockEditorStore );
+				const lastInsertedBlocksClientIds =
+					getLastInsertedBlocksClientIds();
 				return {
 					blockMovingClientId: hasBlockMovingClientId(),
 					selectedBlockInBlockEditor: getSelectedBlockClientId(),
+					lastInsertedBlockClientId:
+						lastInsertedBlocksClientIds &&
+						lastInsertedBlocksClientIds[ 0 ],
 				};
 			},
 			[ clientId ]
 		);
 
+		const {
+			insertedBlockAttributes,
+			insertedBlockName,
+			setInsertedBlockAttributes,
+		} = useInsertedBlock( lastInsertedBlockClientId );
+
+		const hasExistingLinkValue = insertedBlockAttributes?.id;
+
+		useEffect( () => {
+			if (
+				clientId === lastInsertedBlockClientId &&
+				BLOCKS_WITH_LINK_UI_SUPPORT?.includes( insertedBlockName ) &&
+				! hasExistingLinkValue // don't re-show the Link UI if the block already has a link value.
+			) {
+				setIsLinkUIOpen( true );
+			}
+		}, [
+			lastInsertedBlockClientId,
+			clientId,
+			insertedBlockName,
+			hasExistingLinkValue,
+		] );
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -62,26 +105,44 @@ const ListViewBlockContents = forwardRef(
 			: [ clientId ];
 
 		return (
-			<BlockDraggable clientIds={ draggableClientIds }>
-				{ ( { draggable, onDragStart, onDragEnd } ) => (
-					<ListViewBlockSelectButton
-						ref={ ref }
-						className={ className }
-						block={ block }
-						onClick={ onClick }
-						onToggleExpanded={ onToggleExpanded }
-						isSelected={ isSelected }
-						position={ position }
-						siblingBlockCount={ siblingBlockCount }
-						level={ level }
-						draggable={ draggable }
-						onDragStart={ onDragStart }
-						onDragEnd={ onDragEnd }
-						isExpanded={ isExpanded }
-						{ ...props }
+			<>
+				{ isLinkUIOpen && (
+					<LinkUI
+						clientId={ lastInsertedBlockClientId }
+						link={ insertedBlockAttributes }
+						onClose={ () => setIsLinkUIOpen( false ) }
+						hasCreateSuggestion={ false }
+						onChange={ ( updatedValue ) => {
+							updateAttributes(
+								updatedValue,
+								setInsertedBlockAttributes,
+								insertedBlockAttributes
+							);
+							setIsLinkUIOpen( false );
+						} }
 					/>
 				) }
-			</BlockDraggable>
+				<BlockDraggable clientIds={ draggableClientIds }>
+					{ ( { draggable, onDragStart, onDragEnd } ) => (
+						<ListViewBlockSelectButton
+							ref={ ref }
+							className={ className }
+							block={ block }
+							onClick={ onClick }
+							onToggleExpanded={ onToggleExpanded }
+							isSelected={ isSelected }
+							position={ position }
+							siblingBlockCount={ siblingBlockCount }
+							level={ level }
+							draggable={ draggable }
+							onDragStart={ onDragStart }
+							onDragEnd={ onDragEnd }
+							isExpanded={ isExpanded }
+							{ ...props }
+						/>
+					) }
+				</BlockDraggable>
+			</>
 		);
 	}
 );

package/src/components/off-canvas-editor/block-select-button.js

@@ -12,7 +12,7 @@ import {
 	__experimentalTruncate as Truncate,
 } from '@wordpress/components';
 import { forwardRef } from '@wordpress/element';
-import { Icon, lock } from '@wordpress/icons';
+import { Icon, lockSmall as lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
 
 /**
@@ -79,7 +79,11 @@ function ListViewBlockSelectButton(
 				aria-hidden={ true }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon icon={ blockInformation?.icon } showColors />
+				<BlockIcon
+					icon={ blockInformation?.icon }
+					showColors
+					context="list-view"
+				/>
 				<HStack
 					alignment="center"
 					className="block-editor-list-view-block-select-button__label-wrapper"

package/src/components/off-canvas-editor/block.js

@@ -6,11 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { createBlock, hasBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport } from '@wordpress/blocks';
 import {
 	__experimentalTreeGridCell as TreeGridCell,
 	__experimentalTreeGridItem as TreeGridItem,
-	MenuItem,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { moreVertical } from '@wordpress/icons';
@@ -42,7 +41,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 
 function ListViewBlock( {
-	block,
+	block: { clientId },
 	isDragged,
 	isSelected,
 	isBranchSelected,
@@ -60,7 +59,6 @@ function ListViewBlock( {
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { clientId, attributes } = block;
 
 	const { isLocked, isContentLocked } = useBlockLock( clientId );
 	const forceSelectionContentLock = useSelect(
@@ -87,24 +85,77 @@ function ListViewBlock( {
 		( isSelected &&
 			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
 
-	const { replaceBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
+	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
-	const blockName = useSelect(
-		( select ) => select( blockEditorStore ).getBlockName( clientId ),
+	const block = useSelect(
+		( select ) => select( blockEditorStore ).getBlock( clientId ),
 		[ clientId ]
 	);
 
+	// If ListView has experimental features related to the Persistent List View,
+	// only focus the selected list item on mount; otherwise the list would always
+	// try to steal the focus from the editor canvas.
+	useEffect( () => {
+		if ( ! isTreeGridMounted && isSelected ) {
+			cellRef.current.focus();
+		}
+	}, [] );
+
+	const onMouseEnter = useCallback( () => {
+		setIsHovered( true );
+		toggleBlockHighlight( clientId, true );
+	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
+	const onMouseLeave = useCallback( () => {
+		setIsHovered( false );
+		toggleBlockHighlight( clientId, false );
+	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
+
+	const selectEditorBlock = useCallback(
+		( event ) => {
+			selectBlock( event, clientId );
+			event.preventDefault();
+		},
+		[ clientId, selectBlock ]
+	);
+
+	const updateSelection = useCallback(
+		( newClientId ) => {
+			selectBlock( undefined, newClientId );
+		},
+		[ selectBlock ]
+	);
+
+	const { isTreeGridMounted, expand, collapse, LeafMoreMenu } =
+		useListViewContext();
+
+	const toggleExpanded = useCallback(
+		( event ) => {
+			// Prevent shift+click from opening link in a new window when toggling.
+			event.preventDefault();
+			event.stopPropagation();
+			if ( isExpanded === true ) {
+				collapse( clientId );
+			} else if ( isExpanded === false ) {
+				expand( clientId );
+			}
+		},
+		[ clientId, expand, collapse, isExpanded ]
+	);
+
+	const instanceId = useInstanceId( ListViewBlock );
+
+	if ( ! block ) {
+		return null;
+	}
+
 	// When a block hides its toolbar it also hides the block settings menu,
 	// since that menu is part of the toolbar in the editor canvas.
 	// List View respects this by also hiding the block settings menu.
-	const showBlockActions = hasBlockSupport(
-		blockName,
-		'__experimentalToolbar',
-		true
-	);
-	const instanceId = useInstanceId( ListViewBlock );
+	const showBlockActions =
+		!! block &&
+		hasBlockSupport( block.name, '__experimentalToolbar', true );
+
 	const descriptionId = `list-view-block-select-button__${ instanceId }`;
 	const blockPositionDescription = getBlockPositionDescription(
 		position,
@@ -143,9 +194,7 @@ function ListViewBlock( {
 		  )
 		: __( 'Edit' );
 
-	const { isTreeGridMounted, expand, collapse } = useListViewContext();
-
-	const isEditable = block.name !== 'core/page-list-item';
+	const isEditable = !! block && block.name !== 'core/page-list-item';
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
@@ -163,53 +212,6 @@ function ListViewBlock( {
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
-	// If ListView has experimental features related to the Persistent List View,
-	// only focus the selected list item on mount; otherwise the list would always
-	// try to steal the focus from the editor canvas.
-	useEffect( () => {
-		if ( ! isTreeGridMounted && isSelected ) {
-			cellRef.current.focus();
-		}
-	}, [] );
-
-	const onMouseEnter = useCallback( () => {
-		setIsHovered( true );
-		toggleBlockHighlight( clientId, true );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
-	const onMouseLeave = useCallback( () => {
-		setIsHovered( false );
-		toggleBlockHighlight( clientId, false );
-	}, [ clientId, setIsHovered, toggleBlockHighlight ] );
-
-	const selectEditorBlock = useCallback(
-		( event ) => {
-			selectBlock( event, clientId );
-			event.preventDefault();
-		},
-		[ clientId, selectBlock ]
-	);
-
-	const updateSelection = useCallback(
-		( newClientId ) => {
-			selectBlock( undefined, newClientId );
-		},
-		[ selectBlock ]
-	);
-
-	const toggleExpanded = useCallback(
-		( event ) => {
-			// Prevent shift+click from opening link in a new window when toggling.
-			event.preventDefault();
-			event.stopPropagation();
-			if ( isExpanded === true ) {
-				collapse( clientId );
-			} else if ( isExpanded === false ) {
-				expand( clientId );
-			}
-		},
-		[ clientId, expand, collapse, isExpanded ]
-	);
-
 	let colSpan;
 	if ( hasRenderedMovers ) {
 		colSpan = 2;
@@ -234,6 +236,10 @@ function ListViewBlock( {
 		? selectedClientIds
 		: [ clientId ];
 
+	const MoreMenuComponent = LeafMoreMenu
+		? LeafMoreMenu
+		: BlockSettingsDropdown;
+
 	return (
 		<ListViewLeaf
 			className={ classes }
@@ -349,47 +355,26 @@ function ListViewBlock( {
 						colSpan={ isEditable ? 1 : 2 } // When an item is not editable then we don't output the cell for the edit button, so we need to adjust the colspan so that the HTML is valid.
 					>
 						{ ( { ref, tabIndex, onFocus } ) => (
-							<BlockSettingsDropdown
-								clientIds={ dropdownClientIds }
-								icon={ moreVertical }
-								label={ settingsAriaLabel }
-								toggleProps={ {
-									ref,
-									className:
-										'block-editor-list-view-block__menu',
-									tabIndex,
-									onFocus,
-								} }
-								disableOpenOnArrowDown
-								__experimentalSelectBlock={ updateSelection }
-							>
-								{ ( { onClose } ) => (
-									<MenuItem
-										onClick={ () => {
-											const newLink = createBlock(
-												'core/navigation-link'
-											);
-											const newSubmenu = createBlock(
-												'core/navigation-submenu',
-												attributes,
-												block.innerBlocks
-													? [
-															...block.innerBlocks,
-															newLink,
-													  ]
-													: [ newLink ]
-											);
-											replaceBlock(
-												clientId,
-												newSubmenu
-											);
-											onClose();
-										} }
-									>
-										{ __( 'Add a submenu item' ) }
-									</MenuItem>
-								) }
-							</BlockSettingsDropdown>
+							<>
+								<MoreMenuComponent
+									clientIds={ dropdownClientIds }
+									block={ block }
+									clientId={ clientId }
+									icon={ moreVertical }
+									label={ settingsAriaLabel }
+									toggleProps={ {
+										ref,
+										className:
+											'block-editor-list-view-block__menu',
+										tabIndex,
+										onFocus,
+									} }
+									disableOpenOnArrowDown
+									__experimentalSelectBlock={
+										updateSelection
+									}
+								/>
+							</>
 						) }
 					</TreeGridCell>
 				</>

package/src/components/off-canvas-editor/index.js

@@ -60,7 +60,8 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  * @param {Array}   props.blocks              Custom subset of block client IDs to be used instead of the default hierarchy.
  * @param {boolean} props.showBlockMovers     Flag to enable block movers
  * @param {boolean} props.isExpanded          Flag to determine whether nested levels are expanded by default.
- * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism,.
+ * @param {boolean} props.selectBlockInCanvas Flag to determine whether the list view should be a block selection mechanism.
+ * @param {Object}  props.LeafMoreMenu        Optional more menu substitution.
  * @param {Object}  ref                       Forwarded ref
  */
 function __ExperimentalOffCanvasEditor(
@@ -70,6 +71,7 @@ function __ExperimentalOffCanvasEditor(
 		showBlockMovers = false,
 		isExpanded = false,
 		selectBlockInCanvas = true,
+		LeafMoreMenu,
 	},
 	ref
 ) {
@@ -188,8 +190,16 @@ function __ExperimentalOffCanvasEditor(
 			expandedState,
 			expand,
 			collapse,
+			LeafMoreMenu,
 		} ),
-		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
+		[
+			isMounted.current,
+			draggedClientIds,
+			expandedState,
+			expand,
+			collapse,
+			LeafMoreMenu,
+		]
 	);
 
 	return (
@@ -231,6 +241,15 @@ function __ExperimentalOffCanvasEditor(
 									<Appender { ...treeGridCellProps } />
 								) }
 							</TreeGridCell>
+							{ ! clientIdsTree.length && (
+								<TreeGridCell withoutGridItem>
+									<div className="offcanvas-editor-list-view-is-empty">
+										{ __(
+											'Your menu is currently empty. Add your first menu item to get started.'
+										) }
+									</div>
+								</TreeGridCell>
+							) }
 						</TreeGridRow>
 					</ListViewContext.Provider>
 				</TreeGrid>

package/src/components/off-canvas-editor/style.scss

@@ -1,7 +1,7 @@
 .offcanvas-editor__appender .block-editor-inserter__toggle {
 	background-color: #1e1e1e;
 	color: #fff;
-	margin: $grid-unit-10 0 0 28px;
+	margin: $grid-unit-10 0 0 24px;
 	border-radius: 2px;
 	height: 24px;
 	min-width: 24px;
@@ -24,3 +24,7 @@
 	// sidebar width - tab panel padding
 	max-width: $sidebar-width - (2 * $grid-unit-20);
 }
+
+.offcanvas-editor-list-view-is-empty {
+	margin-left: $grid-unit-20;
+}

package/src/components/off-canvas-editor/test/use-inserted-block.js

@@ -0,0 +1,108 @@
+/**
+ * Internal dependencies
+ */
+import { useInsertedBlock } from '../use-inserted-block';
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: jest.fn(),
+} ) );
+
+describe( 'useInsertedBlock', () => {
+	const mockUpdateBlockAttributes = jest.fn();
+
+	it( 'returns undefined values when called without a block clientId', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const { result } = renderHook( () => useInsertedBlock() );
+
+		const {
+			insertedBlockName,
+			insertedBlockAttributes,
+			setInsertedBlockAttributes,
+		} = result.current;
+
+		expect( insertedBlockName ).toBeUndefined();
+		expect( insertedBlockAttributes ).toBeUndefined();
+		expect(
+			setInsertedBlockAttributes( { 'some-attribute': 'new-value' } )
+		).toBeUndefined();
+	} );
+
+	it( 'returns name and attributes when called with a block clientId', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const { result } = renderHook( () =>
+			useInsertedBlock( 'some-client-id-here' )
+		);
+
+		const { insertedBlockName, insertedBlockAttributes } = result.current;
+
+		expect( insertedBlockName ).toBe( 'core/navigation-link' );
+		expect( insertedBlockAttributes ).toEqual( {
+			'some-attribute': 'some-value',
+		} );
+	} );
+
+	it( 'dispatches updateBlockAttributes on provided client ID with new attributes when setInsertedBlockAttributes is called', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const clientId = '123456789';
+
+		const { result } = renderHook( () => useInsertedBlock( clientId ) );
+
+		const { setInsertedBlockAttributes } = result.current;
+
+		act( () => {
+			setInsertedBlockAttributes( {
+				'some-attribute': 'new-value',
+			} );
+		} );
+
+		expect( mockUpdateBlockAttributes ).toHaveBeenCalledWith( clientId, {
+			'some-attribute': 'new-value',
+		} );
+	} );
+} );