@wordpress/block-editor 15.9.1-next.8b30e05b0.0 → 15.10.0

package/src/layouts/grid.js

@@ -72,20 +72,20 @@ export default {
 	} ) {
 		const { allowSizingOnChildren = false } = layoutBlockSupport;
 
-		// In the experiment we want to also show column control in Auto mode, and
-		// the minimum width control in Manual mode.
-		const showColumnsControl =
-			window.__experimentalEnableGridInteractivity ||
-			!! layout?.columnCount;
+		// Always show both column and minimum width controls in Auto mode.
+		// Manual mode (with isManualPlacement) is only available behind the experiment flag.
+		const showColumnsControl = true;
 		const showMinWidthControl =
-			window.__experimentalEnableGridInteractivity ||
-			! layout?.columnCount;
+			! layout?.isManualPlacement ||
+			window.__experimentalEnableGridInteractivity;
 		return (
 			<>
-				<GridLayoutTypeControl
-					layout={ layout }
-					onChange={ onChange }
-				/>
+				{ window.__experimentalEnableGridInteractivity && (
+					<GridLayoutTypeControl
+						layout={ layout }
+						onChange={ onChange }
+					/>
+				) }
 				<VStack spacing={ 4 }>
 					{ showColumnsControl && (
 						<GridLayoutColumnsAndRowsControl
@@ -243,7 +243,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 	return (
 		<fieldset className="block-editor-hooks__grid-layout-minimum-width-control">
 			<BaseControl.VisualLabel as="legend">
-				{ __( 'Minimum column width' ) }
+				{ __( 'Min. column width' ) }
 			</BaseControl.VisualLabel>
 			<Flex gap={ 4 }>
 				<FlexItem isBlock>
@@ -278,6 +278,11 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 					/>
 				</FlexItem>
 			</Flex>
+			<p className="components-base-control__help">
+				{ __(
+					'Columns will wrap to fewer per row when they can no longer maintain the minimum width.'
+				) }
+			</p>
 		</fieldset>
 	);
 }
@@ -288,10 +293,8 @@ function GridLayoutColumnsAndRowsControl( {
 	onChange,
 	allowSizingOnChildren,
 } ) {
-	// If the grid interactivity experiment is enabled, allow unsetting the column count.
-	const defaultColumnCount = window.__experimentalEnableGridInteractivity
-		? undefined
-		: 3;
+	// Allow unsetting the column count in Auto mode.
+	const defaultColumnCount = undefined;
 	const {
 		columnCount = defaultColumnCount,
 		rowCount,
@@ -301,10 +304,9 @@ function GridLayoutColumnsAndRowsControl( {
 	return (
 		<>
 			<fieldset className="block-editor-hooks__grid-layout-columns-and-rows-controls">
-				{ ( ! window.__experimentalEnableGridInteractivity ||
-					! isManualPlacement ) && (
+				{ ! isManualPlacement && (
 					<BaseControl.VisualLabel as="legend">
-						{ __( 'Columns' ) }
+						{ __( 'Max. columns' ) }
 					</BaseControl.VisualLabel>
 				) }
 				<Flex gap={ 4 }>
@@ -312,46 +314,28 @@ function GridLayoutColumnsAndRowsControl( {
 						<NumberControl
 							size="__unstable-large"
 							onChange={ ( value ) => {
-								if (
-									window.__experimentalEnableGridInteractivity
-								) {
-									// Allow unsetting the column count when in auto mode.
-									const defaultNewColumnCount =
-										isManualPlacement ? 1 : undefined;
-									const newColumnCount =
-										value === '' || value === '0'
-											? defaultNewColumnCount
-											: parseInt( value, 10 );
-									onChange( {
-										...layout,
-										columnCount: newColumnCount,
-									} );
-								} else {
-									// Don't allow unsetting the column count.
-									const newColumnCount =
-										value === '' || value === '0'
-											? 1
-											: parseInt( value, 10 );
-									onChange( {
-										...layout,
-										columnCount: newColumnCount,
-									} );
-								}
+								// Allow unsetting the column count when in auto mode.
+								const defaultNewColumnCount = isManualPlacement
+									? 1
+									: undefined;
+								const newColumnCount =
+									value === '' || value === '0'
+										? defaultNewColumnCount
+										: parseInt( value, 10 );
+								onChange( {
+									...layout,
+									columnCount: newColumnCount,
+								} );
 							} }
 							value={ columnCount }
 							min={ 1 }
 							label={ __( 'Columns' ) }
-							hideLabelFromVision={
-								! window.__experimentalEnableGridInteractivity ||
-								! isManualPlacement
-							}
+							hideLabelFromVision={ ! isManualPlacement }
 						/>
 					</FlexItem>
 
 					<FlexItem isBlock>
-						{ window.__experimentalEnableGridInteractivity &&
-						allowSizingOnChildren &&
-						isManualPlacement ? (
+						{ allowSizingOnChildren && isManualPlacement ? (
 							<NumberControl
 								size="__unstable-large"
 								onChange={ ( value ) => {
@@ -414,11 +398,7 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 		minimumColumnWidth || '12rem'
 	);
 
-	const gridPlacement =
-		isManualPlacement ||
-		( !! columnCount && ! window.__experimentalEnableGridInteractivity )
-			? 'manual'
-			: 'auto';
+	const gridPlacement = isManualPlacement ? 'manual' : 'auto';
 
 	const onChangeType = ( value ) => {
 		if ( value === 'manual' ) {
@@ -429,17 +409,9 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 		}
 		onChange( {
 			...layout,
-			columnCount: value === 'manual' ? tempColumnCount : null,
-			rowCount:
-				value === 'manual' &&
-				window.__experimentalEnableGridInteractivity
-					? tempRowCount
-					: undefined,
-			isManualPlacement:
-				value === 'manual' &&
-				window.__experimentalEnableGridInteractivity
-					? true
-					: undefined,
+			columnCount: value === 'manual' ? tempColumnCount : tempColumnCount,
+			rowCount: value === 'manual' ? tempRowCount : undefined,
+			isManualPlacement: value === 'manual' ? true : undefined,
 			minimumColumnWidth:
 				value === 'auto' ? tempMinimumColumnWidth : null,
 		} );
@@ -462,11 +434,7 @@ function GridLayoutTypeControl( { layout, onChange } ) {
 			value={ gridPlacement }
 			onChange={ onChangeType }
 			isBlock
-			help={
-				window.__experimentalEnableGridInteractivity
-					? helpText
-					: undefined
-			}
+			help={ helpText }
 		>
 			<ToggleGroupControlOption
 				key="auto"

package/src/layouts/test/grid.js

@@ -30,6 +30,20 @@ describe( 'getLayoutStyle', () => {
 			layoutDefinitions: undefined,
 		} );
 
+		expect( result ).toBe( expected );
+	} );
+	it( 'should return `grid-template-columns` with max() function if both minimumColumnWidth and columnCount are provided', () => {
+		const expected = `.my-container { grid-template-columns: repeat(auto-fill, minmax(max(12rem, ( 100% - (1.2rem*2) ) / 3), 1fr)); container-type: inline-size; }`;
+
+		const result = grid.getLayoutStyle( {
+			selector: '.my-container',
+			layout: { minimumColumnWidth: '12rem', columnCount: 3 },
+			style: {},
+			blockName: 'test-block',
+			hasBlockGapSupport: false,
+			layoutDefinitions: undefined,
+		} );
+
 		expect( result ).toBe( expected );
 	} );
 } );

package/src/private-apis.js

@@ -42,6 +42,7 @@ import {
 	mediaEditKey,
 	getMediaSelectKey,
 	essentialFormatKey,
+	isIsolatedEditorKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
 import { PrivateRichText } from './components/rich-text/';
@@ -110,6 +111,7 @@ lock( privateApis, {
 	mediaEditKey,
 	getMediaSelectKey,
 	essentialFormatKey,
+	isIsolatedEditorKey,
 	useBlockElement,
 	useBlockElementRef,
 } );

package/src/store/private-keys.js

@@ -6,3 +6,4 @@ export const sectionRootClientIdKey = Symbol( 'sectionRootClientIdKey' );
 export const mediaEditKey = Symbol( 'mediaEditKey' );
 export const getMediaSelectKey = Symbol( 'getMediaSelect' );
 export const essentialFormatKey = Symbol( 'essentialFormat' );
+export const isIsolatedEditorKey = Symbol( 'isIsolatedEditor' );

package/src/store/private-selectors.js

@@ -35,6 +35,7 @@ import {
 	selectBlockPatternsKey,
 	reusableBlocksSelectKey,
 	sectionRootClientIdKey,
+	isIsolatedEditorKey,
 } from './private-keys';
 
 const { isContentBlock } = unlock( blocksPrivateApis );
@@ -524,9 +525,15 @@ export function isSectionBlock( state, clientId ) {
 
 	const attributes = getBlockAttributes( state, clientId );
 	const isTemplatePart = blockName === 'core/template-part';
+
+	// When in an isolated editing context (e.g., editing a template part or pattern directly),
+	// don't treat nested unsynced patterns as section blocks.
+	const isIsolatedEditor = state.settings?.[ isIsolatedEditorKey ];
+
 	if (
 		( attributes?.metadata?.patternName || isTemplatePart ) &&
-		!! window?.__experimentalContentOnlyPatternInsertion
+		!! window?.__experimentalContentOnlyPatternInsertion &&
+		! isIsolatedEditor
 	) {
 		return true;
 	}

package/src/store/reducer.js

@@ -19,7 +19,7 @@ import {
  */
 import { PREFERENCES_DEFAULTS, SETTINGS_DEFAULTS } from './defaults';
 import { insertAt, moveTo } from './array';
-import { sectionRootClientIdKey } from './private-keys';
+import { sectionRootClientIdKey, isIsolatedEditorKey } from './private-keys';
 import { unlock } from '../lock-unlock';
 
 const { isContentBlock } = unlock( blocksPrivateApis );
@@ -2292,10 +2292,16 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 		( clientId ) =>
 			state.blockListSettings[ clientId ]?.templateLock === 'contentOnly'
 	);
+
+	// When in an isolated editing context (e.g., editing a template part or pattern directly),
+	// don't apply contentOnly mode to nested unsynced patterns or template parts.
+	const isIsolatedEditor = state.settings?.[ isIsolatedEditorKey ];
+
 	// Use array.from for better back compat. Older versions of the iterator returned
 	// from `keys()` didn't have the `filter` method.
 	const unsyncedPatternClientIds =
-		!! window?.__experimentalContentOnlyPatternInsertion
+		!! window?.__experimentalContentOnlyPatternInsertion &&
+		! isIsolatedEditor
 			? Array.from( state.blocks.attributes.keys() ).filter(
 					( clientId ) =>
 						state.blocks.attributes.get( clientId )?.metadata
@@ -2305,7 +2311,8 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 	const contentOnlyParents = [
 		...contentOnlyTemplateLockedClientIds,
 		...unsyncedPatternClientIds,
-		...( window?.__experimentalContentOnlyPatternInsertion
+		...( window?.__experimentalContentOnlyPatternInsertion &&
+		! isIsolatedEditor
 			? templatePartClientIds
 			: [] ),
 	];

package/src/utils/block-bindings.js

@@ -1,28 +1,6 @@
-/**
- * WordPress dependencies
- */
-import { useDispatch, useRegistry } from '@wordpress/data';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../store';
-import { useBlockEditContext } from '../components/block-edit';
-
 const DEFAULT_ATTRIBUTE = '__default';
 const PATTERN_OVERRIDES_SOURCE = 'core/pattern-overrides';
 
-/**
- * Checks if the given object is empty.
- *
- * @param {?Object} object The object to check.
- *
- * @return {boolean} Whether the object is empty.
- */
-function isObjectEmpty( object ) {
-	return ! object || Object.keys( object ).length === 0;
-}
-
 /**
  * Checks if the block has the `__default` binding for pattern overrides.
  *
@@ -66,138 +44,3 @@ export function replacePatternOverridesDefaultBinding(
 
 	return bindings;
 }
-
-/**
- * Contains utils to update the block `bindings` metadata.
- *
- * @typedef {Object} WPBlockBindingsUtils
- *
- * @property {Function} updateBlockBindings    Updates the value of the bindings connected to block attributes.
- * @property {Function} removeAllBlockBindings Removes the bindings property of the `metadata` attribute.
- */
-
-/**
- * Retrieves the existing utils needed to update the block `bindings` metadata.
- * They can be used to create, modify, or remove connections from the existing block attributes.
- *
- * It contains the following utils:
- * - `updateBlockBindings`: Updates the value of the bindings connected to block attributes. It can be used to remove a specific binding by setting the value to `undefined`.
- * - `removeAllBlockBindings`: Removes the bindings property of the `metadata` attribute.
- *
- * @since 6.7.0 Introduced in WordPress core.
- *
- * @param {?string} clientId Optional block client ID. If not set, it will use the current block client ID from the context.
- *
- * @return {?WPBlockBindingsUtils} Object containing the block bindings utils.
- *
- * @example
- * ```js
- * import { useBlockBindingsUtils } from '@wordpress/block-editor'
- * const { updateBlockBindings, removeAllBlockBindings } = useBlockBindingsUtils();
- *
- * // Update url and alt attributes.
- * updateBlockBindings( {
- *     url: {
- *         source: 'core/post-meta',
- *         args: {
- *             key: 'url_custom_field',
- *         },
- *     },
- *     alt: {
- *         source: 'core/post-meta',
- *         args: {
- *             key: 'text_custom_field',
- *         },
- *     },
- * } );
- *
- * // Remove binding from url attribute.
- * updateBlockBindings( { url: undefined } );
- *
- * // Remove bindings from all attributes.
- * removeAllBlockBindings();
- * ```
- */
-export function useBlockBindingsUtils( clientId ) {
-	const { clientId: contextClientId } = useBlockEditContext();
-	const blockClientId = clientId || contextClientId;
-	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { getBlockAttributes } = useRegistry().select( blockEditorStore );
-
-	/**
-	 * Updates the value of the bindings connected to block attributes.
-	 * It removes the binding when the new value is `undefined`.
-	 *
-	 * @param {Object} bindings        Bindings including the attributes to update and the new object.
-	 * @param {string} bindings.source The source name to connect to.
-	 * @param {Object} [bindings.args] Object containing the arguments needed by the source.
-	 *
-	 * @example
-	 * ```js
-	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
-	 *
-	 * const { updateBlockBindings } = useBlockBindingsUtils();
-	 * updateBlockBindings( {
-	 *     url: {
-	 *         source: 'core/post-meta',
-	 *         args: {
-	 *             key: 'url_custom_field',
-	 *         },
-	 * 	   },
-	 *     alt: {
-	 *         source: 'core/post-meta',
-	 *         args: {
-	 *             key: 'text_custom_field',
-	 *         },
-	 * 	   }
-	 * } );
-	 * ```
-	 */
-	const updateBlockBindings = ( bindings ) => {
-		const { metadata: { bindings: currentBindings, ...metadata } = {} } =
-			getBlockAttributes( blockClientId );
-		const newBindings = { ...currentBindings };
-
-		Object.entries( bindings ).forEach( ( [ attribute, binding ] ) => {
-			if ( ! binding && newBindings[ attribute ] ) {
-				delete newBindings[ attribute ];
-				return;
-			}
-			newBindings[ attribute ] = binding;
-		} );
-
-		const newMetadata = {
-			...metadata,
-			bindings: newBindings,
-		};
-
-		if ( isObjectEmpty( newMetadata.bindings ) ) {
-			delete newMetadata.bindings;
-		}
-
-		updateBlockAttributes( blockClientId, {
-			metadata: isObjectEmpty( newMetadata ) ? undefined : newMetadata,
-		} );
-	};
-
-	/**
-	 * Removes the bindings property of the `metadata` attribute.
-	 *
-	 * @example
-	 * ```js
-	 * import { useBlockBindingsUtils } from '@wordpress/block-editor'
-	 *
-	 * const { removeAllBlockBindings } = useBlockBindingsUtils();
-	 * removeAllBlockBindings();
-	 * ```
-	 */
-	const removeAllBlockBindings = () => {
-		const { metadata: { bindings, ...metadata } = {} } =
-			getBlockAttributes( blockClientId );
-		updateBlockAttributes( blockClientId, {
-			metadata: isObjectEmpty( metadata ) ? undefined : metadata,
-		} );
-	};
-
-	return { updateBlockBindings, removeAllBlockBindings };
-}

package/src/utils/index.js

@@ -1,3 +1,2 @@
 export { default as transformStyles } from './transform-styles';
 export { default as getPxFromCssUnit } from './get-px-from-css-unit';
-export { useBlockBindingsUtils } from './block-bindings';

package/tsconfig.json

@@ -23,6 +23,7 @@
 		{ "path": "../html-entities" },
 		{ "path": "../i18n" },
 		{ "path": "../icons" },
+		{ "path": "../image-cropper" },
 		{ "path": "../interactivity" },
 		{ "path": "../is-shallow-equal" },
 		{ "path": "../keycodes" },

package/build/components/block-toolbar/block-name-context.js

@@ -1,30 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/block-editor/src/components/block-toolbar/block-name-context.js
-var block_name_context_exports = {};
-__export(block_name_context_exports, {
-  default: () => block_name_context_default
-});
-module.exports = __toCommonJS(block_name_context_exports);
-var import_element = require("@wordpress/element");
-var __unstableBlockNameContext = (0, import_element.createContext)("");
-__unstableBlockNameContext.displayName = "__unstableBlockNameContext";
-var block_name_context_default = __unstableBlockNameContext;
-//# sourceMappingURL=block-name-context.js.map

package/build/components/block-toolbar/block-name-context.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/block-toolbar/block-name-context.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst __unstableBlockNameContext = createContext( '' );\n__unstableBlockNameContext.displayName = '__unstableBlockNameContext';\n\nexport default __unstableBlockNameContext;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8B;AAE9B,IAAM,iCAA6B,8BAAe,EAAG;AACrD,2BAA2B,cAAc;AAEzC,IAAO,6BAAQ;",
-  "names": []
-}

package/build-module/components/block-toolbar/block-name-context.js

@@ -1,9 +0,0 @@
-// packages/block-editor/src/components/block-toolbar/block-name-context.js
-import { createContext } from "@wordpress/element";
-var __unstableBlockNameContext = createContext("");
-__unstableBlockNameContext.displayName = "__unstableBlockNameContext";
-var block_name_context_default = __unstableBlockNameContext;
-export {
-  block_name_context_default as default
-};
-//# sourceMappingURL=block-name-context.js.map

package/build-module/components/block-toolbar/block-name-context.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/components/block-toolbar/block-name-context.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\nconst __unstableBlockNameContext = createContext( '' );\n__unstableBlockNameContext.displayName = '__unstableBlockNameContext';\n\nexport default __unstableBlockNameContext;\n"],
-  "mappings": ";AAGA,SAAS,qBAAqB;AAE9B,IAAM,6BAA6B,cAAe,EAAG;AACrD,2BAA2B,cAAc;AAEzC,IAAO,6BAAQ;",
-  "names": []
-}

package/src/components/block-toolbar/block-name-context.js

@@ -1,9 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { createContext } from '@wordpress/element';
-
-const __unstableBlockNameContext = createContext( '' );
-__unstableBlockNameContext.displayName = '__unstableBlockNameContext';
-
-export default __unstableBlockNameContext;