@wordpress/block-editor 12.21.0 → 12.23.0

package/src/components/block-tools/block-selection-button.js

@@ -6,8 +6,8 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { dragHandle } from '@wordpress/icons';
-import { Button, Flex, FlexItem } from '@wordpress/components';
+import { dragHandle, trash } from '@wordpress/icons';
+import { Button, Flex, FlexItem, ToolbarButton } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import {
@@ -60,6 +60,9 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				hasBlockMovingClientId,
 				getBlockListSettings,
 				__unstableGetEditorMode,
+				getNextBlockClientId,
+				getPreviousBlockClientId,
+				canRemoveBlock,
 			} = select( blockEditorStore );
 			const { getActiveBlockVariation, getBlockType } =
 				select( blocksStore );
@@ -69,6 +72,26 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 			const orientation =
 				getBlockListSettings( rootClientId )?.orientation;
 			const match = getActiveBlockVariation( name, attributes );
+			const isBlockTemplatePart =
+				blockType?.name === 'core/template-part';
+
+			let isNextBlockTemplatePart = false;
+			const nextClientId = getNextBlockClientId();
+			if ( nextClientId ) {
+				const { name: nextName } = getBlock( nextClientId );
+				const nextBlockType = getBlockType( nextName );
+				isNextBlockTemplatePart =
+					nextBlockType?.name === 'core/template-part';
+			}
+
+			let isPrevBlockTemplatePart = false;
+			const prevClientId = getPreviousBlockClientId();
+			if ( prevClientId ) {
+				const { name: prevName } = getBlock( prevClientId );
+				const prevBlockType = getBlockType( prevName );
+				isPrevBlockTemplatePart =
+					prevBlockType?.name === 'core/template-part';
+			}
 
 			return {
 				blockMovingMode: hasBlockMovingClientId(),
@@ -80,20 +103,34 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					index + 1,
 					orientation
 				),
+				isBlockTemplatePart,
+				isNextBlockTemplatePart,
+				isPrevBlockTemplatePart,
+				canRemove: canRemoveBlock( clientId, rootClientId ),
 			};
 		},
 		[ clientId, rootClientId ]
 	);
