@wordpress/block-editor 11.2.0 → 11.3.0

package/src/components/list-view/block.js

@@ -209,7 +209,7 @@ function ListViewBlock( {
 		'is-synced-branch': isSyncedBranch,
 		'is-dragging': isDragged,
 		'has-single-cell': ! showBlockActions,
-		'is-synced': blockInformation.isSynced,
+		'is-synced': blockInformation?.isSynced,
 	} );
 
 	// Only include all selected blocks if the currently clicked on block

package/src/components/list-view/use-list-view-drop-zone.js

@@ -76,7 +76,7 @@ const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
  * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
  * @param {WPPoint}                  position   The point representing the cursor position when dragging.
  *
- * @return {WPListViewDropZoneTarget} An object containing data about the drop target.
+ * @return {WPListViewDropZoneTarget | undefined} An object containing data about the drop target.
  */
 function getListViewDropTarget( blocksData, position ) {
 	let candidateEdge;

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

@@ -14,8 +14,6 @@ import { useState } from '@wordpress/element';
  */
 import MediaReplaceFlow from '../';
 
-jest.useFakeTimers();
-
 const noop = () => {};
 
 function TestWrapper() {
@@ -57,9 +55,7 @@ describe( 'General media replace flow', () => {
 	} );
 
 	it( 'renders replace menu', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <TestWrapper /> );
 
@@ -81,9 +77,7 @@ describe( 'General media replace flow', () => {
 	} );
 
 	it( 'displays media URL', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <TestWrapper /> );
 
@@ -106,9 +100,7 @@ describe( 'General media replace flow', () => {
 	} );
 
 	it( 'edits media URL', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		render( <TestWrapper /> );
 
@@ -145,7 +137,7 @@ describe( 'General media replace flow', () => {
 
 		await user.click(
 			screen.getByRole( 'button', {
-				name: 'Submit',
+				name: 'Apply',
 			} )
 		);
 

package/src/components/media-upload/index.native.js

@@ -315,10 +315,10 @@ export class MediaUpload extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
+		const { capabilities } = select( blockEditorStore ).getSettings();
 		return {
 			isAudioBlockMediaUploadEnabled:
-				select( blockEditorStore ).getSettings( 'capabilities' )
-					.isAudioBlockMediaUploadEnabled === true,
+				capabilities?.isAudioBlockMediaUploadEnabled === true,
 		};
 	} ),
 ] )( MediaUpload );

package/src/components/off-canvas-editor/README.md

@@ -1,5 +1,5 @@
-# Experimental Off Canvas Editor
+# Off Canvas Editor
 
-The __ExperimentalOffCanvasEditor component is a modified ListView compoent. It provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other. It enables editing of hierarchy and addition of elements in the block tree without selecting the block instance on the canvas.
+The OffCanvasEditor component is a modified ListView compoent. It provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other. It enables editing of hierarchy and addition of elements in the block tree without selecting the block instance on the canvas.
 
 It is an experimental component which may end up completely merged into the ListView component via configuration props.

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

@@ -1,48 +1,104 @@
 /**
  * WordPress dependencies
  */
+import { useInstanceId } from '@wordpress/compose';
+import { speak } from '@wordpress/a11y';
 import { useSelect } from '@wordpress/data';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useState, useEffect } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import Inserter from '../inserter';
 
