@wordpress/block-editor 15.22.1 → 16.0.0

package/src/layouts/constrained.js

@@ -30,6 +30,9 @@ import { BlockControls, JustifyContentControl } from '../components';
 import { cleanEmptyObject, shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
 
+const GLOBAL_CONTENT_SIZE = 'var(--wp--style--global--content-size, none)';
+const GLOBAL_WIDE_SIZE = 'var(--wp--style--global--wide-size, none)';
+
 export default {
 	name: 'constrained',
 	label: __( 'Constrained' ),
@@ -112,24 +115,25 @@ export default {
 							panelId={ clientId }
 						>
 							<UnitControl
-								__next40pxDefaultSize
 								label={ __( 'Content width' ) }
 								labelPosition="top"
-								value={ contentSize || wideSize || '' }
+								value={
+									contentSize === null
+										? ''
+										: contentSize || wideSize || ''
+								}
 								onChange={ ( nextWidth ) => {
 									nextWidth =
 										0 > parseFloat( nextWidth )
 											? '0'
 											: nextWidth;
-									onChange(
-										cleanEmptyObject( {
-											...layout,
-											contentSize:
-												nextWidth !== ''
-													? nextWidth
-													: undefined,
-										} )
-									);
+									onChange( {
+										...layout,
+										contentSize:
+											nextWidth !== ''
+												? nextWidth
+												: undefined,
+									} );
 								} }
 								units={ units }
 								prefix={
@@ -146,24 +150,25 @@ export default {
 							panelId={ clientId }
 						>
 							<UnitControl
-								__next40pxDefaultSize
 								label={ __( 'Wide width' ) }
 								labelPosition="top"
-								value={ wideSize || contentSize || '' }
+								value={
+									wideSize === null
+										? ''
+										: wideSize || contentSize || ''
+								}
 								onChange={ ( nextWidth ) => {
 									nextWidth =
 										0 > parseFloat( nextWidth )
 											? '0'
 											: nextWidth;
-									onChange(
-										cleanEmptyObject( {
-											...layout,
-											wideSize:
-												nextWidth !== ''
-													? nextWidth
-													: undefined,
-										} )
-									);
+									onChange( {
+										...layout,
+										wideSize:
+											nextWidth !== ''
+												? nextWidth
+												: undefined,
+									} );
 								} }
 								units={ units }
 								prefix={
@@ -188,7 +193,6 @@ export default {
 						panelId={ clientId }
 					>
 						<ToggleGroupControl
-							__next40pxDefaultSize
 							label={ __( 'Justification' ) }
 							value={ justifyContent }
 							onChange={ onJustificationChange }
@@ -215,6 +219,7 @@ export default {
 		layout = {},
 		onChange,
 		layoutBlockSupport,
+		controlsGroup = 'block',
 	} ) {
 		const { allowJustification = true } = layoutBlockSupport;
 
@@ -222,7 +227,10 @@ export default {
 			return null;
 		}
 		return (
-			<BlockControls group="block" __experimentalShareWithChildBlocks>
+			<BlockControls
+				group={ controlsGroup }
+				__experimentalShareWithChildBlocks
+			>
 				<DefaultLayoutJustifyContentControl
 					layout={ layout }
 					onChange={ onChange }
@@ -273,12 +281,30 @@ export default {
 
 		const hasJustificationOverride =
 			hasViewportOverrides && hasViewportOverride( 'justifyContent' );
+		const hasContentSizeOverride =
+			hasViewportOverrides && hasViewportOverride( 'contentSize' );
+		const hasWideSizeOverride =
+			hasViewportOverrides && hasViewportOverride( 'wideSize' );
 		const shouldOutputConstrainedSizes =
 			! hasViewportOverrides ||
-			hasViewportOverride( 'contentSize' ) ||
-			hasViewportOverride( 'wideSize' );
+			hasContentSizeOverride ||
+			hasWideSizeOverride;
+		const isResettingConstrainedSizes =
+			hasViewportOverrides &&
+			( ( hasContentSizeOverride && ! contentSize ) ||
+				( hasWideSizeOverride && ! wideSize ) );
+		const contentMaxWidth =
+			contentSize ||
+			( wideSize && ! hasContentSizeOverride
+				? wideSize
+				: GLOBAL_CONTENT_SIZE );
+		const wideMaxWidth =
+			wideSize ||
+			( contentSize && ! hasWideSizeOverride
+				? contentSize
+				: GLOBAL_WIDE_SIZE );
 		const constrainedSizeDeclarations = [
-			`max-width: ${ contentSize ?? wideSize }`,
+			`max-width: ${ contentMaxWidth }`,
 		];
 		if ( ! hasViewportOverrides || hasJustificationOverride ) {
 			constrainedSizeDeclarations.push(
@@ -287,7 +313,8 @@ export default {
 			);
 		}
 		let output =
-			shouldOutputConstrainedSizes && ( !! contentSize || !! wideSize )
+			shouldOutputConstrainedSizes &&
+			( !! contentSize || !! wideSize || isResettingConstrainedSizes )
 				? `
 						${ appendSelectors(
 							selector,
@@ -296,7 +323,7 @@ export default {
 						${ constrainedSizeDeclarations.join( '; ' ) };
 					}
 					${ appendSelectors( selector, '> .alignwide' ) }  {
-						max-width: ${ wideSize ?? contentSize };
+						max-width: ${ wideMaxWidth };
 					}
 					${ appendSelectors( selector, '> .alignfull' ) } {
 						max-width: none;

package/src/layouts/flex.js

@@ -240,6 +240,7 @@ export default {
 		layout = {},
 		onChange,
 		layoutBlockSupport,
+		controlsGroup = 'block',
 	} ) {
 		const { allowVerticalAlignment = true, allowJustification = true } =
 			layoutBlockSupport;
@@ -249,7 +250,10 @@ export default {
 		}
 
 		return (
-			<BlockControls group="block" __experimentalShareWithChildBlocks>
+			<BlockControls
+				group={ controlsGroup }
+				__experimentalShareWithChildBlocks
+			>
 				{ allowJustification && (
 					<FlexLayoutJustifyContentControl
 						layout={ layout }
@@ -437,7 +441,6 @@ function FlexLayoutVerticalAlignmentControl( {
 
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Alignment' ) }
 			onChange={ onVerticalAlignmentChange }
 			value={ verticalAlignment }
@@ -524,7 +527,6 @@ function FlexLayoutJustifyContentControl( {
 
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Justification' ) }
 			value={ justifyContent }
 			onChange={ onJustificationChange }
@@ -568,7 +570,6 @@ function OrientationControl( { layout, onChange } ) {
 	} = layout;
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			className="block-editor-hooks__flex-layout-orientation-controls"
 			label={ __( 'Orientation' ) }
 			value={ orientation }

package/src/layouts/grid.js

@@ -8,6 +8,7 @@ import {
 	Flex,
 	FlexItem,
 	RangeControl,
+	ToggleControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
@@ -81,6 +82,9 @@ export default {
 		const showMinWidthControl =
 			! layout?.isManualPlacement ||
 			window.__experimentalEnableGridInteractivity;
+		// Auto-fit/auto-fill only applies when grid items are placed
+		// automatically, so the control is irrelevant in manual placement mode.
+		const showFillControl = ! layout?.isManualPlacement;
 		const defaultColumnCount = layout.isManualPlacement ? 3 : undefined;
 		const hasLayoutValue = ( key, defaultValue ) =>
 			( layout?.[ key ] ?? defaultValue ) !==
@@ -92,6 +96,7 @@ export default {
 			hasLayoutValue( 'rowCount' );
 		const hasMinimumColumnWidthValue = () =>
 			hasLayoutValue( 'minimumColumnWidth' );
+		const hasFillValue = () => hasLayoutValue( 'autoFit', false );
 		const resetGridType = () =>
 			onChange(
 				cleanEmptyObject( {
@@ -116,6 +121,13 @@ export default {
 					minimumColumnWidth: resetLayout?.minimumColumnWidth,
 				} )
 			);
+		const resetFill = () =>
+			onChange(
+				cleanEmptyObject( {
+					...layout,
+					autoFit: resetLayout?.autoFit,
+				} )
+			);
 
 		return (
 			<>
@@ -162,6 +174,19 @@ export default {
 						/>
 					</ToolsPanelItem>
 				) }
+				{ showFillControl && (
+					<ToolsPanelItem
+						label={ __( 'Fill available space' ) }
+						hasValue={ hasFillValue }
+						onDeselect={ resetFill }
+						panelId={ clientId }
+					>
+						<GridLayoutFillControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					</ToolsPanelItem>
+				) }
 			</>
 		);
 	},
@@ -188,8 +213,13 @@ export default {
 			minimumColumnWidth = null,
 			columnCount = null,
 			rowCount = null,
+			autoFit = false,
 		} = effectiveLayout;
 
+		// When enabled, columns stretch to fill the available space using
+		// `auto-fit`; otherwise empty tracks are preserved with `auto-fill`.
+		const autoPlacement = autoFit ? 'auto-fit' : 'auto-fill';
+
 		// Check that the grid layout attributes are of the correct type, so that we don't accidentally
 		// write code that stores a string attribute instead of a number.
 		if ( process.env.NODE_ENV === 'development' ) {
@@ -205,6 +235,9 @@ export default {
 			if ( rowCount && typeof rowCount !== 'number' ) {
 				throw new Error( 'rowCount must be a number' );
 			}
+			if ( autoFit && typeof autoFit !== 'boolean' ) {
+				throw new Error( 'autoFit must be a boolean' );
+			}
 		}
 
 		// Use the global blockGap value as fallback when available.
@@ -236,6 +269,7 @@ export default {
 			! hasViewportOverrides ||
 			hasViewportOverride( 'minimumColumnWidth' ) ||
 			hasViewportOverride( 'columnCount' ) ||
+			hasViewportOverride( 'autoFit' ) ||
 			( hasBlockGapOverride && minimumColumnWidth && columnCount > 0 );
 		const shouldOutputGridRows =
 			( ! hasViewportOverrides || hasViewportOverride( 'rowCount' ) ) &&
@@ -256,7 +290,7 @@ export default {
 				columnCount - 1
 			}) ) / ${ columnCount })`;
 			rules.push(
-				`grid-template-columns: repeat(auto-fill, minmax(${ maxValue }, 1fr))`
+				`grid-template-columns: repeat(${ autoPlacement }, minmax(${ maxValue }, 1fr))`
 			);
 		} else if ( shouldOutputGridColumns && columnCount ) {
 			rules.push(
@@ -264,7 +298,7 @@ export default {
 			);
 		} else if ( shouldOutputGridColumns ) {
 			rules.push(
-				`grid-template-columns: repeat(auto-fill, minmax(min(${
+				`grid-template-columns: repeat(${ autoPlacement }, minmax(min(${
 					minimumColumnWidth || '12rem'
 				}, 100%), 1fr))`
 			);
@@ -357,7 +391,6 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 			<Flex gap={ 4 }>
 				<FlexItem isBlock>
 					<UnitControl
-						size="__unstable-large"
 						onChange={ ( newValue ) => {
 							onChange( {
 								...layout,
@@ -375,7 +408,6 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 				</FlexItem>
 				<FlexItem isBlock>
 					<RangeControl
-						__next40pxDefaultSize
 						onChange={ handleSliderChange }
 						value={ quantity || 0 }
 						min={ 0 }
@@ -420,7 +452,6 @@ function GridLayoutColumnsAndRowsControl( {
 				<Flex gap={ 4 }>
 					<FlexItem isBlock>
 						<NumberControl
-							size="__unstable-large"
 							onChange={ ( value ) => {
 								// Allow unsetting the column count when in auto mode.
 								const defaultNewColumnCount = isManualPlacement
@@ -435,7 +466,7 @@ function GridLayoutColumnsAndRowsControl( {
 									columnCount: newColumnCount,
 								} );
 							} }
-							value={ columnCount }
+							value={ columnCount ?? '' }
 							min={ 1 }
 							label={ __( 'Columns' ) }
 							hideLabelFromVision={ ! isManualPlacement }
@@ -445,7 +476,6 @@ function GridLayoutColumnsAndRowsControl( {
 					<FlexItem isBlock>
 						{ allowSizingOnChildren && isManualPlacement ? (
 							<NumberControl
-								size="__unstable-large"
 								onChange={ ( value ) => {
 									// Don't allow unsetting the row count.
 									const newRowCount =
@@ -463,7 +493,6 @@ function GridLayoutColumnsAndRowsControl( {
 							/>
 						) : (
 							<RangeControl
-								__next40pxDefaultSize
 								value={ columnCount ?? 1 }
 								onChange={ ( value ) =>
 									onChange( {
@@ -488,6 +517,28 @@ function GridLayoutColumnsAndRowsControl( {
 	);
 }
 
+// Enables stretching grid columns to fill the available space (auto-fit)
+// instead of leaving empty tracks at the end of a row (auto-fill).
+function GridLayoutFillControl( { layout, onChange } ) {
+	const { autoFit = false } = layout;
+
+	return (
+		<ToggleControl
+			label={ __( 'Fill available space' ) }
+			help={ __(
+				'Stretch columns to fill the available space, instead of leaving gaps when there are too few items to fill a row.'
+			) }
+			checked={ autoFit }
+			onChange={ ( value ) =>
+				onChange( {
+					...layout,
+					autoFit: value,
+				} )
+			}
+		/>
+	);
+}
+
 // Enables switching between grid types
 function GridLayoutTypeControl( { layout, onChange } ) {
 	const { columnCount, rowCount, minimumColumnWidth, isManualPlacement } =
@@ -535,7 +586,6 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 
 	return (
 		<ToggleGroupControl
-			__next40pxDefaultSize
 			label={ __( 'Grid item position' ) }
 			value={ gridPlacement }
 			onChange={ onChangeType }

package/src/layouts/test/constrained.js

@@ -1,8 +1,35 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import constrained from '../constrained';
 
+const ConstrainedLayoutInspectorControls = constrained.inspectorControls;
+const PANEL_ID = 'test-panel';
+
+function renderInspectorControls( props = {} ) {
+	return render(
+		<ToolsPanel label="Layout" resetAll={ jest.fn() } panelId={ PANEL_ID }>
+			<ConstrainedLayoutInspectorControls
+				clientId={ PANEL_ID }
+				layout={ {} }
+				onChange={ jest.fn() }
+				{ ...props }
+			/>
+		</ToolsPanel>
+	);
+}
+
 describe( 'getLayoutStyle', () => {
 	it( 'should return an empty string if no non-default params are provided', () => {
 		const expected = '';
@@ -18,4 +45,68 @@ describe( 'getLayoutStyle', () => {
 
 		expect( result ).toBe( expected );
 	} );
+
+	it( 'should reset constrained sizes when content width is unset in a viewport', () => {
+		const result = constrained.getLayoutStyle( {
+			selector: '.my-container',
+			layout: { type: 'constrained', contentSize: '800px' },
+			viewportOverrides: { contentSize: null },
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toContain(
+			'max-width: var(--wp--style--global--content-size, none);'
+		);
+		expect( result ).toContain(
+			'max-width: var(--wp--style--global--wide-size, none);'
+		);
+	} );
+} );
+
+describe( 'ConstrainedLayoutInspectorControls', () => {
+	it( 'renders an unset content width as an empty control value', () => {
+		renderInspectorControls( {
+			layout: { type: 'constrained', contentSize: null },
+			resetLayout: { type: 'constrained', contentSize: '800px' },
+		} );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Content width' } )
+		).toHaveDisplayValue( '' );
+	} );
+
+	it.each( [
+		[ 'Content width', 'contentSize' ],
+		[ 'Wide width', 'wideSize' ],
+	] )(
+		'preserves a cleared %s value for viewport layout overrides',
+		async ( label, layoutKey ) => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+			renderInspectorControls( {
+				layout: { type: 'constrained', [ layoutKey ]: '800px' },
+				resetLayout: { type: 'constrained', [ layoutKey ]: '800px' },
+				onChange,
+			} );
+
+			await user.click(
+				screen.getByRole( 'button', { name: /Layout options/i } )
+			);
+			await user.click(
+				screen.getByRole( 'menuitemcheckbox', {
+					name: `Show ${ label }`,
+				} )
+			);
+			await user.clear(
+				screen.getByRole( 'spinbutton', { name: label } )
+			);
+
+			const nextLayout = onChange.mock.lastCall?.[ 0 ];
+			expect( Object.hasOwn( nextLayout, layoutKey ) ).toBe( true );
+			expect( nextLayout[ layoutKey ] ).toBeUndefined();
+		}
+	);
 } );

package/src/layouts/test/grid.js

@@ -1,8 +1,34 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
 import grid from '../grid';
 
+const GridLayoutInspectorControls = grid.inspectorControls;
+const PANEL_ID = 'test-panel';
+
+function renderInspectorControls( props = {} ) {
+	return render(
+		<ToolsPanel label="Layout" resetAll={ jest.fn() } panelId={ PANEL_ID }>
+			<GridLayoutInspectorControls
+				clientId={ PANEL_ID }
+				layout={ {} }
+				onChange={ jest.fn() }
+				{ ...props }
+			/>
+		</ToolsPanel>
+	);
+}
+
 describe( 'getLayoutStyle', () => {
 	it( 'should return only `grid-template-columns` and `container-type` properties if no non-default params are provided', () => {
 		const expected = `.my-container { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
@@ -46,4 +72,49 @@ describe( 'getLayoutStyle', () => {
 
 		expect( result ).toBe( expected );
 	} );
+	it( 'should use `auto-fit` instead of `auto-fill` when autoFit is enabled', () => {
+		const expected = `.my-container { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); container-type: inline-size; }`;
+
+		const result = grid.getLayoutStyle( {
+			selector: '.my-container',
+			layout: { autoFit: true },
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+	it( 'should use `auto-fit` with max() function when autoFit is enabled and both minimumColumnWidth and columnCount are provided', () => {
+		const expected = `.my-container { grid-template-columns: repeat(auto-fit, minmax(max(min( 12rem, 100%), ( 100% - (1.2rem*2) ) / 3), 1fr)); container-type: inline-size; }`;
+
+		const result = grid.getLayoutStyle( {
+			selector: '.my-container',
+			layout: {
+				minimumColumnWidth: '12rem',
+				columnCount: 3,
+				autoFit: true,
+			},
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
+		expect( result ).toBe( expected );
+	} );
+} );
+
+describe( 'GridLayoutInspectorControls', () => {
+	it( 'renders an unset column count as an empty control value', () => {
+		renderInspectorControls( {
+			layout: { type: 'grid', columnCount: null },
+			resetLayout: { type: 'grid', columnCount: 3 },
+		} );
+
+		expect(
+			screen.getByRole( 'spinbutton', { name: 'Columns' } )
+		).toHaveDisplayValue( '' );
+	} );
 } );

package/src/private-apis.js

@@ -52,11 +52,11 @@ import {
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
-	onViewportStateChangeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	mediaSideloadFromUrlKey,
 	openMediaEditorModalKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
@@ -78,6 +78,7 @@ import { LinkPicker } from './components/link-picker';
 import useRemoteUrlData from './components/link-control/use-rich-url-data';
 import { PrivateBlockContext } from './components/block-list/private-block-context';
 import useListViewPanelState from './components/use-list-view-panel-state';
+import InnerContent from './components/inner-content';
 import {
 	isHashLink,
 	isRelativePath,
@@ -141,11 +142,11 @@ lock( privateApis, {
 	mediaEditKey,
 	getMediaSelectKey,
 	deviceTypeKey,
-	onViewportStateChangeKey,
 	isIsolatedEditorKey,
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	mediaSideloadFromUrlKey,
 	openMediaEditorModalKey,
 	useBlockElement,
 	useBlockElementRef,
@@ -155,4 +156,5 @@ lock( privateApis, {
 	useListViewPanelState,
 	isHashLink,
 	isRelativePath,
+	InnerContent,
 } );