@wordpress/block-editor 9.0.0 → 9.3.0

package/src/components/block-list/use-block-props/use-block-custom-class-name.js

@@ -22,9 +22,8 @@ export function useBlockCustomClassName( clientId ) {
 	// as much.
 	return useSelect(
 		( select ) => {
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 			const attributes = getBlockAttributes( clientId );
 
 			if ( ! attributes?.className ) {

package/src/components/block-list/use-block-props/use-selected-block-event-handlers.js

@@ -24,9 +24,8 @@ export function useEventHandlers( clientId ) {
 		( select ) => select( blockEditorStore ).isBlockSelected( clientId ),
 		[ clientId ]
 	);
-	const { getBlockRootClientId, getBlockIndex } = useSelect(
-		blockEditorStore
-	);
+	const { getBlockRootClientId, getBlockIndex } =
+		useSelect( blockEditorStore );
 	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );
 
 	return useRefEffect(

package/src/components/block-list/use-in-between-inserter.js

@@ -27,9 +27,8 @@ export function useInBetweenInserter() {
 		getSelectedBlockClientIds,
 		getTemplateLock,
 	} = useSelect( blockEditorStore );
-	const { showInsertionPoint, hideInsertionPoint } = useDispatch(
-		blockEditorStore
-	);
+	const { showInsertionPoint, hideInsertionPoint } =
+		useDispatch( blockEditorStore );
 
 	return useRefEffect(
 		( node ) => {
@@ -110,7 +109,7 @@ export function useInBetweenInserter() {
 				// Don't show the insertion point if a parent block has an "overlay"
 				// See https://github.com/WordPress/gutenberg/pull/34012#pullrequestreview-727762337
 				const parentOverlay = element.parentElement?.closest(
-					'.block-editor-block-content-overlay.overlay-active'
+					'.block-editor-block-content-overlay'
 				);
 				if ( parentOverlay ) {
 					return;

package/src/components/block-list-appender/index.js

@@ -93,11 +93,8 @@ function BlockListAppender( {
 }
 
 export default withSelect( ( select, { rootClientId } ) => {
-	const {
-		canInsertBlockType,
-		getTemplateLock,
-		getSelectedBlockClientId,
-	} = select( blockEditorStore );
+	const { canInsertBlockType, getTemplateLock, getSelectedBlockClientId } =
+		select( blockEditorStore );
 
 	return {
 		isLocked: !! getTemplateLock( rootClientId ),

package/src/components/block-list-appender/index.native.js

@@ -48,9 +48,8 @@ function BlockListAppender( {
 }
 
 export default withSelect( ( select, { rootClientId } ) => {
-	const { getBlockOrder, canInsertBlockType, getTemplateLock } = select(
-		blockEditorStore
-	);
+	const { getBlockOrder, canInsertBlockType, getTemplateLock } =
+		select( blockEditorStore );
 
 	return {
 		isLocked: !! getTemplateLock( rootClientId ),

package/src/components/block-mobile-toolbar/block-actions-menu.native.js

@@ -386,14 +386,12 @@ export default compose(
 				clearSelectedBlock,
 			} = dispatch( blockEditorStore );
 			const { openGeneralSidebar } = dispatch( 'core/edit-post' );
-			const { getBlockSelectionEnd, getBlock } = select(
-				blockEditorStore
-			);
+			const { getBlockSelectionEnd, getBlock } =
+				select( blockEditorStore );
 			const { createSuccessNotice } = dispatch( noticesStore );
 
-			const {
-				__experimentalConvertBlockToStatic: convertBlockToStatic,
-			} = dispatch( reusableBlocksStore );
+			const { __experimentalConvertBlockToStatic: convertBlockToStatic } =
+				dispatch( reusableBlocksStore );
 
 			return {
 				createSuccessNotice,

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

@@ -15,6 +15,7 @@ import { useState, useEffect } from '@wordpress/element';
  */
 import styles from './style.scss';
 import BlockMover from '../block-mover';
+import BlockDraggable from '../block-draggable';
 import BlockActionsMenu from './block-actions-menu';
 import { BlockSettingsButton } from '../block-settings';
 import { store as blockEditorStore } from '../../store';
@@ -33,6 +34,7 @@ const BlockMobileToolbar = ( {
 	blockWidth,
 	anchorNodeRef,
 	isFullWidth,
+	draggingClientId,
 } ) => {
 	const [ fillsLength, setFillsLength ] = useState( null );
 	const [ appenderWidth, setAppenderWidth ] = useState( 0 );
@@ -73,7 +75,13 @@ const BlockMobileToolbar = ( {
 				/>
 			) }
 
-			<View style={ styles.spacer } />
+			<BlockDraggable
+				clientId={ clientId }
+				draggingClientId={ draggingClientId }
+				testID="draggable-trigger-mobile-toolbar"
+			>
+				{ () => <View style={ styles.spacer } /> }
+			</BlockDraggable>
 
 			<BlockSettingsButton.Slot>
 				{ /* Render only one settings icon even if we have more than one fill - need for hooks with controls. */ }

package/src/components/block-mover/button.js

@@ -108,9 +108,8 @@ const BlockMoverButton = forwardRef(
 			[ clientIds, direction ]
 		);
 
-		const { moveBlocksDown, moveBlocksUp } = useDispatch(
-			blockEditorStore
-		);
+		const { moveBlocksDown, moveBlocksUp } =
+			useDispatch( blockEditorStore );
 		const moverFunction =
 			direction === 'up' ? moveBlocksUp : moveBlocksDown;
 

package/src/components/block-mover/index.native.js

@@ -11,7 +11,7 @@ import { __ } from '@wordpress/i18n';
 import { Picker, ToolbarButton } from '@wordpress/components';
 import { withInstanceId, compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { useRef, useState } from '@wordpress/element';
+import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -36,9 +36,9 @@ export const BlockMover = ( {
 	isStackedHorizontally,
 } ) => {
 	const pickerRef = useRef();
-	const [ blockPageMoverState, setBlockPageMoverState ] = useState(
-		undefined
-	);
+	const [ shouldPresentPicker, setShouldPresentPicker ] = useState( false );
+	const [ blockPageMoverState, setBlockPageMoverState ] =
+		useState( undefined );
 	const showBlockPageMover = ( direction ) => () => {
 		if ( ! pickerRef.current ) {
 			setBlockPageMoverState( undefined );
@@ -46,9 +46,17 @@ export const BlockMover = ( {
 		}
 
 		setBlockPageMoverState( direction );
-		pickerRef.current.presentPicker();
+		setShouldPresentPicker( true );
 	};
 
+	// Ensure that the picker is only presented after state updates.
+	useEffect( () => {
+		if ( shouldPresentPicker ) {
+			pickerRef.current?.presentPicker();
+			setShouldPresentPicker( false );
+		}
+	}, [ shouldPresentPicker ] );
+
 	const {
 		description: {
 			backwardButtonHint,
@@ -86,6 +94,15 @@ export const BlockMover = ( {
 		if ( option && option.onSelect ) option.onSelect();
 	};
 
+	const onLongPressMoveUp = useCallback(
+		showBlockPageMover( BLOCK_MOVER_DIRECTION_TOP ),
+		[]
+	);
+	const onLongPressMoveDown = useCallback(
+		showBlockPageMover( BLOCK_MOVER_DIRECTION_BOTTOM ),
+		[]
+	);
+
 	if ( ! canMove || ( isFirst && isLast && ! rootClientId ) ) {
 		return null;
 	}
@@ -96,7 +113,7 @@ export const BlockMover = ( {
 				title={ ! isFirst ? backwardButtonTitle : firstBlockTitle }
 				isDisabled={ isFirst }
 				onClick={ onMoveUp }
-				onLongPress={ showBlockPageMover( BLOCK_MOVER_DIRECTION_TOP ) }
+				onLongPress={ onLongPressMoveUp }
 				icon={ backwardButtonIcon }
 				extraProps={ { hint: backwardButtonHint } }
 			/>
@@ -105,9 +122,7 @@ export const BlockMover = ( {
 				title={ ! isLast ? forwardButtonTitle : lastBlockTitle }
 				isDisabled={ isLast }
 				onClick={ onMoveDown }
-				onLongPress={ showBlockPageMover(
-					BLOCK_MOVER_DIRECTION_BOTTOM
-				) }
+				onLongPress={ onLongPressMoveDown }
 				icon={ forwardButtonIcon }
 				extraProps={ {
 					hint: forwardButtonHint,
@@ -151,9 +166,8 @@ export default compose(
 		};
 	} ),
 	withDispatch( ( dispatch, { clientIds, rootClientId } ) => {
-		const { moveBlocksDown, moveBlocksUp, moveBlocksToPosition } = dispatch(
-			blockEditorStore
-		);
+		const { moveBlocksDown, moveBlocksUp, moveBlocksToPosition } =
+			dispatch( blockEditorStore );
 		return {
 			onMoveDown: partial( moveBlocksDown, clientIds, rootClientId ),
 			onMoveUp: partial( moveBlocksUp, clientIds, rootClientId ),

package/src/components/block-mover/test/__snapshots__/index.native.js.snap

@@ -34,6 +34,11 @@ Array [
       }
     >
       <View
+        collapsable={false}
+        handlerTag={3}
+        handlerType="LongPressGestureHandler"
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
         style={
           Object {
             "alignItems": "center",
@@ -89,6 +94,11 @@ Array [
       }
     >
       <View
+        collapsable={false}
+        handlerTag={4}
+        handlerType="LongPressGestureHandler"
+        onGestureHandlerEvent={[Function]}
+        onGestureHandlerStateChange={[Function]}
         style={
           Object {
             "alignItems": "center",

package/src/components/block-parent-selector/index.js

@@ -22,9 +22,8 @@ import { store as blockEditorStore } from '../../store';
  * @return {WPComponent} Parent block selector.
  */
 export default function BlockParentSelector() {
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 	const { firstParentClientId, shouldHide, hasReducedUI } = useSelect(
 		( select ) => {
 			const {

package/src/components/block-pattern-setup/index.js

@@ -145,7 +145,7 @@ const BlockPatternSetup = ( {
 	clientId,
 	blockName,
 	filterPatternsFn,
-	startBlankComponent,
+	startBlankComponent = null,
 	onBlockPatternSelect,
 } ) => {
 	const [ viewMode, setViewMode ] = useState( VIEWMODES.carousel );
@@ -153,10 +153,8 @@ const BlockPatternSetup = ( {
 	const [ showBlank, setShowBlank ] = useState( false );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const patterns = usePatternsSetup( clientId, blockName, filterPatternsFn );
-	const [
-		contentResizeListener,
-		{ height: contentHeight },
-	] = useResizeObserver();
+	const [ contentResizeListener, { height: contentHeight } ] =
+		useResizeObserver();
 
 	if ( ! patterns?.length || showBlank ) {
 		return startBlankComponent;

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

@@ -28,11 +28,13 @@ function BlockPopoverInbetween( {
 	__unstableContentRef,
 	...props
 } ) {
-	const { orientation, rootClientId } = useSelect(
+	const { orientation, rootClientId, isVisible } = useSelect(
 		( select ) => {
-			const { getBlockListSettings, getBlockRootClientId } = select(
-				blockEditorStore
-			);
+			const {
+				getBlockListSettings,
+				getBlockRootClientId,
+				isBlockVisible,
+			} = select( blockEditorStore );
 
 			const _rootClientId = getBlockRootClientId( previousClientId );
 			return {
@@ -40,6 +42,9 @@ function BlockPopoverInbetween( {
 					getBlockListSettings( _rootClientId )?.orientation ||
 					'vertical',
 				rootClientId: _rootClientId,
+				isVisible:
+					isBlockVisible( previousClientId ) &&
+					isBlockVisible( nextClientId ),
 			};
 		},
 		[ previousClientId ]
@@ -48,7 +53,7 @@ function BlockPopoverInbetween( {
 	const nextElement = useBlockElement( nextClientId );
 	const isVertical = orientation === 'vertical';
 	const style = useMemo( () => {
-		if ( ! previousElement && ! nextElement ) {
+		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 			return {};
 		}
 
@@ -87,7 +92,7 @@ function BlockPopoverInbetween( {
 	}, [ previousElement, nextElement, isVertical ] );
 
 	const getAnchorRect = useCallback( () => {
-		if ( ! previousElement && ! nextElement ) {
+		if ( ( ! previousElement && ! nextElement ) || ! isVisible ) {
 			return {};
 		}
 
@@ -107,6 +112,8 @@ function BlockPopoverInbetween( {
 					left: previousRect ? previousRect.right : nextRect.right,
 					right: previousRect ? previousRect.left : nextRect.left,
 					bottom: nextRect ? nextRect.top : previousRect.bottom,
+					height: 0,
+					width: 0,
 					ownerDocument,
 				};
 			}
@@ -116,6 +123,8 @@ function BlockPopoverInbetween( {
 				left: previousRect ? previousRect.left : nextRect.left,
 				right: previousRect ? previousRect.right : nextRect.right,
 				bottom: nextRect ? nextRect.top : previousRect.bottom,
+				height: 0,
+				width: 0,
 				ownerDocument,
 			};
 		}
@@ -126,6 +135,8 @@ function BlockPopoverInbetween( {
 				left: previousRect ? previousRect.left : nextRect.right,
 				right: nextRect ? nextRect.right : previousRect.left,
 				bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+				height: 0,
+				width: 0,
 				ownerDocument,
 			};
 		}
@@ -135,13 +146,15 @@ function BlockPopoverInbetween( {
 			left: previousRect ? previousRect.right : nextRect.left,
 			right: nextRect ? nextRect.left : previousRect.right,
 			bottom: previousRect ? previousRect.bottom : nextRect.bottom,
+			height: 0,
+			width: 0,
 			ownerDocument,
 		};
 	}, [ previousElement, nextElement ] );
 
 	const popoverScrollRef = usePopoverScroll( __unstableContentRef );
 
-	if ( ! previousElement || ! nextElement ) {
+	if ( ! previousElement || ! nextElement || ! isVisible ) {
 		return null;
 	}
 
@@ -155,7 +168,6 @@ function BlockPopoverInbetween( {
 	return (
 		<Popover
 			ref={ popoverScrollRef }
-			noArrow
 			animate={ false }
 			getAnchorRect={ getAnchorRect }
 			focusOnMount={ false }
@@ -170,6 +182,7 @@ function BlockPopoverInbetween( {
 				'block-editor-block-popover',
 				props.className
 			) }
+			__unstableForcePosition
 		>
 			<div style={ style }>{ children }</div>
 		</Popover>

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

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { Popover } from '@wordpress/components';
-import { getScrollContainer } from '@wordpress/dom';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -50,33 +49,20 @@ export default function BlockPopover( {
 		bottom: lastSelectedElement,
 	};
 
-	const { ownerDocument } = selectedElement;
-	const stickyBoundaryElement =
-		ownerDocument.defaultView.frameElement ||
-		getScrollContainer( selectedElement ) ||
-		ownerDocument.body;
-
 	return (
 		<Popover
 			ref={ popoverScrollRef }
-			noArrow
 			animate={ false }
 			position="top right left"
 			focusOnMount={ false }
 			anchorRef={ anchorRef }
-			__unstableStickyBoundaryElement={
-				__unstableCoverTarget ? undefined : stickyBoundaryElement
-			}
 			// Render in the old slot if needed for backward compatibility,
 			// otherwise render in place (not in the the default popover slot).
 			__unstableSlotName={ __unstablePopoverSlot || null }
-			__unstableBoundaryParent
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }
-			// Used to safeguard sticky position behavior against cases where it would permanently
-			// obscure specific sections of a block.
-			__unstableEditorCanvasWrapper={ __unstableContentRef?.current }
-			__unstableForcePosition={ __unstableCoverTarget }
+			__unstableForcePosition
+			__unstableShift
 			{ ...props }
 			className={ classnames(
 				'block-editor-block-popover',

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

@@ -12,6 +12,7 @@
 		width: max-content;
 		background: none;
 		border: none;
+		outline: none;
 		box-shadow: none;
 		overflow-y: visible;
 

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

@@ -24,14 +24,10 @@ function AutoBlockPreview( {
 	__experimentalPadding,
 	__experimentalMinHeight,
 } ) {
-	const [
-		containerResizeListener,
-		{ width: containerWidth },
-	] = useResizeObserver();
-	const [
-		contentResizeListener,
-		{ height: contentHeight },
-	] = useResizeObserver();
+	const [ containerResizeListener, { width: containerWidth } ] =
+		useResizeObserver();
+	const [ contentResizeListener, { height: contentHeight } ] =
+		useResizeObserver();
 	const { styles, assets } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {

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

@@ -7,10 +7,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalUseDisabled as useDisabled,
-	useMergeRefs,
-} from '@wordpress/compose';
+import { useDisabled, useMergeRefs } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { memo, useMemo } from '@wordpress/element';
 

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

@@ -17,9 +17,8 @@ import { store as blockEditorStore } from '../../store';
  * @return {import('react').RefCallback} Ref callback.
  */
 export function useBlockSelectionClearer() {
-	const { hasSelectedBlock, hasMultiSelection } = useSelect(
-		blockEditorStore
-	);
+	const { hasSelectedBlock, hasMultiSelection } =
+		useSelect( blockEditorStore );
 	const { clearSelectedBlock } = useDispatch( blockEditorStore );
 
 	return useRefEffect(

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,6 +12,8 @@ import { compose } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 export function BlockModeToggle( {
 	blockType,
 	mode,
@@ -39,9 +36,8 @@ export function BlockModeToggle( {
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
-		const { getBlock, getBlockMode, getSettings } = select(
-			blockEditorStore
-		);
+		const { getBlock, getBlockMode, getSettings } =
+			select( blockEditorStore );
 		const block = getBlock( clientId );
 		const isCodeEditingEnabled = getSettings().codeEditingEnabled;
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, flow, noop } from 'lodash';
+import { castArray, flow } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +16,7 @@ import {
 	useCallback,
 	useRef,
 } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _n, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
@@ -33,6 +33,7 @@ import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 
+const noop = () => {};
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
@@ -41,7 +42,8 @@ const POPOVER_PROPS = {
 
 function CopyMenuItem( { blocks, onCopy } ) {
 	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
-	return <MenuItem ref={ ref }>{ __( 'Copy' ) }</MenuItem>;
+	const copyMenuItemLabel = _n( 'Copy block', 'Copy blocks', blocks.length );
+	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
 export function BlockSettingsDropdown( {
@@ -82,9 +84,8 @@ export function BlockSettingsDropdown( {
 				hasReducedUI: getSettings().hasReducedUI,
 				onlyBlock: 1 === getBlockCount(),
 				parentBlockType: getBlockType( parentBlockName ),
-				previousBlockClientId: getPreviousBlockClientId(
-					firstBlockClientId
-				),
+				previousBlockClientId:
+					getPreviousBlockClientId( firstBlockClientId ),
 				nextBlockClientId: getNextBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
 			};
@@ -108,9 +109,8 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 
 	const updateSelectionAfterDuplicate = useCallback(
 		__experimentalSelectBlock

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { noop, debounce } from 'lodash';
+import { debounce } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -39,6 +39,8 @@ function BlockStylesPreviewPanelFill( { children, scope, ...props } ) {
 // 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,

package/src/components/block-styles/menu-items.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,6 +9,8 @@ import { check } from '@wordpress/icons';
  */
 import useStylesForBlocks from './use-styles-for-block';
 
+const noop = () => {};
+
 export default function BlockStylesMenuItems( { clientId, onSwitch = noop } ) {
 	const { onSelect, stylesToRender, activeStyle } = useStylesForBlocks( {
 		clientId,

package/src/components/block-switcher/block-transformations-menu.js

@@ -21,10 +21,8 @@ const BlockTransformationsMenu = ( {
 	onSelect,
 	blocks,
 } ) => {
-	const [
-		hoveredTransformItemName,
-		setHoveredTransformItemName,
-	] = useState();
+	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
+		useState();
 	return (
 		<MenuGroup label={ __( 'Transform to' ) } className={ className }>
 			{ hoveredTransformItemName && (