-export const Appender = forwardRef( ( props, ref ) => {
-	const { hideInserter, clientId } = useSelect( ( select ) => {
-		const {
-			getTemplateLock,
-			__unstableGetEditorMode,
-			getSelectedBlockClientId,
-		} = select( blockEditorStore );
-
-		const _clientId = getSelectedBlockClientId();
-
-		return {
-			clientId: getSelectedBlockClientId(),
-			hideInserter:
-				!! getTemplateLock( _clientId ) ||
-				__unstableGetEditorMode() === 'zoom-out',
-		};
-	}, [] );
-
-	if ( hideInserter ) {
-		return null;
-	}
+export const Appender = forwardRef(
+	( { nestingLevel, blockCount, ...props }, ref ) => {
+		const [ insertedBlock, setInsertedBlock ] = useState( null );
+
+		const instanceId = useInstanceId( Appender );
+		const { hideInserter, clientId } = useSelect( ( select ) => {
+			const {
+				getTemplateLock,
+				__unstableGetEditorMode,
+				getSelectedBlockClientId,
+			} = select( blockEditorStore );
+
+			const _clientId = getSelectedBlockClientId();
+
+			return {
+				clientId: getSelectedBlockClientId(),
+				hideInserter:
+					!! getTemplateLock( _clientId ) ||
+					__unstableGetEditorMode() === 'zoom-out',
+			};
+		}, [] );
+
+		const blockTitle = useBlockDisplayTitle( {
+			clientId,
+			context: 'list-view',
+		} );
 
-	return (
-		<div className="offcanvas-editor__appender">
-			<Inserter
-				ref={ ref }
-				rootClientId={ clientId }
-				position="bottom right"
-				isAppender={ true }
-				selectBlockOnInsert={ false }
-				shouldDirectInsert={ false }
-				__experimentalIsQuick
-				{ ...props }
-			/>
-		</div>
-	);
-} );
+		const insertedBlockTitle = useBlockDisplayTitle( {
+			clientId: insertedBlock?.clientId,
+			context: 'list-view',
+		} );
+
+		useEffect( () => {
+			if ( ! insertedBlockTitle?.length ) {
+				return;
+			}
+
+			speak(
+				sprintf(
+					// translators: %s: name of block being inserted (i.e. Paragraph, Image, Group etc)
+					__( '%s block inserted' ),
+					insertedBlockTitle
+				),
+				'assertive'
+			);
+		}, [ insertedBlockTitle ] );
+
+		if ( hideInserter ) {
+			return null;
+		}
+
+		const descriptionId = `off-canvas-editor-appender__${ instanceId }`;
+		const description = sprintf(
+			/* translators: 1: The name of the block. 2: The numerical position of the block. 3: The level of nesting for the block. */
+			__( 'Append to %1$s block at position %2$d, Level %3$d' ),
+			blockTitle,
+			blockCount + 1,
+			nestingLevel
+		);
+
+		return (
+			<div className="offcanvas-editor-appender">
+				<Inserter
+					ref={ ref }
+					rootClientId={ clientId }
+					position="bottom right"
+					isAppender={ true }
+					selectBlockOnInsert={ false }
+					shouldDirectInsert={ false }
+					__experimentalIsQuick
+					{ ...props }
+					toggleProps={ { 'aria-describedby': descriptionId } }
+					onSelectOrClose={ ( maybeInsertedBlock ) => {
+						if ( maybeInsertedBlock?.clientId ) {
+							setInsertedBlock( maybeInsertedBlock );
+						}
+					} }
+				/>
+				<div
+					className="offcanvas-editor-appender__description"
+					id={ descriptionId }
+				>
+					{ description }
+				</div>
+			</div>
+		);
+	}
+);

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

