@wordpress/block-editor 9.7.1-next.d6164808d3.0 → 10.0.0

package/src/components/block-title/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -73,9 +73,9 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle /> );
+		const { container } = render( <BlockTitle /> );
 
-		expect( wrapper.type() ).toBe( null );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'renders nothing if block type does not exist', () => {
@@ -83,11 +83,12 @@ describe( 'BlockTitle', () => {
 			name: 'name-not-exists',
 			attributes: null,
 		} ) );
-		const wrapper = shallow(
+
+		const { container } = render(
 			<BlockTitle clientId="afd1cb17-2c08-4e7a-91be-007ba7ddc3a1" />
 		);
 
-		expect( wrapper.type() ).toBe( null );
+		expect( container ).toBeEmptyDOMElement();
 	} );
 
 	it( 'renders title if block type exists', () => {
@@ -96,9 +97,9 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle clientId="id-name-exists" /> );
+		render( <BlockTitle clientId="id-name-exists" /> );
 
-		expect( wrapper.text() ).toBe( 'Block Title' );
+		expect( screen.getByText( 'Block Title' ) ).toBeVisible();
 	} );
 
 	it( 'renders label if it is set', () => {
@@ -107,9 +108,9 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-name-with-label" /> );
 
-		expect( wrapper.text() ).toBe( 'Test Label' );
+		expect( screen.getByText( 'Test Label' ) ).toBeVisible();
 	} );
 
 	it( 'should prioritize reusable block title over title', () => {
@@ -119,9 +120,10 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-name-with-label" /> );
 
-		expect( wrapper.text() ).toBe( 'Reuse me!' );
+		expect( screen.queryByText( 'Test Label' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'Reuse me!' ) ).toBeVisible();
 	} );
 
 	it( 'should prioritize block label over title', () => {
@@ -130,11 +132,12 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-name-with-label" /> );
 
-		expect( wrapper.text() ).toBe(
-			'A Custom Label like a Block Variation Label'
-		);
+		expect( screen.queryByText( 'Test Label' ) ).not.toBeInTheDocument();
+		expect(
+			screen.getByText( 'A Custom Label like a Block Variation Label' )
+		).toBeVisible();
 	} );
 
 	it( 'should default to block information title if no reusable title or block name is available', () => {
@@ -143,9 +146,9 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow( <BlockTitle clientId="id-name-with-label" /> );
+		render( <BlockTitle clientId="id-name-with-label" /> );
 
-		expect( wrapper.text() ).toBe( 'Block With Label' );
+		expect( screen.getByText( 'Block With Label' ) ).toBeVisible();
 	} );
 
 	it( 'truncates the label with custom truncate length', () => {
@@ -154,14 +157,14 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow(
+		render(
 			<BlockTitle
 				clientId="id-name-with-long-label"
 				maximumLength={ 12 }
 			/>
 		);
 
-		expect( wrapper.text() ).toBe( 'This is a...' );
+		expect( screen.getByText( 'This is a...' ) ).toBeVisible();
 	} );
 
 	it( 'should not truncate the label if maximum length is undefined', () => {
@@ -170,12 +173,12 @@ describe( 'BlockTitle', () => {
 			attributes: null,
 		} ) );
 
-		const wrapper = shallow(
-			<BlockTitle clientId="id-name-with-long-label" />
-		);
+		render( <BlockTitle clientId="id-name-with-long-label" /> );
 
-		expect( wrapper.text() ).toBe(
-			'This is a longer label than typical for blocks to have.'
-		);
+		expect(
+			screen.getByText(
+				'This is a longer label than typical for blocks to have.'
+			)
+		).toBeVisible();
 	} );
 } );

package/src/components/block-toolbar/index.js

@@ -37,6 +37,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		hasReducedUI,
 		isValid,
 		isVisual,
+		isContentLocked,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -45,6 +46,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 			isBlockValid,
 			getBlockRootClientId,
 			getSettings,
+			__unstableGetContentLockingParent,
 		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -66,6 +68,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 			isVisual: selectedBlockClientIds.every(
 				( id ) => getBlockMode( id ) === 'visual'
 			),
+			isContentLocked: !! __unstableGetContentLockingParent(
+				selectedBlockClientId
+			),
 		};
 	}, [] );
 
