@wordpress/block-editor 13.2.0 → 13.4.0

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

@@ -270,3 +270,26 @@
 	top: 50%;
 	left: 50%;
 }
+
+.zoom-out-toolbar {
+
+	.block-editor-block-mover-button.block-editor-block-mover-button:focus-visible::before,
+	.zoom-out-toolbar-button:focus::before,
+	.block-editor-block-toolbar-shuffle:focus::before,
+	.block-selection-button_drag-handle:focus::before {
+		box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+	}
+
+	.block-editor-block-mover {
+		background: none;
+		border: none;
+	}
+}
+
+.block-editor-block-tools__zoom-out-mode-inserter-button {
+	visibility: hidden;
+
+	&.is-visible {
+		visibility: visible;
+	}
+}

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

@@ -29,10 +29,11 @@ export function useShowBlockTools() {
 		const clientId =
 			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
-		const block = getBlock( clientId ) || { name: '', attributes: {} };
+		const block = getBlock( clientId );
 		const editorMode = __unstableGetEditorMode();
-		const hasSelectedBlock = clientId && block?.name;
-		const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( block );
+		const hasSelectedBlock = !! clientId && !! block;
+		const isEmptyDefaultBlock =
+			hasSelectedBlock && isUnmodifiedDefaultBlock( block );
 		const _showEmptyBlockSideInserter =
 			clientId &&
 			! isTyping() &&
@@ -41,18 +42,28 @@ export function useShowBlockTools() {
 		const maybeShowBreadcrumb =
 			hasSelectedBlock &&
 			! hasMultiSelection() &&
-			( editorMode === 'navigation' || editorMode === 'zoom-out' );
+			editorMode === 'navigation';
+
+		const isZoomOut = editorMode === 'zoom-out';
+		const _showZoomOutToolbar =
+			isZoomOut &&
+			block?.attributes?.align === 'full' &&
+			! _showEmptyBlockSideInserter &&
+			! maybeShowBreadcrumb;
+		const _showBlockToolbarPopover =
+			! _showZoomOutToolbar &&
+			! getSettings().hasFixedToolbar &&
+			! _showEmptyBlockSideInserter &&
+			hasSelectedBlock &&
+			! isEmptyDefaultBlock &&
+			! maybeShowBreadcrumb;
 
 		return {
 			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
 			showBreadcrumb:
 				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
-			showBlockToolbarPopover:
-				! getSettings().hasFixedToolbar &&
-				! _showEmptyBlockSideInserter &&
-				hasSelectedBlock &&
-				! isEmptyDefaultBlock &&
-				! maybeShowBreadcrumb,
+			showBlockToolbarPopover: _showBlockToolbarPopover,
+			showZoomOutToolbar: _showZoomOutToolbar,
 		};
 	}, [] );
 }

package/src/components/block-tools/zoom-out-mode-inserter-button.js

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+import { Button } from '@wordpress/components';
+import { plus } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+
+function ZoomOutModeInserterButton( { isVisible, onClick } ) {
+	const [
+		zoomOutModeInserterButtonHovered,
+		setZoomOutModeInserterButtonHovered,
+	] = useState( false );
+
+	return (
+		<Button
+			variant="primary"
+			icon={ plus }
+			size="compact"
+			className={ clsx(
+				'block-editor-button-pattern-inserter__button',
+				'block-editor-block-tools__zoom-out-mode-inserter-button',
+				{
+					'is-visible': isVisible || zoomOutModeInserterButtonHovered,
+				}
+			) }
+			onClick={ onClick }
+			onMouseOver={ () => {
+				setZoomOutModeInserterButtonHovered( true );
+			} }
+			onMouseOut={ () => {
+				setZoomOutModeInserterButtonHovered( false );
+			} }
+			label={ _x(
+				'Add pattern',
+				'Generic label for pattern inserter button'
+			) }
+		/>
+	);
+}
+
+export default ZoomOutModeInserterButton;

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -2,28 +2,34 @@
  * WordPress dependencies
  */
 import { useSelect } from '@wordpress/data';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { Button } from '@wordpress/components';
