@wordpress/block-editor 15.11.0 → 15.12.0

package/src/hooks/layout.js

@@ -30,6 +30,7 @@ import { useBlockEditingMode } from '../components/block-editing-mode';
 import { LAYOUT_DEFINITIONS } from '../layouts/definitions';
 import { useBlockSettings, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
+import { globalStylesDataKey } from '../store/private-keys';
 
 const layoutBlockSupportKey = 'layout';
 const { kebabCase } = unlock( componentsPrivateApis );
@@ -367,6 +368,7 @@ function BlockWithLayoutStyles( {
 	block: BlockListBlock,
 	props,
 	blockGapSupport,
+	globalBlockGapValue,
 	layoutClasses,
 } ) {
 	const { name, attributes } = props;
@@ -393,6 +395,7 @@ function BlockWithLayoutStyles( {
 		layout: usedLayout,
 		style: attributes?.style,
 		hasBlockGapSupport,
+		globalBlockGapValue,
 	} );
 
 	// Attach a `wp-container-` id-based class name as well as a layout class name such as `is-layout-flex`.
@@ -421,56 +424,65 @@ function BlockWithLayoutStyles( {
  * @return {Function} Wrapped component.
  */
 export const withLayoutStyles = createHigherOrderComponent(
-	( BlockListBlock ) => ( props ) => {
-		const { clientId, name, attributes } = props;
-		const blockSupportsLayout = hasLayoutBlockSupport( name );
-		const layoutClasses = useLayoutClasses( attributes, name );
-		const extraProps = useSelect(
-			( select ) => {
-				// The callback returns early to avoid block editor subscription.
-				if ( ! blockSupportsLayout ) {
-					return;
-				}
-
-				const { getSettings, getBlockSettings } = unlock(
-					select( blockEditorStore )
-				);
-				const { disableLayoutStyles } = getSettings();
+	( BlockListBlock ) =>
+		function WithLayoutStyles( props ) {
+			const { clientId, name, attributes } = props;
+			const blockSupportsLayout = hasLayoutBlockSupport( name );
+			const layoutClasses = useLayoutClasses( attributes, name );
+			const extraProps = useSelect(
+				( select ) => {
+					// The callback returns early to avoid block editor subscription.
+					if ( ! blockSupportsLayout ) {
+						return;
+					}
 
-				if ( disableLayoutStyles ) {
-					return;
-				}
+					const { getSettings, getBlockSettings } = unlock(
+						select( blockEditorStore )
+					);
+					const settings = getSettings();
+					const { disableLayoutStyles } = settings;
 
-				const [ blockGapSupport ] = getBlockSettings(
-					clientId,
-					'spacing.blockGap'
-				);
+					if ( disableLayoutStyles ) {
+						return;
+					}
 
-				return { blockGapSupport };
-			},
-			[ blockSupportsLayout, clientId ]
-		);
+					const [ blockGapSupport ] = getBlockSettings(
+						clientId,
+						'spacing.blockGap'
+					);
+
+					// Get default blockGap value from global styles for use in layouts like grid.
+					// Check block-specific styles first, then fall back to root styles.
+					const globalStyles = settings[ globalStylesDataKey ];
+					const globalBlockGapValue =
+						globalStyles?.blocks?.[ name ]?.spacing?.blockGap ??
+						globalStyles?.spacing?.blockGap;
+
+					return { blockGapSupport, globalBlockGapValue };
+				},
+				[ blockSupportsLayout, clientId ]
+			);
+
+			if ( ! extraProps ) {
+				return (
+					<BlockListBlock
+						{ ...props }
+						__unstableLayoutClassNames={
+							blockSupportsLayout ? layoutClasses : undefined
+						}
+					/>
+				);
+			}
 
-		if ( ! extraProps ) {
 			return (
-				<BlockListBlock
-					{ ...props }
-					__unstableLayoutClassNames={
-						blockSupportsLayout ? layoutClasses : undefined
-					}
+				<BlockWithLayoutStyles
+					block={ BlockListBlock }
+					props={ props }
+					layoutClasses={ layoutClasses }
+					{ ...extraProps }
 				/>
 			);
-		}
-
-		return (
-			<BlockWithLayoutStyles
-				block={ BlockListBlock }
-				props={ props }
-				layoutClasses={ layoutClasses }
-				{ ...extraProps }
-			/>
-		);
-	},
+		},
 	'withLayoutStyles'
 );
 

package/src/hooks/list-view.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { PanelBody } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { store as blocksStore, hasBlockSupport } from '@wordpress/blocks';
+import { hasBlockSupport } from '@wordpress/blocks';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -14,6 +14,7 @@ import { store as blockEditorStore } from '../store';
 import { PrivateListView } from '../components/list-view';
 import InspectorControls from '../components/inspector-controls/fill';
 import { PrivateBlockContext } from '../components/block-list/private-block-context';
+import useBlockDisplayTitle from '../components/block-title/use-block-display-title';
 
 export const LIST_VIEW_SUPPORT_KEY = 'listView';
 
@@ -39,7 +40,7 @@ export function ListViewPanel( { clientId, name } ) {
 	const { isSelectionWithinCurrentSection } =
 		useContext( PrivateBlockContext );
 	const isEnabled = hasListViewSupport( name );
-	const { hasChildren, blockTitle, isNestedListView } = useSelect(
+	const { hasChildren, isNestedListView } = useSelect(
 		( select ) => {
 			const { getBlockCount, getBlockParents, getBlockName } =
 				select( blockEditorStore );
@@ -64,12 +65,15 @@ export function ListViewPanel( { clientId, name } ) {
 
 			return {
 				hasChildren: !! getBlockCount( clientId ),
-				blockTitle: select( blocksStore ).getBlockType( name )?.title,
 				isNestedListView: _isNestedListView,
 			};
 		},
-		[ clientId, name, isSelectionWithinCurrentSection ]
+		[ clientId, isSelectionWithinCurrentSection ]
 	);
+	const title = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
 
 	if ( ! isEnabled || isNestedListView ) {
 		return null;
@@ -79,7 +83,7 @@ export function ListViewPanel( { clientId, name } ) {
 
 	return (
 		<InspectorControls group="list">
-			<PanelBody title={ showBlockTitle ? blockTitle : undefined }>
+			<PanelBody title={ showBlockTitle ? title : undefined }>
 				{ ! hasChildren && (
 					<p className="block-editor-block-inspector__no-blocks">
 						{ __( 'No items yet.' ) }
@@ -88,7 +92,7 @@ export function ListViewPanel( { clientId, name } ) {
 				<PrivateListView
 					rootClientId={ clientId }
 					isExpanded
-					description={ blockTitle }
+					description={ title }
 					showAppender
 				/>
 			</PanelBody>

package/src/hooks/test/align.js

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

package/src/hooks/test/allowed-blocks.js

@@ -22,6 +22,7 @@ describe( 'allowedBlocks', () => {
 	describe( 'addTransforms()', () => {
 		it( 'should not preserve allowedBlocks in wrapping transforms', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -53,6 +54,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks in one-to-many transforms', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -83,6 +85,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks in many-to-one transforms', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -114,6 +117,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks in many-to-many transforms with different counts', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -155,6 +159,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should preserve allowedBlocks in many-to-many transforms with same counts', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -194,6 +199,7 @@ describe( 'allowedBlocks', () => {
 
 		it( "should filter allowedBlocks based on destination block's allowedBlocks", () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 				allowedBlocks: [ 'core/paragraph' ],
@@ -227,6 +233,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not override existing allowedBlocks in target block', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 				supports: { allowedBlocks: true },
 			} );
@@ -253,6 +260,7 @@ describe( 'allowedBlocks', () => {
 
 		it( 'should not preserve allowedBlocks when target block does not support allowedBlocks', () => {
 			registerBlockType( 'core/bar', {
+				apiVersion: 3,
 				title: 'Bar',
 			} );
 

package/src/hooks/test/auto-inspector-controls.js

@@ -24,6 +24,7 @@ describe( 'auto-inspector-controls', () => {
 	describe( 'hasSupport()', () => {
 		it( 'should return false for blocks without __experimentalAutoInspectorControl markers', () => {
 			registerBlockType( blockName, {
+				apiVersion: 3,
 				title: 'Test Block',
 				category: 'text',
 				attributes: {
@@ -42,6 +43,7 @@ describe( 'auto-inspector-controls', () => {
 
 		it( 'should return true for blocks with __experimentalAutoInspectorControl markers', () => {
 			registerBlockType( blockName, {
+				apiVersion: 3,
 				title: 'Test Block',
 				category: 'text',
 				attributes: {
@@ -71,6 +73,7 @@ describe( 'auto-inspector-controls', () => {
 
 		it( 'should return false for blocks with no attributes', () => {
 			registerBlockType( blockName, {
+				apiVersion: 3,
 				title: 'Test Block',
 				category: 'text',
 				edit: () => null,
@@ -84,6 +87,7 @@ describe( 'auto-inspector-controls', () => {
 
 		it( 'should return true when at least one attribute has __experimentalAutoInspectorControl', () => {
 			registerBlockType( blockName, {
+				apiVersion: 3,
 				title: 'Test Block',
 				category: 'text',
 				attributes: {

package/src/hooks/test/font-size.js

@@ -39,6 +39,7 @@ function addUseSettingFilter( callback ) {
 
 describe( 'useBlockProps', () => {
 	const blockSettings = {
+		apiVersion: 3,
 		save: () => noop,
 		category: 'text',
 		title: 'font size title',

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

@@ -522,63 +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,
-						supportsPatternEditing,
-					} = feature;
-					const shouldDisplayControls =
-						( supportsPatternEditing &&
-							context[ mayDisplayPatternEditingControlsKey ] ) ||
-						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 );
@@ -614,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',