@wordpress/block-editor 10.2.0 → 10.3.0

package/src/components/block-preview/auto.js

@@ -1,10 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { Disabled } from '@wordpress/components';
 import { useResizeObserver, pure, useRefEffect } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useMemo } from '@wordpress/element';
+import { Disabled } from '@wordpress/components';
 
 /**
  * Internal dependencies

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

@@ -32,11 +32,10 @@ export function BlockPreview( {
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
 	);
-	const settings = useMemo( () => {
-		const _settings = { ...originalSettings };
-		_settings.__experimentalBlockPatterns = [];
-		return _settings;
-	}, [ originalSettings ] );
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
 	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
@@ -94,12 +93,12 @@ export function useBlockPreview( {
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
 	);
-	const disabledRef = useDisabled();
-	const ref = useMergeRefs( [ props.ref, disabledRef ] );
 	const settings = useMemo(
-		() => ( { ...originalSettings, __experimentalBlockPatterns: [] } ),
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
 		[ originalSettings ]
 	);
+	const disabledRef = useDisabled();
+	const ref = useMergeRefs( [ props.ref, disabledRef ] );
 	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
 
 	const children = (

package/src/components/block-preview/live.js

@@ -1,8 +1,3 @@
-/**
- * WordPress dependencies
- */
-import { Disabled } from '@wordpress/components';
-
 /**
  * Internal dependencies
  */
