@wordpress/block-editor 12.19.5 → 12.21.0

package/src/components/block-settings-menu/block-parent-selector-menu-item.js

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { useViewportMatch } from '@wordpress/compose';
+import { useDispatch } from '@wordpress/data';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import BlockIcon from '../block-icon';
+import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockParentSelectorMenuItem( {
+	parentClientId,
+	parentBlockType,
+} ) {
+	const isSmallViewport = useViewportMatch( 'medium', '<' );
+	const { selectBlock } = useDispatch( blockEditorStore );
+
+	// Allows highlighting the parent block outline when focusing or hovering
+	// the parent block selector within the child.
+	const menuItemRef = useRef();
+	const gesturesProps = useShowHoveredOrFocusedGestures( {
+		ref: menuItemRef,
+		highlightParent: true,
+	} );
+
+	if ( ! isSmallViewport ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			{ ...gesturesProps }
+			ref={ menuItemRef }
+			icon={ <BlockIcon icon={ parentBlockType.icon } /> }
+			onClick={ () => selectBlock( parentClientId ) }
+		>
+			{ sprintf(
+				/* translators: %s: Name of the block's parent. */
+				__( 'Select parent block (%s)' ),
+				parentBlockType.title
+			) }
+		</MenuItem>
+	);
+}

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

