@wordpress/block-editor 12.20.0 → 12.21.0

package/src/components/block-list/use-block-props/index.js

@@ -19,13 +19,17 @@ import useMovingAnimation from '../../use-moving-animation';
 import { PrivateBlockContext } from '../private-block-context';
 import { useFocusFirstElement } from './use-focus-first-element';
 import { useIsHovered } from './use-is-hovered';
-import { useBlockEditContext } from '../../block-edit/context';
+import {
+	blockBindingsKey,
+	useBlockEditContext,
+} from '../../block-edit/context';
 import { useFocusHandler } from './use-focus-handler';
 import { useEventHandlers } from './use-selected-block-event-handlers';
 import { useNavModeExit } from './use-nav-mode-exit';
 import { useBlockRefProvider } from './use-block-refs';
 import { useIntersectionObserver } from './use-intersection-observer';
 import { useFlashEditableBlocks } from '../../use-flash-editable-blocks';
+import { canBindBlock } from '../../../hooks/use-bindings-attributes';
 
 /**
  * This hook is used to lightly mark an element as a block element. The element
@@ -123,6 +127,12 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	] );
 
 	const blockEditContext = useBlockEditContext();
+	const hasBlockBindings = !! blockEditContext[ blockBindingsKey ];
+	const bindingsStyle =
+		hasBlockBindings && canBindBlock( name )
+			? { '--wp-admin-theme-color': 'var(--wp-bound-block-color)' }
+			: {};
+
 	// Ensures it warns only inside the `edit` implementation for the block.
 	if ( blockApiVersion < 2 && clientId === blockEditContext.clientId ) {
 		warning(
@@ -168,7 +178,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 			wrapperProps.className,
 			defaultClassName
 		),
-		style: { ...wrapperProps.style, ...props.style },
+		style: { ...wrapperProps.style, ...props.style, ...bindingsStyle },
 	};
 }
 

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

@@ -22,7 +22,7 @@ import { store as blockEditorStore } from '../../../store';
 export function useEventHandlers( { clientId, isSelected } ) {
 	const { getBlockRootClientId, getBlockIndex } =
 		useSelect( blockEditorStore );
-	const { insertDefaultBlock, removeBlock } = useDispatch( blockEditorStore );
+	const { insertAfterBlock, removeBlock } = useDispatch( blockEditorStore );
 
 	return useRefEffect(
 		( node ) => {
@@ -57,11 +57,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 				event.preventDefault();
 
 				if ( keyCode === ENTER ) {
-					insertDefaultBlock(
-						{},
-						getBlockRootClientId( clientId ),
-						getBlockIndex( clientId ) + 1
-					);
+					insertAfterBlock( clientId );
 				} else {
 					removeBlock( clientId );
 				}
@@ -90,7 +86,7 @@ export function useEventHandlers( { clientId, isSelected } ) {
 			isSelected,
 			getBlockRootClientId,
 			getBlockIndex,
-			insertDefaultBlock,
+			insertAfterBlock,
 			removeBlock,
 		]
 	);

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

@@ -133,7 +133,7 @@ export const BlockMover = ( {
 				options={ blockPageMoverOptions }
 				onChange={ onPickerSelect }
 				title={ __( 'Change block position' ) }
-				leftAlign={ true }
+				leftAlign
 				hideCancelButton={ Platform.OS !== 'ios' }
 			/>
 		</ToolbarGroup>

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

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useState, useMemo, forwardRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import BlockPopover from '.';
+
+function BlockPopoverCover(
+	{ clientId, bottomClientId, children, shift = false, ...props },
+	ref
+) {
+	bottomClientId ??= clientId;
+
+	const selectedElement = useBlockElement( clientId );
+
+	return (
+		<BlockPopover
+			ref={ ref }
+			clientId={ clientId }
+			bottomClientId={ bottomClientId }
+			shift={ shift }
+			{ ...props }
+		>
+			{ selectedElement && clientId === bottomClientId ? (
+				<CoverContainer selectedElement={ selectedElement }>
+					{ children }
+				</CoverContainer>
+			) : (
+				children
+			) }
+		</BlockPopover>
+	);
+}
+
+function CoverContainer( { selectedElement, children } ) {
+	const [ width, setWidth ] = useState( selectedElement.offsetWidth );
+	const [ height, setHeight ] = useState( selectedElement.offsetHeight );
+
+	useEffect( () => {
+		const observer = new window.ResizeObserver( () => {
+			setWidth( selectedElement.offsetWidth );
+			setHeight( selectedElement.offsetHeight );
+		} );
+		observer.observe( selectedElement, { box: 'border-box' } );
+		return () => observer.disconnect();
+	}, [ selectedElement ] );
+
+	const style = useMemo( () => {
+		return {
+			position: 'absolute',
+			width,
+			height,
+		};
+	}, [ width, height ] );
+
+	return <div style={ style }>{ children }</div>;
+}
+
+export default forwardRef( BlockPopoverCover );

package/src/components/block-popover/drop-zone.js

@@ -9,7 +9,7 @@ import { __unstableMotion as motion } from '@wordpress/components';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import BlockPopover from './index';
+import BlockPopoverCover from './cover';
 
 const animateVariants = {
 	hide: { opacity: 0, scaleY: 0.75 },
@@ -38,9 +38,8 @@ function BlockDropZonePopover( {
 	const reducedMotion = useReducedMotion();
 
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ clientId }
-			__unstableCoverTarget
 			__unstablePopoverSlot={ __unstablePopoverSlot }
 			__unstableContentRef={ __unstableContentRef }
 			className="block-editor-block-popover__drop-zone"
@@ -56,7 +55,7 @@ function BlockDropZonePopover( {
 				}
 				className="block-editor-block-popover__drop-zone-foreground"
 			/>
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }
 

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

@@ -28,8 +28,6 @@ function BlockPopover(
 		clientId,
 		bottomClientId,
 		children,
-		__unstableRefreshSize,
-		__unstableCoverTarget = false,
 		__unstablePopoverSlot,
 		__unstableContentRef,
 		shift = true,
@@ -75,30 +73,6 @@ 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 (
 			// popoverDimensionsRecomputeCounter is by definition always equal or greater
@@ -176,8 +150,7 @@ function BlockPopover(
 			) }
 			variant="unstyled"
 		>
-			{ __unstableCoverTarget && <div style={ style }>{ children }</div> }
-			{ ! __unstableCoverTarget && children }
+			{ children }
 		</Popover>
 	);
 }

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

@@ -20,11 +20,13 @@ import EditorStyles from '../editor-styles';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
 
+const EMPTY_ADDITIONAL_STYLES = [];
+
 export function BlockPreview( {
 	blocks,
 	viewportWidth = 1200,
 	minHeight,
-	additionalStyles = [],
+	additionalStyles = EMPTY_ADDITIONAL_STYLES,
 	// Deprecated props:
 	__experimentalMinHeight,
 	__experimentalPadding,

package/src/components/block-removal-warning-modal/index.js

@@ -8,7 +8,7 @@ import {
 	Button,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import { __, _n } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -17,10 +17,9 @@ import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 export function BlockRemovalWarningModal( { rules } ) {
-	const { clientIds, selectPrevious, blockNamesForPrompt, messageType } =
-		useSelect( ( select ) =>
-			unlock( select( blockEditorStore ) ).getRemovalPromptData()
-		);
+	const { clientIds, selectPrevious, message } = useSelect( ( select ) =>
+		unlock( select( blockEditorStore ) ).getRemovalPromptData()
+	);
 
 	const {
 		clearBlockRemovalPrompt,
@@ -37,23 +36,10 @@ export function BlockRemovalWarningModal( { rules } ) {
 		};
 	}, [ rules, setBlockRemovalRules ] );
 
-	if ( ! blockNamesForPrompt ) {
+	if ( ! message ) {
 		return;
 	}
 
-	const message =
-		messageType === 'templates'
-			? _n(
-					'Deleting this block will stop your post or page content from displaying on this template. It is not recommended.',
-					'Deleting these blocks will stop your post or page content from displaying on this template. It is not recommended.',
-					blockNamesForPrompt.length
-			  )
-			: _n(
-					'Deleting this block could break patterns on your site that have content linked to it. Are you sure you want to delete it?',
-					'Deleting these blocks could break patterns on your site that have content linked to them. Are you sure you want to delete them?',
-					blockNamesForPrompt.length
-			  );
-
 	const onConfirmRemoval = () => {
 		privateRemoveBlocks( clientIds, selectPrevious, /* force */ true );
 		clearBlockRemovalPrompt();

