@wordpress/block-editor 15.8.1-next.16d95556a.0 → 15.9.0

package/src/hooks/block-bindings.js

@@ -7,7 +7,11 @@ import fastDeepEqual from 'fast-deep-equal/es6';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { getBlockBindingsSources, getBlockType } from '@wordpress/blocks';
+import {
+	getBlockBindingsSource,
+	getBlockType,
+	store as blockStore,
+} from '@wordpress/blocks';
 import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalItem as Item,
@@ -33,8 +37,6 @@ import { store as blockEditorStore } from '../store';
 
 const { Menu } = unlock( componentsPrivateApis );
 
-const EMPTY_OBJECT = {};
-
 /**
  * Get the normalized attribute type for block bindings.
  * Converts 'rich-text' to 'string' since rich-text is stored as string.
@@ -80,10 +82,10 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 	);
 	return (
 		<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
-			{ Object.entries( sources ).map( ( [ sourceKey, source ] ) => {
+			{ Object.entries( sources ).map( ( [ sourceKey, data ] ) => {
 				// Only show sources that have compatible data for this specific attribute.
-				const sourceDataItems = source.data?.filter(
-					( item ) => item?.type === attributeType
+				const sourceDataItems = data.filter(
+					( item ) => item.type === attributeType
 				);
 
 				const noItemsAvailable =
@@ -93,6 +95,8 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 					return null;
 				}
 
+				const source = getBlockBindingsSource( sourceKey );
+
 				return (
 					<Menu
 						key={ sourceKey }
@@ -106,17 +110,21 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 								{ sourceDataItems.map( ( item ) => {
 									const itemBindings = {
 										source: sourceKey,
-										args: item?.args || {
+										args: item.args || {
 											key: item.key,
 										},
 									};
-									const values = source.getValues( {
-										select,
-										context: blockContext,
-										bindings: {
-											[ attribute ]: itemBindings,
-										},
-									} );
+									let values = {};
+									try {
+										values = source.getValues( {
+											select,
+											context: blockContext,
+											bindings: {
+												[ attribute ]: itemBindings,
+											},
+										} );
+									} catch ( e ) {}
+
 									return (
 										<Menu.CheckboxItem
 											key={
@@ -160,7 +168,7 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 											}
 										>
 											<Menu.ItemLabel>
-												{ item?.label }
+												{ item.label }
 											</Menu.ItemLabel>
 											<Menu.ItemHelpText>
 												{ values[ attribute ] }
@@ -179,7 +187,8 @@ function BlockBindingsPanelMenuContent( { attribute, binding, sources } ) {
 
 function BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {
 	const { source: sourceName, args } = binding || {};
-	const source = sources?.[ sourceName ];
+	const data = sources?.[ sourceName ];
+	const source = getBlockBindingsSource( sourceName );
 
 	let displayText;
 	let isValid = true;
@@ -189,8 +198,8 @@ function BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {
 		// Check if there are any compatible sources for this attribute type.
 		const attributeType = getAttributeType( blockName, attribute );
 
-		const hasCompatibleSources = Object.values( sources ).some( ( src ) =>
-			src.data?.some( ( item ) => item?.type === attributeType )
+		const hasCompatibleSources = Object.values( sources ).some( ( items ) =>
+			items.some( ( item ) => item.type === attributeType )
 		);
 
 		if ( ! hasCompatibleSources ) {
@@ -203,14 +212,10 @@ function BlockBindingsAttribute( { attribute, binding, sources, blockName } ) {
 		// If there's a binding but the source is not found, it's invalid.
 		isValid = false;
 		displayText = __( 'Source not registered' );
-		if ( Object.keys( sources ).length === 0 ) {
-			displayText = __( 'No sources available' );
-		}
 	} else {
 		displayText =
-			source.data?.find( ( item ) => fastDeepEqual( item.args, args ) )
-				?.label ||
-			source.label ||
+			data?.find( ( item ) => fastDeepEqual( item.args, args ) )?.label ||
+			source?.label ||
 			sourceName;
 	}
 
@@ -299,68 +304,57 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 
 	// Use useSelect to ensure sources are updated whenever there are updates in block context
 	// or when underlying data changes.
-	// Still needs a fix regarding _sources scope.
-	const _sources = {};
-	const { sources, canUpdateBlockBindings, bindableAttributes } = useSelect(
+	const { canUpdateBlockBindings, bindableAttributes } = useSelect(
 		( select ) => {
 			const { __experimentalBlockBindingsSupportedAttributes } =
 				select( blockEditorStore ).getSettings();
-			const _bindableAttributes =
-				__experimentalBlockBindingsSupportedAttributes?.[ blockName ];
-			if ( ! _bindableAttributes || _bindableAttributes.length === 0 ) {
-				return EMPTY_OBJECT;
-			}
-
-			const registeredSources = getBlockBindingsSources();
-			Object.entries( registeredSources ).forEach(
-				( [
-					sourceName,
-					{ getFieldsList, usesContext, label, getValues },
-				] ) => {
-					// Populate context.
+
+			return {
+				canUpdateBlockBindings:
+					select( blockEditorStore ).getSettings()
+						.canUpdateBlockBindings,
+				bindableAttributes:
+					__experimentalBlockBindingsSupportedAttributes?.[
+						blockName
+					],
+			};
+		},
+		[ 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 ( usesContext?.length ) {
-						for ( const key of usesContext ) {
+					if ( source.usesContext?.length ) {
+						for ( const key of source.usesContext ) {
 							context[ key ] = blockContext[ key ];
 						}
 					}
-					if ( getFieldsList ) {
-						const fieldsListResult = getFieldsList( {
-							select,
-							context,
-						} );
-						_sources[ sourceName ] = {
-							data: fieldsListResult || [],
-							label,
-							getValues,
-						};
-					} else {
-						/*
-						 * Include sources without getFieldsList if they are already used in a binding.
-						 * This allows them to be displayed in read-only mode.
-						 */
-						_sources[ sourceName ] = {
-							data: [],
-							label,
-							getValues,
-						};
+
+					const items = source.getFieldsList( {
+						select,
+						context,
+					} );
+					if ( items?.length ) {
+						data[ sourceName ] = items;
 					}
 				}
 			);
