@wordpress/block-editor 11.1.0 → 11.3.0

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';
@@ -34,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';
@@ -56,7 +54,6 @@ function ListViewBlock( {
 	isExpanded,
 	selectedClientIds,
 	preventAnnouncement,
-	selectBlockInCanvas,
 } ) {
 	const cellRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
@@ -86,8 +83,7 @@ function ListViewBlock( {
 		( isSelected &&
 			selectedClientIds[ selectedClientIds.length - 1 ] === clientId );
 
-	const { insertBlock, replaceBlock, toggleBlockHighlight } =
-		useDispatch( blockEditorStore );
+	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const block = useSelect(
@@ -128,7 +124,8 @@ function ListViewBlock( {
 		[ selectBlock ]
 	);
 
-	const { isTreeGridMounted, expand, collapse } = useListViewContext();
+	const { isTreeGridMounted, expand, collapse, LeafMoreMenu } =
+		useListViewContext();
 
 	const toggleExpanded = useCallback(
 		( event ) => {
@@ -187,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(
@@ -208,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( {
@@ -237,6 +220,10 @@ function ListViewBlock( {
 		? selectedClientIds
 		: [ clientId ];
 
+	const MoreMenuComponent = LeafMoreMenu
+		? LeafMoreMenu
+		: BlockSettingsDropdown;
+
 	return (
 		<ListViewLeaf
 			className={ classes }
@@ -266,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 }
@@ -328,85 +309,33 @@ 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 } ) => (
-							<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'
-											);
-											if (
-												block.name ===
-												'core/navigation-submenu'
-											) {
-												const updateSelectionOnInsert = false;
-												insertBlock(
-													newLink,
-													block.innerBlocks.length,
-													clientId,
-													updateSelectionOnInsert
-												);
-											} else {
-												// Convert to a submenu if the block currently isn't one.
-												const newSubmenu = createBlock(
-													'core/navigation-submenu',
-													block.attributes,
-													block.innerBlocks
-														? [
-																...block.innerBlocks,
-																newLink,
-														  ]
-														: [ newLink ]
-												);
-												replaceBlock(
-													clientId,
-													newSubmenu
-												);
-											}
-											onClose();
-										} }
-									>
-										{ __( 'Add 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/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,22 +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}  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,
-	},
+function OffCanvasEditor(
+	{ id, blocks, showBlockMovers = false, isExpanded = false, LeafMoreMenu },
 	ref
 ) {
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
@@ -188,8 +181,16 @@ function __ExperimentalOffCanvasEditor(
 			expandedState,
 			expand,
 			collapse,
+			LeafMoreMenu,
 		} ),
-		[ isMounted.current, draggedClientIds, expandedState, expand, collapse ]
+		[
+			isMounted.current,
+			draggedClientIds,
+			expandedState,
+			expand,
+			collapse,
+			LeafMoreMenu,
+		]
 	);
 
 	return (
@@ -218,7 +219,6 @@ function __ExperimentalOffCanvasEditor(
 							selectedClientIds={ selectedClientIds }
 							isExpanded={ isExpanded }
 							shouldShowInnerBlocks={ shouldShowInnerBlocks }
-							selectBlockInCanvas={ selectBlockInCanvas }
 						/>
 						<TreeGridRow
 							level={ 1 }
@@ -226,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">
@@ -248,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,21 +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 );
-	}, [ 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/use-enter.js

@@ -28,6 +28,10 @@ export function useEnter( props ) {
 				return;
 			}
 
+			if ( event.keyCode !== ENTER ) {
+				return;
+			}
+
 			const {
 				removeEditorOnlyFormats,
 				value,
@@ -40,10 +44,6 @@ export function useEnter( props ) {
 				onSplitAtEnd,
 			} = propsRef.current;
 
-			if ( event.keyCode !== ENTER ) {
-				return;
-			}
-
 			event.preventDefault();
 
 			const _value = { ...value };

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' ) {