@@ -112,24 +117,27 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 
 	return (
 		<div className={ classes }>
-			{ ! isMultiToolbar && ! displayHeaderToolbar && (
-				<BlockParentSelector clientIds={ blockClientIds } />
-			) }
+			{ ! isMultiToolbar &&
+				! displayHeaderToolbar &&
+				! isContentLocked && <BlockParentSelector /> }
 			<div ref={ nodeRef } { ...showMoversGestures }>
-				{ ( shouldShowVisualToolbar || isMultiToolbar ) && (
-					<ToolbarGroup className="block-editor-block-toolbar__block-controls">
-						<BlockSwitcher clientIds={ blockClientIds } />
-						{ ! isMultiToolbar && (
-							<BlockLockToolbar
-								clientId={ blockClientIds[ 0 ] }
+				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
+					! isContentLocked && (
+						<ToolbarGroup className="block-editor-block-toolbar__block-controls">
+							<BlockSwitcher clientIds={ blockClientIds } />
+							{ ! isMultiToolbar && (
+								<BlockLockToolbar
+									clientId={ blockClientIds[ 0 ] }
+								/>
+							) }
+							<BlockMover
+								clientIds={ blockClientIds }
+								hideDragHandle={
+									hideDragHandle || hasReducedUI
+								}
 							/>
-						) }
-						<BlockMover
-							clientIds={ blockClientIds }
-							hideDragHandle={ hideDragHandle || hasReducedUI }
-						/>
-					</ToolbarGroup>
-				) }
+						</ToolbarGroup>
+					) }
 			</div>
 			{ shouldShowVisualToolbar && isMultiToolbar && (
 				<BlockGroupToolbar />
@@ -161,7 +169,9 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				</>
 			) }
 			<BlockEditVisuallyButton clientIds={ blockClientIds } />
-			<BlockSettingsMenu clientIds={ blockClientIds } />
+			{ ! isContentLocked && (
+				<BlockSettingsMenu clientIds={ blockClientIds } />
+			) }
 		</div>
 	);
 };

package/src/components/block-tools/block-contextual-toolbar.js

@@ -20,8 +20,12 @@ import { store as blockEditorStore } from '../../store';
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const { blockType, hasParents, showParentSelector } = useSelect(
 		( select ) => {
-			const { getBlockName, getBlockParents, getSelectedBlockClientIds } =
-				select( blockEditorStore );
+			const {
+				getBlockName,
+				getBlockParents,
+				getSelectedBlockClientIds,
+				__unstableGetContentLockingParent,
+			} = select( blockEditorStore );
 			const { getBlockType } = select( blocksStore );
 			const selectedBlockClientIds = getSelectedBlockClientIds();
 			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -42,7 +46,10 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 						'__experimentalParentSelector',
 						true
 					) &&
-					selectedBlockClientIds.length <= 1,
+					selectedBlockClientIds.length <= 1 &&
+					! __unstableGetContentLockingParent(
+						selectedBlockClientId
+					),
 			};
 		},
 		[]

package/src/components/block-tools/block-selection-button.js

