@wordpress/block-editor 12.19.5 → 12.21.0

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

@@ -5,6 +5,8 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
+	__experimentalInputControl as InputControl,
+	__experimentalHStack as HStack,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useEffect } from '@wordpress/element';
@@ -38,7 +40,12 @@ export default function ChildLayoutControl( {
 	onChange,
 	parentLayout,
 } ) {
-	const { selfStretch, flexSize } = childLayout;
+	const { selfStretch, flexSize, columnSpan, rowSpan } = childLayout;
+	const {
+		type: parentType,
+		default: { type: defaultParentType = 'default' } = {},
+	} = parentLayout ?? {};
+	const parentLayoutType = parentType || defaultParentType;
 
 	useEffect( () => {
 		if ( selfStretch === 'fixed' && ! flexSize ) {
@@ -51,49 +58,83 @@ export default function ChildLayoutControl( {
 
 	return (
 		<>
-			<ToggleGroupControl
-				__nextHasNoMarginBottom
-				size={ '__unstable-large' }
-				label={ childLayoutOrientation( parentLayout ) }
-				value={ selfStretch || 'fit' }
-				help={ helpText( selfStretch, parentLayout ) }
-				onChange={ ( value ) => {
-					const newFlexSize = value !== 'fixed' ? null : flexSize;
-					onChange( {
-						...childLayout,
-						selfStretch: value,
-						flexSize: newFlexSize,
-					} );
-				} }
-				isBlock={ true }
-			>
-				<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( {
-							...childLayout,
-							flexSize: value,
-						} );
-					} }
-					value={ flexSize }
-				/>
+			{ parentLayoutType === 'flex' && (
+				<>
+					<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 }
+						/>
+					) }
+				</>
+			) }
+			{ 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>
 			) }
 		</>
 	);

package/src/components/color-palette/control.js

@@ -14,7 +14,7 @@ export default function ColorPaletteControl( {
 			onColorChange={ onChange }
 			colorValue={ value }
 			gradients={ [] }
-			disableCustomGradients={ true }
+			disableCustomGradients
 		/>
 	);
 }

package/src/components/colors-gradients/control.js

