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

package/src/components/use-block-commands/index.js

@@ -224,7 +224,7 @@ const getQuickActionsCommands = () =>
 		const canRemove = canRemoveBlocks( clientIds );
 
 		const canToggleBlockVisibility = blocks.every( ( { clientId } ) =>
-			hasBlockSupport( getBlockName( clientId ), 'blockVisibility', true )
+			hasBlockSupport( getBlockName( clientId ), 'visibility', true )
 		);
 
 		const commands = [];

package/src/components/use-block-drop-zone/index.js

@@ -415,11 +415,7 @@ export default function useBlockDropZone( {
 					// Filter out blocks that are hidden
 					.filter( ( block ) => {
 						return ! (
-							hasBlockSupport(
-								block.name,
-								'blockVisibility',
-								true
-							) &&
+							hasBlockSupport( block.name, 'visibility', true ) &&
 							block.attributes?.metadata?.blockVisibility ===
 								false
 						);

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/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/store/private-selectors.js

@@ -518,20 +518,31 @@ export function isSectionBlock( state, clientId ) {
 	}
 
 	const blockName = getBlockName( state, clientId );
-	if (
-		blockName === 'core/block' ||
-		getTemplateLock( state, clientId ) === 'contentOnly'
-	) {
+	if ( blockName === 'core/block' ) {
 		return true;
 	}
 
 	const attributes = getBlockAttributes( state, clientId );
+	const isTemplatePart = blockName === 'core/template-part';
 	if (
-		attributes?.metadata?.patternName &&
+		( attributes?.metadata?.patternName || isTemplatePart ) &&
 		!! window?.__experimentalContentOnlyPatternInsertion
 	) {
 		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;
 }
 
@@ -699,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 );
@@ -719,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/reducer.js

@@ -2305,6 +2305,9 @@ function getDerivedBlockEditingModesForTree( state, treeClientId = '' ) {
 	const contentOnlyParents = [
 		...contentOnlyTemplateLockedClientIds,
 		...unsyncedPatternClientIds,
+		...( window?.__experimentalContentOnlyPatternInsertion
+			? templatePartClientIds
+			: [] ),
 	];
 
 	traverseBlockTree( state, treeClientId, ( block ) => {

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

package/src/store/test/private-selectors.js

@@ -10,6 +10,10 @@ import {
 	getExpandedBlock,
 	isDragging,
 	getBlockStyles,
+	isEditLockedBlock,
+	isMoveLockedBlock,
+	isRemoveLockedBlock,
+	isLockedBlock,
 } from '../private-selectors';
 import { getBlockEditingMode } from '../selectors';
 
@@ -681,4 +685,242 @@ describe( 'private selectors', () => {
 			} );
 		} );
 	} );
+
+	describe( 'isEditLockedBlock', () => {
+		it( 'returns false when block has no lock attribute', () => {
+			const state = {
+				blocks: {
+					byClientId: new Map( [
+						[ 'block-1', { clientId: 'block-1' } ],
+					] ),
+					attributes: new Map( [ [ 'block-1', {} ] ] ),
+				},
+			};
+			expect( isEditLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'returns false when block has lock attribute but edit is false', () => {
+			const state = {
+				blocks: {
+					byClientId: new Map( [
+						[ 'block-1', { clientId: 'block-1' } ],
+					] ),
+					attributes: new Map( [
+						[ 'block-1', { lock: { edit: false, move: true } } ],
+					] ),
+				},
+			};
+			expect( isEditLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'returns true when block has lock attribute with edit set to true', () => {
+			const state = {
+				blocks: {
+					byClientId: new Map( [
+						[ 'block-1', { clientId: 'block-1' } ],
+					] ),
+					attributes: new Map( [
+						[ 'block-1', { lock: { edit: true } } ],
+					] ),
+				},
+			};
+			expect( isEditLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns false when block has no attributes', () => {
+			const state = {
+				blocks: {
+					byClientId: new Map(),
+					attributes: new Map(),
+				},
+			};
+			expect( isEditLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'isMoveLockedBlock', () => {
+		const createState = ( templateLock, blockLock ) => ( {
+			blocks: {
+				byClientId: new Map( [
+					[ 'block-1', { clientId: 'block-1' } ],
+					[ 'parent-block', { clientId: 'parent-block' } ],
+				] ),
+				attributes: new Map( [
+					[ 'block-1', blockLock ? { lock: blockLock } : {} ],
+					[ 'parent-block', {} ],
+				] ),
+				parents: new Map( [
+					[ 'block-1', 'parent-block' ],
+					[ 'parent-block', '' ],
+				] ),
+			},
+			settings: {},
+			blockListSettings: {
+				'parent-block': templateLock ? { templateLock } : {},
+			},
+		} );
+
+		it( 'returns false when block has no lock and no templateLock', () => {
+			const state = createState( null, null );
+			expect( isMoveLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'returns true when parent has templateLock set to "all"', () => {
+			const state = createState( 'all', null );
+			expect( isMoveLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns false when parent has templateLock set to "contentOnly"', () => {
+			const state = createState( 'contentOnly', null );
+			expect( isMoveLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'returns true when block has lock.move set to true', () => {
+			const state = createState( null, { move: true } );
+			expect( isMoveLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns false when block has lock.move set to false', () => {
+			const state = createState( null, { move: false } );
+			expect( isMoveLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'prioritizes block lock over template lock', () => {
+			const state = createState( 'all', { move: false } );
+			expect( isMoveLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'isRemoveLockedBlock', () => {
+		const createState = ( templateLock, blockLock ) => ( {
+			blocks: {
+				byClientId: new Map( [
+					[ 'block-1', { clientId: 'block-1' } ],
+					[ 'parent-block', { clientId: 'parent-block' } ],
+				] ),
+				attributes: new Map( [
+					[ 'block-1', blockLock ? { lock: blockLock } : {} ],
+					[ 'parent-block', {} ],
+				] ),
+				parents: new Map( [
+					[ 'block-1', 'parent-block' ],
+					[ 'parent-block', '' ],
+				] ),
+			},
+			settings: {},
+			blockListSettings: {
+				'parent-block': templateLock ? { templateLock } : {},
+			},
+		} );
+
+		it( 'returns false when block has no lock and no templateLock', () => {
+			const state = createState( null, null );
+			expect( isRemoveLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'returns true when parent has templateLock set to "all"', () => {
+			const state = createState( 'all', null );
+			expect( isRemoveLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns true when parent has templateLock set to "insert"', () => {
+			const state = createState( 'insert', null );
+			expect( isRemoveLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns false when parent has templateLock set to "contentOnly"', () => {
+			const state = createState( 'contentOnly', null );
+			expect( isRemoveLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'returns true when block has lock.remove set to true', () => {
+			const state = createState( null, { remove: true } );
+			expect( isRemoveLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns false when block has lock.remove set to false', () => {
+			const state = createState( null, { remove: false } );
+			expect( isRemoveLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'prioritizes block lock over template lock', () => {
+			const state = createState( 'all', { remove: false } );
+			expect( isRemoveLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+	} );
+
+	describe( 'isLockedBlock', () => {
+		const createState = ( templateLock, blockLock ) => ( {
+			blocks: {
+				byClientId: new Map( [
+					[ 'block-1', { clientId: 'block-1' } ],
+					[ 'parent-block', { clientId: 'parent-block' } ],
+				] ),
+				attributes: new Map( [
+					[ 'block-1', blockLock ? { lock: blockLock } : {} ],
+					[ 'parent-block', {} ],
+				] ),
+				parents: new Map( [
+					[ 'block-1', 'parent-block' ],
+					[ 'parent-block', '' ],
+				] ),
+			},
+			settings: {},
+			blockListSettings: {
+				'parent-block': templateLock ? { templateLock } : {},
+			},
+		} );
+
+		it( 'returns false when block is not locked in any way', () => {
+			const state = createState( null, null );
+			expect( isLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+
+		it( 'returns true when block has lock.edit set to true', () => {
+			const state = createState( null, { edit: true } );
+			expect( isLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns true when block has lock.move set to true', () => {
+			const state = createState( null, { move: true } );
+			expect( isLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns true when block has lock.remove set to true', () => {
+			const state = createState( null, { remove: true } );
+			expect( isLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns true when parent has templateLock set to "all"', () => {
+			const state = createState( 'all', null );
+			expect( isLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns true when block has multiple locks', () => {
+			const state = createState( null, {
+				edit: true,
+				move: true,
+				remove: true,
+			} );
+			expect( isLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns true when only one lock type is active', () => {
+			const state = createState( null, {
+				edit: false,
+				move: true,
+				remove: false,
+			} );
+			expect( isLockedBlock( state, 'block-1' ) ).toBe( true );
+		} );
+
+		it( 'returns false when all lock types are explicitly false', () => {
+			const state = createState( null, {
+				edit: false,
+				move: false,
+				remove: false,
+			} );
+			expect( isLockedBlock( state, 'block-1' ) ).toBe( false );
+		} );
+	} );
 } );

package/src/store/test/reducer.js

@@ -4540,11 +4540,16 @@ describe( 'state', () => {
 					);
 				} );
 
-				it( 'returns the expected block editing modes for template parts', () => {
-					// Currently, template parts are not considered sections, so
-					// child blocks are not set to contentOnly.
+				it( 'returns the expected block editing modes for synced patterns', () => {
 					expect( initialState.derivedBlockEditingModes ).toEqual(
-						new Map()
+						new Map(
+							Object.entries( {
+								'template-part-paragraph': 'contentOnly',
+								'template-part-group': 'disabled',
+								'template-part-grouped-paragraph':
+									'contentOnly',
+							} )
+						)
 					);
 				} );
 
@@ -4568,7 +4573,7 @@ describe( 'state', () => {
 					expect( derivedBlockEditingModes ).toEqual( new Map() );
 				} );
 
-				it( 'does not set contentOnly mode for children of template parts', () => {
+				it( 'allows explicitly set blockEditingModes to override the template part editing modes', () => {
 					const { derivedBlockEditingModes } = dispatchActions(
 						[
 							{
@@ -4582,8 +4587,13 @@ describe( 'state', () => {
 					);
 
 					expect( derivedBlockEditingModes ).toEqual(
-						// template-part-grouped-paragraph already has an explicit mode, so isn't set as a derived mode.
-						new Map()
+						new Map(
+							Object.entries( {
+								'template-part-paragraph': 'contentOnly',
+								'template-part-group': 'disabled',
+								// template-part-grouped-paragraph already has an explicit mode, so isn't set as a derived mode.
+							} )
+						)
 					);
 				} );
 			} );

package/src/style.scss

@@ -33,7 +33,6 @@
 @use "./components/date-format-picker/style.scss" as *;
 @use "./components/duotone-control/style.scss" as *;
 @use "./components/font-appearance-control/style.scss" as *;
-@use "./components/font-family/style.scss" as *;
 @use "./components/global-styles/style.scss" as *;
 @use "./components/grid/style.scss" as *;
 @use "./components/height-control/style.scss" as *;

package/tsconfig.json

@@ -9,6 +9,7 @@
 		{ "path": "../components" },
 		{ "path": "../compose" },
 		{ "path": "../data" },
+		{ "path": "../dataviews" },
 		{ "path": "../date" },
 		{ "path": "../deprecated" },
 		{ "path": "../dom" },