@wordpress/block-editor 13.0.3 → 13.2.0

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

@@ -14,6 +14,13 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { useGetNumberOfBlocksBeforeCell } from '../grid/use-get-number-of-blocks-before-cell';
+import { store as blockEditorStore } from '../../store';
 
 function helpText( selfStretch, parentLayout ) {
 	const { orientation = 'horizontal' } = parentLayout;
@@ -48,21 +55,46 @@ export default function ChildLayoutControl( {
 	isShownByDefault,
 	panelId,
 } ) {
-	const {
-		selfStretch,
-		flexSize,
-		columnStart,
-		rowStart,
-		columnSpan,
-		rowSpan,
-	} = childLayout;
 	const {
 		type: parentType,
 		default: { type: defaultParentType = 'default' } = {},
-		orientation = 'horizontal',
 	} = parentLayout ?? {};
 	const parentLayoutType = parentType || defaultParentType;
 
+	if ( parentLayoutType === 'flex' ) {
+		return (
+			<FlexControls
+				childLayout={ childLayout }
+				onChange={ onChange }
+				parentLayout={ parentLayout }
+				isShownByDefault={ isShownByDefault }
+				panelId={ panelId }
+			/>
+		);
+	} else if ( parentLayoutType === 'grid' ) {
+		return (
+			<GridControls
+				childLayout={ childLayout }
+				onChange={ onChange }
+				parentLayout={ parentLayout }
+				isShownByDefault={ isShownByDefault }
+				panelId={ panelId }
+			/>
+		);
+	}
+
+	return null;
+}
+
+function FlexControls( {
+	childLayout,
+	onChange,
+	parentLayout,
+	isShownByDefault,
+	panelId,
+} ) {
+	const { selfStretch, flexSize } = childLayout;
+	const { orientation = 'horizontal' } = parentLayout ?? {};
 	const hasFlexValue = () => !! selfStretch;
 	const flexResetLabel =
 		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
@@ -73,6 +105,96 @@ export default function ChildLayoutControl( {
 		} );
 	};
 
+	useEffect( () => {
+		if ( selfStretch === 'fixed' && ! flexSize ) {
+			onChange( {
+				...childLayout,
+				selfStretch: 'fit',
+			} );
+		}
+	}, [] );
+
+	return (
+		<VStack
+			as={ ToolsPanelItem }
+			spacing={ 2 }
+			hasValue={ hasFlexValue }
+			label={ flexResetLabel }
+			onDeselect={ resetFlex }
+			isShownByDefault={ isShownByDefault }
+			panelId={ panelId }
+		>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				size="__unstable-large"
+				label={ childLayoutOrientation( parentLayout ) }
+				value={ selfStretch || 'fit' }
+				help={ helpText( selfStretch, parentLayout ) }
+				onChange={ ( value ) => {
+					const newFlexSize = value !== 'fixed' ? null : flexSize;
+					onChange( {
+						selfStretch: value,
+						flexSize: newFlexSize,
+					} );
+				} }
+				isBlock
+			>
+				<ToggleGroupControlOption
+					key="fit"
+					value="fit"
+					label={ __( 'Fit' ) }
+				/>
+				<ToggleGroupControlOption
+					key="fill"
+					value="fill"
+					label={ __( 'Fill' ) }
+				/>
+				<ToggleGroupControlOption
+					key="fixed"
+					value="fixed"
+					label={ __( 'Fixed' ) }
+				/>
+			</ToggleGroupControl>
+			{ selfStretch === 'fixed' && (
+				<UnitControl
+					size="__unstable-large"
+					onChange={ ( value ) => {
+						onChange( {
+							selfStretch,
+							flexSize: value,
+						} );
+					} }
+					value={ flexSize }
+				/>
+			) }
+		</VStack>
+	);
+}
+
+export function childLayoutOrientation( parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+}
+
+function GridControls( {
+	childLayout,
+	onChange,
+	parentLayout,
+	isShownByDefault,
+	panelId,
+} ) {
+	const { columnStart, rowStart, columnSpan, rowSpan } = childLayout;
+	const { columnCount } = parentLayout ?? {};
+	const gridColumnNumber = parseInt( columnCount, 10 ) || 3;
+	const rootClientId = useSelect( ( select ) =>
+		select( blockEditorStore ).getBlockRootClientId( panelId )
+	);
+	const { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		rootClientId,
+		gridColumnNumber
+	);
 	const hasStartValue = () => !! columnStart || !! rowStart;
 	const hasSpanValue = () => !! columnSpan || !! rowSpan;
 	const resetGridStarts = () => {
@@ -88,184 +210,127 @@ export default function ChildLayoutControl( {
 		} );
 	};
 
-	useEffect( () => {
-		if ( selfStretch === 'fixed' && ! flexSize ) {
-			onChange( {
-				...childLayout,
-				selfStretch: 'fit',
-			} );
-		}
-	}, [] );
-
 	return (
 		<>
-			{ parentLayoutType === 'flex' && (
-				<VStack
+			<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 && columnCount && (
+				// 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 }
-					spacing={ 2 }
-					hasValue={ hasFlexValue }
-					label={ flexResetLabel }
-					onDeselect={ resetFlex }
-					isShownByDefault={ isShownByDefault }
+					hasValue={ hasStartValue }
+					label={ __( 'Grid placement' ) }
+					onDeselect={ resetGridStarts }
+					isShownByDefault={ false }
 					panelId={ panelId }
 				>
-					<ToggleGroupControl
-						__nextHasNoMarginBottom
-						size="__unstable-large"
-						label={ childLayoutOrientation( parentLayout ) }
-						value={ selfStretch || 'fit' }
-						help={ helpText( selfStretch, parentLayout ) }
-						onChange={ ( value ) => {
-							const newFlexSize =
-								value !== 'fixed' ? null : flexSize;
-							onChange( {
-								selfStretch: value,
-								flexSize: newFlexSize,
-							} );
-						} }
-						isBlock
-					>
-						<ToggleGroupControlOption
-							key="fit"
-							value="fit"
-							label={ __( 'Fit' ) }
-						/>
-						<ToggleGroupControlOption
-							key="fill"
-							value="fill"
-							label={ __( 'Fill' ) }
-						/>
-						<ToggleGroupControlOption
-							key="fixed"
-							value="fixed"
-							label={ __( 'Fixed' ) }
-						/>
-					</ToggleGroupControl>
-					{ selfStretch === 'fixed' && (
-						<UnitControl
-							size="__unstable-large"
-							onChange={ ( value ) => {
-								onChange( {
-									selfStretch,
-									flexSize: value,
-								} );
-							} }
-							value={ flexSize }
-						/>
-					) }
-				</VStack>
-			) }
-			{ parentLayoutType === 'grid' && (
-				<>
-					<HStack
-						as={ ToolsPanelItem }
-						hasValue={ hasSpanValue }
-						label={ __( 'Grid span' ) }
-						onDeselect={ resetGridSpans }
-						isShownByDefault={ isShownByDefault }
-						panelId={ panelId }
-					>
+					<FlexItem style={ { width: '50%' } }>
 						<InputControl
 							size="__unstable-large"
-							label={ __( 'Column span' ) }
+							label={ __( 'Column' ) }
 							type="number"
 							onChange={ ( value ) => {
 								onChange( {
-									columnStart,
+									columnStart: value,
 									rowStart,
+									columnSpan,
 									rowSpan,
-									columnSpan: value,
 								} );
+								__unstableMarkNextChangeAsNotPersistent();
+								moveBlocksToPosition(
+									[ panelId ],
+									rootClientId,
+									rootClientId,
+									getNumberOfBlocksBeforeCell(
+										value,
+										rowStart
+									)
+								);
 							} }
-							value={ columnSpan }
+							value={ columnStart }
 							min={ 1 }
+							max={
+								gridColumnNumber
+									? gridColumnNumber - ( columnSpan ?? 1 ) + 1
+									: undefined
+							}
 						/>
+					</FlexItem>
+					<FlexItem style={ { width: '50%' } }>
 						<InputControl
 							size="__unstable-large"
-							label={ __( 'Row span' ) }
+							label={ __( 'Row' ) }
 							type="number"
 							onChange={ ( value ) => {
 								onChange( {
 									columnStart,
-									rowStart,
+									rowStart: value,
 									columnSpan,
-									rowSpan: value,
+									rowSpan,
 								} );
+								__unstableMarkNextChangeAsNotPersistent();
+								moveBlocksToPosition(
+									[ panelId ],
+									rootClientId,
+									rootClientId,
+									getNumberOfBlocksBeforeCell(
+										columnStart,
+										value
+									)
+								);
 							} }
-							value={ rowSpan }
+							value={ rowStart }
 							min={ 1 }
+							max={
+								parentLayout?.rowCount
+									? parentLayout.rowCount -
+									  ( rowSpan ?? 1 ) +
+									  1
+									: undefined
+							}
 						/>
-					</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
-											? parentLayout.columnCount -
-											  ( columnSpan ?? 1 ) +
-											  1
-											: undefined
-									}
-								/>
-							</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?.rowCount
-											? parentLayout.rowCount -
-											  ( rowSpan ?? 1 ) +
-											  1
-											: undefined
-									}
-								/>
-							</FlexItem>
-						</Flex>
-					) }
-				</>
+					</FlexItem>
+				</Flex>
 			) }
 		</>
 	);
 }
