@wordpress/block-editor 10.2.0 → 10.4.0

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

@@ -32,6 +32,7 @@ function BlockPopover(
 		__unstableCoverTarget = false,
 		__unstablePopoverSlot,
 		__unstableContentRef,
+		shift = true,
 		...props
 	},
 	ref
@@ -166,12 +167,13 @@ function BlockPopover(
 			placement="top-start"
 			resize={ false }
 			flip={ false }
-			shift
+			shift={ shift }
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',
 				props.className
 			) }
+			variant="unstyled"
 		>
 			{ __unstableCoverTarget && <div style={ style }>{ children }</div> }
 			{ ! __unstableCoverTarget && children }

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

@@ -13,15 +13,11 @@
 		margin: 0 !important;
 		min-width: auto;
 		width: max-content;
-		background: none;
-		border: none;
-		outline: none;
-		box-shadow: none;
 		overflow-y: visible;
 	}
 
 	// Enable pointer events for the toolbar's content.
-	&:not(.block-editor-block-popover__inbetween) .components-popover__content {
+	&:not(.block-editor-block-popover__inbetween, .block-editor-block-popover__drop-zone) .components-popover__content {
 		* {
 			pointer-events: all;
 		}
@@ -48,3 +44,19 @@
 		}
 	}
 }
+
+
+.components-popover.block-editor-block-popover__drop-zone {
+	// Disable pointer events for dragging and dropping.
+	// This drop zone is fully presentational, the actual DnD implementation is handled elsewhere.
+	* {
+		pointer-events: none;
+	}
+
+	.block-editor-block-popover__drop-zone-foreground {
+		position: absolute;
+		inset: 0;
+		background-color: var(--wp-admin-theme-color);
+		border-radius: 2px;
+	}
+}

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { castArray } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -32,12 +31,14 @@ export function BlockPreview( {
 		( select ) => select( blockEditorStore ).getSettings(),
 		[]
 	);
-	const settings = useMemo( () => {
-		const _settings = { ...originalSettings };
-		_settings.__experimentalBlockPatterns = [];
-		return _settings;
-	}, [ originalSettings ] );
-	const renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
+	const settings = useMemo(
+		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		[ originalSettings ]
+	);
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
 	if ( ! blocks || blocks.length === 0 ) {
 		return null;
 	}
@@ -94,13 +95,16 @@ 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 renderedBlocks = useMemo( () => castArray( blocks ), [ blocks ] );
+	const disabledRef = useDisabled();
+	const ref = useMergeRefs( [ props.ref, disabledRef ] );
+	const renderedBlocks = useMemo(
+		() => ( Array.isArray( blocks ) ? blocks : [ blocks ] ),
+		[ blocks ]
+	);
 
 	const children = (
 		<BlockEditorProvider value={ renderedBlocks } settings={ settings }>

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

@@ -1,12 +1,11 @@
-/**
- * External dependencies
- */
-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';
@@ -37,7 +36,7 @@ const noop = () => {};
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
-	isAlternate: true,
+	variant: 'toolbar',
 };
 
 function CopyMenuItem( { blocks, onCopy } ) {
@@ -54,12 +53,14 @@ export function BlockSettingsDropdown( {
 	__unstableDisplayLocation,
 	...props
 } ) {
-	const blockClientIds = castArray( clientIds );
+	const blockClientIds = Array.isArray( clientIds )
+		? clientIds
+		: [ clientIds ];
 	const count = blockClientIds.length;
 	const firstBlockClientId = blockClientIds[ 0 ];
 	const {
 		firstParentClientId,
-		hasReducedUI,
+		isDistractionFree,
 		onlyBlock,
 		parentBlockType,
 		previousBlockClientId,
@@ -70,22 +71,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 +182,7 @@ export function BlockSettingsDropdown( {
 	const { gestures: showParentOutlineGestures } = useShowMoversGestures( {
 		ref: selectParentButtonRef,
 		onChange( isFocused ) {
-			if ( isFocused && hasReducedUI ) {
+			if ( isFocused && isDistractionFree ) {
 				return;
 			}
 			toggleBlockHighlight( firstParentClientId, isFocused );
@@ -210,7 +221,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/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { castArray } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -52,7 +47,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 			const { getBlockStyles, getBlockType } = select( blocksStore );
 			const { canRemoveBlocks } = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId(
-				castArray( clientIds )[ 0 ]
+				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
 			);
 			const [ { name: firstBlockName } ] = blocks;
 			const _isSingleBlockSelected = blocks.length === 1;
@@ -163,7 +158,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 						label={ blockSwitcherLabel }
 						popoverProps={ {
 							position: 'bottom right',
-							isAlternate: true,
+							variant: 'toolbar',
 							className: 'block-editor-block-switcher__popover',
 						} }
 						icon={

package/src/components/block-switcher/preview-block-popover.js

@@ -15,7 +15,7 @@ export default function PreviewBlockPopover( { blocks } ) {
 			<div className="block-editor-block-switcher__popover__preview__container">
 				<Popover
 					className="block-editor-block-switcher__preview__popover"
-					position="bottom right"
+					placement="bottom-start"
 					focusOnMount={ false }
 				>
 					<div className="block-editor-block-switcher__preview">

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();
 		} );
 	} );
 } );