@@ -9,30 +9,24 @@ import {
 import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { moreVertical } from '@wordpress/icons';
-import {
-	Children,
-	cloneElement,
-	useCallback,
-	useRef,
-} from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { Children, cloneElement, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import {
 	store as keyboardShortcutsStore,
 	__unstableUseShortcutEventMatch,
 } from '@wordpress/keyboard-shortcuts';
-import { pipe, useCopyToClipboard, useViewportMatch } from '@wordpress/compose';
+import { pipe, useCopyToClipboard } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import BlockActions from '../block-actions';
-import BlockIcon from '../block-icon';
 import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
+import BlockParentSelectorMenuItem from './block-parent-selector-menu-item';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
-import { useShowHoveredOrFocusedGestures } from '../block-toolbar/utils';
 
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
@@ -49,38 +43,6 @@ function CopyMenuItem( { clientIds, onCopy, label } ) {
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
-function ParentSelectorMenuItem( { parentClientId, parentBlockType } ) {
-	const isSmallViewport = useViewportMatch( 'medium', '<' );
-	const { selectBlock } = useDispatch( blockEditorStore );
-
-	// Allows highlighting the parent block outline when focusing or hovering
-	// the parent block selector within the child.
-	const menuItemRef = useRef();
-	const gesturesProps = useShowHoveredOrFocusedGestures( {
-		ref: menuItemRef,
-		highlightParent: true,
-	} );
-
-	if ( ! isSmallViewport ) {
-		return null;
-	}
-
-	return (
-		<MenuItem
-			{ ...gesturesProps }
-			ref={ menuItemRef }
-			icon={ <BlockIcon icon={ parentBlockType.icon } /> }
-			onClick={ () => selectBlock( parentClientId ) }
-		>
-			{ sprintf(
-				/* translators: %s: Name of the block's parent. */
-				__( 'Select parent block (%s)' ),
-				parentBlockType.title
-			) }
-		</MenuItem>
-	);
-}
-
 export function BlockSettingsDropdown( {
 	block,
 	clientIds,
@@ -102,6 +64,7 @@ export function BlockSettingsDropdown( {
 		parentBlockType,
 		previousBlockClientId,
 		selectedBlockClientIds,
+		openedBlockSettingsMenu,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -111,7 +74,8 @@ export function BlockSettingsDropdown( {
 				getPreviousBlockClientId,
 				getSelectedBlockClientIds,
 				getBlockAttributes,
-			} = select( blockEditorStore );
+				getOpenedBlockSettingsMenu,
+			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
 
@@ -133,6 +97,7 @@ export function BlockSettingsDropdown( {
 				previousBlockClientId:
 					getPreviousBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
+				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
 			};
 		},
 		[ firstBlockClientId ]
@@ -140,12 +105,6 @@ export function BlockSettingsDropdown( {
 	const { getBlockOrder, getSelectedBlockClientIds } =
 		useSelect( blockEditorStore );
 
-	const openedBlockSettingsMenu = useSelect(
-		( select ) =>
-			unlock( select( blockEditorStore ) ).getOpenedBlockSettingsMenu(),
-		[]
-	);
-
 	const { setOpenedBlockSettingsMenu } = unlock(
 		useDispatch( blockEditorStore )
 	);
@@ -317,7 +276,7 @@ export function BlockSettingsDropdown( {
 								/>
 								{ ! parentBlockIsSelected &&
 									!! firstParentClientId && (
-										<ParentSelectorMenuItem
+										<BlockParentSelectorMenuItem
 											parentClientId={
 												firstParentClientId
 											}

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

@@ -1,7 +1,3 @@
-.block-editor-block-styles + .default-style-picker__default-switcher {
-	margin-top: $grid-unit-20;
-}
-
 .block-editor-block-styles__preview-panel {
 	display: none;
 	// Same layer as the sidebar from which it's triggered.

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,10 +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.
  *
@@ -128,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;
 	}
 
@@ -195,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 }

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

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

@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
-import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -20,14 +19,13 @@ import BlockToolbarBreadcrumb from './block-toolbar-breadcrumb';
 import { store as blockEditorStore } from '../../store';
 import usePopoverScroll from '../block-popover/use-popover-scroll';
 import ZoomOutModeInserters from './zoom-out-mode-inserters';
+import { useShowBlockTools } from './use-show-block-tools';
 
 function selector( select ) {
 	const {
 		getSelectedBlockClientId,
 		getFirstMultiSelectedBlockClientId,
-		getBlock,
 		getSettings,
-		hasMultiSelection,
 		__unstableGetEditorMode,
 		isTyping,
 	} = select( blockEditorStore );
@@ -35,36 +33,13 @@ function selector( select ) {
 	const clientId =
 		getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
-	const { name = '', attributes = {} } = getBlock( clientId ) || {};
 	const editorMode = __unstableGetEditorMode();
-	const hasSelectedBlock = clientId && name;
-	const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {
-		name,
-		attributes,
-	} );
-	const _showEmptyBlockSideInserter =
-		clientId &&
-		! isTyping() &&
-		editorMode === 'edit' &&
-		isUnmodifiedDefaultBlock( { name, attributes } );
-	const maybeShowBreadcrumb =
-		hasSelectedBlock &&
-		! hasMultiSelection() &&
-		( editorMode === 'navigation' || editorMode === 'zoom-out' );
 
 	return {
 		clientId,
 		hasFixedToolbar: getSettings().hasFixedToolbar,
 		isTyping: isTyping(),
 		isZoomOutMode: editorMode === 'zoom-out',
-		showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
-		showBreadcrumb: ! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
-		showBlockToolbar:
-			! getSettings().hasFixedToolbar &&
-			! _showEmptyBlockSideInserter &&
-			hasSelectedBlock &&
-			! isEmptyDefaultBlock &&
-			! maybeShowBreadcrumb,
 	};
 }
 
@@ -82,18 +57,20 @@ export default function BlockTools( {
 	__unstableContentRef,
 	...props
 } ) {
-	const {
-		clientId,
-		hasFixedToolbar,
-		isTyping,
-		isZoomOutMode,
-		showEmptyBlockSideInserter,
-		showBreadcrumb,
-		showBlockToolbar,
-	} = useSelect( selector, [] );
+	const { clientId, hasFixedToolbar, isTyping, isZoomOutMode } = useSelect(
+		selector,
+		[]
+	);
 	const isMatch = useShortcutEventMatch();
 	const { getSelectedBlockClientIds, getBlockRootClientId } =
 		useSelect( blockEditorStore );
+
+	const {
+		showEmptyBlockSideInserter,
+		showBreadcrumb,
+		showBlockToolbarPopover,
+	} = useShowBlockTools();
+
 	const {
 		duplicateBlocks,
 		removeBlocks,
@@ -186,7 +163,7 @@ export default function BlockTools( {
 					/>
 				) }
 
-				{ showBlockToolbar && (
+				{ showBlockToolbarPopover && (
 					<BlockToolbarPopover
 						__unstableContentRef={ __unstableContentRef }
 						clientId={ clientId }

package/src/components/block-tools/use-show-block-tools.js

@@ -0,0 +1,73 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { useHasBlockToolbar } from '../block-toolbar/use-has-block-toolbar';
+
+/**
+ * Source of truth for which block tools are showing in the block editor.
+ *
+ * @return {Object} Object of which block tools will be shown.
+ */
+export function useShowBlockTools() {
+	const hasBlockToolbar = useHasBlockToolbar();
+
+	return useSelect(
+		( select ) => {
+			const {
+				getSelectedBlockClientId,
+				getFirstMultiSelectedBlockClientId,
+				getBlock,
+				getSettings,
+				hasMultiSelection,
+				__unstableGetEditorMode,
+				isTyping,
+			} = select( blockEditorStore );
+
+			const clientId =
+				getSelectedBlockClientId() ||
+				getFirstMultiSelectedBlockClientId();
+
+			const { name = '', attributes = {} } = getBlock( clientId ) || {};
+			const editorMode = __unstableGetEditorMode();
+			const hasSelectedBlock = clientId && name;
+			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( {
+				name,
+				attributes,
+			} );
+			const _showEmptyBlockSideInserter =
+				clientId &&
+				! isTyping() &&
+				editorMode === 'edit' &&
+				isUnmodifiedDefaultBlock( { name, attributes } );
+			const maybeShowBreadcrumb =
+				hasSelectedBlock &&
+				! hasMultiSelection() &&
+				( editorMode === 'navigation' || editorMode === 'zoom-out' );
+
+			return {
+				showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
+				showBreadcrumb:
+					! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
+				showBlockToolbarPopover:
+					hasBlockToolbar &&
+					! getSettings().hasFixedToolbar &&
+					! _showEmptyBlockSideInserter &&
+					hasSelectedBlock &&
+					! isEmptyDefaultBlock &&
+					! maybeShowBreadcrumb,
+				showFixedToolbar:
+					editorMode !== 'zoom-out' &&
+					hasBlockToolbar &&
+					getSettings().hasFixedToolbar,
+			};
+		},
+		[ hasBlockToolbar ]
+	);
+}

package/src/components/caption/index.native.js

@@ -53,7 +53,7 @@ const Caption = ( {
 			__unstableOnSplitAtEnd={ () =>
 				insertBlocksAfter( createBlock( 'core/paragraph' ) )
 			}
-			deleteEnter={ true }
+			deleteEnter
 		/>
 	</View>
 );