package/src/components/block-rename/modal.js

@@ -91,7 +91,7 @@ export default function BlockRenameModal( {
 						__next40pxDefaultSize
 						value={ editedBlockName }
 						label={ __( 'Block name' ) }
-						hideLabelFromVision={ true }
+						hideLabelFromVision
 						placeholder={ originalBlockName }
 						onChange={ setEditedBlockName }
 						onFocus={ autoSelectInputText }

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

@@ -33,8 +33,12 @@ const POPOVER_PROPS = {
 	placement: 'bottom-start',
 };
 
-function CopyMenuItem( { blocks, onCopy, label } ) {
-	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
+function CopyMenuItem( { clientIds, onCopy, label } ) {
+	const { getBlocksByClientId } = useSelect( blockEditorStore );
+	const ref = useCopyToClipboard(
+		() => serialize( getBlocksByClientId( clientIds ) ),
+		onCopy
+	);
 	const copyMenuItemLabel = label ? label : __( 'Copy' );
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
@@ -198,7 +202,7 @@ export function BlockSettingsDropdown( {
 			{ ( {
 				canCopyStyles,
 				canDuplicate,
-				canInsertDefaultBlock,
+				canInsertBlock,
 				canMove,
 				canRemove,
 				onDuplicate,
@@ -208,7 +212,6 @@ export function BlockSettingsDropdown( {
 				onCopy,
 				onPasteStyles,
 				onMoveTo,
-				blocks,
 			} ) => (
 				<DropdownMenu
 					icon={ moreVertical }
@@ -245,7 +248,7 @@ export function BlockSettingsDropdown( {
 									'core/block-editor/insert-after',
 									event
 								) &&
-								canInsertDefaultBlock
+								canInsertBlock
 							) {
 								event.preventDefault();
 								setOpenedBlockSettingsMenu( undefined );
@@ -255,7 +258,7 @@ export function BlockSettingsDropdown( {
 									'core/block-editor/insert-before',
 									event
 								) &&
-								canInsertDefaultBlock
+								canInsertBlock
 							) {
 								event.preventDefault();
 								setOpenedBlockSettingsMenu( undefined );
@@ -286,7 +289,7 @@ export function BlockSettingsDropdown( {
 									/>
 								) }
 								<CopyMenuItem
-									blocks={ blocks }
+									clientIds={ clientIds }
 									onCopy={ onCopy }
 								/>
 								{ canDuplicate && (
@@ -301,7 +304,7 @@ export function BlockSettingsDropdown( {
 										{ __( 'Duplicate' ) }
 									</MenuItem>
 								) }
-								{ canInsertDefaultBlock && (
+								{ canInsertBlock && (
 									<>
 										<MenuItem
 											onClick={ pipe(
@@ -327,7 +330,7 @@ export function BlockSettingsDropdown( {
 							{ canCopyStyles && (
 								<MenuGroup>
 									<CopyMenuItem
-										blocks={ blocks }
+										clientIds={ clientIds }
 										onCopy={ onCopy }
 										label={ __( 'Copy styles' ) }
 									/>

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

@@ -80,7 +80,7 @@ const BlockTransformationsMenu = ( {
 			options={ pickerOptions() }
 			onChange={ onPickerSelect }
 			hideCancelButton={ Platform.OS !== 'ios' }
-			leftAlign={ true }
+			leftAlign
 			getAnchor={ getAnchor }
 			// translators: %s: block title e.g: "Paragraph".
 			title={ sprintf( __( 'Transform %s to' ), blockTitle ) }

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

@@ -256,7 +256,7 @@ const BlockActionsMenu = ( {
 				<ToolbarButton
 					title={ __( 'Open Block Actions Menu' ) }
 					icon={ moreHorizontalMobile }
-					disabled={ true }
+					disabled
 				/>
 			</ToolbarGroup>
 		);
@@ -311,7 +311,7 @@ const BlockActionsMenu = ( {
 				destructiveButtonIndex={ options.length }
 				disabledButtonIndices={ disabledButtonIndices }
 				hideCancelButton={ Platform.OS !== 'ios' }
-				leftAlign={ true }
+				leftAlign
 				getAnchor={ getAnchor }
 				// translators: %s: block title e.g: "Paragraph".
 				title={ sprintf( __( '%s block options' ), blockTitle ) }

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

@@ -34,8 +34,10 @@ import { useShowHoveredOrFocusedGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 import __unstableBlockNameContext from './block-name-context';
 import NavigableToolbar from '../navigable-toolbar';
-import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
-
+import Shuffle from './shuffle';
+import BlockBindingsIndicator from '../block-bindings-toolbar-indicator';
+import { useHasBlockToolbar } from './use-has-block-toolbar';
+import { canBindBlock } from '../../hooks/use-bindings-attributes';
 /**
  * Renders the block toolbar.
  *
@@ -60,8 +62,10 @@ export function PrivateBlockToolbar( {
 		blockClientIds,
 		isDefaultEditingMode,
 		blockType,
+		blockName,
 		shouldShowVisualToolbar,
 		showParentSelector,
+		isUsingBindings,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -71,6 +75,7 @@ export function PrivateBlockToolbar( {
 			isBlockValid,
 			getBlockRootClientId,
 			getBlockEditingMode,
+			getBlockAttributes,
 		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -81,20 +86,21 @@ export function PrivateBlockToolbar( {
 		const parentBlockType = getBlockType( parentBlockName );
 		const _isDefaultEditingMode =
 			getBlockEditingMode( selectedBlockClientId ) === 'default';
+		const _blockName = getBlockName( selectedBlockClientId );
 		const isValid = selectedBlockClientIds.every( ( id ) =>
 			isBlockValid( id )
 		);
 		const isVisual = selectedBlockClientIds.every(
 			( id ) => getBlockMode( id ) === 'visual'
 		);
+		const _isUsingBindings = !! getBlockAttributes( selectedBlockClientId )
+			?.metadata?.bindings;
 		return {
 			blockClientId: selectedBlockClientId,
 			blockClientIds: selectedBlockClientIds,
 			isDefaultEditingMode: _isDefaultEditingMode,
-			blockType:
-				selectedBlockClientId &&
-				getBlockType( getBlockName( selectedBlockClientId ) ),
-
+			blockName: _blockName,
+			blockType: selectedBlockClientId && getBlockType( _blockName ),
 			shouldShowVisualToolbar: isValid && isVisual,
 			rootClientId: blockRootClientId,
 			showParentSelector:
@@ -107,6 +113,7 @@ export function PrivateBlockToolbar( {
 				) &&
 				selectedBlockClientIds.length === 1 &&
 				_isDefaultEditingMode,
+			isUsingBindings: _isUsingBindings,
 		};
 	}, [] );
 
@@ -121,15 +128,8 @@ export function PrivateBlockToolbar( {
 
 	const isLargeViewport = ! useViewportMatch( 'medium', '<' );
 
-	const isToolbarEnabled =
-		blockType &&
-		hasBlockSupport( blockType, '__experimentalToolbar', true );
-	const hasAnyBlockControls = useHasAnyBlockControls();
-
-	if (
-		! isToolbarEnabled ||
-		( ! isDefaultEditingMode && ! hasAnyBlockControls )
-	) {
+	const hasBlockToolbar = useHasBlockToolbar();
+	if ( ! hasBlockToolbar ) {
 		return null;
 	}
 
@@ -165,6 +165,9 @@ export function PrivateBlockToolbar( {
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
+				{ isUsingBindings && canBindBlock( blockName ) && (
+					<BlockBindingsIndicator />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					isDefaultEditingMode && (
 						<div
@@ -185,6 +188,7 @@ export function PrivateBlockToolbar( {
 							</ToolbarGroup>
 						</div>
 					) }
+				<Shuffle clientId={ blockClientId } />
 				{ shouldShowVisualToolbar && isMultiToolbar && (
 					<BlockGroupToolbar />
 				) }

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

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { shuffle } from '@wordpress/icons';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+const EMPTY_ARRAY = [];
+
+function Container( props ) {
+	return (
+		<ToolbarGroup>
+			<ToolbarButton { ...props } />
+		</ToolbarGroup>
+	);
+}
+
+export default function Shuffle( { clientId, as = Container } ) {
+	const { categories, patterns } = useSelect(
+		( select ) => {
+			const {
+				getBlockAttributes,
+				getBlockRootClientId,
+				__experimentalGetAllowedPatterns,
+			} = select( blockEditorStore );
+			const attributes = getBlockAttributes( clientId );
+			const _categories = attributes?.metadata?.categories || EMPTY_ARRAY;
+			const rootBlock = getBlockRootClientId( clientId );
+			const _patterns = __experimentalGetAllowedPatterns( rootBlock );
+			return {
+				categories: _categories,
+				patterns: _patterns,
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const sameCategoryPatternsWithSingleWrapper = useMemo( () => {
+		if (
+			! categories ||
+			categories.length === 0 ||
+			! patterns ||
+			patterns.length === 0
+		) {
+			return EMPTY_ARRAY;
+		}
+		return patterns.filter( ( pattern ) => {
+			return (
+				// Check if the pattern has only one top level block,
+				// otherwise we may shuffle to pattern that will not allow to continue shuffling.
+				pattern.blocks.length === 1 &&
+				pattern.categories.some( ( category ) => {
+					return categories.includes( category );
+				} )
+			);
+		} );
+	}, [ categories, patterns ] );
+	if ( sameCategoryPatternsWithSingleWrapper.length === 0 ) {
+		return null;
+	}
+	const ComponentToUse = as;
+	return (
+		<ComponentToUse
+			label={ __( 'Shuffle' ) }
+			icon={ shuffle }
+			onClick={ () => {
+				const randomPattern =
+					sameCategoryPatternsWithSingleWrapper[
+						Math.floor(
+							// eslint-disable-next-line no-restricted-syntax
+							Math.random() *
+								sameCategoryPatternsWithSingleWrapper.length
+						)
+					];
+				randomPattern.blocks[ 0 ].attributes = {
+					...randomPattern.blocks[ 0 ].attributes,
+					metadata: {
+						...randomPattern.blocks[ 0 ].attributes.metadata,
+						categories,
+					},
+				};
+				replaceBlocks( clientId, randomPattern.blocks );
+			} }
+		/>
+	);
+}

package/src/components/block-toolbar/use-has-block-toolbar.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls';
+
+/**
+ * Returns true if the block toolbar should be shown.
+ *
+ * @return {boolean} Whether the block toolbar component will be rendered.
+ */
+export function useHasBlockToolbar() {
+	const hasAnyBlockControls = useHasAnyBlockControls();
+	return useSelect(
+		( select ) => {
+			const {
+				getBlockEditingMode,
+				getBlockName,
+				getSelectedBlockClientIds,
+			} = select( blockEditorStore );
+
+			const selectedBlockClientIds = getSelectedBlockClientIds();
+			const selectedBlockClientId = selectedBlockClientIds[ 0 ];
+			const isDefaultEditingMode =
+				getBlockEditingMode( selectedBlockClientId ) === 'default';
+			const blockType =
+				selectedBlockClientId &&
+				getBlockType( getBlockName( selectedBlockClientId ) );
+			const isToolbarEnabled =
+				blockType &&
+				hasBlockSupport( blockType, '__experimentalToolbar', true );
+
+			if (
+				! isToolbarEnabled ||
+				( ! isDefaultEditingMode && ! hasAnyBlockControls )
+			) {
+				return false;
+			}
+
+			return true;
+		},
+		[ hasAnyBlockControls ]
+	);
+}

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 { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockMover from '../block-mover';
+import Shuffle from '../block-toolbar/shuffle';
 
 /**
  * Block selection button component, displaying the label of the block. If the block
@@ -271,6 +272,9 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 						</BlockDraggable>
 					) }
 				</FlexItem>
+				{ editorMode === 'zoom-out' && (
+					<Shuffle clientId={ clientId } as={ Button } />
+				) }
 				<FlexItem>
 					<Button
 						ref={ ref }