-
-			return {
-				sources:
-					Object.values( _sources ).length > 0
-						? _sources
-						: EMPTY_OBJECT,
-				canUpdateBlockBindings:
-					select( blockEditorStore ).getSettings()
-						.canUpdateBlockBindings,
-				bindableAttributes: _bindableAttributes,
-			};
+			return data;
 		},
-		[ blockContext, blockName ]
+		[ blockContext ]
 	);
+
 	// Return early if there are no bindable attributes.
 	if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
 		return null;
@@ -368,10 +362,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 
 	const { bindings } = metadata || {};
 
-	// Check if all sources have empty data arrays.
-	const hasCompatibleData = Object.values( sources ).some(
-		( source ) => source.data && source.data.length > 0
-	);
+	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;
@@ -402,10 +393,8 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 
 						const hasCompatibleDataForAttribute = Object.values(
 							sources
-						).some( ( source ) =>
-							source.data?.some(
-								( item ) => item?.type === attributeType
-							)
+						).some( ( data ) =>
+							data.some( ( item ) => item.type === attributeType )
 						);
 
 						const isAttributeReadOnly =

package/src/hooks/dimensions.js

@@ -81,6 +81,7 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 		},
 		[ clientId, isEnabled ]
 	);
+
 	const [ visualizedProperty, setVisualizedProperty ] = useVisualizer();
 	const onChange = ( newStyle ) => {
 		setAttributes( {
@@ -156,7 +157,11 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) {
 	}
 
 	if ( feature === 'any' ) {
-		return !! ( support?.aspectRatio || !! support?.minHeight );
+		return !! (
+			support?.aspectRatio ||
+			!! support?.minHeight ||
+			!! support?.width
+		);
 	}
 
 	return !! support?.[ feature ];
@@ -164,9 +169,9 @@ export function hasDimensionsSupport( blockName, feature = 'any' ) {
 
 export default {
 	useBlockProps,
-	attributeKeys: [ 'minHeight', 'style' ],
+	attributeKeys: [ 'minHeight', 'width', 'style' ],
 	hasSupport( name ) {
-		return hasDimensionsSupport( name, 'aspectRatio' );
+		return hasDimensionsSupport( name );
 	},
 };
 

package/src/hooks/metadata.js

@@ -91,7 +91,7 @@ export function addTransforms( result, source, index, results ) {
 	if (
 		sourceMetadata.blockVisibility !== undefined &&
 		! result.attributes?.metadata?.blockVisibility &&
-		hasBlockSupport( result.name, 'blockVisibility', true )
+		hasBlockSupport( result.name, 'visibility', true )
 	) {
 		preservedMetadata.blockVisibility = sourceMetadata.blockVisibility;
 	}

package/src/hooks/test/metadata.js

@@ -254,7 +254,7 @@ describe( 'metadata', () => {
 			registerBlockType( 'core/bar', {
 				title: 'Bar',
 				supports: {
-					blockVisibility: false,
+					visibility: false,
 				},
 			} );
 

package/src/hooks/use-content-only-section-edit.js

@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
+
+/**
+ * Hook that provides section block editing state and actions.
+ *
+ * @param {string} clientId Block client ID.
+ * @return {Object} Object containing section block state and actions.
+ */
+export default function useContentOnlySectionEdit( clientId ) {
+	const {
+		isSectionBlock,
+		isWithinSection,
+		isWithinEditedSection,
+		isEditingContentOnlySection,
+		editedContentOnlySection,
+	} = useSelect(
+		( select ) => {
+			const {
+				isSectionBlock: _isSectionBlock,
+				getParentSectionBlock,
+				getEditedContentOnlySection,
+				isWithinEditedContentOnlySection,
+			} = unlock( select( blockEditorStore ) );
+
+			const editedSection = getEditedContentOnlySection();
+
+			return {
+				isSectionBlock: _isSectionBlock( clientId ),
+				isWithinSection:
+					_isSectionBlock( clientId ) ||
+					!! getParentSectionBlock( clientId ),
+				isWithinEditedSection:
+					isWithinEditedContentOnlySection( clientId ),
+				isEditingContentOnlySection: editedSection === clientId,
+				editedContentOnlySection: editedSection,
+			};
+		},
+		[ clientId ]
+	);
+
+	const blockEditorActions = useDispatch( blockEditorStore );
+	const { editContentOnlySection, stopEditingContentOnlySection } =
+		unlock( blockEditorActions );
+
+	return {
+		isSectionBlock,
+		isWithinSection,
+		isWithinEditedSection,
+		isEditingContentOnlySection,
+		editedContentOnlySection,
+		editContentOnlySection,
+		stopEditingContentOnlySection,
+	};
+}

package/src/hooks/utils.js

@@ -263,6 +263,7 @@ export function useBlockSettings( name, parentLayout ) {
 		units,
 		aspectRatio,
 		minHeight,
+		width,
 		layout,
 		borderColor,
 		borderRadius,
@@ -321,6 +322,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'spacing.units',
 		'dimensions.aspectRatio',
 		'dimensions.minHeight',
+		'dimensions.width',
 		'layout',
 		'border.color',
 		'border.radius',
@@ -430,6 +432,7 @@ export function useBlockSettings( name, parentLayout ) {
 			dimensions: {
 				aspectRatio,
 				minHeight,
+				width,
 			},
 			layout,
 			parentLayout,
@@ -466,6 +469,7 @@ export function useBlockSettings( name, parentLayout ) {
 		units,
 		aspectRatio,
 		minHeight,
+		width,
 		layout,
 		parentLayout,
 		borderColor,

package/src/layouts/constrained.js

@@ -89,7 +89,10 @@ export default {
 										: nextWidth;
 								onChange( {
 									...layout,
-									contentSize: nextWidth,
+									contentSize:
+										nextWidth !== ''
+											? nextWidth
+											: undefined,
 								} );
 							} }
 							units={ units }
@@ -111,7 +114,10 @@ export default {
 										: nextWidth;
 								onChange( {
 									...layout,
-									wideSize: nextWidth,
+									wideSize:
+										nextWidth !== ''
+											? nextWidth
+											: undefined,
 								} );
 							} }
 							units={ units }

package/src/private-apis.js

@@ -40,6 +40,7 @@ import {
 	globalStylesLinksDataKey,
 	sectionRootClientIdKey,
 	mediaEditKey,
+	getMediaSelectKey,
 	essentialFormatKey,
 } from './store/private-keys';
 import { requiresWrapperOnCopy } from './components/writing-flow/utils';
@@ -57,7 +58,6 @@ import {
 	useBlockElementRef,
 	useBlockElement,
 } from './components/block-list/use-block-props/use-block-refs';
-import { default as MediaUploadModal } from './components/media-upload-modal';
 
 /**
  * Private @wordpress/block-editor APIs.
@@ -108,8 +108,8 @@ lock( privateApis, {
 	CommentIconSlotFill,
 	CommentIconToolbarSlotFill,
 	mediaEditKey,
+	getMediaSelectKey,
 	essentialFormatKey,
 	useBlockElement,
 	useBlockElementRef,
-	MediaUploadModal,
 } );

package/src/store/private-keys.js

@@ -4,4 +4,5 @@ export const selectBlockPatternsKey = Symbol( 'selectBlockPatternsKey' );
 export const reusableBlocksSelectKey = Symbol( 'reusableBlocksSelect' );
 export const sectionRootClientIdKey = Symbol( 'sectionRootClientIdKey' );
 export const mediaEditKey = Symbol( 'mediaEditKey' );
+export const getMediaSelectKey = Symbol( 'getMediaSelect' );
 export const essentialFormatKey = Symbol( 'essentialFormat' );

package/src/store/private-selectors.js

@@ -518,10 +518,7 @@ export function isSectionBlock( state, clientId ) {
 	}
 
 	const blockName = getBlockName( state, clientId );
-	if (
-		blockName === 'core/block' ||
-		getTemplateLock( state, clientId ) === 'contentOnly'
-	) {
+	if ( blockName === 'core/block' ) {
 		return true;
 	}
 
@@ -533,6 +530,19 @@ export function isSectionBlock( state, clientId ) {
 	) {
 		return true;
 	}
+
+	// TemplateLock cascades to all inner parent blocks. Only the top-level
+	// block that's contentOnly templateLocked is the true contentLocker,
+	// all the others are mere imitators.
+	const hasContentOnlyTempateLock =
+		getTemplateLock( state, clientId ) === 'contentOnly';
+	const rootClientId = getBlockRootClientId( state, clientId );
+	const hasRootContentOnlyTemplateLock =
+		getTemplateLock( state, rootClientId ) === 'contentOnly';
+	if ( hasContentOnlyTempateLock && ! hasRootContentOnlyTemplateLock ) {
+		return true;
+	}
+
 	return false;
 }
 
@@ -700,7 +710,7 @@ export function getInsertionPoint( state ) {
  */
 export const isBlockHidden = ( state, clientId ) => {
 	const blockName = getBlockName( state, clientId );
-	if ( ! hasBlockSupport( state, blockName, 'blockVisibility', true ) ) {
+	if ( ! hasBlockSupport( state, blockName, 'visibility', true ) ) {
 		return false;
 	}
 	const attributes = state.blocks.attributes.get( clientId );
@@ -720,3 +730,109 @@ export const isBlockHidden = ( state, clientId ) => {
 export function hasBlockSpotlight( state ) {
 	return !! state.hasBlockSpotlight || !! state.editedContentOnlySection;
 }
+
+/**
+ * Returns whether a block is locked to prevent editing.
+ *
+ * This selector only reasons about block lock, not associated features
+ * like `blockEditingMode` that might prevent user modifications to a block.
+ * Currently there's also no way to prevent editing via `templateLock`.
+ *
+ * This distinction is important as this selector specifically drives the block lock UI
+ * that a user interacts with. `blockEditingModes` aren't included as a user can't change
+ * them.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId ClientId of the block.
+ *
+ * @return {boolean} Whether the block is currently locked.
+ */
+export function isEditLockedBlock( state, clientId ) {
+	const attributes = getBlockAttributes( state, clientId );
+	return !! attributes?.lock?.edit;
+}
+
+/**
+ * Returns whether a block is locked to prevent moving.
+ *
+ * This selector only reasons about templateLock and block lock, not associated features
+ * like `blockEditingMode` that might prevent user modifications to a block.
+ *
+ * This distinction is important as this selector specifically drives the block lock UI
+ * that a user interacts with. `blockEditingModes` are excluded as a user can't change
+ * them.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId ClientId of the block.
+ *
+ * @return {boolean} Whether the block is currently locked.
+ */
+export function isMoveLockedBlock( state, clientId ) {
+	const attributes = getBlockAttributes( state, clientId );
+	// If a block explicitly has `move` set to `false`, it turns off
+	// any locking that might be inherited from a parent.
+	if ( attributes?.lock?.move !== undefined ) {
+		return !! attributes?.lock?.move;
+	}
+
+	const rootClientId = getBlockRootClientId( state, clientId );
+	const templateLock = getTemplateLock( state, rootClientId );
+
+	// While `contentOnly` templateLock does sometimes prevent moving, a user can't modify
+	// this, so don't include it in this function. See the `canMoveBlock` selector
+	// as an alternative.
+	return templateLock === 'all';
+}
+
+/**
+ * Returns whether a block is locked to prevent removal.
+ *
+ * This selector only reasons about templateLock and block lock, not associated features
+ * like `blockEditingMode` that might prevent user modifications to a block.
+ *
+ * This distinction is important as this selector specifically drives the block lock UI
+ * that a user interacts with. `blockEditingModes` are excluded as a user can't change
+ * them.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId ClientId of the block.
+ *
+ * @return {boolean} Whether the block is currently locked.
+ */
+export function isRemoveLockedBlock( state, clientId ) {
+	const attributes = getBlockAttributes( state, clientId );
+	if ( attributes?.lock?.remove !== undefined ) {
+		return !! attributes?.lock?.remove;
+	}
+
+	const rootClientId = getBlockRootClientId( state, clientId );
+	const templateLock = getTemplateLock( state, rootClientId );
+
+	// While `contentOnly` templateLock does sometimes prevent removal, a user can't modify
+	// this, so don't include it in this function. See the `canRemoveBlock` selector
+	// as an alternative.
+	return templateLock === 'all' || templateLock === 'insert';
+}
+
+/**
+ * Returns whether a block is locked.
+ *
+ * This selector only reasons about templateLock and block lock, not associated features
+ * like `blockEditingMode` that might prevent user modifications to a block.
+ *
+ * This distinction is important as this selector specifically drives the block lock UI
+ * that a user interacts with. `blockEditingModes` are excluded as a user can't change
+ * them.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId ClientId of the block.
+ *
+ * @return {boolean} Whether the block is currently locked.
+ */
+export function isLockedBlock( state, clientId ) {
+	return (
+		isEditLockedBlock( state, clientId ) ||
+		isMoveLockedBlock( state, clientId ) ||
+		isRemoveLockedBlock( state, clientId )
+	);
+}

package/src/store/selectors.js

@@ -1693,7 +1693,8 @@ const canInsertBlockTypeUnmemoized = (
 		blockType = getBlockType( blockName );
 	}
 
-	if ( getTemplateLock( state, rootClientId ) ) {
+	const rootTemplateLock = getTemplateLock( state, rootClientId );
+	if ( rootTemplateLock && rootTemplateLock !== 'contentOnly' ) {
 		return false;
 	}
 
@@ -1876,7 +1877,8 @@ export function canRemoveBlock( state, clientId ) {
 	}
 
 	const rootClientId = getBlockRootClientId( state, clientId );
-	if ( getTemplateLock( state, rootClientId ) ) {
+	const rootTemplateLock = getTemplateLock( state, rootClientId );
+	if ( rootTemplateLock && rootTemplateLock !== 'contentOnly' ) {
 		return false;
 	}
 
@@ -1937,8 +1939,8 @@ export function canMoveBlock( state, clientId ) {
 	}
 
 	const rootClientId = getBlockRootClientId( state, clientId );
-	const templateLock = getTemplateLock( state, rootClientId );
-	if ( templateLock === 'all' || templateLock === 'contentOnly' ) {
+	const rootTemplateLock = getTemplateLock( state, rootClientId );
+	if ( rootTemplateLock === 'all' ) {
 		return false;
 	}