@wordpress/block-editor 11.2.0 → 11.3.1

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,26 +54,29 @@ 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 {string}  props.description     Optional accessible description for the tree grid component.
+ * @param {string}  props.onSelect        Optional callback to be invoked when a block is selected.
+ * @param {Object}  ref                   Forwarded ref
  */
-function __ExperimentalOffCanvasEditor(
+function OffCanvasEditor(
 	{
 		id,
 		blocks,
 		showBlockMovers = false,
 		isExpanded = false,
-		selectBlockInCanvas = true,
 		LeafMoreMenu,
+		description = __( 'Block navigation structure' ),
+		onSelect,
 	},
 	ref
 ) {
+	const { getBlock } = useSelect( blockEditorStore );
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
 		useListViewClientIds( blocks );
 
@@ -114,8 +116,11 @@ function __ExperimentalOffCanvasEditor(
 		( event, blockClientId ) => {
 			updateBlockSelection( event, blockClientId );
 			setSelectedTreeId( blockClientId );
+			if ( onSelect ) {
+				onSelect( getBlock( blockClientId ) );
+			}
 		},
-		[ setSelectedTreeId, updateBlockSelection ]
+		[ setSelectedTreeId, updateBlockSelection, onSelect, getBlock ]
 	);
 	useEffect( () => {
 		isMounted.current = true;
@@ -217,7 +222,8 @@ function __ExperimentalOffCanvasEditor(
 					onCollapseRow={ collapseRow }
 					onExpandRow={ expandRow }
 					onFocusRow={ focusRow }
-					applicationAriaLabel={ __( 'Block navigation structure' ) }
+					// eslint-disable-next-line jsx-a11y/aria-props
+					aria-description={ description }
 				>
 					<ListViewContext.Provider value={ contextValue }>
 						<ListViewBranch
@@ -228,7 +234,6 @@ function __ExperimentalOffCanvasEditor(
 							selectedClientIds={ selectedClientIds }
 							isExpanded={ isExpanded }
 							shouldShowInnerBlocks={ shouldShowInnerBlocks }
-							selectBlockInCanvas={ selectBlockInCanvas }
 						/>
 						<TreeGridRow
 							level={ 1 }
@@ -236,11 +241,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 +258,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 };

package/src/components/provider/test/experimental-provider.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { render } from '@testing-library/react';
+/**
+ * WordPress dependencies
+ */
+import { useRegistry } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { BlockEditorProvider, ExperimentalBlockEditorProvider } from '../';
+import { store as blockEditorStore } from '../../../store';
+
+const HasEditorSetting = ( props ) => {
+	const registry = useRegistry();
+	if ( props.setRegistry ) {
+		props.setRegistry( registry );
+	}
+	return <p>Test.</p>;
+};
+
+describe( 'BlockEditorProvider', () => {
+	let registry;
+	const setRegistry = ( reg ) => {
+		registry = reg;
+	};
+	beforeEach( () => {
+		registry = undefined;
+	} );
+	it( 'should strip experimental settings', async () => {
+		render(
+			<BlockEditorProvider
+				settings={ {
+					inserterMediaCategories: true,
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</BlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		expect( settings ).not.toHaveProperty( 'inserterMediaCategories' );
+	} );
+	it( 'should preserve stable settings', async () => {
+		render(
+			<BlockEditorProvider
+				settings={ {
+					stableSetting: 'https://example.com',
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</BlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		expect( settings ).toHaveProperty( 'stableSetting' );
+	} );
+} );
+
+describe( 'ExperimentalBlockEditorProvider', () => {
+	let registry;
+	const setRegistry = ( reg ) => {
+		registry = reg;
+	};
+	beforeEach( () => {
+		registry = undefined;
+	} );
+	it( 'should preserve experimental settings', async () => {
+		render(
+			<ExperimentalBlockEditorProvider
+				settings={ {
+					inserterMediaCategories: true,
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</ExperimentalBlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		expect( settings ).toHaveProperty( 'inserterMediaCategories' );
+	} );
+	it( 'should preserve stable settings', async () => {
+		render(
+			<ExperimentalBlockEditorProvider
+				settings={ {
+					stableSetting: 'https://example.com',
+				} }
+			>
+				<HasEditorSetting setRegistry={ setRegistry } />
+			</ExperimentalBlockEditorProvider>
+		);
+		const settings = registry.select( blockEditorStore ).getSettings();
+		expect( settings ).toHaveProperty( 'stableSetting' );
+	} );
+} );

package/src/components/provider/test/use-block-sync.js

@@ -14,7 +14,17 @@ import { render } from '@testing-library/react';
 import useBlockSync from '../use-block-sync';
 import withRegistryProvider from '../with-registry-provider';
 import * as blockEditorActions from '../../../store/actions';
+
 import { store as blockEditorStore } from '../../../store';
+jest.mock( '../../../store/actions', () => {
+	const actions = jest.requireActual( '../../../store/actions' );
+	return {
+		...actions,
+		resetBlocks: jest.fn( actions.resetBlocks ),
+		replaceInnerBlocks: jest.fn( actions.replaceInnerBlocks ),
+		setHasControlledInnerBlocks: jest.fn( actions.replaceInnerBlocks ),
+	};
+} );
 
 const TestWrapper = withRegistryProvider( ( props ) => {
 	if ( props.setRegistry ) {

package/src/components/responsive-block-control/test/index.js

@@ -15,8 +15,6 @@ import { SelectControl } from '@wordpress/components';
  */
 import ResponsiveBlockControl from '../index';
 
-jest.useFakeTimers();
-
 const inputId = 'input-12345678';
 
 const sizeOptions = [
@@ -246,9 +244,7 @@ describe( 'Default and Responsive modes', () => {
 	} );
 
 	it( 'should switch between default and responsive modes when interacting with toggle control', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const ResponsiveBlockControlConsumer = () => {
 			const [ isResponsive, setIsResponsive ] = useState( false );
 

package/src/components/rich-text/use-before-input-rules.js

@@ -77,9 +77,17 @@ export function useBeforeInputRules( props ) {
 			const { defaultView } = ownerDocument;
 			const newEvent = new defaultView.InputEvent( 'input', init );
 
-			// Dispatch an input event with the new data. This will trigger the
+			// Dispatch an `input` event with the new data. This will trigger the
 			// input rules.
-			event.target.dispatchEvent( newEvent );
+			// Postpone the `input` to the next event loop tick so that the dispatch
+			// doesn't happen synchronously in the middle of `beforeinput` dispatch.
+			// This is closer to how native `input` event would be timed, and also
+			// makes sure that the `input` event is dispatched only after the `onChange`
+			// call few lines above has fully updated the data store state and rerendered
+			// all affected components.
+			window.queueMicrotask( () => {
+				event.target.dispatchEvent( newEvent );
+			} );
 			event.preventDefault();
 		}
 

package/src/components/rich-text/utils.js

@@ -23,7 +23,7 @@ export function addActiveFormats( value, activeFormats ) {
  *
  * @param {?(string|boolean)} multiline The multiline prop.
  *
- * @return {?string} The multiline tag.
+ * @return {string | undefined} The multiline tag.
  */
 export function getMultilineTag( multiline ) {
 	if ( multiline !== true && multiline !== 'p' && multiline !== 'li' ) {

package/src/components/spacing-sizes-control/utils.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -75,7 +70,7 @@ export function getPresetValueFromCustomValue( value, spacingSizes ) {
  *
  * @param {string} value Value to convert.
  *
- * @return {string} CSS var string for given spacing preset value.
+ * @return {string | undefined} CSS var string for given spacing preset value.
  */
 export function getSpacingPresetCssVar( value ) {
 	if ( ! value ) {
@@ -211,5 +206,5 @@ export function isValuesDefined( values ) {
 	if ( values === undefined || values === null ) {
 		return false;
 	}
-	return ! isEmpty( Object.values( values ).filter( ( value ) => !! value ) );
+	return Object.values( values ).filter( ( value ) => !! value ).length > 0;
 }

package/src/components/tool-selector/index.js

@@ -51,7 +51,7 @@ function ToolSelector( props, ref ) {
 					label={ __( 'Tools' ) }
 				/>
 			) }
-			position="bottom right"
+			popoverProps={ { placement: 'bottom-start' } }
 			renderContent={ () => (
 				<>
 					<NavigableMenu role="menu" aria-label={ __( 'Tools' ) }>