-import { plus } from '@wordpress/icons';
-import { _x } from '@wordpress/i18n';
+import { useEffect, useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BlockPopoverInbetween from '../block-popover/inbetween';
+import ZoomOutModeInserterButton from './zoom-out-mode-inserter-button';
 import { store as blockEditorStore } from '../../store';
 import { unlock } from '../../lock-unlock';
 
 function ZoomOutModeInserters() {
 	const [ isReady, setIsReady ] = useState( false );
 	const {
+		hasSelection,
 		blockOrder,
-		sectionRootClientId,
 		insertionPoint,
 		setInserterIsOpened,
-		selectedSection,
+		sectionRootClientId,
+		selectedBlockClientId,
+		hoveredBlockClientId,
 	} = useSelect( ( select ) => {
-		const { getSettings, getBlockOrder } = select( blockEditorStore );
+		const {
+			getSettings,
+			getBlockOrder,
+			getSelectionStart,
+			getSelectedBlockClientId,
+			getHoveredBlockClientId,
+		} = select( blockEditorStore );
 		const { sectionRootClientId: root } = unlock( getSettings() );
 		// To do: move ZoomOutModeInserters to core/editor.
 		// Or we perhaps we should move the insertion point state to the
@@ -33,26 +39,17 @@ function ZoomOutModeInserters() {
 		// eslint-disable-next-line @wordpress/data-no-store-string-literals
 		const editor = select( 'core/editor' );
 		return {
-			selectedSection: editor.getSelectedBlock(),
+			hasSelection: !! getSelectionStart().clientId,
 			blockOrder: getBlockOrder( root ),
 			insertionPoint: unlock( editor ).getInsertionPoint(),
 			sectionRootClientId: root,
 			setInserterIsOpened:
 				getSettings().__experimentalSetIsInserterOpened,
+			selectedBlockClientId: getSelectedBlockClientId(),
+			hoveredBlockClientId: getHoveredBlockClientId(),
 		};
 	}, [] );
 
-	const isMounted = useRef( false );
-
-	useEffect( () => {
-		if ( ! isMounted.current ) {
-			isMounted.current = true;
-			return;
-		}
-		// reset insertion point when the block order changes
-		setInserterIsOpened( true );
-	}, [ blockOrder, setInserterIsOpened ] );
-
 	// Defer the initial rendering to avoid the jumps due to the animation.
 	useEffect( () => {
 		const timeout = setTimeout( () => {
@@ -63,18 +60,39 @@ function ZoomOutModeInserters() {
 		};
 	}, [] );
 
-	if ( ! isReady || ! selectedSection ) {
+	if ( ! isReady ) {
 		return null;
 	}
 
 	return [ undefined, ...blockOrder ].map( ( clientId, index ) => {
+		const shouldRenderInserter = insertionPoint.insertionIndex !== index;
+
+		const shouldRenderInsertionPoint =
+			insertionPoint.insertionIndex === index;
+
+		if ( ! shouldRenderInserter && ! shouldRenderInsertionPoint ) {
+			return null;
+		}
+
+		const previousClientId = clientId;
+		const nextClientId = blockOrder[ index ];
+
+		const isSelected =
+			hasSelection &&
+			( selectedBlockClientId === previousClientId ||
+				selectedBlockClientId === nextClientId );
+
+		const isHovered =
+			hoveredBlockClientId === previousClientId ||
+			hoveredBlockClientId === nextClientId;
+
 		return (
 			<BlockPopoverInbetween
 				key={ index }
-				previousClientId={ clientId }
-				nextClientId={ blockOrder[ index ] }
+				previousClientId={ previousClientId }
+				nextClientId={ nextClientId }
 			>
-				{ insertionPoint.insertionIndex === index && (
+				{ shouldRenderInsertionPoint && (
 					<div
 						style={ {
 							borderRadius: '0',
@@ -86,12 +104,9 @@ function ZoomOutModeInserters() {
 						className="block-editor-block-list__insertion-point-indicator"
 					/>
 				) }
-				{ insertionPoint.insertionIndex !== index && (
-					<Button
-						variant="primary"
-						icon={ plus }
-						size="compact"
-						className="block-editor-button-pattern-inserter__button"
+				{ shouldRenderInserter && (
+					<ZoomOutModeInserterButton
+						isVisible={ isSelected || isHovered }
 						onClick={ () => {
 							setInserterIsOpened( {
 								rootClientId: sectionRootClientId,
@@ -100,10 +115,6 @@ function ZoomOutModeInserters() {
 								category: 'all',
 							} );
 						} }
-						label={ _x(
-							'Add pattern',
-							'Generic label for pattern inserter button'
-						) }
 					/>
 				) }
 			</BlockPopoverInbetween>

package/src/components/block-tools/zoom-out-popover.js

@@ -0,0 +1,50 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * Internal dependencies
+ */
+import BlockPopover from '../block-popover';
+import useBlockToolbarPopoverProps from './use-block-toolbar-popover-props';
+import useSelectedBlockToolProps from './use-selected-block-tool-props';
+import ZoomOutToolbar from './zoom-out-toolbar';
+
+export default function ZoomOutPopover( { clientId, __unstableContentRef } ) {
+	const {
+		capturingClientId,
+		isInsertionPointVisible,
+		lastClientId,
+		rootClientId,
+	} = useSelectedBlockToolProps( clientId );
+
+	const popoverProps = useBlockToolbarPopoverProps( {
+		contentElement: __unstableContentRef?.current,
+		clientId,
+	} );
+
+	// Override some of the popover props for the zoom-out toolbar.
+	const props = {
+		...popoverProps,
+		placement: 'left-start',
+		flip: false,
+		shift: true,
+	};
+
+	return (
+		<BlockPopover
+			clientId={ capturingClientId || clientId }
+			bottomClientId={ lastClientId }
+			className={ clsx( 'zoom-out-toolbar-popover', {
+				'is-insertion-point-visible': isInsertionPointVisible,
+			} ) }
+			resize={ false }
+			{ ...props }
+		>
+			<ZoomOutToolbar
+				clientId={ clientId }
+				rootClientId={ rootClientId }
+			/>
+		</BlockPopover>
+	);
+}

package/src/components/block-tools/zoom-out-toolbar.js

@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { dragHandle, trash } from '@wordpress/icons';
+import { Button, ToolbarButton } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import BlockDraggable from '../block-draggable';
+import BlockMover from '../block-mover';
+import Shuffle from '../block-toolbar/shuffle';
+import NavigableToolbar from '../navigable-toolbar';
+
+export default function ZoomOutToolbar( { clientId, rootClientId } ) {
+	const selected = useSelect(
+		( select ) => {
+			const {
+				getBlock,
+				hasBlockMovingClientId,
+				getNextBlockClientId,
+				getPreviousBlockClientId,
+				canRemoveBlock,
+				canMoveBlock,
+			} = select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
+			const { name } = getBlock( clientId );
+			const blockType = getBlockType( name );
+			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(),
+				isBlockTemplatePart,
+				isNextBlockTemplatePart,
+				isPrevBlockTemplatePart,
+				canRemove: canRemoveBlock( clientId, rootClientId ),
+				canMove: canMoveBlock( clientId, rootClientId ),
+			};
+		},
+		[ clientId, rootClientId ]
+	);
+
+	const {
+		blockMovingMode,
+		isBlockTemplatePart,
+		isNextBlockTemplatePart,
+		isPrevBlockTemplatePart,
+		canRemove,
+		canMove,
+	} = selected;
+
+	const { removeBlock } = useDispatch( blockEditorStore );
+
+	const classNames = clsx( 'zoom-out-toolbar', {
+		'is-block-moving-mode': !! blockMovingMode,
+	} );
+
+	const showBlockDraggable = canMove && ! isBlockTemplatePart;
+
+	return (
+		<NavigableToolbar
+			className={ classNames }
+			/* translators: accessibility text for the block toolbar */
+			aria-label={ __( 'Block tools' ) }
+			// The variant is applied as "toolbar" when undefined, which is the black border style of the dropdown from the toolbar popover.
+			variant="unstyled"
+			orientation="vertical"
+		>
+			{ showBlockDraggable && (
+				<BlockDraggable clientIds={ [ clientId ] }>
+					{ ( draggableProps ) => (
+						<Button
+							icon={ dragHandle }
+							className="block-selection-button_drag-handle zoom-out-toolbar-button"
+							aria-hidden="true"
+							label={ __( 'Drag' ) }
+							iconSize={ 24 }
+							size="compact"
+							// Should not be able to tab to drag handle as this
+							// button can only be used with a pointer device.
+							tabIndex="-1"
+							{ ...draggableProps }
+						/>
+					) }
+				</BlockDraggable>
+			) }
+			{ ! isBlockTemplatePart && (
+				<BlockMover
+					clientIds={ [ clientId ] }
+					hideDragHandle
+					isBlockMoverUpButtonDisabled={ isPrevBlockTemplatePart }
+					isBlockMoverDownButtonDisabled={ isNextBlockTemplatePart }
+					iconSize={ 24 }
+					size="compact"
+				/>
+			) }
+			{ canMove && canRemove && (
+				<Shuffle clientId={ clientId } as={ ToolbarButton } />
+			) }
+			{ canRemove && ! isBlockTemplatePart && (
+				<ToolbarButton
+					className="zoom-out-toolbar-button"
+					icon={ trash }
+					label={ __( 'Delete' ) }
+					onClick={ () => {
+						removeBlock( clientId );
+					} }
+				/>
+			) }
+		</NavigableToolbar>
+	);
+}

package/src/components/button-block-appender/index.js

@@ -18,7 +18,7 @@ import deprecated from '@wordpress/deprecated';
 import Inserter from '../inserter';
 
 function ButtonBlockAppender(
-	{ rootClientId, className, onFocus, tabIndex },
+	{ rootClientId, className, onFocus, tabIndex, onSelect },
 	ref
 ) {
 	return (
@@ -26,6 +26,7 @@ function ButtonBlockAppender(
 			position="bottom center"
 			rootClientId={ rootClientId }
 			__experimentalIsQuick
+			onSelectOrClose={ onSelect }
 			renderToggle={ ( {
 				onToggle,
 				disabled,

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

@@ -12,7 +12,7 @@ import {
 	Flex,
 	FlexItem,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 
@@ -142,17 +142,26 @@ function FlexControls( {
 				<ToggleGroupControlOption
 					key="fit"
 					value="fit"
-					label={ __( 'Fit' ) }
+					label={ _x(
+						'Fit',
+						'Intrinsic block width in flex layout'
+					) }
 				/>
 				<ToggleGroupControlOption
 					key="fill"
 					value="fill"
-					label={ __( 'Fill' ) }
+					label={ _x(
+						'Grow',
+						'Block with expanding width in flex layout'
+					) }
 				/>
 				<ToggleGroupControlOption
 					key="fixed"
 					value="fixed"
-					label={ __( 'Fixed' ) }
+					label={ _x(
+						'Fixed',
+						'Block with fixed width in flex layout'
+					) }
 				/>
 			</ToggleGroupControl>
 			{ selfStretch === 'fixed' && (
@@ -184,8 +193,7 @@ function GridControls( {
 	panelId,
 } ) {
 	const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
-	const { columnCount } = parentLayout ?? {};
-	const gridColumnNumber = parseInt( columnCount, 10 ) || 3;
+	const { columnCount = 3, rowCount } = parentLayout ?? {};
 	const rootClientId = useSelect( ( select ) =>
 		select( blockEditorStore ).getBlockRootClientId( panelId )
 	);
@@ -193,7 +201,7 @@ function GridControls( {
 		useDispatch( blockEditorStore );
 	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
 		rootClientId,
-		gridColumnNumber
+		columnCount
 	);
 	const hasStartValue = () => !! columnStart || !! rowStart;
 	const hasSpanValue = () => !! columnSpan || !! rowSpan;
@@ -225,14 +233,17 @@ function GridControls( {
 					label={ __( 'Column span' ) }
 					type="number"
 					onChange={ ( value ) => {
+						// Don't allow unsetting.
+						const newColumnSpan =
+							value === '' ? 1 : parseInt( value, 10 );
 						onChange( {
 							columnStart,
 							rowStart,
 							rowSpan,
-							columnSpan: value,
+							columnSpan: newColumnSpan,
 						} );
 					} }
-					value={ columnSpan }
+					value={ columnSpan ?? 1 }
 					min={ 1 }
 				/>
 				<InputControl
@@ -240,14 +251,17 @@ function GridControls( {
 					label={ __( 'Row span' ) }
 					type="number"
 					onChange={ ( value ) => {
+						// Don't allow unsetting.
+						const newRowSpan =
+							value === '' ? 1 : parseInt( value, 10 );
 						onChange( {
 							columnStart,
 							rowStart,
 							columnSpan,
-							rowSpan: value,
+							rowSpan: newRowSpan,
 						} );
 					} }
-					value={ rowSpan }
+					value={ rowSpan ?? 1 }
 					min={ 1 }
 				/>
 			</HStack>
@@ -269,8 +283,11 @@ function GridControls( {
 							label={ __( 'Column' ) }
 							type="number"
 							onChange={ ( value ) => {
+								// Don't allow unsetting.
+								const newColumnStart =
+									value === '' ? 1 : parseInt( value, 10 );
 								onChange( {
-									columnStart: value,
+									columnStart: newColumnStart,
 									rowStart,
 									columnSpan,
 									rowSpan,
@@ -281,16 +298,16 @@ function GridControls( {
 									rootClientId,
 									rootClientId,
 									getNumberOfBlocksBeforeCell(
-										value,
+										newColumnStart,
 										rowStart
 									)
 								);
 							} }
-							value={ columnStart }
+							value={ columnStart ?? 1 }
 							min={ 1 }
 							max={
-								gridColumnNumber
-									? gridColumnNumber - ( columnSpan ?? 1 ) + 1
+								columnCount
+									? columnCount - ( columnSpan ?? 1 ) + 1
 									: undefined
 							}
 						/>
@@ -301,9 +318,12 @@ function GridControls( {
 							label={ __( 'Row' ) }
 							type="number"
 							onChange={ ( value ) => {
+								// Don't allow unsetting.
+								const newRowStart =
+									value === '' ? 1 : parseInt( value, 10 );
 								onChange( {
 									columnStart,
-									rowStart: value,
+									rowStart: newRowStart,
 									columnSpan,
 									rowSpan,
 								} );
@@ -314,17 +334,15 @@ function GridControls( {
 									rootClientId,
 									getNumberOfBlocksBeforeCell(
 										columnStart,
-										value
+										newRowStart
 									)
 								);
 							} }
-							value={ rowStart }
+							value={ rowStart ?? 1 }
 							min={ 1 }
 							max={
-								parentLayout?.rowCount
-									? parentLayout.rowCount -
-									  ( rowSpan ?? 1 ) +
-									  1
+								rowCount
+									? rowCount - ( rowSpan ?? 1 ) + 1
 									: undefined
 							}
 						/>

package/src/components/date-format-picker/index.js

@@ -8,9 +8,9 @@ import {
 	TextControl,
 	ExternalLink,
 	VisuallyHidden,
-	CustomSelectControl,
 	ToggleControl,
 	__experimentalVStack as VStack,
+	CustomSelectControl,
 } from '@wordpress/components';
 
 // So that we illustrate the different formats in the dropdown properly, show a date that is
@@ -117,7 +117,7 @@ function NonDefaultControls( { format, onChange } ) {
 		name: __( 'Custom' ),
 		className:
 			'block-editor-date-format-picker__custom-format-select-control__custom-option',
-		__experimentalHint: __( 'Enter your own date format' ),
+		hint: __( 'Enter your own date format' ),
 	};
 
 	const [ isCustom, setIsCustom ] = useState(

package/src/components/date-format-picker/style.scss

@@ -4,13 +4,4 @@
 
 .block-editor-date-format-picker__custom-format-select-control__custom-option {
 	border-top: 1px solid $gray-300;
-
-	&.has-hint {
-		grid-template-columns: auto 30px;
-	}
-
-	.components-custom-select-control__item-hint {
-		grid-row: 2;
-		text-align: left;
-	}
 }