@@ -39,6 +39,7 @@ import { store as blockEditorStore } from '../../store';
 import BlockDraggable from '../block-draggable';
 import useBlockDisplayInformation from '../use-block-display-information';
 import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockMover from '../block-mover';
 
 /**
  * Block selection button component, displaying the label of the block. If the block
@@ -59,6 +60,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				getBlockIndex,
 				hasBlockMovingClientId,
 				getBlockListSettings,
+				__unstableGetEditorMode,
 			} = select( blockEditorStore );
 			const index = getBlockIndex( clientId );
 			const { name, attributes } = getBlock( clientId );
@@ -69,11 +71,19 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				attributes,
 				blockMovingMode,
 				orientation: getBlockListSettings( rootClientId )?.orientation,
+				editorMode: __unstableGetEditorMode(),
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const { index, name, attributes, blockMovingMode, orientation } = selected;
+	const {
+		index,
+		name,
+		attributes,
+		blockMovingMode,
+		orientation,
+		editorMode,
+	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
@@ -236,25 +246,34 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					<BlockIcon icon={ blockInformation?.icon } showColors />
 				</FlexItem>
 				<FlexItem>
-					<BlockDraggable clientIds={ [ clientId ] }>
-						{ ( draggableProps ) => (
-							<Button
-								icon={ dragHandle }
-								className="block-selection-button_drag-handle"
-								aria-hidden="true"
-								label={ dragHandleLabel }
-								// Should not be able to tab to drag handle as this
-								// button can only be used with a pointer device.
-								tabIndex="-1"
-								{ ...draggableProps }
-							/>
-						) }
-					</BlockDraggable>
+					{ editorMode === 'zoom-out' && (
+						<BlockMover clientIds={ [ clientId ] } hideDragHandle />
+					) }
+					{ editorMode === 'navigation' && (
+						<BlockDraggable clientIds={ [ clientId ] }>
+							{ ( draggableProps ) => (
+								<Button
+									icon={ dragHandle }
+									className="block-selection-button_drag-handle"
+									aria-hidden="true"
+									label={ dragHandleLabel }
+									// Should not be able to tab to drag handle as this
+									// button can only be used with a pointer device.
+									tabIndex="-1"
+									{ ...draggableProps }
+								/>
+							) }
+						</BlockDraggable>
+					) }
 				</FlexItem>
 				<FlexItem>
 					<Button
 						ref={ ref }
-						onClick={ () => setNavigationMode( false ) }
+						onClick={
+							editorMode === 'navigation'
+								? () => setNavigationMode( false )
+								: undefined
+						}
 						onKeyDown={ onKeyDown }
 						label={ label }
 						showTooltip={ false }

package/src/components/block-tools/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { first, last } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -10,15 +5,20 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useViewportMatch } from '@wordpress/compose';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import InsertionPoint from './insertion-point';
+import {
+	InsertionPointOpenRef,
+	default as InsertionPoint,
+} from './insertion-point';
 import SelectedBlockPopover from './selected-block-popover';
 import { store as blockEditorStore } from '../../store';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
+import ZoomOutModeInserters from './zoom-out-mode-inserters';
 
 /**
  * Renders block tools (the block toolbar, select/navigation mode toolbar, the
@@ -35,10 +35,15 @@ export default function BlockTools( {
 	...props
 } ) {
 	const isLargeViewport = useViewportMatch( 'medium' );
-	const hasFixedToolbar = useSelect(
-		( select ) => select( blockEditorStore ).getSettings().hasFixedToolbar,
-		[]
-	);
+	const { hasFixedToolbar, isZoomOutMode } = useSelect( ( select ) => {
+		const { __unstableGetEditorMode, getSettings } =
+			select( blockEditorStore );
+
+		return {
+			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+			hasFixedToolbar: getSettings().hasFixedToolbar,
+		};
+	}, [] );
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
@@ -59,14 +64,14 @@ export default function BlockTools( {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
-				const rootClientId = getBlockRootClientId( first( clientIds ) );
+				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 				moveBlocksUp( clientIds, rootClientId );
 			}
 		} else if ( isMatch( 'core/block-editor/move-down', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
-				const rootClientId = getBlockRootClientId( first( clientIds ) );
+				const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
 				moveBlocksDown( clientIds, rootClientId );
 			}
 		} else if ( isMatch( 'core/block-editor/duplicate', event ) ) {
@@ -85,13 +90,13 @@ export default function BlockTools( {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
-				insertAfterBlock( last( clientIds ) );
+				insertAfterBlock( clientIds[ clientIds.length - 1 ] );
 			}
 		} else if ( isMatch( 'core/block-editor/insert-before', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
 				event.preventDefault();
-				insertBeforeBlock( first( clientIds ) );
+				insertBeforeBlock( clientIds[ 0 ] );
 			}
 		} else if ( isMatch( 'core/block-editor/unselect', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
@@ -106,30 +111,41 @@ export default function BlockTools( {
 		}
 	}
 
+	const blockToolbarRef = usePopoverScroll( __unstableContentRef );
+	const blockToolbarAfterRef = usePopoverScroll( __unstableContentRef );
+
 	return (
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div { ...props } onKeyDown={ onKeyDown }>
-			<InsertionPoint __unstableContentRef={ __unstableContentRef }>
-				{ ( hasFixedToolbar || ! isLargeViewport ) && (
-					<BlockContextualToolbar isFixed />
+			<InsertionPointOpenRef.Provider value={ useRef( false ) }>
+				{ ! isZoomOutMode && (
+					<InsertionPoint
+						__unstableContentRef={ __unstableContentRef }
+					/>
 				) }
+				{ ! isZoomOutMode &&
+					( hasFixedToolbar || ! isLargeViewport ) && (
+						<BlockContextualToolbar isFixed />
+					) }
 				{ /* Even if the toolbar is fixed, the block popover is still
-					needed for navigation and exploded mode. */ }
+					needed for navigation and zoom-out mode. */ }
 				<SelectedBlockPopover
 					__unstableContentRef={ __unstableContentRef }
 				/>
 				{ /* Used for the inline rich text toolbar. */ }
-				<Popover.Slot
-					name="block-toolbar"
-					ref={ usePopoverScroll( __unstableContentRef ) }
-				/>
+				<Popover.Slot name="block-toolbar" ref={ blockToolbarRef } />
 				{ children }
 				{ /* Used for inline rich text popovers. */ }
 				<Popover.Slot
 					name="__unstable-block-tools-after"