@@ -14,6 +14,7 @@ import {
 import { forwardRef } from '@wordpress/element';
 import { Icon, lockSmall as lock } from '@wordpress/icons';
 import { SPACE, ENTER } from '@wordpress/keycodes';
+import { sprintf, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -27,7 +28,7 @@ import { useBlockLock } from '../block-lock';
 function ListViewBlockSelectButton(
 	{
 		className,
-		block: { clientId },
+		block,
 		onClick,
 		onToggleExpanded,
 		tabIndex,
@@ -38,6 +39,7 @@ function ListViewBlockSelectButton(
 	},
 	ref
 ) {
+	const { clientId } = block;
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockTitle = useBlockDisplayTitle( {
 		clientId,
@@ -60,6 +62,14 @@ function ListViewBlockSelectButton(
 		}
 	}
 
+	const editAriaLabel = blockInformation
+		? sprintf(
+				// translators: %s: The title of the block.
+				__( 'Edit %s block' ),
+				blockInformation.title
+		  )
+		: __( 'Edit' );
+
 	return (
 		<>
 			<Button
@@ -77,6 +87,7 @@ function ListViewBlockSelectButton(
 				draggable={ draggable }
 				href={ `#block-${ clientId }` }
 				aria-hidden={ true }
+				title={ editAriaLabel }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
 				<BlockIcon

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

@@ -33,7 +33,6 @@ import {
 } from '../block-mover/button';
 import ListViewBlockContents from './block-contents';
 import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdown';
-import BlockEditButton from './block-edit-button';
 import { useListViewContext } from './context';
 import { getBlockPositionDescription } from './utils';
 import { store as blockEditorStore } from '../../store';
@@ -55,7 +54,6 @@ function ListViewBlock( {
 	isExpanded,
 	selectedClientIds,
 	preventAnnouncement,
-	selectBlockInCanvas,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -186,15 +184,6 @@ function ListViewBlock( {
 		  )
 		: __( 'Options' );
 
-	const editAriaLabel = blockInformation
-		? sprintf(
-				// translators: %s: The title of the block.
-				__( 'Edit %s block' ),
-				blockInformation.title
-		  )
-		: __( 'Edit' );
-
-	const isEditable = !! block && block.name !== 'core/page-list-item';
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
@@ -207,16 +196,11 @@ function ListViewBlock( {
 		{ 'is-visible': isHovered || isFirstSelectedBlock }
 	);
 
-	const listViewBlockEditClassName = classnames(
-		'block-editor-list-view-block__menu-cell',
-		{ 'is-visible': isHovered || isFirstSelectedBlock }
-	);
-
 	let colSpan;
 	if ( hasRenderedMovers ) {
-		colSpan = 2;
+		colSpan = 1;
 	} else if ( ! showBlockActions ) {
-		colSpan = 3;
+		colSpan = 2;
 	}
 
 	const classes = classnames( {
@@ -269,13 +253,7 @@ function ListViewBlock( {
 					<div className="block-editor-list-view-block__contents-container">
 						<ListViewBlockContents
 							block={ block }
-							onClick={
-								selectBlockInCanvas
-									? selectEditorBlock
-									: ( event ) => {
-											event.preventDefault();
-									  }
-							}
+							onClick={ selectEditorBlock }
 							onToggleExpanded={ toggleExpanded }
 							isSelected={ isSelected }
 							position={ position }
@@ -331,28 +309,11 @@ function ListViewBlock( {
 
 			{ showBlockActions && (
 				<>
-					{ isEditable && (
-						<TreeGridCell
-							className={ listViewBlockEditClassName }
-							aria-selected={
-								!! isSelected || forceSelectionContentLock
-							}
-						>
-							{ ( props ) => (
-								<BlockEditButton
-									{ ...props }
-									label={ editAriaLabel }
-									clientId={ clientId }
-								/>
-							) }
-						</TreeGridCell>
-					) }
 					<TreeGridCell
 						className={ listViewBlockSettingsClassName }
 						aria-selected={
 							!! isSelected || forceSelectionContentLock
 						}
-						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 } ) => (
 							<>

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

@@ -1,12 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element';
+import {
+	__experimentalTreeGridRow as TreeGridRow,
+	__experimentalTreeGridCell as TreeGridCell,
+} from '@wordpress/components';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import { memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
+
+import { Appender } from './appender';
 import ListViewBlock from './block';
 import { useListViewContext } from './context';
 import { isClientIdSelected } from './utils';
@@ -91,7 +97,6 @@ function ListViewBranch( props ) {
 		isExpanded,
 		parentId,
 		shouldShowInnerBlocks = true,
-		selectBlockInCanvas,
 	} = props;
 
 	const isContentLocked = useSelect(
@@ -111,8 +116,14 @@ function ListViewBranch( props ) {
 		return null;
 	}
 
+	// Only show the appender at the first level.
+	const showAppender = level === 1;
+
 	const filteredBlocks = blocks.filter( Boolean );
 	const blockCount = filteredBlocks.length;
+
+	// The appender means an extra row in List View, so add 1 to the row count.
+	const rowCount = showAppender ? blockCount + 1 : blockCount;
 	let nextPosition = listPosition;
 
 	return (
@@ -167,14 +178,13 @@ function ListViewBranch( props ) {
 								isDragged={ isDragged }
 								level={ level }
 								position={ position }
-								rowCount={ blockCount }
+								rowCount={ rowCount }
 								siblingBlockCount={ blockCount }
 								showBlockMovers={ showBlockMovers }
 								path={ updatedPath }
 								isExpanded={ shouldExpand }
 								listPosition={ nextPosition }
 								selectedClientIds={ selectedClientIds }
-								selectBlockInCanvas={ selectBlockInCanvas }
 							/>
 						) }
 						{ ! showBlock && (
@@ -195,12 +205,29 @@ function ListViewBranch( props ) {
 								isBranchSelected={ isSelectedBranch }
 								selectedClientIds={ selectedClientIds }
 								isExpanded={ isExpanded }
-								selectBlockInCanvas={ selectBlockInCanvas }
 							/>
 						) }
 					</AsyncModeProvider>
 				);
 			} ) }
+			{ showAppender && (
+				<TreeGridRow
+					level={ level }
+					setSize={ rowCount }
+					positionInSet={ rowCount }
+					isExpanded={ true }
+				>
+					<TreeGridCell>
+						{ ( treeGridCellProps ) => (
+							<Appender
+								nestingLevel={ level }
+								blockCount={ blockCount }
+								{ ...treeGridCellProps }
+							/>
+						) }
+					</TreeGridCell>
+				</TreeGridRow>
+			) }
 		</>
 	);
 }

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

@@ -32,7 +32,6 @@ import useListViewClientIds from './use-list-view-client-ids';
 import useListViewDropZone from './use-list-view-drop-zone';
 import useListViewExpandSelectedItem from './use-list-view-expand-selected-item';
 import { store as blockEditorStore } from '../../store';
-import { Appender } from './appender';
 
 const expanded = ( state, action ) => {
 	if ( Array.isArray( action.clientIds ) ) {
@@ -55,24 +54,16 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
 /**
  * Show a hierarchical list of blocks.
  *
- * @param {Object}  props                     Components props.
- * @param {string}  props.id                  An HTML element id for the root element of ListView.
- * @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 {Object}  props.LeafMoreMenu        Optional more menu substitution.
- * @param {Object}  ref                       Forwarded ref
+ * @param {Object}  props                 Components props.
+ * @param {string}  props.id              An HTML element id for the root element of ListView.
+ * @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 {Object}  props.LeafMoreMenu    Optional more menu substitution.
+ * @param {Object}  ref                   Forwarded ref
  */
-function __ExperimentalOffCanvasEditor(
-	{
-		id,
-		blocks,
-		showBlockMovers = false,
-		isExpanded = false,
-		selectBlockInCanvas = true,
-		LeafMoreMenu,
-	},
+function OffCanvasEditor(
+	{ id, blocks, showBlockMovers = false, isExpanded = false, LeafMoreMenu },
 	ref
 ) {
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
@@ -228,7 +219,6 @@ function __ExperimentalOffCanvasEditor(
 							selectedClientIds={ selectedClientIds }
 							isExpanded={ isExpanded }
 							shouldShowInnerBlocks={ shouldShowInnerBlocks }
-							selectBlockInCanvas={ selectBlockInCanvas }
 						/>
 						<TreeGridRow
 							level={ 1 }
@@ -236,11 +226,6 @@ function __ExperimentalOffCanvasEditor(
 							positionInSet={ 1 }
 							isExpanded={ true }
 						>
-							<TreeGridCell>
-								{ ( treeGridCellProps ) => (
-									<Appender { ...treeGridCellProps } />
-								) }
-							</TreeGridCell>
 							{ ! clientIdsTree.length && (
 								<TreeGridCell withoutGridItem>
 									<div className="offcanvas-editor-list-view-is-empty">
@@ -258,4 +243,4 @@ function __ExperimentalOffCanvasEditor(
 	);
 }
 
-export default forwardRef( __ExperimentalOffCanvasEditor );
+export default forwardRef( OffCanvasEditor );

package/src/components/off-canvas-editor/link-ui.js

@@ -99,10 +99,10 @@ function LinkControlTransforms( { clientId } ) {
 				{ __( 'Transform' ) }
 			</h3>
 			<div className="link-control-transform__items">
-				{ transforms.map( ( item, index ) => {
+				{ transforms.map( ( item ) => {
 					return (
 						<Button
-							key={ `transform-${ index }` }
+							key={ `transform-${ item.name }` }
 							onClick={ () =>
 								replaceBlock(
 									clientId,

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

@@ -1,4 +1,4 @@
-.offcanvas-editor__appender .block-editor-inserter__toggle {
+.offcanvas-editor-appender .block-editor-inserter__toggle {
 	background-color: #1e1e1e;
 	color: #fff;
 	margin: $grid-unit-10 0 0 24px;
@@ -14,6 +14,10 @@
 	}
 }
 
+.offcanvas-editor-appender__description {
+	display: none;
+}
+
 .offcanvas-editor-list-view-tree-wrapper {
 	max-width: 100%;
 	overflow-x: auto;

package/src/components/off-canvas-editor/use-list-view-drop-zone.js

@@ -76,7 +76,7 @@ const ALLOWED_DROP_EDGES = [ 'top', 'bottom' ];
  * @param {WPListViewDropZoneBlocks} blocksData Data about the blocks in list view.
  * @param {WPPoint}                  position   The point representing the cursor position when dragging.
  *
- * @return {WPListViewDropZoneTarget} An object containing data about the drop target.
+ * @return {WPListViewDropZoneTarget | undefined} An object containing data about the drop target.
  */
 function getListViewDropTarget( blocksData, position ) {
 	let candidateEdge;

package/src/components/provider/index.js

@@ -11,24 +11,43 @@ import withRegistryProvider from './with-registry-provider';
 import useBlockSync from './use-block-sync';
 import { store as blockEditorStore } from '../../store';
 import { BlockRefsProvider } from './block-refs-provider';
+import { unlock } from '../../experiments';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
-function BlockEditorProvider( props ) {
-	const { children, settings } = props;
+export const ExperimentalBlockEditorProvider = withRegistryProvider(
+	( props ) => {
+		const { children, settings, stripExperimentalSettings = false } = props;
 
-	const { updateSettings } = useDispatch( blockEditorStore );
-	useEffect( () => {
-		updateSettings( {
-			...settings,
-			__internalIsInitialized: true,
-		} );
-	}, [ settings ] );
+		const { __experimentalUpdateSettings } = unlock(
+			useDispatch( blockEditorStore )
+		);
+		useEffect( () => {
+			__experimentalUpdateSettings(
+				{
+					...settings,
+					__internalIsInitialized: true,
+				},
+				stripExperimentalSettings
+			);
+		}, [ settings ] );
 
-	// Syncs the entity provider with changes in the block-editor store.
-	useBlockSync( props );
+		// Syncs the entity provider with changes in the block-editor store.
+		useBlockSync( props );
 
-	return <BlockRefsProvider>{ children }</BlockRefsProvider>;
-}
+		return <BlockRefsProvider>{ children }</BlockRefsProvider>;
+	}
+);
 
-export default withRegistryProvider( BlockEditorProvider );
+export const BlockEditorProvider = ( props ) => {
+	return (
+		<ExperimentalBlockEditorProvider
+			{ ...props }
+			stripExperimentalSettings={ true }
+		>
+			{ props.children }
+		</ExperimentalBlockEditorProvider>
+	);
+};
+
+export default BlockEditorProvider;

package/src/components/provider/index.native.js

@@ -14,7 +14,7 @@ import { BlockRefsProvider } from './block-refs-provider';
 
 /** @typedef {import('@wordpress/data').WPDataRegistry} WPDataRegistry */
 
-function BlockEditorProvider( props ) {
+const BlockEditorProvider = withRegistryProvider( function ( props ) {
 	const { children, settings } = props;
 
 	const { updateSettings } = useDispatch( blockEditorStore );
@@ -26,6 +26,7 @@ function BlockEditorProvider( props ) {
 	useBlockSync( props );
 
 	return <BlockRefsProvider>{ children }</BlockRefsProvider>;
-}
+} );
 
-export default withRegistryProvider( BlockEditorProvider );
+export default BlockEditorProvider;
+export { BlockEditorProvider as ExperimentalBlockEditorProvider };