Merge branch 'WordPress:trunk' into update/convert-token-list-to-type…

…script

bin/test-create-block.sh

@@ -69,7 +69,7 @@ status "Building block..."
 ../node_modules/.bin/wp-scripts build
 
 status "Verifying build..."
-expected=7
+expected=9
 actual=$( find build -maxdepth 1 -type f | wc -l )
 if [ "$expected" -ne "$actual" ]; then
 	error "Expected $expected files in the \`build\` directory, but found $actual."

docs/contributors/code/e2e/README.md

@@ -36,6 +36,7 @@ xvfb-run npm run test:e2e
 # Only run webkit tests.
 xvfb-run -- npm run test:e2e -- --project=webkit
 ```
+If you're already editing in VS Code, you may find the [Playwright extension](https://playwright.dev/docs/getting-started-vscode) helpful for running, writing and debugging tests.
 
 ## Best practices
 

docs/getting-started/faq.md

@@ -224,6 +224,11 @@ This is the canonical list of keyboard shortcuts:
 			<td><kbd>/</kbd></td>
 			<td><kbd>/</kbd></td>
 		</tr>
+		<tr>
+			<td>Create a group block from the selected multiple blocks.</td>
+			<td><kbd>Ctrl</kbd>+<kbd>G</kbd></td>
+			<td><kbd>⌘</kbd><kbd>⇧</kbd><kbd>G</kbd></td>
+		</tr>
 		<tr>
 			<td>Remove multiple selected blocks.</td>
 			<td><kbd>del</kbd><kbd>backspace</kbd></td>

packages/block-editor/src/components/block-actions/index.js

@@ -31,10 +31,12 @@ export default function BlockActions( {
 				getDirectInsertBlock,
 				canMoveBlocks,
 				canRemoveBlocks,
+				getBlockEditingMode,
 			} = select( blockEditorStore );
 
 			const blocks = getBlocksByClientId( clientIds );
 			const rootClientId = getBlockRootClientId( clientIds[ 0 ] );
+			const rootBlockEditingMode = getBlockEditingMode( rootClientId );
 			const canInsertDefaultBlock = canInsertBlockType(
 				getDefaultBlockName(),
 				rootClientId
@@ -46,7 +48,9 @@ export default function BlockActions( {
 			return {
 				canMove: canMoveBlocks( clientIds, rootClientId ),
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
-				canInsertBlock: canInsertDefaultBlock || !! directInsertBlock,
+				canInsertBlock:
+					( canInsertDefaultBlock || !! directInsertBlock ) &&
+					rootBlockEditingMode === 'default',
 				canCopyStyles: blocks.every( ( block ) => {
 					return (
 						!! block &&

packages/block-editor/src/components/block-inspector/index.js

@@ -95,7 +95,8 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
 			blockType: _blockType,
 			topLevelLockedBlock:
 				getContentLockingParent( _selectedBlockClientId ) ||
-				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
+				( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
+				_selectedBlockName === 'core/block'
 					? _selectedBlockClientId
 					: undefined ),
 		};

packages/block-editor/src/components/block-patterns-list/index.js

@@ -6,7 +6,8 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, forwardRef } from '@wordpress/element';
+import { cloneBlock } from '@wordpress/blocks';
+import { useEffect, useState, forwardRef, useMemo } from '@wordpress/element';
 import {
 	VisuallyHidden,
 	Tooltip,
@@ -47,16 +48,38 @@ function BlockPattern( {
 	onHover,
 	showTitle = true,
 	showTooltip,
+	category,
 } ) {
 	const [ isDragging, setIsDragging ] = useState( false );
 	const { blocks, viewportWidth } = pattern;
 	const instanceId = useInstanceId( BlockPattern );
 	const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`;
 