@@ -16,9 +11,9 @@ export default function LiveBlockPreview( { onClick } ) {
 			onClick={ onClick }
 			onKeyPress={ onClick }
 		>
-			<Disabled>
+			<div inert="true">
 				<BlockList />
-			</Disabled>
+			</div>
 		</div>
 	);
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -99,12 +99,6 @@ describe( 'useBlockPreview', () => {
 		);
 		expect( previewedBlockContents ).toBeInTheDocument();
 
-		// Test elements within block contents are disabled.
-		await waitFor( () => {
-			const button = screen.getByText( 'Button' );
-			expect( button.hasAttribute( 'disabled' ) ).toBe( true );
-		} );
-
 		// Ensure the block preview class names are merged with the component's class name.
 		expect( container.firstChild.className ).toBe(
 			'test-container-classname block-editor-block-preview__live-content components-disabled'

package/src/components/block-selection-clearer/index.js

@@ -17,12 +17,17 @@ import { store as blockEditorStore } from '../../store';
  * @return {import('react').RefCallback} Ref callback.
  */
 export function useBlockSelectionClearer() {
-	const { hasSelectedBlock, hasMultiSelection } =
+	const { getSettings, hasSelectedBlock, hasMultiSelection } =
 		useSelect( blockEditorStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
+	const { __experimentalClearBlockSelection: isEnabled } = getSettings();
 
 	return useRefEffect(
 		( node ) => {
+			if ( ! isEnabled ) {
+				return;
+			}
+
 			function onMouseDown( event ) {
 				if ( ! hasSelectedBlock() && ! hasMultiSelection() ) {
 					return;
@@ -42,7 +47,7 @@ export function useBlockSelectionClearer() {
 				node.removeEventListener( 'mousedown', onMouseDown );
 			};
 		},
-		[ hasSelectedBlock, hasMultiSelection, clearSelectedBlock ]
+		[ hasSelectedBlock, hasMultiSelection, clearSelectedBlock, isEnabled ]
 	);
 }
 

package/src/components/block-selection-clearer/test/index.js

@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockSelectionClearer from '../';
+
+const defaultUseSelectValues = {
+	hasSelectedBlock: jest.fn().mockReturnValue( false ),
+	hasMultiSelection: jest.fn().mockReturnValue( false ),
+	getSettings: jest.fn().mockReturnValue( {
+		__experimentalClearBlockSelection: true,
+	} ),
+};
+
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: jest.fn(),
+} ) );
+
+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;
+} );
+
+describe( 'BlockSelectionClearer component', () => {
+	it( 'should clear the selected block when a selected block exists', () => {
+		const mockClearSelectedBlock = jest.fn();
+		useSelect.mockImplementation( () => ( {
+			...defaultUseSelectValues,
+			hasSelectedBlock: jest.fn().mockReturnValue( true ),
+		} ) );
+		useDispatch.mockImplementation( () => ( {
+			clearSelectedBlock: mockClearSelectedBlock,
+		} ) );
+
+		render(
+			<BlockSelectionClearer>
+				<button>Not a block</button>
+			</BlockSelectionClearer>
+		);
+		const button = screen.getByRole( 'button' );
+		fireEvent.mouseDown( button.parentElement );
+
+		expect( mockClearSelectedBlock ).toBeCalled();
+	} );
+
+	it( 'should clear the selected block when multiple blocks are selected', () => {
+		const mockClearSelectedBlock = jest.fn();
+		useSelect.mockImplementation( () => ( {
+			...defaultUseSelectValues,
+			hasMultiSelection: jest.fn().mockReturnValue( true ),
+		} ) );
+		useDispatch.mockImplementation( () => ( {
+			clearSelectedBlock: mockClearSelectedBlock,
+		} ) );
+
+		render(
+			<BlockSelectionClearer>
+				<button>Not a block</button>
+			</BlockSelectionClearer>
+		);
+		const button = screen.getByRole( 'button' );
+		fireEvent.mouseDown( button.parentElement );
+
+		expect( mockClearSelectedBlock ).toBeCalled();
+	} );
+
+	it( 'should not clear the block selection when no blocks are selected', () => {
+		const mockClearSelectedBlock = jest.fn();
+		useSelect.mockImplementation( () => defaultUseSelectValues );
+		useDispatch.mockImplementation( () => ( {
+			clearSelectedBlock: mockClearSelectedBlock,
+		} ) );
+
+		render(
+			<BlockSelectionClearer>
+				<button>Not a block</button>
+			</BlockSelectionClearer>
+		);
+		const button = screen.getByRole( 'button' );
+		fireEvent.mouseDown( button.parentElement );
+
+		expect( mockClearSelectedBlock ).not.toBeCalled();
+	} );
+
+	it( 'should not clear the block selection when the feature is disabled', () => {
+		const mockClearSelectedBlock = jest.fn();
+		useSelect.mockImplementation( () => ( {
+			...defaultUseSelectValues,
+			hasSelectedBlock: jest.fn().mockReturnValue( true ),
+			getSettings: jest.fn().mockReturnValue( {
+				__experimentalClearBlockSelection: false,
+			} ),
+		} ) );
+		useDispatch.mockImplementation( () => ( {
+			clearSelectedBlock: mockClearSelectedBlock,
+		} ) );
+
+		render(
+			<BlockSelectionClearer>
+				<button>Not a block</button>
+			</BlockSelectionClearer>
+		);
+		const button = screen.getByRole( 'button' );
+		fireEvent.mouseDown( button.parentElement );
+
+		expect( mockClearSelectedBlock ).not.toBeCalled();
+	} );
+} );

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -6,7 +6,11 @@ import { castArray } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { getBlockType, serialize } from '@wordpress/blocks';
+import {
+	getBlockType,
+	serialize,
+	store as blocksStore,
+} from '@wordpress/blocks';
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
@@ -59,7 +63,7 @@ export function BlockSettingsDropdown( {
 	const firstBlockClientId = blockClientIds[ 0 ];
 	const {
 		firstParentClientId,
-		hasReducedUI,
+		isDistractionFree,
 		onlyBlock,
 		parentBlockType,
 		previousBlockClientId,
@@ -70,22 +74,32 @@ export function BlockSettingsDropdown( {
 			const {
 				getBlockCount,
 				getBlockName,
-				getBlockParents,
+				getBlockRootClientId,
 				getPreviousBlockClientId,
 				getNextBlockClientId,
 				getSelectedBlockClientIds,
 				getSettings,
+				getBlockAttributes,
 			} = select( blockEditorStore );
 
-			const parents = getBlockParents( firstBlockClientId );
-			const _firstParentClientId = parents[ parents.length - 1 ];
-			const parentBlockName = getBlockName( _firstParentClientId );
+			const { getActiveBlockVariation } = select( blocksStore );
+
+			const _firstParentClientId =
+				getBlockRootClientId( firstBlockClientId );
+			const parentBlockName =
+				_firstParentClientId && getBlockName( _firstParentClientId );
 
 			return {
 				firstParentClientId: _firstParentClientId,
-				hasReducedUI: getSettings().hasReducedUI,
-				onlyBlock: 1 === getBlockCount(),
-				parentBlockType: getBlockType( parentBlockName ),
+				isDistractionFree: getSettings().isDistractionFree,
+				onlyBlock: 1 === getBlockCount( _firstParentClientId ),
+				parentBlockType:
+					_firstParentClientId &&
+					( getActiveBlockVariation(
+						parentBlockName,
+						getBlockAttributes( _firstParentClientId )
+					) ||
+						getBlockType( parentBlockName ) ),
 				previousBlockClientId:
 					getPreviousBlockClientId( firstBlockClientId ),
 				nextBlockClientId: getNextBlockClientId( firstBlockClientId ),
@@ -171,7 +185,7 @@ export function BlockSettingsDropdown( {
 	const { gestures: showParentOutlineGestures } = useShowMoversGestures( {
 		ref: selectParentButtonRef,
 		onChange( isFocused ) {
-			if ( isFocused && hasReducedUI ) {
+			if ( isFocused && isDistractionFree ) {
 				return;
 			}
 			toggleBlockHighlight( firstParentClientId, isFocused );
@@ -210,7 +224,7 @@ export function BlockSettingsDropdown( {
 								<__unstableBlockSettingsMenuFirstItem.Slot
 									fillProps={ { onClose } }
 								/>
-								{ firstParentClientId !== undefined && (
+								{ !! firstParentClientId && (
 									<MenuItem
 										{ ...showParentOutlineGestures }
 										ref={ selectParentButtonRef }

package/src/components/block-settings-menu/test/block-mode-toggle.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import ShallowRenderer from 'react-test-renderer/shallow';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -9,46 +9,44 @@ import ShallowRenderer from 'react-test-renderer/shallow';
 import { BlockModeToggle } from '../block-mode-toggle';
 
 describe( 'BlockModeToggle', () => {
-	function getShallowRenderOutput( element ) {
-		const renderer = new ShallowRenderer();
-		renderer.render( element );
-		return renderer.getRenderOutput();
-	}
-
 	it( "should not render the HTML mode button if the block doesn't support it", () => {
-		const wrapper = getShallowRenderOutput(
+		render(
 			<BlockModeToggle blockType={ { supports: { html: false } } } />
 		);
 
-		expect( wrapper ).toBe( null );
+		expect(
+			screen.queryByRole( 'menuitem', { name: 'Edit as HTML' } )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render the HTML mode button', () => {
-		const wrapper = getShallowRenderOutput(
+		render(
 			<BlockModeToggle
 				blockType={ { supports: { html: true } } }
 				mode="visual"
 			/>
 		);
-		const text = wrapper.props.children;
 
-		expect( text ).toEqual( 'Edit as HTML' );
+		expect(
+			screen.getByRole( 'menuitem', { name: 'Edit as HTML' } )
+		).toBeVisible();
 	} );
 
 	it( 'should render the Visual mode button', () => {
-		const wrapper = getShallowRenderOutput(
+		render(
 			<BlockModeToggle
 				blockType={ { supports: { html: true } } }
 				mode="html"
 			/>
 		);
-		const text = wrapper.props.children;
 
-		expect( text ).toEqual( 'Edit visually' );
+		expect(
+			screen.getByRole( 'menuitem', { name: 'Edit visually' } )
+		).toBeVisible();
 	} );
 
 	it( 'should not render the Visual mode button if code editing is disabled', () => {
-		const wrapper = getShallowRenderOutput(
+		render(
 			<BlockModeToggle
 				blockType={ { supports: { html: true } } }
 				mode="html"
@@ -56,6 +54,8 @@ describe( 'BlockModeToggle', () => {
 			/>
 		);
 
-		expect( wrapper ).toBe( null );
+		expect(
+			screen.queryByRole( 'menuitem', { name: 'Edit visually' } )
+		).not.toBeInTheDocument();
 	} );
 } );

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

@@ -6,14 +6,14 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useLayoutEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { debounce, useViewportMatch } from '@wordpress/compose';
 import {
 	Button,
 	__experimentalTruncate as Truncate,
-	Slot,
-	Fill,
+	Popover,
 } from '@wordpress/components';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -21,32 +21,10 @@ import {
 import BlockStylesPreviewPanel from './preview-panel';
 import useStylesForBlocks from './use-styles-for-block';
 
-function BlockStylesPreviewPanelSlot( { scope } ) {
-	return <Slot name={ `BlockStylesPreviewPanel/${ scope }` } />;
-}
-
-function BlockStylesPreviewPanelFill( { children, scope, ...props } ) {
-	return (
-		<Fill name={ `BlockStylesPreviewPanel/${ scope }` }>
-			<div { ...props }>{ children }</div>
-		</Fill>
-	);
-}
-
-// Top position (in px) of the Block Styles container
-// relative to the editor pane.
-// The value is the equivalent of the container's right position.
-const DEFAULT_POSITION_TOP = 16;
-
 const noop = () => {};
 
 // Block Styles component for the Settings Sidebar.
-function BlockStyles( {
-	clientId,
-	onSwitch = noop,
-	onHoverClassName = noop,
-	scope,
-} ) {
+function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 	const {
 		onSelect,
 		stylesToRender,
@@ -58,17 +36,8 @@ function BlockStyles( {
 		onSwitch,
 	} );
 	const [ hoveredStyle, setHoveredStyle ] = useState( null );
-	const [ containerScrollTop, setContainerScrollTop ] = useState( 0 );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
-	useLayoutEffect( () => {
-		const scrollContainer = document.querySelector(
-			'.interface-interface-skeleton__content'
-		);
-		const scrollTop = scrollContainer?.scrollTop || 0;
-		setContainerScrollTop( scrollTop + DEFAULT_POSITION_TOP );
-	}, [ hoveredStyle ] );
-
 	if ( ! stylesToRender || stylesToRender.length === 0 ) {
 		return null;
 	}
@@ -127,23 +96,31 @@ function BlockStyles( {
 				} ) }
 			</div>
 			{ hoveredStyle && ! isMobileViewport && (
-				<BlockStylesPreviewPanelFill
-					scope={ scope }
-					className="block-editor-block-styles__preview-panel"
-					style={ { top: containerScrollTop } }
-					onMouseLeave={ () => styleItemHandler( null ) }
-				>
-					<BlockStylesPreviewPanel
-						activeStyle={ activeStyle }
-						className={ previewClassName }
-						genericPreviewBlock={ genericPreviewBlock }
-						style={ hoveredStyle }
-					/>
-				</BlockStylesPreviewPanelFill>
+				<Popover placement="left-start" offset={ 20 }>
+					<div
+						className="block-editor-block-styles__preview-panel"
+						onMouseLeave={ () => styleItemHandler( null ) }
+					>
+						<BlockStylesPreviewPanel
+							activeStyle={ activeStyle }
+							className={ previewClassName }
+							genericPreviewBlock={ genericPreviewBlock }
+							style={ hoveredStyle }
+						/>
+					</div>
+				</Popover>
 			) }
 		</div>
 	);
 }
 
-BlockStyles.Slot = BlockStylesPreviewPanelSlot;
 export default BlockStyles;
+
+BlockStyles.Slot = () => {
+	deprecated( 'BlockStyles.Slot', {
+		version: '6.4',
+		since: '6.2',
+	} );
+
+	return null;
+};

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

@@ -288,8 +288,8 @@ describe( 'BlockSwitcherDropdownMenu', () => {
 					screen.getByRole( 'menu', {
 						name: 'Block Name',
 					} )
-				).getAllByRole( 'menuitem' )
-			).toHaveLength( 1 );
+				).getByRole( 'menuitem' )
+			).toBeInTheDocument();
 		} );
 	} );
 } );

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

@@ -34,7 +34,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		blockClientId,
 		blockType,
 		hasFixedToolbar,
-		hasReducedUI,
+		isDistractionFree,
 		isValid,
 		isVisual,
 		isContentLocked,
@@ -60,7 +60,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 				selectedBlockClientId &&
 				getBlockType( getBlockName( selectedBlockClientId ) ),
 			hasFixedToolbar: settings.hasFixedToolbar,
-			hasReducedUI: settings.hasReducedUI,
+			isDistractionFree: settings.isDistractionFree,
 			rootClientId: blockRootClientId,
 			isValid: selectedBlockClientIds.every( ( id ) =>
 				isBlockValid( id )
@@ -82,7 +82,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 		{
 			ref: nodeRef,
 			onChange( isFocused ) {
-				if ( isFocused && hasReducedUI ) {
+				if ( isFocused && isDistractionFree ) {
 					return;
 				}
 				toggleBlockHighlight( blockClientId, isFocused );
@@ -132,9 +132,7 @@ const BlockToolbar = ( { hideDragHandle } ) => {
 							) }
 							<BlockMover
 								clientIds={ blockClientIds }
-								hideDragHandle={
-									hideDragHandle || hasReducedUI
-								}
+								hideDragHandle={ hideDragHandle }
 							/>
 						</ToolbarGroup>
 					) }

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

@@ -137,15 +137,6 @@
 		padding-right: 6px;
 	}
 
-	// Switcher overrides.
-	.block-editor-block-switcher {
-		border-right: 1px solid $gray-900;
-
-		.components-dropdown-menu__toggle {
-			margin-left: 0;
-		}
-	}
-
 	.block-editor-block-switcher .components-dropdown-menu__toggle,
 	.block-editor-block-switcher__no-switcher-icon {
 		.block-editor-block-icon {
@@ -162,12 +153,22 @@
 		}
 	}
 
+	.block-editor-block-mover:not(.is-horizontal) .block-editor-block-mover__move-button-container {
+		width: auto;
+	}
+
 	// Mover overrides.
 	.block-editor-block-toolbar__block-controls .block-editor-block-mover {
-		margin-left: 0;
+		border-left: 1px solid $gray-900;
+		margin-left: 6px;
+		margin-right: -6px;
 		white-space: nowrap;
 	}
 
+	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-toolbar__block-controls .block-editor-block-mover {
+		border-left-color: $gray-200;
+	}
+
 	.block-editor-block-mover-button {
 		// The specificity can be reduced once https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L34 is also dealt with.
 		padding-left: $grid-unit !important;
@@ -175,17 +176,40 @@
 	}
 
 	.block-editor-block-mover__drag-handle.has-icon {
-		padding-left: 6px !important;
-		padding-right: 6px !important;
-		border-right: 1px solid $gray-900;
+		padding-left: 12px !important;
+		padding-right: 12px !important;
+	}
+
+	.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container {
+		border-width: 0;
 	}
 
 	@include break-small() {
 		// Specificity override for https://github.com/WordPress/gutenberg/blob/try/block-toolbar-labels/packages/block-editor/src/components/block-mover/style.scss#L69
 		.is-up-button.is-up-button.is-up-button {
-			border-bottom: 1px solid $gray-900;
 			margin-right: 0;
 			border-radius: 0;
+			order: 1;
+		}
+
+		.block-editor-block-mover__move-button-container {
+			border-left: 1px solid $gray-900;
+
+			&::before {
+				content: "";
+				display: block;
+				height: 1px;
+				background: $gray-900;
+				order: 2;
+			}
+		}
+
+		.is-down-button.is-down-button.is-down-button {
+			order: 3;
+		}
+
+		.block-editor-block-contextual-toolbar.is-fixed .block-editor-block-mover__move-button-container::before {
+			background: $gray-300;
 		}
 	}
 

package/src/components/block-tools/back-compat.js

@@ -23,6 +23,7 @@ export default function BlockToolsBackCompat( { children } ) {
 	deprecated( 'wp.components.Popover.Slot name="block-toolbar"', {
 		alternative: 'wp.blockEditor.BlockTools',
 		since: '5.8',
+		version: '6.3',
 	} );
 
 	return (