-
-export function childLayoutOrientation( parentLayout ) {
-	const { orientation = 'horizontal' } = parentLayout;
-
-	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
-}

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { _x, __ } from '@wordpress/i18n';
-import { dateI18n } from '@wordpress/date';
+import { dateI18n, humanTimeDiff } from '@wordpress/date';
 import { useState, createInterpolateElement } from '@wordpress/element';
 import {
 	TextControl,
@@ -13,11 +13,15 @@ import {
 	__experimentalVStack as VStack,
 } from '@wordpress/components';
 
-// So that we can illustrate the different formats in the dropdown properly,
-// show a date that has a day greater than 12 and a month with more than three
-// letters. Here we're using 2022-01-25 which is when WordPress 5.9 was
-// released.
-const EXAMPLE_DATE = new Date( 2022, 0, 25 );
+// So that we illustrate the different formats in the dropdown properly, show a date that is
+// somwhat recent, has a day greater than 12, and a month with more than three letters.
+const exampleDate = new Date();
+exampleDate.setDate( 20 );
+exampleDate.setMonth( exampleDate.getMonth() - 3 );
+if ( exampleDate.getMonth() === 4 ) {
+	// May has three letters, so use March.
+	exampleDate.setMonth( 3 );
+}
 
 /**
  * The `DateFormatPicker` component renders controls that let the user choose a
@@ -54,7 +58,7 @@ export default function DateFormatPicker( {
 				label={ __( 'Default format' ) }
 				help={ `${ __( 'Example:' ) }  ${ dateI18n(
 					defaultFormat,
-					EXAMPLE_DATE
+					exampleDate
 				) }` }
 				checked={ ! format }
 				onChange={ ( checked ) =>
@@ -95,13 +99,19 @@ function NonDefaultControls( { format, onChange } ) {
 		] ),
 	];
 
-	const suggestedOptions = suggestedFormats.map(
-		( suggestedFormat, index ) => ( {
+	const suggestedOptions = [
+		...suggestedFormats.map( ( suggestedFormat, index ) => ( {
 			key: `suggested-${ index }`,
-			name: dateI18n( suggestedFormat, EXAMPLE_DATE ),
+			name: dateI18n( suggestedFormat, exampleDate ),
 			format: suggestedFormat,
-		} )
-	);
+		} ) ),
+		{
+			key: 'human-diff',
+			name: humanTimeDiff( exampleDate ),
+			format: 'human-diff',
+		},
+	];
+
 	const customOption = {
 		key: 'custom',
 		name: __( 'Custom' ),
@@ -111,7 +121,9 @@ function NonDefaultControls( { format, onChange } ) {
 	};
 
 	const [ isCustom, setIsCustom ] = useState(
-		() => !! format && ! suggestedFormats.includes( format )
+		() =>
+			!! format &&
+			! suggestedOptions.some( ( option ) => option.format === format )
 	);
 
 	return (

package/src/components/grid/grid-item-movers.js

@@ -0,0 +1,128 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { ToolbarButton } from '@wordpress/components';
+import { arrowLeft, arrowUp, arrowDown, arrowRight } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import BlockControls from '../block-controls';
+import { useGetNumberOfBlocksBeforeCell } from './use-get-number-of-blocks-before-cell';
+import { store as blockEditorStore } from '../../store';
+
+export function GridItemMovers( {
+	layout,
+	parentLayout,
+	onChange,
+	gridClientId,
+	blockClientId,
+} ) {
+	const { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	const columnStart = layout?.columnStart ?? 1;
+	const rowStart = layout?.rowStart ?? 1;
+	const columnSpan = layout?.columnSpan ?? 1;
+	const rowSpan = layout?.rowSpan ?? 1;
+	const columnEnd = columnStart + columnSpan - 1;
+	const rowEnd = rowStart + rowSpan - 1;
+	const columnCount = parentLayout?.columnCount;
+	const rowCount = parentLayout?.rowCount;
+
+	const columnCountNumber = parseInt( columnCount, 10 );
+	const rowStartNumber = parseInt( rowStart, 10 );
+	const columnStartNumber = parseInt( columnStart, 10 );
+
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		gridClientId,
+		columnCountNumber
+	);
+
+	return (
+		<BlockControls group="parent">
+			<ToolbarButton
+				icon={ arrowUp }
+				label={ __( 'Move block up' ) }
+				isDisabled={ rowStart <= 1 }
+				onClick={ () => {
+					onChange( {
+						rowStart: rowStart - 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell(
+							columnStartNumber,
+							rowStartNumber - 1
+						)
+					);
+				} }
+			/>
+			<ToolbarButton
+				icon={ arrowDown }
+				label={ __( 'Move block down' ) }
+				isDisabled={ rowCount && rowEnd >= rowCount }
+				onClick={ () => {
+					onChange( {
+						rowStart: rowStart + 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell(
+							columnStartNumber,
+							rowStartNumber + 1
+						)
+					);
+				} }
+			/>
+			<ToolbarButton
+				icon={ arrowLeft }
+				label={ __( 'Move block left' ) }
+				isDisabled={ columnStart <= 1 }
+				onClick={ () => {
+					onChange( {
+						columnStart: columnStartNumber - 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell(
+							columnStartNumber - 1,
+							rowStartNumber
+						)
+					);
+				} }
+			/>
+			<ToolbarButton
+				icon={ arrowRight }
+				label={ __( 'Move block right' ) }
+				isDisabled={ columnCount && columnEnd >= columnCount }
+				onClick={ () => {
+					onChange( {
+						columnStart: columnStartNumber + 1,
+					} );
+					__unstableMarkNextChangeAsNotPersistent();
+					moveBlocksToPosition(
+						[ blockClientId ],
+						gridClientId,
+						gridClientId,
+						getNumberOfBlocksBeforeCell(
+							columnStartNumber + 1,
+							rowStartNumber
+						)
+					);
+				} }
+			/>
+		</BlockControls>
+	);
+}