@wordpress/block-editor 15.10.1-next.v.0 → 15.11.1-next.v.0

package/src/hooks/test/metadata.js

@@ -174,6 +174,7 @@ describe( 'metadata', () => {
 
 		it( 'should preserve custom name metadata', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 			} );
 			const source = [
@@ -199,6 +200,7 @@ describe( 'metadata', () => {
 
 		it( 'should not preserve custom name metadata when target block does not support renaming', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: {
 					renaming: false,
@@ -226,6 +228,7 @@ describe( 'metadata', () => {
 
 		it( 'should preserve block visibility metadata', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 			} );
 
@@ -252,6 +255,7 @@ describe( 'metadata', () => {
 
 		it( 'should not preserve block visibility metadata when target block does not support it', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: {
 					visibility: false,

package/src/hooks/test/text-align.js

@@ -16,6 +16,7 @@ const noop = () => {};
 
 describe( 'textAlign', () => {
 	const blockSettings = {
+		apiVersion: 3,
 		save: noop,
 		category: 'text',
 		title: 'block title',

package/src/hooks/utils.js

@@ -19,6 +19,7 @@ import {
 	useBlockEditContext,
 	mayDisplayControlsKey,
 	mayDisplayParentControlsKey,
+	mayDisplayPatternEditingControlsKey,
 } from '../components/block-edit/context';
 import { useSettings } from '../components';
 import { useSettingsForBlockElement } from '../components/global-styles/hooks';
@@ -521,60 +522,66 @@ export function createBlockEditFilter( features ) {
 		return { ...settings, Edit: memo( settings.edit ) };
 	} );
 	const withBlockEditHooks = createHigherOrderComponent(
-		( OriginalBlockEdit ) => ( props ) => {
-			const context = useBlockEditContext();
-			// CAUTION: code added before this line will be executed for all
-			// blocks, not just those that support the feature! Code added
-			// above this line should be carefully evaluated for its impact on
-			// performance.
-			return [
-				...features.map( ( feature, i ) => {
-					const {
-						Edit,
-						hasSupport,
-						attributeKeys = [],
-						shareWithChildBlocks,
-					} = feature;
-					const shouldDisplayControls =
-						context[ mayDisplayControlsKey ] ||
-						( context[ mayDisplayParentControlsKey ] &&
-							shareWithChildBlocks );
+		( OriginalBlockEdit ) =>
+			function WithBlockEditHooks( props ) {
+				const context = useBlockEditContext();
+				// CAUTION: code added before this line will be executed for all
+				// blocks, not just those that support the feature! Code added
+				// above this line should be carefully evaluated for its impact on
+				// performance.
+				return [
+					...features.map( ( feature, i ) => {
+						const {
+							Edit,
+							hasSupport,
+							attributeKeys = [],
+							shareWithChildBlocks,
+							supportsPatternEditing,
+						} = feature;
+						const shouldDisplayControls =
+							( supportsPatternEditing &&
+								context[
+									mayDisplayPatternEditingControlsKey
+								] ) ||
+							context[ mayDisplayControlsKey ] ||
+							( context[ mayDisplayParentControlsKey ] &&
+								shareWithChildBlocks );
 
-					if (
-						! shouldDisplayControls ||
-						! hasSupport( props.name )
-					) {
-						return null;
-					}
-
-					const neededProps = {};
-					for ( const key of attributeKeys ) {
-						if ( props.attributes[ key ] ) {
-							neededProps[ key ] = props.attributes[ key ];
+						if (
+							! shouldDisplayControls ||
+							! hasSupport( props.name )
+						) {
+							return null;
 						}
-					}
 
-					return (
-						<Edit
-							// We can use the index because the array length
-							// is fixed per page load right now.
-							key={ i }
-							name={ props.name }
-							isSelected={ props.isSelected }
-							clientId={ props.clientId }
-							setAttributes={ props.setAttributes }
-							__unstableParentLayout={
-								props.__unstableParentLayout
+						const neededProps = {};
+						for ( const key of attributeKeys ) {
+							if ( props.attributes[ key ] ) {
+								neededProps[ key ] = props.attributes[ key ];
 							}
-							// This component is pure, so only pass needed
-							// props!!!
-							{ ...neededProps }
-						/>
-					);
-				} ),
-				<OriginalBlockEdit key="edit" { ...props } />,
-			];
-		},
+						}
+
+						return (
+							<Edit
+								// We can use the index because the array length
+								// is fixed per page load right now.
+								key={ i }
+								name={ props.name }
+								isSelected={ props.isSelected }
+								clientId={ props.clientId }
+								setAttributes={ props.setAttributes }
+								__unstableParentLayout={
+									props.__unstableParentLayout
+								}
+								// This component is pure, so only pass needed
+								// props!!!
+								{ ...neededProps }
+							/>
+						);
+					} ),
+					<OriginalBlockEdit key="edit" { ...props } />,
+				];
+			},
 		'withBlockEditHooks'
 	);
 	addFilter( 'editor.BlockEdit', 'core/editor/hooks', withBlockEditHooks );
@@ -610,76 +617,77 @@ const BlockPropsPure = memo( BlockProps );
 
 export function createBlockListBlockFilter( features ) {
 	const withBlockListBlockHooks = createHigherOrderComponent(
-		( BlockListBlock ) => ( props ) => {
-			const [ allWrapperProps, setAllWrapperProps ] = useState(
-				Array( features.length ).fill( undefined )
-			);
-			return [
-				...features.map( ( feature, i ) => {
-					const {
-						hasSupport,
-						attributeKeys = [],
-						useBlockProps,
-						isMatch,
-					} = feature;
+		( BlockListBlock ) =>
+			function WithBlockListBlockHooks( props ) {
+				const [ allWrapperProps, setAllWrapperProps ] = useState(
+					Array( features.length ).fill( undefined )
+				);
+				return [
+					...features.map( ( feature, i ) => {
+						const {
+							hasSupport,
+							attributeKeys = [],
+							useBlockProps,
+							isMatch,
+						} = feature;
 
-					const neededProps = {};
-					for ( const key of attributeKeys ) {
-						if ( props.attributes[ key ] ) {
-							neededProps[ key ] = props.attributes[ key ];
+						const neededProps = {};
+						for ( const key of attributeKeys ) {
+							if ( props.attributes[ key ] ) {
+								neededProps[ key ] = props.attributes[ key ];
+							}
 						}
-					}
 
-					if (
-						// Skip rendering if none of the needed attributes are
-						// set.
-						! Object.keys( neededProps ).length ||
-						! hasSupport( props.name ) ||
-						( isMatch && ! isMatch( neededProps ) )
-					) {
-						return null;
-					}
+						if (
+							// Skip rendering if none of the needed attributes are
+							// set.
+							! Object.keys( neededProps ).length ||
+							! hasSupport( props.name ) ||
+							( isMatch && ! isMatch( neededProps ) )
+						) {
+							return null;
+						}
 
-					return (
-						<BlockPropsPure
-							// We can use the index because the array length
-							// is fixed per page load right now.
-							key={ i }
-							index={ i }
-							useBlockProps={ useBlockProps }
-							// This component is pure, so we must pass a stable
-							// function reference.
-							setAllWrapperProps={ setAllWrapperProps }
-							name={ props.name }
-							clientId={ props.clientId }
-							// This component is pure, so only pass needed
-							// props!!!
-							{ ...neededProps }
-						/>
-					);
-				} ),
-				<BlockListBlock
-					key="edit"
-					{ ...props }
-					wrapperProps={ allWrapperProps
-						.filter( Boolean )
-						.reduce( ( acc, wrapperProps ) => {
-							return {
-								...acc,
-								...wrapperProps,
-								className: clsx(
-									acc.className,
-									wrapperProps.className
-								),
-								style: {
-									...acc.style,
-									...wrapperProps.style,
-								},
-							};
-						}, props.wrapperProps || {} ) }
-				/>,
-			];
-		},
+						return (
+							<BlockPropsPure
+								// We can use the index because the array length
+								// is fixed per page load right now.
+								key={ i }
+								index={ i }
+								useBlockProps={ useBlockProps }
+								// This component is pure, so we must pass a stable
+								// function reference.
+								setAllWrapperProps={ setAllWrapperProps }
+								name={ props.name }
+								clientId={ props.clientId }
+								// This component is pure, so only pass needed
+								// props!!!
+								{ ...neededProps }
+							/>
+						);
+					} ),
+					<BlockListBlock
+						key="edit"
+						{ ...props }
+						wrapperProps={ allWrapperProps
+							.filter( Boolean )
+							.reduce( ( acc, wrapperProps ) => {
+								return {
+									...acc,
+									...wrapperProps,
+									className: clsx(
+										acc.className,
+										wrapperProps.className
+									),
+									style: {
+										...acc.style,
+										...wrapperProps.style,
+									},
+								};
+							}, props.wrapperProps || {} ) }
+					/>,
+				];
+			},
 		'withBlockListBlockHooks'
 	);
 	addFilter(

package/src/layouts/grid.js

@@ -113,6 +113,7 @@ export default {
 		style,
 		blockName,
 		hasBlockGapSupport,
+		globalBlockGapValue,
 		layoutDefinitions = LAYOUT_DEFINITIONS,
 	} ) {
 		const {
@@ -146,13 +147,28 @@ export default {
 				? getGapCSSValue( style?.spacing?.blockGap, '0.5em' )
 				: undefined;
 
+		// Use the global blockGap value for grid column calculations when available
+		// If the gap value has both top and left (separated by space), use the left value for horizontal calculations
+		let fallbackGapValue = '1.2rem';
+		if ( globalBlockGapValue ) {
+			const processedGap = getGapCSSValue( globalBlockGapValue, '0.5em' );
+			const gapParts = processedGap.split( ' ' );
+			fallbackGapValue =
+				gapParts.length > 1 ? gapParts[ 1 ] : gapParts[ 0 ];
+		}
+
 		let output = '';
 		const rules = [];
 
 		if ( minimumColumnWidth && columnCount > 0 ) {
-			const maxValue = `max(${ minimumColumnWidth }, ( 100% - (${
-				blockGapValue || '1.2rem'
-			}*${ columnCount - 1 }) ) / ${ columnCount })`;
+			let blockGapToUse = blockGapValue || fallbackGapValue;
+			// Ensure 0 values have a unit so they work in calc().
+			if ( blockGapToUse === '0' || blockGapToUse === 0 ) {
+				blockGapToUse = '0px';
+			}
+			const maxValue = `max(min( ${ minimumColumnWidth }, 100%), ( 100% - (${ blockGapToUse }*${
+				columnCount - 1
+			}) ) / ${ columnCount })`;
 			rules.push(
 				`grid-template-columns: repeat(auto-fill, minmax(${ maxValue }, 1fr))`,
 				`container-type: inline-size`

package/src/layouts/test/grid.js

@@ -33,7 +33,7 @@ describe( 'getLayoutStyle', () => {
 		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 expected = `.my-container { grid-template-columns: repeat(auto-fill, minmax(max(min( 12rem, 100%), ( 100% - (1.2rem*2) ) / 3), 1fr)); container-type: inline-size; }`;
 
 		const result = grid.getLayoutStyle( {
 			selector: '.my-container',

package/src/store/defaults.js

@@ -157,6 +157,10 @@ export const SETTINGS_DEFAULTS = {
 	// Allows to disable block locking interface.
 	canLockBlocks: true,
 
+	// Whether the user can edit custom CSS (requires edit_css capability).
+	// Defaults to false for safety - PHP passes true when user has capability.
+	canEditCSS: false,
+
 	// Allows to disable Openverse media category in the inserter.
 	enableOpenverseMediaCategory: true,
 

package/src/store/private-selectors.js

@@ -36,12 +36,8 @@ import {
 	reusableBlocksSelectKey,
 	sectionRootClientIdKey,
 	isIsolatedEditorKey,
-	deviceTypeKey,
 } from './private-keys';
-import {
-	BLOCK_VISIBILITY_VIEWPORT_ENTRIES,
-	BLOCK_VISIBILITY_VIEWPORTS,
-} from '../components/block-visibility/constants';
+import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
 
 const { isContentBlock } = unlock( blocksPrivateApis );
 
@@ -703,18 +699,22 @@ export function getInsertionPoint( state ) {
 }
 
 /**
- * Returns true if the block is hidden, or false otherwise.
+ * Returns true if the block is hidden anywhere, or false otherwise.
+ *
+ * This selector checks whether a block has visibility metadata set that would
+ * hide it at any viewport or everywhere. It's useful for flagging blocks that
+ * have visibility restrictions.
  *
- * A block is considered hidden if:
+ * A block is considered hidden anywhere if:
  * - blockVisibility is false (hidden everywhere)
- * - blockVisibility is an object with the current device preview set to false
+ * - blockVisibility.viewport has any viewport set to false (hidden at specific screen sizes)
  *
  * @param {Object} state    Global application state.
  * @param {string} clientId Client ID of the block.
  *
- * @return {boolean} Whether the block is hidden.
+ * @return {boolean} Whether the block is hidden anywhere.
  */
-export const isBlockHidden = ( state, clientId ) => {
+export const isBlockHiddenAnywhere = ( state, clientId ) => {
 	const blockName = getBlockName( state, clientId );
 	if ( ! hasBlockSupport( blockName, 'visibility', true ) ) {
 		return false;
@@ -726,79 +726,110 @@ export const isBlockHidden = ( state, clientId ) => {
 		return true;
 	}
 
-	if ( ! window.__experimentalHideBlocksBasedOnScreenSize ) {
-		return false;
+	if (
+		typeof blockVisibility?.viewport === 'object' &&
+		blockVisibility?.viewport !== null
+	) {
+		// Check if the block is hidden at any viewport.
+		return Object.values( BLOCK_VISIBILITY_VIEWPORTS ).some(
+			( viewport ) =>
+				blockVisibility?.viewport?.[ viewport.key ] === false
+		);
 	}
+	return false;
+};
 
-	// Check viewport-specific hiding based on current device preview
-	// Only apply when a device is explicitly selected.
-	if ( typeof blockVisibility === 'object' && blockVisibility !== null ) {
-		const settings = getSettings( state );
-		const viewportType =
-			settings[ deviceTypeKey ] ?? BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
-		const viewportKey = viewportType.toLowerCase();
-		return blockVisibility?.[ viewportKey ] === false;
+/**
+ * Returns true if the block is hidden everywhere (blockVisibility is false).
+ *
+ * A block is considered hidden everywhere when blockVisibility is explicitly
+ * set to false, which means it's hidden on all viewports.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client ID of the block.
+ *
+ * @return {boolean} Whether the block is hidden everywhere.
+ */
+export const isBlockHiddenEverywhere = ( state, clientId ) => {
+	const blockName = getBlockName( state, clientId );
+	if ( ! hasBlockSupport( blockName, 'visibility', true ) ) {
+		return false;
 	}
+	const attributes = state.blocks.attributes.get( clientId );
+	const blockVisibility = attributes?.metadata?.blockVisibility;
 
+	if ( blockVisibility === false ) {
+		return true;
+	}
 	return false;
 };
 
 /**
- * Returns true if any of the provided blocks are hidden.
+ * Returns true if any parent block (immediate or further up the chain) is hidden everywhere.
  *
- * @param {Object} state     Global application state.
- * @param {Array}  clientIds Array of block client IDs to check.
- * @return {boolean} Whether any block is hidden.
+ * Checks all parent blocks in the hierarchy and returns true if any of them
+ * is hidden everywhere.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client ID of the block.
+ *
+ * @return {boolean} Whether any parent block is hidden everywhere.
  */
-export const areBlocksHidden = ( state, clientIds ) => {
-	if ( ! clientIds || clientIds.length === 0 ) {
-		return false;
-	}
-	return clientIds.some( ( clientId ) => isBlockHidden( state, clientId ) );
+export const isBlockParentHiddenEverywhere = ( state, clientId ) => {
+	const parents = getBlockParents( state, clientId );
+	return parents.some( ( parentId ) =>
+		isBlockHiddenEverywhere( state, parentId )
+	);
 };
 
 /**
- * Checks if at least one block in an array is hidden according to viewport visibility metadata.
+ * Returns true if the block is hidden at the given viewport.
  *
- * This is typically used to determine if the block visibility button should be shown in the toolbar.
- * TODO: This is temporary for now. Later the UI will
- * want to know where exactly the block is hidden, e.g., to display icons or other things.
+ * A block is considered hidden at a viewport if:
+ * - blockVisibility is false (hidden everywhere)
+ * - blockVisibility is an object with the specified viewport set to false
  *
- * A block is considered hidden if:
- * - Its `blockVisibility` metadata is `false` (hidden everywhere), or
- * - Any viewport is set to `false`
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client ID of the block.
+ * @param {string} viewport Viewport to check ('desktop', 'tablet', 'mobile').
  *
- * @param {Object} state     Global application state.
- * @param {Array}  clientIds Array of block client IDs to check.
- * @return {boolean} `true` if at least one block meets the visibility criteria, `false` otherwise.
+ * @return {boolean} Whether the block is hidden at the viewport.
  */
-export const areBlocksHiddenAnywhere = ( state, clientIds ) => {
-	if ( ! clientIds?.length ) {
-		return false;
+export const isBlockHiddenAtViewport = ( state, clientId, viewport ) => {
+	if ( isBlockHiddenEverywhere( state, clientId ) ) {
+		return true;
 	}
-	return clientIds.some( ( clientId ) => {
-		if ( ! clientId ) {
-			return false;
-		}
-
-		const attributes = state.blocks.attributes.get( clientId );
-		const blockVisibility = attributes?.metadata?.blockVisibility;
-
-		// If explicitly hidden everywhere (false), return true.
-		if ( typeof blockVisibility === 'boolean' ) {
-			return blockVisibility === false;
-		}
 
-		// If not an object, block is not hidden in any viewport.
-		if ( 'object' !== typeof blockVisibility ) {
-			return false;
-		}
+	const attributes = state.blocks.attributes.get( clientId );
+	const blockVisibilityViewport =
+		attributes?.metadata?.blockVisibility?.viewport;
+	if (
+		typeof blockVisibilityViewport === 'object' &&
+		blockVisibilityViewport !== null &&
+		typeof viewport === 'string'
+	) {
+		return blockVisibilityViewport?.[ viewport.toLowerCase() ] === false;
+	}
+	return false;
+};
 
-		// Check viewport-specific visibility.
-		return BLOCK_VISIBILITY_VIEWPORT_ENTRIES.some(
-			( [ , { key } ] ) => blockVisibility?.[ key ] === false
-		);
-	} );
+/**
+ * Returns true if any parent block (immediate or further up the chain) is hidden at the given viewport.
+ *
+ * Checks all parent blocks in the hierarchy and returns true if any of them
+ * is hidden at the specified viewport.
+ *
+ * @param {Object} state    Global application state.
+ * @param {string} clientId Client ID of the block.
+ * @param {string} viewport Viewport to check ('desktop', 'tablet', 'mobile').
+ *
+ * @return {boolean} Whether any parent block is hidden at the viewport.
+ */
+export const isBlockParentHiddenAtViewport = ( state, clientId, viewport ) => {
+	const parents = getBlockParents( state, clientId );
+	return parents.some( ( parentId ) =>
+		isBlockHiddenAtViewport( state, parentId, viewport )
+	);
 };
 
 /**

package/src/store/selectors.js

@@ -2279,13 +2279,21 @@ export const getInserterItems = createRegistrySelector( ( select ) =>
 						)
 				);
 			} else {
+				const { getClosestAllowedInsertionPoint } = unlock(
+					select( STORE_NAME )
+				);
 				blockTypeInserterItems = blockTypeInserterItems
-					.filter( ( blockType ) =>
-						isBlockVisibleInTheInserter(
-							state,
-							blockType,
-							rootClientId
-						)
+					.filter(
+						( blockType ) =>
+							isBlockVisibleInTheInserter(
+								state,
+								blockType,
+								rootClientId
+							) &&
+							getClosestAllowedInsertionPoint(
+								blockType.name,
+								rootClientId
+							) !== null
 					)
 					.map( ( blockType ) => ( {
 						...blockType,

package/src/store/test/actions.js

@@ -60,6 +60,7 @@ const {
 
 describe( 'actions', () => {
 	const defaultBlockSettings = {
+		apiVersion: 3,
 		attributes: {
 			content: {},
 		},
@@ -863,6 +864,7 @@ describe( 'actions', () => {
 
 		it( 'should merge the blocks if blocks of the same type', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},
@@ -933,6 +935,7 @@ describe( 'actions', () => {
 
 		it( 'should not merge the blocks have different types without transformation', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},
@@ -986,6 +989,7 @@ describe( 'actions', () => {
 
 		it( 'should transform and merge the blocks', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {
 						type: 'string',
@@ -1004,6 +1008,7 @@ describe( 'actions', () => {
 				title: 'test block',
 			} );
 			registerBlockType( 'core/test-block-2', {
+				apiVersion: 3,
 				attributes: {
 					content2: {
 						type: 'string',
@@ -1081,6 +1086,7 @@ describe( 'actions', () => {
 
 		it( 'should not merge the blocks if blockB editing mode is `disabled`', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},
@@ -1140,6 +1146,7 @@ describe( 'actions', () => {
 
 		it( 'should not merge the blocks if blockA editing mode is `disabled`', () => {
 			registerBlockType( 'core/test-block', {
+				apiVersion: 3,
 				attributes: {
 					content: {},
 				},