@wordpress/block-editor 12.20.0 → 12.22.0

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

@@ -9,7 +9,7 @@ import {
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-import { Children, cloneElement, useCallback } from '@wordpress/element';
+import { Children, cloneElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
 	store as keyboardShortcutsStore,
@@ -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>;
 }
@@ -42,18 +46,14 @@ function CopyMenuItem( { blocks, onCopy, label } ) {
 export function BlockSettingsDropdown( {
 	block,
 	clientIds,
-	__experimentalSelectBlock,
 	children,
-	__unstableDisplayLocation,
+	__experimentalSelectBlock,
 	...props
 } ) {
 	// Get the client id of the current block for this menu, if one is set.
 	const currentClientId = block?.clientId;
-	const blockClientIds = Array.isArray( clientIds )
-		? clientIds
-		: [ clientIds ];
-	const count = blockClientIds.length;
-	const firstBlockClientId = blockClientIds[ 0 ];
+	const count = clientIds.length;
+	const firstBlockClientId = clientIds[ 0 ];
 	const {
 		firstParentClientId,
 		onlyBlock,
@@ -123,41 +123,35 @@ export function BlockSettingsDropdown( {
 	const isMatch = __unstableUseShortcutEventMatch();
 	const hasSelectedBlocks = selectedBlockClientIds.length > 0;
 
-	const updateSelectionAfterDuplicate = useCallback(
-		async ( clientIdsPromise ) => {
-			if ( __experimentalSelectBlock ) {
-				const ids = await clientIdsPromise;
-				if ( ids && ids[ 0 ] ) {
-					__experimentalSelectBlock( ids[ 0 ], false );
-				}
-			}
-		},
-		[ __experimentalSelectBlock ]
-	);
+	async function updateSelectionAfterDuplicate( clientIdsPromise ) {
+		if ( ! __experimentalSelectBlock ) {
+			return;
+		}
 
-	const updateSelectionAfterRemove = useCallback( () => {
-		if ( __experimentalSelectBlock ) {
-			let blockToFocus = previousBlockClientId || firstParentClientId;
+		const ids = await clientIdsPromise;
+		if ( ids && ids[ 0 ] ) {
+			__experimentalSelectBlock( ids[ 0 ], false );
+		}
+	}
 
-			// Focus the first block if there's no previous block nor parent block.
-			if ( ! blockToFocus ) {
-				blockToFocus = getBlockOrder()[ 0 ];
-			}
+	function updateSelectionAfterRemove() {
+		if ( ! __experimentalSelectBlock ) {
+			return;
+		}
 
-			// Only update the selection if the original selection is removed.
-			const shouldUpdateSelection =
-				hasSelectedBlocks && getSelectedBlockClientIds().length === 0;
+		let blockToFocus = previousBlockClientId || firstParentClientId;
 
-			__experimentalSelectBlock( blockToFocus, shouldUpdateSelection );
+		// Focus the first block if there's no previous block nor parent block.
+		if ( ! blockToFocus ) {
+			blockToFocus = getBlockOrder()[ 0 ];
 		}
-	}, [
-		__experimentalSelectBlock,
-		previousBlockClientId,
-		firstParentClientId,
-		getBlockOrder,
-		hasSelectedBlocks,
-		getSelectedBlockClientIds,
-	] );
+
+		// Only update the selection if the original selection is removed.
+		const shouldUpdateSelection =
+			hasSelectedBlocks && getSelectedBlockClientIds().length === 0;
+
+		__experimentalSelectBlock( blockToFocus, shouldUpdateSelection );
+	}
 
 	// This can occur when the selected block (the parent)
 	// displays child blocks within a List View.
@@ -175,20 +169,17 @@ export function BlockSettingsDropdown( {
 		? undefined
 		: openedBlockSettingsMenu === currentClientId || false;
 
-	const onToggle = useCallback(
-		( localOpen ) => {
-			if ( localOpen && openedBlockSettingsMenu !== currentClientId ) {
-				setOpenedBlockSettingsMenu( currentClientId );
-			} else if (
-				! localOpen &&
-				openedBlockSettingsMenu &&
-				openedBlockSettingsMenu === currentClientId
-			) {
-				setOpenedBlockSettingsMenu( undefined );
-			}
-		},
-		[ currentClientId, openedBlockSettingsMenu, setOpenedBlockSettingsMenu ]
-	);
+	function onToggle( localOpen ) {
+		if ( localOpen && openedBlockSettingsMenu !== currentClientId ) {
+			setOpenedBlockSettingsMenu( currentClientId );
+		} else if (
+			! localOpen &&
+			openedBlockSettingsMenu &&
+			openedBlockSettingsMenu === currentClientId
+		) {
+			setOpenedBlockSettingsMenu( undefined );
+		}
+	}
 
 	return (
 		<BlockActions
@@ -198,7 +189,7 @@ export function BlockSettingsDropdown( {
 			{ ( {
 				canCopyStyles,
 				canDuplicate,
-				canInsertDefaultBlock,
+				canInsertBlock,
 				canMove,
 				canRemove,
 				onDuplicate,
@@ -208,7 +199,6 @@ export function BlockSettingsDropdown( {
 				onCopy,
 				onPasteStyles,
 				onMoveTo,
-				blocks,
 			} ) => (
 				<DropdownMenu
 					icon={ moreVertical }
@@ -230,7 +220,8 @@ export function BlockSettingsDropdown( {
 								canRemove
 							) {
 								event.preventDefault();
-								updateSelectionAfterRemove( onRemove() );
+								onRemove();
+								updateSelectionAfterRemove();
 							} else if (
 								isMatch(
 									'core/block-editor/duplicate',
@@ -245,7 +236,7 @@ export function BlockSettingsDropdown( {
 									'core/block-editor/insert-after',
 									event
 								) &&
-								canInsertDefaultBlock
+								canInsertBlock
 							) {
 								event.preventDefault();
 								setOpenedBlockSettingsMenu( undefined );
@@ -255,7 +246,7 @@ export function BlockSettingsDropdown( {
 									'core/block-editor/insert-before',
 									event
 								) &&
-								canInsertDefaultBlock
+								canInsertBlock
 							) {
 								event.preventDefault();
 								setOpenedBlockSettingsMenu( undefined );
@@ -286,7 +277,7 @@ export function BlockSettingsDropdown( {
 									/>
 								) }
 								<CopyMenuItem
-									blocks={ blocks }
+									clientIds={ clientIds }
 									onCopy={ onCopy }
 								/>
 								{ canDuplicate && (
@@ -301,7 +292,7 @@ export function BlockSettingsDropdown( {
 										{ __( 'Duplicate' ) }
 									</MenuItem>
 								) }
-								{ canInsertDefaultBlock && (
+								{ canInsertBlock && (
 									<>
 										<MenuItem
 											onClick={ pipe(
@@ -327,7 +318,7 @@ export function BlockSettingsDropdown( {
 							{ canCopyStyles && (
 								<MenuGroup>
 									<CopyMenuItem
-										blocks={ blocks }
+										clientIds={ clientIds }
 										onCopy={ onCopy }
 										label={ __( 'Copy styles' ) }
 									/>
@@ -346,9 +337,6 @@ export function BlockSettingsDropdown( {
 									firstBlockClientId,
 								} }
 								clientIds={ clientIds }
-								__unstableDisplayLocation={
-									__unstableDisplayLocation
-								}
 							/>
 							{ typeof children === 'function'
 								? children( { onClose } )

package/src/components/block-settings-menu-controls/README.md

@@ -16,12 +16,3 @@ function ReusableBlocksMenuItems() {
 	);
 }
 ```
-
-## Props
-
-### `__unstableDisplayLocation`
-
--   **Type:** `String`
--   **Default:** `undefined`
-
-A string representing the location where the component is being displayed within the UI. This can be used to conditionalize certain behaviors including the display of associated components. This behaviour will likely be refactored to a React.Context implementation.

package/src/components/block-settings-menu-controls/index.js

@@ -26,11 +26,7 @@ import { BlockRenameControl, useBlockRename } from '../block-rename';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
-const BlockSettingsMenuControlsSlot = ( {
-	fillProps,
-	clientIds = null,
-	__unstableDisplayLocation,
-} ) => {
+const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 	const { selectedBlocks, selectedClientIds } = useSelect(
 		( select ) => {
 			const { getBlockNamesByClientId, getSelectedBlockClientIds } =
@@ -61,7 +57,6 @@ const BlockSettingsMenuControlsSlot = ( {
 		<Slot
 			fillProps={ {
 				...fillProps,
-				__unstableDisplayLocation,
 				selectedBlocks,
 				selectedClientIds,
 			} }

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,11 @@ export function PrivateBlockToolbar( {
 		blockClientIds,
 		isDefaultEditingMode,
 		blockType,
+		blockName,
+		toolbarKey,
 		shouldShowVisualToolbar,
 		showParentSelector,
+		isUsingBindings,
 	} = useSelect( ( select ) => {
 		const {
 			getBlockName,
@@ -71,6 +76,7 @@ export function PrivateBlockToolbar( {
 			isBlockValid,
 			getBlockRootClientId,
 			getBlockEditingMode,
+			getBlockAttributes,
 		} = select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 		const selectedBlockClientId = selectedBlockClientIds[ 0 ];
@@ -81,22 +87,24 @@ 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,
+			toolbarKey: `${ selectedBlockClientId }${ firstParentClientId }`,
 			showParentSelector:
 				parentBlockType &&
 				getBlockEditingMode( firstParentClientId ) === 'default' &&
@@ -107,6 +115,7 @@ export function PrivateBlockToolbar( {
 				) &&
 				selectedBlockClientIds.length === 1 &&
 				_isDefaultEditingMode,
+			isUsingBindings: _isUsingBindings,
 		};
 	}, [] );
 
@@ -121,15 +130,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;
 	}
 
@@ -159,12 +161,15 @@ export function PrivateBlockToolbar( {
 			__experimentalOnIndexChange={ __experimentalOnIndexChange }
 			// Resets the index whenever the active block changes so
 			// this is not persisted. See https://github.com/WordPress/gutenberg/pull/25760#issuecomment-717906169
-			key={ blockClientId }
+			key={ toolbarKey }
 		>
 			<div ref={ toolbarWrapperRef } className={ innerClasses }>
 				{ ! isMultiToolbar &&
 					isLargeViewport &&
 					isDefaultEditingMode && <BlockParentSelector /> }
+				{ isUsingBindings && canBindBlock( blockName ) && (
+					<BlockBindingsIndicator />
+				) }
 				{ ( shouldShowVisualToolbar || isMultiToolbar ) &&
 					isDefaultEditingMode && (
 						<div
@@ -185,6 +190,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/test/index.native.js

@@ -15,13 +15,7 @@ describe( 'Block Toolbar', () => {
 	it( "doesn't render the block settings button if there aren't any settings for the current selected block", async () => {
 		// Arrange
 		const screen = await initializeEditor();
-		await addBlock( screen, 'Image' );
-
-		// Act
-		fireEvent(
-			screen.getByTestId( 'media-options-picker' ),
-			'backdropPress'
-		);
+		await addBlock( screen, 'Shortcode' );
 
 		// Assert
 		expect( screen.queryByLabelText( 'Open Settings' ) ).toBeNull();

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 }

package/src/components/block-tools/empty-block-inserter.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * Internal dependencies
  */
-import BlockPopover from '../block-popover';
+import BlockPopoverCover from '../block-popover/cover';
 import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
 import Inserter from '../inserter';
 import useSelectedBlockToolProps from './use-selected-block-tool-props';
@@ -28,9 +28,8 @@ export default function EmptyBlockInserter( {
 	} );
 
 	return (
-		<BlockPopover
+		<BlockPopoverCover
 			clientId={ capturingClientId || clientId }
-			__unstableCoverTarget
 			bottomClientId={ lastClientId }
 			className={ classnames(
 				'block-editor-block-list__block-side-inserter-popover',
@@ -39,8 +38,6 @@ export default function EmptyBlockInserter( {
 				}
 			) }
 			__unstableContentRef={ __unstableContentRef }
-			resize={ false }
-			shift={ false }
 			{ ...popoverProps }
 		>
 			<div className="block-editor-block-list__empty-block-inserter">
@@ -51,6 +48,6 @@ export default function EmptyBlockInserter( {
 					__experimentalIsQuick
 				/>
 			</div>
-		</BlockPopover>
+		</BlockPopoverCover>
 	);
 }