@wordpress/block-editor 13.1.0 → 13.3.0

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

@@ -12,8 +12,15 @@ 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';
+
+/**
+ * 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,104 @@ 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={ _x(
+						'Fit',
+						'Intrinsic block width in flex layout'
+					) }
+				/>
+				<ToggleGroupControlOption
+					key="fill"
+					value="fill"
+					label={ _x(
+						'Grow',
+						'Block with expanding width in flex layout'
+					) }
+				/>
+				<ToggleGroupControlOption
+					key="fixed"
+					value="fixed"
+					label={ _x(
+						'Fixed',
+						'Block with fixed width in flex layout'
+					) }
+				/>
+			</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 = 3, rowCount } = parentLayout ?? {};
+	const rootClientId = useSelect( ( select ) =>
+		select( blockEditorStore ).getBlockRootClientId( panelId )
+	);
+	const { moveBlocksToPosition, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const getNumberOfBlocksBeforeCell = useGetNumberOfBlocksBeforeCell(
+		rootClientId,
+		columnCount
+	);
 	const hasStartValue = () => !! columnStart || !! rowStart;
 	const hasSpanValue = () => !! columnSpan || !! rowSpan;
 	const resetGridStarts = () => {
@@ -88,184 +218,137 @@ 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 ) => {
+						// Don't allow unsetting.
+						const newColumnSpan =
+							value === '' ? 1 : parseInt( value, 10 );
+						onChange( {
+							columnStart,
+							rowStart,
+							rowSpan,
+							columnSpan: newColumnSpan,
+						} );
+					} }
+					value={ columnSpan ?? 1 }
+					min={ 1 }
+				/>
+				<InputControl
+					size="__unstable-large"
+					label={ __( 'Row span' ) }
+					type="number"
+					onChange={ ( value ) => {
+						// Don't allow unsetting.
+						const newRowSpan =
+							value === '' ? 1 : parseInt( value, 10 );
+						onChange( {
+							columnStart,
+							rowStart,
+							columnSpan,
+							rowSpan: newRowSpan,
+						} );
+					} }
+					value={ rowSpan ?? 1 }
+					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 ) => {
+								// Don't allow unsetting.
+								const newColumnStart =
+									value === '' ? 1 : parseInt( value, 10 );
 								onChange( {
-									columnStart,
+									columnStart: newColumnStart,
 									rowStart,
+									columnSpan,
 									rowSpan,
-									columnSpan: value,
 								} );
+								__unstableMarkNextChangeAsNotPersistent();
+								moveBlocksToPosition(
+									[ panelId ],
+									rootClientId,
+									rootClientId,
+									getNumberOfBlocksBeforeCell(
+										newColumnStart,
+										rowStart
+									)
+								);
 							} }
-							value={ columnSpan }
+							value={ columnStart ?? 1 }
 							min={ 1 }
+							max={
+								columnCount
+									? columnCount - ( columnSpan ?? 1 ) + 1
+									: undefined
+							}
 						/>
+					</FlexItem>
+					<FlexItem style={ { width: '50%' } }>
 						<InputControl
 							size="__unstable-large"
-							label={ __( 'Row span' ) }
+							label={ __( 'Row' ) }
 							type="number"
 							onChange={ ( value ) => {
+								// Don't allow unsetting.
+								const newRowStart =
+									value === '' ? 1 : parseInt( value, 10 );
 								onChange( {
 									columnStart,
-									rowStart,
+									rowStart: newRowStart,
 									columnSpan,
-									rowSpan: value,
+									rowSpan,
 								} );
+								__unstableMarkNextChangeAsNotPersistent();
+								moveBlocksToPosition(
+									[ panelId ],
+									rootClientId,
+									rootClientId,
+									getNumberOfBlocksBeforeCell(
+										columnStart,
+										newRowStart
+									)
+								);
 							} }
-							value={ rowSpan }
+							value={ rowStart ?? 1 }
 							min={ 1 }
+							max={
+								rowCount
+									? 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

@@ -8,11 +8,20 @@ import {
 	TextControl,
 	ExternalLink,
 	VisuallyHidden,
-	CustomSelectControl,
 	ToggleControl,
 	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
+	componentsPrivateApis
+);
+
 // 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();

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

package/src/components/dimensions-tool/index.js

@@ -58,6 +58,7 @@ function DimensionsTool( {
 	scaleOptions, // Default options handled by ScaleTool.
 	defaultScale = 'fill', // Match CSS default value for object-fit.
 	unitsOptions, // Default options handled by UnitControl.
+	tools = [ 'aspectRatio', 'widthHeight', 'scale' ],
 } ) {
 	// Coerce undefined and CSS default values to be null.
 	const width =
@@ -92,95 +93,102 @@ function DimensionsTool( {
 
 	return (
 		<>
-			<AspectRatioTool
-				panelId={ panelId }
-				options={ aspectRatioOptions }
-				defaultValue={ defaultAspectRatio }
-				value={ aspectRatioValue }
-				onChange={ ( nextAspectRatio ) => {
-					const nextValue = { ...value };
-
-					// 'auto' is CSS default, so it gets treated as null.
-					nextAspectRatio =
-						nextAspectRatio === 'auto' ? null : nextAspectRatio;
-
-					setLastAspectRatio( nextAspectRatio );
-
-					// Update aspectRatio.
-					if ( ! nextAspectRatio ) {
-						delete nextValue.aspectRatio;
-					} else {
-						nextValue.aspectRatio = nextAspectRatio;
-					}
-
-					// Auto-update scale.
-					if ( ! nextAspectRatio ) {
-						delete nextValue.scale;
-					} else if ( lastScale ) {
-						nextValue.scale = lastScale;
-					} else {
-						nextValue.scale = defaultScale;
-						setLastScale( defaultScale );
-					}
-
-					// Auto-update width and height.
-					if ( 'custom' !== nextAspectRatio && width && height ) {
-						delete nextValue.height;
-					}
-
-					onChange( nextValue );
-				} }
-			/>
-			<WidthHeightTool
-				panelId={ panelId }
-				units={ unitsOptions }
-				value={ { width, height } }
-				onChange={ ( { width: nextWidth, height: nextHeight } ) => {
-					const nextValue = { ...value };
-
-					// 'auto' is CSS default, so it gets treated as null.
-					nextWidth = nextWidth === 'auto' ? null : nextWidth;
-					nextHeight = nextHeight === 'auto' ? null : nextHeight;
-
-					// Update width.
-					if ( ! nextWidth ) {
-						delete nextValue.width;
-					} else {
-						nextValue.width = nextWidth;
-					}
-
-					// Update height.
-					if ( ! nextHeight ) {
-						delete nextValue.height;
-					} else {
-						nextValue.height = nextHeight;
-					}
-
-					// Auto-update aspectRatio.
-					if ( nextWidth && nextHeight ) {
-						delete nextValue.aspectRatio;
-					} else if ( lastAspectRatio ) {
-						nextValue.aspectRatio = lastAspectRatio;
-					} else {
-						// No setting defaultAspectRatio here, because
-						// aspectRatio is optional in this scenario,
-						// unlike scale.
-					}
-
-					// Auto-update scale.
-					if ( ! lastAspectRatio && !! nextWidth !== !! nextHeight ) {
-						delete nextValue.scale;
-					} else if ( lastScale ) {
-						nextValue.scale = lastScale;
-					} else {
-						nextValue.scale = defaultScale;
-						setLastScale( defaultScale );
-					}
-
-					onChange( nextValue );
-				} }
-			/>
-			{ showScaleControl && (
+			{ tools.includes( 'aspectRatio' ) && (
+				<AspectRatioTool
+					panelId={ panelId }
+					options={ aspectRatioOptions }
+					defaultValue={ defaultAspectRatio }
+					value={ aspectRatioValue }
+					onChange={ ( nextAspectRatio ) => {
+						const nextValue = { ...value };
+
+						// 'auto' is CSS default, so it gets treated as null.
+						nextAspectRatio =
+							nextAspectRatio === 'auto' ? null : nextAspectRatio;
+
+						setLastAspectRatio( nextAspectRatio );
+
+						// Update aspectRatio.
+						if ( ! nextAspectRatio ) {
+							delete nextValue.aspectRatio;
+						} else {
+							nextValue.aspectRatio = nextAspectRatio;
+						}
+
+						// Auto-update scale.
+						if ( ! nextAspectRatio ) {
+							delete nextValue.scale;
+						} else if ( lastScale ) {
+							nextValue.scale = lastScale;
+						} else {
+							nextValue.scale = defaultScale;
+							setLastScale( defaultScale );
+						}
+
+						// Auto-update width and height.
+						if ( 'custom' !== nextAspectRatio && width && height ) {
+							delete nextValue.height;
+						}
+
+						onChange( nextValue );
+					} }
+				/>
+			) }
+			{ tools.includes( 'widthHeight' ) && (
+				<WidthHeightTool
+					panelId={ panelId }
+					units={ unitsOptions }
+					value={ { width, height } }
+					onChange={ ( { width: nextWidth, height: nextHeight } ) => {
+						const nextValue = { ...value };
+
+						// 'auto' is CSS default, so it gets treated as null.
+						nextWidth = nextWidth === 'auto' ? null : nextWidth;
+						nextHeight = nextHeight === 'auto' ? null : nextHeight;
+
+						// Update width.
+						if ( ! nextWidth ) {
+							delete nextValue.width;
+						} else {
+							nextValue.width = nextWidth;
+						}
+
+						// Update height.
+						if ( ! nextHeight ) {
+							delete nextValue.height;
+						} else {
+							nextValue.height = nextHeight;
+						}
+
+						// Auto-update aspectRatio.
+						if ( nextWidth && nextHeight ) {
+							delete nextValue.aspectRatio;
+						} else if ( lastAspectRatio ) {
+							nextValue.aspectRatio = lastAspectRatio;
+						} else {
+							// No setting defaultAspectRatio here, because
+							// aspectRatio is optional in this scenario,
+							// unlike scale.
+						}
+
+						// Auto-update scale.
+						if (
+							! lastAspectRatio &&
+							!! nextWidth !== !! nextHeight
+						) {
+							delete nextValue.scale;
+						} else if ( lastScale ) {
+							nextValue.scale = lastScale;
+						} else {
+							nextValue.scale = defaultScale;
+							setLastScale( defaultScale );
+						}
+
+						onChange( nextValue );
+					} }
+				/>
+			) }
+			{ tools.includes( 'scale' ) && showScaleControl && (
 				<ScaleTool
 					panelId={ panelId }
 					options={ scaleOptions }