@wordpress/block-editor 15.9.0 → 15.9.1-next.6deb34194.0

package/src/hooks/block-bindings.js

@@ -1,25 +1,12 @@
-/**
- * External dependencies
- */
-import fastDeepEqual from 'fast-deep-equal/es6';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import {
-	getBlockBindingsSource,
-	getBlockType,
-	store as blockStore,
-} from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import {
 	__experimentalItemGroup as ItemGroup,
-	__experimentalItem as Item,
 	__experimentalText as Text,
 	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-	__experimentalVStack as VStack,
-	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
@@ -28,29 +15,15 @@ import { useViewportMatch } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { useBlockBindingsUtils } from '../utils/block-bindings';
+import {
+	BlockBindingsAttributeControl,
+	useBlockBindingsUtils,
+} from '../components/block-bindings';
 import { unlock } from '../lock-unlock';
 import InspectorControls from '../components/inspector-controls';
 import BlockContext from '../components/block-context';
-import { useBlockEditContext } from '../components/block-edit';
 import { store as blockEditorStore } from '../store';
 
-const { Menu } = unlock( componentsPrivateApis );
-
-/**
- * Get the normalized attribute type for block bindings.
- * Converts 'rich-text' to 'string' since rich-text is stored as string.
- *
- * @param {string} blockName The block name.
- * @param {string} attribute The attribute name.
- * @return {string} The normalized attribute type.
- */
-const getAttributeType = ( blockName, attribute ) => {
-	const _attributeType =
-		getBlockType( blockName ).attributes?.[ attribute ]?.type;
-	return _attributeType === 'rich-text' ? 'string' : _attributeType;
-};
-
 const useToolsPanelDropdownMenuProps = () => {
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return ! isMobile
@@ -64,295 +37,35 @@ const useToolsPanelDropdownMenuProps = () => {
 		: {};
 };
 
-function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
-	const { clientId } = useBlockEditContext();
-	const { updateBlockBindings } = useBlockBindingsUtils();
-	const isMobile = useViewportMatch( 'medium', '<' );
-	const blockContext = useContext( BlockContext );
-	const { attributeType, select } = useSelect(
-		( _select ) => {
-			const { name: blockName } =
-				_select( blockEditorStore ).getBlock( clientId );
-			return {
-				attributeType: getAttributeType( blockName, attribute ),
-				select: _select,
-			};
-		},
-		[ clientId, attribute ]
-	);
-	return (
-		<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
-			{ Object.entries( sources ).map( ( [ sourceKey, data ] ) => {
-				// Only show sources that have compatible data for this specific attribute.
-				const sourceDataItems = data.filter(
-					( item ) => item.type === attributeType
-				);
-
-				const noItemsAvailable =
-					! sourceDataItems || sourceDataItems.length === 0;
-
-				if ( noItemsAvailable ) {
-					return null;
-				}
-
-				const source = getBlockBindingsSource( sourceKey );
-
-				return (
-					<Menu
-						key={ sourceKey }
-						placement={ isMobile ? 'bottom-start' : 'left-start' }
-					>
-						<Menu.SubmenuTriggerItem>
-							<Menu.ItemLabel>{ source.label }</Menu.ItemLabel>
-						</Menu.SubmenuTriggerItem>
-						<Menu.Popover gutter={ 8 }>
-							<Menu.Group>
-								{ sourceDataItems.map( ( item ) => {
-									const itemBindings = {
-										source: sourceKey,
-										args: item.args || {
-											key: item.key,
-										},
-									};
-									let values = {};
-									try {
-										values = source.getValues( {
-											select,
-											context: blockContext,
-											bindings: {
-												[ attribute ]: itemBindings,
-											},
-										} );
-									} catch ( e ) {}
-
-									return (
-										<Menu.CheckboxItem
-											key={
-												sourceKey +
-													JSON.stringify(
-														item.args
-													) || item.key
-											}
-											onChange={ () => {
-												const isCurrentlySelected =
-													fastDeepEqual(
-														binding?.args,
-														item.args
-													) ??
-													// Deprecate key dependency in 7.0.
-													item.key ===
-														binding?.args?.key;
-
-												if ( isCurrentlySelected ) {
-													// Unset if the same item is selected again.
-													updateBlockBindings( {
-														[ attribute ]:
-															undefined,
-													} );
-												} else {
-													updateBlockBindings( {
-														[ attribute ]:
-															itemBindings,
-													} );
-												}
-											} }
-											name={ attribute + '-binding' }
-											value={ values[ attribute ] }
-											checked={
-												fastDeepEqual(
-													binding?.args,
-													item.args
-												) ??
-												// Deprecate key dependency in 7.0.
-												item.key === binding?.args?.key
-											}
-										>
-											<Menu.ItemLabel>
-												{ item.label }
-											</Menu.ItemLabel>
-											<Menu.ItemHelpText>
-												{ values[ attribute ] }
-											</Menu.ItemHelpText>
-										</Menu.CheckboxItem>
-									);
-								} ) }
-							</Menu.Group>
-						</Menu.Popover>
-					</Menu>
-				);
-			} ) }
-		</Menu>
-	);
-}
-
-function BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {
-	const { source: sourceName, args } = binding || {};
-	const data = sources?.[ sourceName ];
-	const source = getBlockBindingsSource( sourceName );
-
-	let displayText;
-	let isValid = true;
-	const isNotBound = binding === undefined;
-
-	if ( isNotBound ) {
-		// Check if there are any compatible sources for this attribute type.
-		const attributeType = getAttributeType( blockName, attribute );
-
-		const hasCompatibleSources = Object.values( sources ).some( ( items ) =>
-			items.some( ( item ) => item.type === attributeType )
-		);
-
-		if ( ! hasCompatibleSources ) {
-			displayText = __( 'No sources available' );
-		} else {
-			displayText = __( 'Not connected' );
-		}
-		isValid = true;
-	} else if ( ! source ) {
-		// If there's a binding but the source is not found, it's invalid.
-		isValid = false;
-		displayText = __( 'Source not registered' );
-	} else {
-		displayText =
-			data?.find( ( item ) => fastDeepEqual( item.args, args ) )?.label ||
-			source?.label ||
-			sourceName;
-	}
-
-	return (
-		<VStack className="block-editor-bindings__item" spacing={ 0 }>
-			<Text truncate>{ attribute }</Text>
-			<Text
-				truncate
-				variant={ isValid ? 'muted' : undefined }
-				isDestructive={ ! isValid }
-			>
-				{ displayText }
-			</Text>
-		</VStack>
-	);
-}
-
-function ReadOnlyBlockBindingsPanelItem( {
-	attribute,
-	binding,
-	sources,
-	blockName,
-} ) {
-	const isMobile = useViewportMatch( 'medium', '<' );
-
-	return (
-		<ToolsPanelItem hasValue={ () => !! binding } label={ attribute }>
-			<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
-				<Menu.TriggerButton render={ <Item /> } disabled>
-					<BlockBindingsAttribute
-						attribute={ attribute }
-						binding={ binding }
-						sources={ sources }
-						blockName={ blockName }
-					/>
-				</Menu.TriggerButton>
-			</Menu>
-		</ToolsPanelItem>
-	);
-}
-
-function EditableBlockBindingsPanelItem( {
-	attribute,
-	binding,
-	sources,
-	blockName,
-} ) {
-	const { updateBlockBindings } = useBlockBindingsUtils();
-	const isMobile = useViewportMatch( 'medium', '<' );
-
-	return (
-		<ToolsPanelItem
-			hasValue={ () => !! binding }
-			label={ attribute }
-			onDeselect={ () => {
-				updateBlockBindings( {
-					[ attribute ]: undefined,
-				} );
-			} }
-		>
-			<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
-				<Menu.TriggerButton render={ <Item /> }>
-					<BlockBindingsAttribute
-						attribute={ attribute }
-						binding={ binding }
-						sources={ sources }
-						blockName={ blockName }
-					/>
-				</Menu.TriggerButton>
-				<Menu.Popover gutter={ isMobile ? 8 : 36 }>
-					<BlockBindingsPanelMenuContent
-						attribute={ attribute }
-						binding={ binding }
-						sources={ sources }
-					/>
-				</Menu.Popover>
-			</Menu>
-		</ToolsPanelItem>
-	);
-}
-
 export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const blockContext = useContext( BlockContext );
 	const { removeAllBlockBindings } = useBlockBindingsUtils();
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	// Use useSelect to ensure sources are updated whenever there are updates in block context
-	// or when underlying data changes.
-	const { canUpdateBlockBindings, bindableAttributes } = useSelect(
+	const { bindableAttributes, hasCompatibleFields } = useSelect(
 		( select ) => {
 			const { __experimentalBlockBindingsSupportedAttributes } =
 				select( blockEditorStore ).getSettings();
+			const {
+				getAllBlockBindingsSources,
+				getBlockBindingsSourceFieldsList,
+			} = unlock( select( blocksStore ) );
 
 			return {
-				canUpdateBlockBindings:
-					select( blockEditorStore ).getSettings()
-						.canUpdateBlockBindings,
 				bindableAttributes:
 					__experimentalBlockBindingsSupportedAttributes?.[
 						blockName
 					],
+				hasCompatibleFields: Object.values(
+					getAllBlockBindingsSources()
+				).some(
+					( source ) =>
+						getBlockBindingsSourceFieldsList( source, blockContext )
+							?.length > 0
+				),
 			};
 		},
-		[ blockName ]
-	);
-
-	const sources = useSelect(
-		( select ) => {
-			const { getAllBlockBindingsSources } = unlock(
-				select( blockStore )
-			);
-			const data = {};
-			Object.entries( getAllBlockBindingsSources() ).forEach(
-				( [ sourceName, source ] ) => {
-					if ( ! source.getFieldsList ) {
-						return;
-					}
-
-					const context = {};
-					if ( source.usesContext?.length ) {
-						for ( const key of source.usesContext ) {
-							context[ key ] = blockContext[ key ];
-						}
-					}
-
-					const items = source.getFieldsList( {
-						select,
-						context,
-					} );
-					if ( items?.length ) {
-						data[ sourceName ] = items;
-					}
-				}
-			);
-			return data;
-		},
-		[ blockContext ]
+		[ blockName, blockContext ]
 	);
 
 	// Return early if there are no bindable attributes.
@@ -362,12 +75,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 
 	const { bindings } = metadata || {};
 
-	const hasCompatibleData = Object.keys( sources ).length > 0;
-
-	// Lock the UI when the user can't update bindings or there are no fields to connect to.
-	const readOnly = ! canUpdateBlockBindings || ! hasCompatibleData;
-
-	if ( bindings === undefined && ! hasCompatibleData ) {
+	if ( bindings === undefined && ! hasCompatibleFields ) {
 		return null;
 	}
 
@@ -382,42 +90,14 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 				className="block-editor-bindings__panel"
 			>
 				<ItemGroup isBordered isSeparated>
-					{ bindableAttributes.map( ( attribute ) => {
-						const binding = bindings?.[ attribute ];
-
-						// Check if this specific attribute has compatible data from any source.
-						const attributeType = getAttributeType(
-							blockName,
-							attribute
-						);
-
-						const hasCompatibleDataForAttribute = Object.values(
-							sources
-						).some( ( data ) =>
-							data.some( ( item ) => item.type === attributeType )
-						);
-
-						const isAttributeReadOnly =
-							readOnly || ! hasCompatibleDataForAttribute;
-
-						return isAttributeReadOnly ? (
-							<ReadOnlyBlockBindingsPanelItem
-								key={ attribute }
-								attribute={ attribute }
-								binding={ binding }
-								sources={ sources }
-								blockName={ blockName }
-							/>
-						) : (
-							<EditableBlockBindingsPanelItem
-								key={ attribute }
-								attribute={ attribute }
-								binding={ binding }
-								sources={ sources }
-								blockName={ blockName }
-							/>
-						);
-					} ) }
+					{ bindableAttributes.map( ( attribute ) => (
+						<BlockBindingsAttributeControl
+							key={ attribute }
+							attribute={ attribute }
+							blockName={ blockName }
+							binding={ bindings?.[ attribute ] }
+						/>
+					) ) }
 				</ItemGroup>
 				{ /*
 					Use a div element to make the ToolsPanelHiddenInnerWrapper

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