@wordpress/block-editor 15.23.0 → 16.0.0

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

@@ -56,6 +56,7 @@ import {
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	mediaSideloadFromUrlKey,
 	openMediaEditorModalKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
@@ -77,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,
@@ -144,6 +146,7 @@ lock( privateApis, {
 	isNavigationOverlayContextKey,
 	isNavigationPostEditorKey,
 	mediaUploadOnSuccessKey,
+	mediaSideloadFromUrlKey,
 	openMediaEditorModalKey,
 	useBlockElement,
 	useBlockElementRef,
@@ -153,4 +156,5 @@ lock( privateApis, {
 	useListViewPanelState,
 	isHashLink,
 	isRelativePath,
+	InnerContent,
 } );

package/src/store/actions.js

@@ -4,7 +4,7 @@
  */
 import {
 	cloneBlock,
-	__experimentalCloneSanitizedBlock,
+	cloneSanitizedBlock,
 	createBlock,
 	doBlocksMatchTemplate,
 	getBlockType,
@@ -1755,7 +1755,7 @@ export const duplicateBlocks =
 			clientIdsArray[ clientIdsArray.length - 1 ]
 		);
 		const clonedBlocks = blocks.map( ( block ) =>
-			__experimentalCloneSanitizedBlock( block )
+			cloneSanitizedBlock( block )
 		);
 		dispatch.insertBlocks(
 			clonedBlocks,
@@ -1935,6 +1935,7 @@ export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
  *
  * @typedef {Object} InserterMediaRequest
  * @property {number} per_page How many items to fetch per page.
+ * @property {number} [page]   Which page of results to fetch. Defaults to the first page.
  * @property {string} search   The search term to use for filtering the results.
  */
 
@@ -1953,6 +1954,17 @@ export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
  * @property {string}        [caption]    The caption of the media item.
  */
 
+/**
+ * Interface for paginated inserter media responses. A media category's `fetch`
+ * may return this instead of a plain array to opt into pagination, in which case
+ * the media tab renders paging controls for the category.
+ *
+ * @typedef {Object} InserterMediaResponse
+ * @property {InserterMediaItem[]} mediaItems The media items for the requested page.
+ * @property {number}              totalItems The total number of items across all pages.
+ * @property {number}              totalPages The total number of pages available.
+ */
+
 /**
  * Registers a new inserter media category. Once registered, the media category is
  * available in the inserter's media tab.
@@ -1966,6 +1978,7 @@ export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
  * _Properties_
  *
  * - _per_page_ `number`: How many items to fetch per page.
+ * - _page_ `[number]`: Which page of results to fetch. Defaults to the first page.
  * - _search_ `string`: The search term to use for filtering the results.
  *
  * _Type Definition_
@@ -1984,7 +1997,19 @@ export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
  * - _alt_ `[string]`: The alt text of the media item.
  * - _caption_ `[string]`: The caption of the media item.
  *
- * @param    {InserterMediaCategory}                                  category                       The inserter media category to register.
+ * _Type Definition_
+ *
+ * - _InserterMediaResponse_ `Object`: Interface for paginated inserter media responses. A media
+ * category's `fetch` may return this instead of a plain array to opt into pagination, in which
+ * case the media tab renders paging controls for the category.
+ *
+ * _Properties_
+ *
+ * - _mediaItems_ `InserterMediaItem[]`: The media items for the requested page.
+ * - _totalItems_ `number`: The total number of items across all pages.
+ * - _totalPages_ `number`: The total number of pages available.
+ *
+ * @param    {InserterMediaCategory}                                                        category                       The inserter media category to register.
  *
  * @example
  * ```js
@@ -2041,16 +2066,20 @@ export function __unstableSetTemporarilyEditingAsBlocks( clientId ) {
  * ```
  *
  * @typedef {Object} InserterMediaCategory Interface for inserter media category.
- * @property {string}                                                 name                           The name of the media category, that should be unique among all media categories.
- * @property {Object}                                                 labels                         Labels for the media category.
- * @property {string}                                                 labels.name                    General name of the media category. It's used in the inserter media items list.
- * @property {string}                                                 [labels.search_items='Search'] Label for searching items. Default is ‘Search Posts’ / ‘Search Pages’.
- * @property {('image'|'audio'|'video')}                              mediaType                      The media type of the media category.
- * @property {(InserterMediaRequest) => Promise<InserterMediaItem[]>} fetch                          The function to fetch media items for the category.
- * @property {(InserterMediaItem) => string}                          [getReportUrl]                 If the media category supports reporting media items, this function should return
- *                                                                                                   the report url for the media item. It accepts the `InserterMediaItem` as an argument.
- * @property {boolean}                                                [isExternalResource]           If the media category is an external resource, this should be set to true.
- *                                                                                                   This is used to avoid making a request to the external resource when the user
+ * @property {string}                                                                       name                           The name of the media category, that should be unique among all media categories.
+ * @property {Object}                                                                       labels                         Labels for the media category.
+ * @property {string}                                                                       labels.name                    General name of the media category. It's used in the inserter media items list.
+ * @property {string}                                                                       [labels.search_items='Search'] Label for searching items. Default is ‘Search Posts’ / ‘Search Pages’.
+ * @property {('image'|'audio'|'video')}                                                    mediaType                      The media type of the media category.
+ * @property {(InserterMediaRequest) => Promise<InserterMediaItem[]|InserterMediaResponse>} fetch                          The function to fetch media items for the category. Returning an
+ *                                                                                                                         `InserterMediaResponse` instead of a plain array opts the category into
+ *                                                                                                                         pagination.
+ * @property {(InserterMediaItem) => string}                                                [getReportUrl]                 If the media category supports reporting media items, this function should return
+ *                                                                                                                         the report url for the media item. It accepts the `InserterMediaItem` as an argument.
+ * @property {boolean}                                                                      [isExternalResource]           If the media category is an external resource, this should be set to true.
+ *                                                                                                                         This is used to avoid making a request to the external resource when checking
+ *                                                                                                                         whether the category has any media items to display in the media tab.
+ * @property {string}                                                                       [emptyMessage]                 Optional message shown in place of the generic "No results found." when the source has no items and there is no active search. Providing it also keeps the source in the tab list while empty, so the message stays reachable.
  */
 export const registerInserterMediaCategory =
 	( category ) =>
@@ -2079,7 +2108,7 @@ export const registerInserterMediaCategory =
 		}
 		if ( ! category.fetch || typeof category.fetch !== 'function' ) {
 			console.error(
-				'Category should have a `fetch` function defined with the following signature `(InserterMediaRequest) => Promise<InserterMediaItem[]>`.'
+				'Category should have a `fetch` function defined with the following signature `(InserterMediaRequest) => Promise<InserterMediaItem[]|InserterMediaResponse>`.'
 			);
 			return;
 		}

package/src/store/private-keys.js

@@ -15,4 +15,5 @@ export const isNavigationOverlayContextKey = Symbol(
 );
 export const isNavigationPostEditorKey = Symbol( 'isNavigationPostEditor' );
 export const mediaUploadOnSuccessKey = Symbol( 'mediaUploadOnSuccess' );
+export const mediaSideloadFromUrlKey = Symbol( 'mediaSideloadFromUrl' );
 export const openMediaEditorModalKey = Symbol( 'openMediaEditorModal' );