@@ -133,7 +133,7 @@ function ColorGradientControlInner( {
 					{ canChooseAColor && canChooseAGradient && (
 						<div>
 							<Tabs
-								initialTabId={
+								defaultTabId={
 									gradientValue
 										? TAB_IDS.gradient
 										: !! canChooseAColor && TAB_IDS.color

package/src/components/colors-gradients/test/control.js

@@ -64,7 +64,7 @@ describe( 'ColorPaletteControl', () => {
 				] }
 				gradients={ [] }
 				disableCustomColors={ false }
-				disableCustomGradients={ true }
+				disableCustomGradients
 				onColorChange={ noop }
 				onGradientChange={ noop }
 			/>
@@ -102,7 +102,7 @@ describe( 'ColorPaletteControl', () => {
 						slug: 'light-green-cyan-to-vivid-green-cyan',
 					},
 				] }
-				disableCustomColors={ true }
+				disableCustomColors
 				disableCustomGradients={ false }
 				onColorChange={ noop }
 				onGradientChange={ noop }

package/src/components/contrast-checker/test/index.js

@@ -221,7 +221,7 @@ describe( 'ContrastChecker', () => {
 			<ContrastChecker
 				backgroundColor="#C44B4B"
 				textColor="#000000"
-				isLargeText={ true }
+				isLargeText
 			/>
 		);
 
@@ -263,7 +263,7 @@ describe( 'ContrastChecker', () => {
 				backgroundColor="#C44B4B"
 				textColor="#000000"
 				fontSize={ 23 }
-				isLargeText={ true }
+				isLargeText
 			/>
 		);
 
@@ -363,7 +363,7 @@ describe( 'ContrastChecker', () => {
 				backgroundColor={ backgroundColor }
 				textColor={ textColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -378,7 +378,7 @@ describe( 'ContrastChecker', () => {
 				textColor={ 'rgba(0,0,0,0.9)' }
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -399,7 +399,7 @@ describe( 'ContrastChecker', () => {
 				linkColor={ 'rgba(0,0,0,0.9)' }
 				textColor={ textColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -420,7 +420,7 @@ describe( 'ContrastChecker', () => {
 				textColor={ textColor }
 				linkColor={ linkColor }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -437,7 +437,7 @@ describe( 'ContrastChecker', () => {
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -454,7 +454,7 @@ describe( 'ContrastChecker', () => {
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -477,7 +477,7 @@ describe( 'ContrastChecker', () => {
 				isLargeText={ isLargeText }
 				fallbackBackgroundColor={ fallbackBackgroundColor }
 				fallbackTextColor={ fallbackTextColor }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 
@@ -498,7 +498,7 @@ describe( 'ContrastChecker', () => {
 				linkColor={ 'rgba(0,0,0,0.7)' }
 				textColor={ 'rgba(0,0,0,0.7)' }
 				isLargeText={ isLargeText }
-				enableAlphaChecker={ true }
+				enableAlphaChecker
 			/>
 		);
 

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

@@ -117,7 +117,6 @@ function NonDefaultControls( { format, onChange } ) {
 	return (
 		<VStack>
 			<CustomSelectControl
-				__nextUnconstrainedWidth
 				label={ __( 'Choose a format' ) }
 				options={ [ ...suggestedOptions, customOption ] }
 				value={

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

@@ -29,12 +29,15 @@
 	// In "constrained" layout containers, the first and last paragraphs have their margins zeroed out.
 	// In the case of this appender, it needs to apply those same rules to avoid layout shifts.
 	// Such shifts happen when the bottom margin of the Title block has been set to less than the default 1em margin of paragraphs.
-	:where(body .is-layout-constrained) & {
+	:where(body .is-layout-constrained) &,
+	:where(.wp-site-blocks) & {
 		> :first-child:first-child {
 			margin-block-start: 0;
+			margin-block-end: 0;
 		}
 
-		// Since this particular appender will only ever appear on an entirely empty document, we don't account for last-child.
+		// Since this appender will only ever appear on an entirely empty document, we don't account for last-child.
+		// This is also because it will never be the last child, the block inserter that sits in this appender is the last child.
 	}
 
 	// Dropzone.

package/src/components/font-appearance-control/index.js

@@ -215,7 +215,6 @@ export default function FontAppearanceControl( props ) {
 				onChange={ ( { selectedItem } ) =>
 					onChange( selectedItem.style )
 				}
-				__nextUnconstrainedWidth
 			/>
 		)
 	);

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

@@ -251,13 +251,13 @@ export default function BorderPanel( {
 				>
 					<BorderBoxControl
 						colors={ colors }
-						enableAlpha={ true }
+						enableAlpha
 						enableStyle={ showBorderStyle }
 						onChange={ onBorderChange }
 						popoverOffset={ 40 }
 						popoverPlacement="left-start"
 						value={ border }
-						__experimentalIsRenderedInSidebar={ true }
+						__experimentalIsRenderedInSidebar
 						size={ '__unstable-large' }
 						hideLabelFromVision={ ! hasShadowControl }
 						label={ __( 'Border' ) }

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

@@ -259,7 +259,7 @@ function ColorPanelDropdown( {
 								/>
 							) }
 							{ tabs.length > 1 && (
-								<Tabs initialTabId={ currentTab?.key }>
+								<Tabs defaultTabId={ currentTab?.key }>
 									<Tabs.TabList>
 										{ tabs.map( ( tab ) => (
 											<Tabs.Tab

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

@@ -92,9 +92,11 @@ function useHasChildLayout( settings ) {
 	} = settings?.parentLayout ?? {};
 
 	const support =
-		( defaultParentLayoutType === 'flex' || parentLayoutType === 'flex' ) &&
+		( defaultParentLayoutType === 'flex' ||
+			parentLayoutType === 'flex' ||
+			defaultParentLayoutType === 'grid' ||
+			parentLayoutType === 'grid' ) &&
 		allowSizingOnChildren;
-
 	return !! settings?.layout && support;
 }
 
@@ -395,13 +397,19 @@ export default function DimensionsPanel( {
 	const showChildLayoutControl = useHasChildLayout( settings );
 	const childLayout = inheritedValue?.layout;
 	const { orientation = 'horizontal' } = settings?.parentLayout ?? {};
-	const childLayoutOrientationLabel =
+	const {
+		type: parentType,
+		default: { type: defaultParentType = 'default' } = {},
+	} = settings?.parentLayout ?? {};
+	const parentLayoutType = parentType || defaultParentType;
+	const flexResetLabel =
 		orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+	const childLayoutResetLabel =
+		parentLayoutType === 'flex' ? flexResetLabel : __( 'Grid spans' );
 	const setChildLayout = ( newChildLayout ) => {
 		onChange( {
 			...value,
 			layout: {
-				...value?.layout,
 				...newChildLayout,
 			},
 		} );
@@ -410,6 +418,8 @@ export default function DimensionsPanel( {
 		setChildLayout( {
 			selfStretch: undefined,
 			flexSize: undefined,
+			columnSpan: undefined,
+			rowSpan: undefined,
 		} );
 	};
 	const hasChildLayoutValue = () => !! value?.layout;
@@ -423,6 +433,8 @@ export default function DimensionsPanel( {
 				wideSize: undefined,
 				selfStretch: undefined,
 				flexSize: undefined,
+				columnSpan: undefined,
+				rowSpan: undefined,
 			} ),
 			spacing: {
 				...previousValue?.spacing,
@@ -637,6 +649,26 @@ export default function DimensionsPanel( {
 					) }
 				</ToolsPanelItem>
 			) }
+			{ showChildLayoutControl && (
+				<VStack
+					as={ ToolsPanelItem }
+					spacing={ 2 }
+					hasValue={ hasChildLayoutValue }
+					label={ childLayoutResetLabel }
+					onDeselect={ resetChildLayoutValue }
+					isShownByDefault={
+						defaultControls.childLayout ??
+						DEFAULT_CONTROLS.childLayout
+					}
+					panelId={ panelId }
+				>
+					<ChildLayoutControl
+						value={ childLayout }
+						onChange={ setChildLayout }
+						parentLayout={ settings?.parentLayout }
+					/>
+				</VStack>
+			) }
 			{ showMinHeightControl && (
 				<ToolsPanelItem
 					hasValue={ hasMinHeightValue }
@@ -666,26 +698,6 @@ export default function DimensionsPanel( {
 					}
 				/>
 			) }
-			{ showChildLayoutControl && (
-				<VStack
-					as={ ToolsPanelItem }
-					spacing={ 2 }
-					hasValue={ hasChildLayoutValue }
-					label={ childLayoutOrientationLabel }
-					onDeselect={ resetChildLayoutValue }
-					isShownByDefault={
-						defaultControls.childLayout ??
-						DEFAULT_CONTROLS.childLayout
-					}
-					panelId={ panelId }
-				>
-					<ChildLayoutControl
-						value={ childLayout }
-						onChange={ setChildLayout }
-						parentLayout={ settings?.parentLayout }
-					/>
-				</VStack>
-			) }
 		</Wrapper>
 	);
 }

package/src/components/global-styles/image-settings-panel.js

@@ -62,7 +62,7 @@ export default function ImageSettingsPanel( {
 					hasValue={ () => !! value?.lightbox }
 					label={ __( 'Expand on click' ) }
 					onDeselect={ resetLightbox }
-					isShownByDefault={ true }
+					isShownByDefault
 					panelId={ panelId }
 				>
 					<ToggleControl