+	// When we have a selected category and the pattern is draggable, we need to update the
+	// pattern's categories in metadata to only contain the selected category, and pass this to
+	// InserterDraggableBlocks component. We do that because we use this information for pattern
+	// shuffling and it makes more sense to show only the ones from the initially selected category during insertion.
+	const patternBlocks = useMemo( () => {
+		if ( ! category || ! isDraggable ) {
+			return blocks;
+		}
+		return ( blocks ?? [] ).map( ( block ) => {
+			const clonedBlock = cloneBlock( block );
+			if (
+				clonedBlock.attributes.metadata?.categories?.includes(
+					category
+				)
+			) {
+				clonedBlock.attributes.metadata.categories = [ category ];
+			}
+			return clonedBlock;
+		} );
+	}, [ blocks, isDraggable, category ] );
+
 	return (
 		<InserterDraggableBlocks
 			isEnabled={ isDraggable }
-			blocks={ blocks }
+			blocks={ patternBlocks }
 			pattern={ pattern }
 		>
 			{ ( { draggable, onDragStart, onDragEnd } ) => (
@@ -173,6 +196,7 @@ function BlockPatternsList(
 		onClickPattern,
 		orientation,
 		label = __( 'Block patterns' ),
+		category,
 		showTitle = true,
 		showTitlesAsTooltip,
 		pagingProps,
@@ -209,6 +233,7 @@ function BlockPatternsList(
 						isDraggable={ isDraggable }
 						showTitle={ showTitle }
 						showTooltip={ showTitlesAsTooltip }
+						category={ category }
 					/>
 				) : (
 					<BlockPatternPlaceholder key={ pattern.name } />

packages/block-editor/src/components/block-popover/cover.js

@@ -10,7 +10,14 @@ import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-
 import BlockPopover from '.';
 
 function BlockPopoverCover(
-	{ clientId, bottomClientId, children, shift = false, ...props },
+	{
+		clientId,
+		bottomClientId,
+		children,
+		shift = false,
+		additionalStyles,
+		...props
+	},
 	ref
 ) {
 	bottomClientId ??= clientId;
@@ -26,7 +33,10 @@ function BlockPopoverCover(
 			{ ...props }
 		>
 			{ selectedElement && clientId === bottomClientId ? (
-				<CoverContainer selectedElement={ selectedElement }>
+				<CoverContainer
+					selectedElement={ selectedElement }
+					additionalStyles={ additionalStyles }
+				>
 					{ children }
 				</CoverContainer>
 			) : (
@@ -36,7 +46,11 @@ function BlockPopoverCover(
 	);
 }
 
-function CoverContainer( { selectedElement, children } ) {
+function CoverContainer( {
+	selectedElement,
+	additionalStyles = {},
+	children,
+} ) {
 	const [ width, setWidth ] = useState( selectedElement.offsetWidth );
 	const [ height, setHeight ] = useState( selectedElement.offsetHeight );
 
@@ -54,8 +68,9 @@ function CoverContainer( { selectedElement, children } ) {
 			position: 'absolute',
 			width,
 			height,
+			...additionalStyles,
 		};
-	}, [ width, height ] );
+	}, [ width, height, additionalStyles ] );
 
 	return <div style={ style }>{ children }</div>;
 }

packages/block-editor/src/components/block-settings-menu-controls/index.js

@@ -27,24 +27,31 @@ import { BlockRenameControl, useBlockRename } from '../block-rename';
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
-	const { selectedBlocks, selectedClientIds } = useSelect(
+	const { selectedBlocks, selectedClientIds, isContentOnly } = useSelect(
 		( select ) => {
-			const { getBlockNamesByClientId, getSelectedBlockClientIds } =
-				select( blockEditorStore );
+			const {
+				getBlockNamesByClientId,
+				getSelectedBlockClientIds,
+				getBlockEditingMode,
+			} = select( blockEditorStore );
 			const ids =
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
 				selectedBlocks: getBlockNamesByClientId( ids ),
 				selectedClientIds: ids,
+				isContentOnly:
+					getBlockEditingMode( ids[ 0 ] ) === 'contentOnly',
 			};
 		},
 		[ clientIds ]
 	);
 
 	const { canLock } = useBlockLock( selectedClientIds[ 0 ] );
 	const { canRename } = useBlockRename( selectedBlocks[ 0 ] );
-	const showLockButton = selectedClientIds.length === 1 && canLock;
-	const showRenameButton = selectedClientIds.length === 1 && canRename;
+	const showLockButton =
+		selectedClientIds.length === 1 && canLock && ! isContentOnly;
+	const showRenameButton =
+		selectedClientIds.length === 1 && canRename && ! isContentOnly;
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.
@@ -89,17 +96,19 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 							/>
 						) }
 						{ fills }
-						{ fillProps?.canMove && ! fillProps?.onlyBlock && (
-							<MenuItem
-								onClick={ pipe(
-									fillProps?.onClose,
-									fillProps?.onMoveTo
-								) }
-							>
-								{ __( 'Move to' ) }
-							</MenuItem>
-						) }
-						{ fillProps?.count === 1 && (
+						{ fillProps?.canMove &&
+							! fillProps?.onlyBlock &&
+							! isContentOnly && (
+								<MenuItem
+									onClick={ pipe(
+										fillProps?.onClose,
+										fillProps?.onMoveTo
+									) }
+								>
+									{ __( 'Move to' ) }
+								</MenuItem>
+							) }
+						{ fillProps?.count === 1 && ! isContentOnly && (
 							<BlockModeToggle
 								clientId={ fillProps?.firstBlockClientId }
 								onToggle={ fillProps?.onClose }

packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js

@@ -63,6 +63,7 @@ export function BlockSettingsDropdown( {
 		previousBlockClientId,
 		selectedBlockClientIds,
 		openedBlockSettingsMenu,
+		isContentOnly,
 	} = useSelect(
 		( select ) => {
 			const {
@@ -73,6 +74,7 @@ export function BlockSettingsDropdown( {
 				getSelectedBlockClientIds,
 				getBlockAttributes,
 				getOpenedBlockSettingsMenu,
+				getBlockEditingMode,
 			} = unlock( select( blockEditorStore ) );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -96,6 +98,8 @@ export function BlockSettingsDropdown( {
 					getPreviousBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
 				openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
+				isContentOnly:
+					getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
 			};
 		},
 		[ firstBlockClientId ]
@@ -231,11 +235,15 @@ export function BlockSettingsDropdown( {
 										clientId={ firstBlockClientId }
 									/>
 								) }
-								<CopyMenuItem
-									clientIds={ clientIds }
-									onCopy={ onCopy }
-									shortcut={ displayShortcut.primary( 'c' ) }
-								/>
+								{ ! isContentOnly && (
+									<CopyMenuItem
+										clientIds={ clientIds }
+										onCopy={ onCopy }
+										shortcut={ displayShortcut.primary(
+											'c'
+										) }
+									/>
+								) }
 								{ canDuplicate && (
 									<MenuItem
 										onClick={ pipe(
@@ -271,7 +279,7 @@ export function BlockSettingsDropdown( {
 									</>
 								) }
 							</MenuGroup>
-							{ canCopyStyles && (
+							{ canCopyStyles && ! isContentOnly && (
 								<MenuGroup>
 									<CopyMenuItem
 										clientIds={ clientIds }

packages/block-editor/src/components/block-tools/index.js

@@ -6,6 +6,9 @@ import { isTextField } from '@wordpress/dom';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
+import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
+import { speak } from '@wordpress/a11y';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -64,9 +67,13 @@ export default function BlockTools( {
 		[]
 	);
 	const isMatch = useShortcutEventMatch();
-	const { getSelectedBlockClientIds, getBlockRootClientId } =
-		useSelect( blockEditorStore );
-
+	const {
+		getBlocksByClientId,
+		getSelectedBlockClientIds,
+		getBlockRootClientId,
+		isGroupable,
+	} = useSelect( blockEditorStore );
+	const { getGroupingBlockName } = useSelect( blocksStore );
 	const {
 		showEmptyBlockSideInserter,
 		showBreadcrumb,
@@ -76,6 +83,7 @@ export default function BlockTools( {
 	const {
 		duplicateBlocks,
 		removeBlocks,
+		replaceBlocks,
 		insertAfterBlock,
 		insertBeforeBlock,
 		selectBlock,
@@ -159,6 +167,19 @@ export default function BlockTools( {
 			}
 			event.preventDefault();
 			expandBlock( clientId );
+		} else if ( isMatch( 'core/block-editor/group', event ) ) {
+			const clientIds = getSelectedBlockClientIds();
+			if ( clientIds.length > 1 && isGroupable( clientIds ) ) {
+				event.preventDefault();
+				const blocks = getBlocksByClientId( clientIds );
+				const groupingBlockName = getGroupingBlockName();
+				const newBlocks = switchToBlockType(
+					blocks,
+					groupingBlockName
+				);
+				replaceBlocks( clientIds, newBlocks );
+				speak( __( 'Selected blocks are grouped.' ) );
+			}
 		}
 	}
 

packages/block-editor/src/components/convert-to-group-buttons/index.js

@@ -4,7 +4,8 @@
 import { MenuItem } from '@wordpress/components';
 import { _x } from '@wordpress/i18n';
 import { switchToBlockType } from '@wordpress/blocks';
-import { useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { displayShortcut } from '@wordpress/keycodes';
 
 /**
  * Internal dependencies
@@ -22,6 +23,7 @@ function ConvertToGroupButton( {
 	groupingBlockName,
 	onClose = () => {},
 } ) {
+	const { getSelectedBlockClientIds } = useSelect( blockEditorStore );
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 	const onConvertToGroup = () => {
 		// Activate the `transform` on the Grouping Block which does the conversion.
@@ -52,10 +54,17 @@ function ConvertToGroupButton( {
 		return null;
 	}
 
+	const selectedBlockClientIds = getSelectedBlockClientIds();
+
 	return (
 		<>
 			{ isGroupable && (
 				<MenuItem
+					shortcut={
+						selectedBlockClientIds.length > 1
+							? displayShortcut.primary( 'g' )
+							: undefined
+					}
 					onClick={ () => {
 						onConvertToGroup();
 						onClose();