@wordpress/block-editor 10.1.1-next.4d3b314fd5.0 → 10.3.0

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

@@ -32,6 +32,7 @@ function BlockPopover(
 		__unstableCoverTarget = false,
 		__unstablePopoverSlot,
 		__unstableContentRef,
+		shift = true,
 		...props
 	},
 	ref
@@ -42,24 +43,15 @@ function BlockPopover(
 		ref,
 		usePopoverScroll( __unstableContentRef ),
 	] );
-	const style = useMemo( () => {
-		if ( ! selectedElement || lastSelectedElement !== selectedElement ) {
-			return {};
-		}
-
-		return {
-			position: 'absolute',
-			width: selectedElement.offsetWidth,
-			height: selectedElement.offsetHeight,
-		};
-	}, [ selectedElement, lastSelectedElement, __unstableRefreshSize ] );
 
-	const [ popoverAnchorRecomputeCounter, forceRecomputePopoverAnchor ] =
-		useReducer(
-			// Module is there to make sure that the counter doesn't overflow.
-			( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
-			0
-		);
+	const [
+		popoverDimensionsRecomputeCounter,
+		forceRecomputePopoverDimensions,
+	] = useReducer(
+		// Module is there to make sure that the counter doesn't overflow.
+		( s ) => ( s + 1 ) % MAX_POPOVER_RECOMPUTE_COUNTER,
+		0
+	);
 
 	// When blocks are moved up/down, they are animated to their new position by
 	// updating the `transform` property manually (i.e. without using CSS
@@ -74,7 +66,7 @@ function BlockPopover(
 		}
 
 		const observer = new window.MutationObserver(
-			forceRecomputePopoverAnchor
+			forceRecomputePopoverDimensions
 		);
 		observer.observe( selectedElement, { attributes: true } );
 
@@ -83,12 +75,36 @@ function BlockPopover(
 		};
 	}, [ selectedElement ] );
 
+	const style = useMemo( () => {
+		if (
+			// popoverDimensionsRecomputeCounter is by definition always equal or greater
+			// than 0. This check is only there to satisfy the correctness of the
+			// exhaustive-deps rule for the `useMemo` hook.
+			popoverDimensionsRecomputeCounter < 0 ||
+			! selectedElement ||
+			lastSelectedElement !== selectedElement
+		) {
+			return {};
+		}
+
+		return {
+			position: 'absolute',
+			width: selectedElement.offsetWidth,
+			height: selectedElement.offsetHeight,
+		};
+	}, [
+		selectedElement,
+		lastSelectedElement,
+		__unstableRefreshSize,
+		popoverDimensionsRecomputeCounter,
+	] );
+
 	const popoverAnchor = useMemo( () => {
 		if (
-			// popoverAnchorRecomputeCounter is by definition always equal or greater
+			// popoverDimensionsRecomputeCounter is by definition always equal or greater
 			// than 0. This check is only there to satisfy the correctness of the
 			// exhaustive-deps rule for the `useMemo` hook.
-			popoverAnchorRecomputeCounter < 0 ||
+			popoverDimensionsRecomputeCounter < 0 ||
 			! selectedElement ||
 			( bottomClientId && ! lastSelectedElement )
 		) {
@@ -132,7 +148,7 @@ function BlockPopover(
 		bottomClientId,
 		lastSelectedElement,
 		selectedElement,
-		popoverAnchorRecomputeCounter,
+		popoverDimensionsRecomputeCounter,
 	] );
 
 	if ( ! selectedElement || ( bottomClientId && ! lastSelectedElement ) ) {
@@ -148,9 +164,10 @@ function BlockPopover(
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
+			placement="top-start"
 			resize={ false }
 			flip={ false }
-			shift
+			shift={ shift }
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',

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

@@ -21,7 +21,7 @@
 	}
 
 	// 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 +48,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

@@ -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

@@ -1,12 +1,16 @@
 /**
  * External dependencies
  */
-import { castArray, flow } from 'lodash';
+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';
@@ -18,7 +22,7 @@ import {
 } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
-import { useCopyToClipboard } from '@wordpress/compose';
+import { pipe, useCopyToClipboard } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -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 }
@@ -241,7 +255,7 @@ export function BlockSettingsDropdown( {
 								/>
 								{ canDuplicate && (
 									<MenuItem
-										onClick={ flow(
+										onClick={ pipe(
 											onClose,
 											onDuplicate,
 											updateSelectionAfterDuplicate
@@ -254,7 +268,7 @@ export function BlockSettingsDropdown( {
 								{ canInsertDefaultBlock && (
 									<>
 										<MenuItem
-											onClick={ flow(
+											onClick={ pipe(
 												onClose,
 												onInsertBefore
 											) }
@@ -263,7 +277,7 @@ export function BlockSettingsDropdown( {
 											{ __( 'Insert before' ) }
 										</MenuItem>
 										<MenuItem
-											onClick={ flow(
+											onClick={ pipe(
 												onClose,
 												onInsertAfter
 											) }
@@ -275,7 +289,7 @@ export function BlockSettingsDropdown( {
 								) }
 								{ canMove && ! onlyBlock && (
 									<MenuItem
-										onClick={ flow( onClose, onMoveTo ) }
+										onClick={ pipe( onClose, onMoveTo ) }
 									>
 										{ __( 'Move to' ) }
 									</MenuItem>
@@ -302,7 +316,7 @@ export function BlockSettingsDropdown( {
 							{ canRemove && (
 								<MenuGroup>
 									<MenuItem
-										onClick={ flow(
+										onClick={ pipe(
 											onClose,
 											onRemove,
 											updateSelectionAfterRemove

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