-	const { label, icon, blockMovingMode, editorMode } = selected;
+	const {
+		label,
+		icon,
+		blockMovingMode,
+		editorMode,
+		isBlockTemplatePart,
+		isNextBlockTemplatePart,
+		isPrevBlockTemplatePart,
+		canRemove,
+	} = selected;
 	const { setNavigationMode, removeBlock } = useDispatch( blockEditorStore );
 	const ref = useRef();
 
 	// Focus the breadcrumb in navigation mode.
 	useEffect( () => {
-		ref.current.focus();
-
-		speak( label );
-	}, [ label ] );
+		if ( editorMode === 'navigation' ) {
+			ref.current.focus();
+			speak( label );
+		}
+	}, [ label, editorMode ] );
 	const blockElement = useBlockElement( clientId );
 
 	const {
@@ -252,8 +289,17 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 					<BlockIcon icon={ icon } showColors />
 				</FlexItem>
 				<FlexItem>
-					{ editorMode === 'zoom-out' && (
-						<BlockMover clientIds={ [ clientId ] } hideDragHandle />
+					{ editorMode === 'zoom-out' && ! isBlockTemplatePart && (
+						<BlockMover
+							clientIds={ [ clientId ] }
+							hideDragHandle
+							isBlockMoverUpButtonDisabled={
+								isPrevBlockTemplatePart
+							}
+							isBlockMoverDownButtonDisabled={
+								isNextBlockTemplatePart
+							}
+						/>
 					) }
 					{ editorMode === 'navigation' && (
 						<BlockDraggable clientIds={ [ clientId ] }>
@@ -275,6 +321,17 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				{ editorMode === 'zoom-out' && (
 					<Shuffle clientId={ clientId } as={ Button } />
 				) }
+				{ canRemove &&
+					editorMode === 'zoom-out' &&
+					! isBlockTemplatePart && (
+						<ToolbarButton
+							icon={ trash }
+							label="Delete"
+							onClick={ () => {
+								removeBlock( clientId );
+							} }
+						/>
+					) }
 				<FlexItem>
 					<Button
 						ref={ ref }

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

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { useSelect, useDispatch } from '@wordpress/data';
+import { isTextField } from '@wordpress/dom';
 import { Popover } from '@wordpress/components';
 import { __unstableUseShortcutEventMatch as useShortcutEventMatch } from '@wordpress/keyboard-shortcuts';
 import { useRef } from '@wordpress/element';
@@ -20,6 +21,7 @@ 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';
+import { unlock } from '../../lock-unlock';
 
 function selector( select ) {
 	const {
@@ -79,7 +81,8 @@ export default function BlockTools( {
 		selectBlock,
 		moveBlocksUp,
 		moveBlocksDown,
-	} = useDispatch( blockEditorStore );
+		expandBlock,
+	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
 		if ( event.defaultPrevented ) return;
@@ -140,6 +143,20 @@ export default function BlockTools( {
 				// In effect, to the user this feels like deselecting the multi-selection.
 				selectBlock( clientIds[ 0 ] );
 			}
+		} else if ( isMatch( 'core/block-editor/collapse-list-view', event ) ) {
+			// If focus is currently within a text field, such as a rich text block or other editable field,
+			// skip collapsing the list view, and allow the keyboard shortcut to be handled by the text field.
+			// This condition checks for both the active element and the active element within an iframed editor.
+			if (
+				isTextField( event.target ) ||
+				isTextField(
+					event.target?.contentWindow?.document?.activeElement
+				)
+			) {
+				return;
+			}
+			event.preventDefault();
+			expandBlock( clientId );
 		}
 	}
 

package/src/components/button-block-appender/content.scss

@@ -56,7 +56,11 @@
 		}
 
 		.block-editor-inserter {
-			visibility: hidden;
+			opacity: 0;
+
+			&:focus-within {
+				opacity: 1;
+			}
 		}
 
 		&.is-drag-over {

package/src/components/child-layout-control/index.js

@@ -7,6 +7,10 @@ import {
 	__experimentalUnitControl as UnitControl,
 	__experimentalInputControl as InputControl,
 	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
@@ -28,25 +32,62 @@ function helpText( selfStretch, parentLayout ) {
 /**
  * Form to edit the child layout value.
  *
- * @param {Object}   props              Props.
- * @param {Object}   props.value        The child layout value.
- * @param {Function} props.onChange     Function to update the child layout value.
- * @param {Object}   props.parentLayout The parent layout value.
+ * @param {Object}   props                  Props.
+ * @param {Object}   props.value            The child layout value.
+ * @param {Function} props.onChange         Function to update the child layout value.
+ * @param {Object}   props.parentLayout     The parent layout value.
  *
+ * @param {boolean}  props.isShownByDefault
+ * @param {string}   props.panelId
  * @return {Element} child layout edit element.
  */
 export default function ChildLayoutControl( {
 	value: childLayout = {},
 	onChange,
 	parentLayout,
+	isShownByDefault,
+	panelId,
 } ) {
-	const { selfStretch, flexSize, columnSpan, rowSpan } = childLayout;
+	const {
+		selfStretch,
+		flexSize,
+		columnStart,
+		rowStart,
+		columnSpan,
+		rowSpan,
+	} = childLayout;
 	const {
 		type: parentType,
 		default: { type: defaultParentType = 'default' } = {},
+		orientation = 'horizontal',
 	} = parentLayout ?? {};
 	const parentLayoutType = parentType || defaultParentType;
 
+	const hasFlexValue = () => !! selfStretch;
+	const flexResetLabel =
+		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+	const resetFlex = () => {
+		onChange( {
+			selfStretch: undefined,
+			flexSize: undefined,
+		} );
+	};
+
+	const hasStartValue = () => !! columnStart || !! rowStart;
+	const hasSpanValue = () => !! columnSpan || !! rowSpan;
+	const resetGridStarts = () => {
+		onChange( {
+			columnStart: undefined,
+			rowStart: undefined,
+		} );
+	};
+	const resetGridSpans = () => {
+		onChange( {
+			columnSpan: undefined,
+			rowSpan: undefined,
+		} );
+	};
+
 	useEffect( () => {
 		if ( selfStretch === 'fixed' && ! flexSize ) {
 			onChange( {
@@ -59,7 +100,15 @@ export default function ChildLayoutControl( {
 	return (
 		<>
 			{ parentLayoutType === 'flex' && (
-				<>
+				<VStack
+					as={ ToolsPanelItem }
+					spacing={ 2 }
+					hasValue={ hasFlexValue }
+					label={ flexResetLabel }
+					onDeselect={ resetFlex }
+					isShownByDefault={ isShownByDefault }
+					panelId={ panelId }
+				>
 					<ToggleGroupControl
 						__nextHasNoMarginBottom
 						size={ '__unstable-large' }
@@ -104,37 +153,100 @@ export default function ChildLayoutControl( {
 							value={ flexSize }
 						/>
 					) }
-				</>
+				</VStack>
 			) }
 			{ parentLayoutType === 'grid' && (
-				<HStack>
-					<InputControl
-						size={ '__unstable-large' }
-						label={ __( 'Column Span' ) }
-						type="number"
-						onChange={ ( value ) => {
-							onChange( {
-								rowSpan,
-								columnSpan: value,
-							} );
-						} }
-						value={ columnSpan }
-						min={ 1 }
-					/>
-					<InputControl
-						size={ '__unstable-large' }
-						label={ __( 'Row Span' ) }
-						type="number"
-						onChange={ ( value ) => {
-							onChange( {
-								columnSpan,
-								rowSpan: value,
-							} );
-						} }
-						value={ rowSpan }
-						min={ 1 }
-					/>
-				</HStack>
+				<>
+					<HStack
+						as={ ToolsPanelItem }
+						hasValue={ hasSpanValue }
+						label={ __( 'Grid span' ) }
+						onDeselect={ resetGridSpans }
+						isShownByDefault={ isShownByDefault }
+						panelId={ panelId }
+					>
+						<InputControl
+							size={ '__unstable-large' }
+							label={ __( 'Column span' ) }
+							type="number"
+							onChange={ ( value ) => {
+								onChange( {
+									columnStart,
+									rowStart,
+									rowSpan,
+									columnSpan: value,
+								} );
+							} }
+							value={ columnSpan }
+							min={ 1 }
+						/>
+						<InputControl
+							size={ '__unstable-large' }
+							label={ __( 'Row span' ) }
+							type="number"
+							onChange={ ( value ) => {
+								onChange( {
+									columnStart,
+									rowStart,
+									columnSpan,
+									rowSpan: value,
+								} );
+							} }
+							value={ rowSpan }
+							min={ 1 }
+						/>
+					</HStack>
+					{ window.__experimentalEnableGridInteractivity && (
+						// Use Flex with an explicit width on the FlexItem instead of HStack to
+						// work around an issue in webkit where inputs with a max attribute are
+						// sized incorrectly.
+						<Flex
+							as={ ToolsPanelItem }
+							hasValue={ hasStartValue }
+							label={ __( 'Grid placement' ) }
+							onDeselect={ resetGridStarts }
+							isShownByDefault={ false }
+							panelId={ panelId }
+						>
+							<FlexItem style={ { width: '50%' } }>
+								<InputControl
+									size={ '__unstable-large' }
+									label={ __( 'Column' ) }
+									type="number"
+									onChange={ ( value ) => {
+										onChange( {
+											columnStart: value,
+											rowStart,
+											columnSpan,
+											rowSpan,
+										} );
+									} }
+									value={ columnStart }
+									min={ 1 }
+									max={ parentLayout?.columnCount }
+								/>
+							</FlexItem>
+							<FlexItem style={ { width: '50%' } }>
+								<InputControl
+									size={ '__unstable-large' }
+									label={ __( 'Row' ) }
+									type="number"
+									onChange={ ( value ) => {
+										onChange( {
+											columnStart,
+											rowStart: value,
+											columnSpan,
+											rowSpan,
+										} );
+									} }
+									value={ rowStart }
+									min={ 1 }
+									max={ parentLayout?.columnCount }
+								/>
+							</FlexItem>
+						</Flex>
+					) }
+				</>
 			) }
 		</>
 	);

package/src/components/convert-to-group-buttons/toolbar.js

@@ -4,7 +4,7 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { group, row, stack } from '@wordpress/icons';
+import { group, row, stack, grid } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
 /**
@@ -17,6 +17,7 @@ const layouts = {
 	group: { type: 'constrained' },
 	row: { type: 'flex', flexWrap: 'nowrap' },
 	stack: { type: 'flex', orientation: 'vertical' },
+	grid: { type: 'grid' },
 };
 
 function BlockGroupToolbar() {
@@ -60,6 +61,7 @@ function BlockGroupToolbar() {
 
 	const onConvertToRow = () => onConvertToGroup( 'row' );
 	const onConvertToStack = () => onConvertToGroup( 'stack' );
+	const onConvertToGrid = () => onConvertToGroup( 'grid' );
 
 	// Don't render the button if the current selection cannot be grouped.
 	// A good example is selecting multiple button blocks within a Buttons block:
@@ -75,6 +77,9 @@ function BlockGroupToolbar() {
 	const canInsertStack = !! variations.find(
 		( { name } ) => name === 'group-stack'
 	);
+	const canInsertGrid = !! variations.find(
+		( { name } ) => name === 'group-grid'
+	);
 
 	return (
 		<ToolbarGroup>
@@ -97,6 +102,13 @@ function BlockGroupToolbar() {
 					onClick={ onConvertToStack }
 				/>
 			) }
+			{ canInsertGrid && (
+				<ToolbarButton
+					icon={ grid }
+					label={ _x( 'Grid', 'verb' ) }
+					onClick={ onConvertToGrid }
+				/>
+			) }
 		</ToolbarGroup>
 	);
 }

package/src/components/default-block-appender/content.scss

@@ -101,7 +101,7 @@
 		height: $button-size-small;
 	}
 
-	// @todo: these are currently two separate components. Since we're now
+	// @todo these are currently two separate components. Since we're now
 	// treating them the same, one or both can be retired.
 	.block-editor-inserter__toggle.components-button.has-icon,
 	.block-list-appender__toggle {
@@ -134,7 +134,7 @@
 
 	// These could be avoided by employing a :not(:only-child) on the parent,
 	// but this should be more performant.
-	// @todo: These styles can almost certainly be refactored away we refactor
+	// @todo These styles can almost certainly be refactored away we refactor
 	// the markup and classes of the component itself. The rules provide some
 	// baseline styles for when the block is the only one inside.
 	&:only-child {

package/src/components/global-styles/advanced-panel.js

@@ -28,9 +28,12 @@ export default function AdvancedPanel( {
 			css: newValue,
 		} );
 		if ( cssError ) {
+			// Check if the new value is valid CSS, and pass a wrapping selector
+			// to ensure that `transformStyles` validates the CSS. Note that the
+			// wrapping selector here is not used in the actual output of any styles.
 			const [ transformed ] = transformStyles(
 				[ { css: newValue } ],
-				'.editor-styles-wrapper'
+				'.for-validation-only'
 			);
 			if ( transformed ) {
 				setCSSError( null );
@@ -43,9 +46,12 @@ export default function AdvancedPanel( {
 			return;
 		}
 
+		// Check if the new value is valid CSS, and pass a wrapping selector
+		// to ensure that `transformStyles` validates the CSS. Note that the
+		// wrapping selector here is not used in the actual output of any styles.
 		const [ transformed ] = transformStyles(
 			[ { css: event.target.value } ],
-			'.editor-styles-wrapper'
+			'.for-validation-only'
 		);
 
 		setCSSError(