-					ref={ usePopoverScroll( __unstableContentRef ) }
+					ref={ blockToolbarAfterRef }
 				/>
-			</InsertionPoint>
+				{ isZoomOutMode && (
+					<ZoomOutModeInserters
+						__unstableContentRef={ __unstableContentRef }
+					/>
+				) }
+			</InsertionPointOpenRef.Provider>
 		</div>
 	);
 }

package/src/components/block-tools/insertion-point.js

@@ -200,6 +200,7 @@ function InsertionPointPopover( {
 				<motion.div
 					variants={ lineVariants }
 					className="block-editor-block-list__insertion-point-indicator"
+					data-testid="block-list-insertion-point-indicator"
 				/>
 				{ isInserterShown && (
 					<motion.div
@@ -227,15 +228,10 @@ function InsertionPointPopover( {
 	);
 }
 
-export default function InsertionPoint( { children, ...props } ) {
+export default function InsertionPoint( props ) {
 	const isVisible = useSelect( ( select ) => {
 		return select( blockEditorStore ).isBlockInsertionPointVisible();
 	}, [] );
 
-	return (
-		<InsertionPointOpenRef.Provider value={ useRef( false ) }>
-			{ isVisible && <InsertionPointPopover { ...props } /> }
-			{ children }
-		</InsertionPointOpenRef.Provider>
-	);
+	return isVisible && <InsertionPointPopover { ...props } />;
 }

package/src/components/block-tools/selected-block-popover.js

@@ -20,10 +20,11 @@ import BlockSelectionButton from './block-selection-button';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import { store as blockEditorStore } from '../../store';
 import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 
 function selector( select ) {
 	const {
-		isNavigationMode,
+		__unstableGetEditorMode,
 		isMultiSelecting,
 		hasMultiSelection,
 		isTyping,
@@ -31,7 +32,7 @@ function selector( select ) {
 		getLastMultiSelectedBlockClientId,
 	} = select( blockEditorStore );
 	return {
-		isNavigationMode: isNavigationMode(),
+		editorMode: __unstableGetEditorMode(),
 		isMultiSelecting: isMultiSelecting(),
 		isTyping: isTyping(),
 		hasFixedToolbar: getSettings().hasFixedToolbar,
@@ -50,7 +51,7 @@ function SelectedBlockPopover( {
 	__unstableContentRef,
 } ) {
 	const {
-		isNavigationMode,
+		editorMode,
 		isMultiSelecting,
 		isTyping,
 		hasFixedToolbar,
@@ -79,17 +80,18 @@ function SelectedBlockPopover( {
 	const { stopTyping } = useDispatch( blockEditorStore );
 
 	const showEmptyBlockSideInserter =
-		! isTyping && ! isNavigationMode && isEmptyDefaultBlock;
-	const shouldShowBreadcrumb = isNavigationMode;
+		! isTyping && editorMode === 'edit' && isEmptyDefaultBlock;
+	const shouldShowBreadcrumb =
+		editorMode === 'navigation' || editorMode === 'zoom-out';
 	const shouldShowContextualToolbar =
-		! isNavigationMode &&
+		editorMode === 'edit' &&
 		! hasFixedToolbar &&
 		isLargeViewport &&
 		! isMultiSelecting &&
 		! showEmptyBlockSideInserter &&
 		! isTyping;
 	const canFocusHiddenToolbar =
-		! isNavigationMode &&
+		editorMode === 'edit' &&
 		! shouldShowContextualToolbar &&
 		! hasFixedToolbar &&
 		! isEmptyDefaultBlock;
@@ -113,6 +115,11 @@ function SelectedBlockPopover( {
 	// to it when re-mounting.
 	const initialToolbarItemIndexRef = useRef();
 
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
 	if ( ! shouldShowBreadcrumb && ! shouldShowContextualToolbar ) {
 		return null;
 	}
@@ -126,6 +133,8 @@ function SelectedBlockPopover( {
 			} ) }
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
+			resize={ false }
+			{ ...popoverProps }
 		>
 			{ shouldShowContextualToolbar && (
 				<BlockContextualToolbar

package/src/components/block-tools/style.scss

@@ -171,6 +171,11 @@
 	.block-selection-button_select-button.components-button {
 		padding: 0;
 	}
+
+	.block-editor-block-mover {
+		background: unset;
+		border: none;
+	}
 }
 
 // Hide the popover block editor list while dragging.