@wordpress/block-editor 12.20.0 → 12.22.0

package/src/hooks/background.js

@@ -103,6 +103,46 @@ export function hasBackgroundSupport( blockName, feature = 'any' ) {
 	return !! support?.[ feature ];
 }
 
+function useBlockProps( { name, style } ) {
+	if (
+		! hasBackgroundSupport( name ) ||
+		! style?.background?.backgroundImage
+	) {
+		return;
+	}
+
+	const backgroundImage = style?.background?.backgroundImage;
+	let props;
+
+	// Set block background defaults.
+	if ( backgroundImage?.source === 'file' && !! backgroundImage?.url ) {
+		if ( ! style?.background?.backgroundSize ) {
+			props = {
+				style: {
+					backgroundSize: 'cover',
+				},
+			};
+		}
+
+		if (
+			'contain' === style?.background?.backgroundSize &&
+			! style?.background?.backgroundPosition
+		) {
+			props = {
+				style: {
+					backgroundPosition: 'center',
+				},
+			};
+		}
+	}
+
+	if ( ! props ) {
+		return;
+	}
+
+	return props;
+}
+
 /**
  * Resets the background image block support attributes. This can be used when disabling
  * the background image controls for a block via a `ToolsPanel`.
@@ -425,11 +465,10 @@ function BackgroundSizePanelItem( {
 	// If the current value is `cover` and the repeat value is `undefined`, then
 	// the toggle should be unchecked as the default state. Otherwise, the toggle
 	// should reflect the current repeat value.
-	const repeatCheckedValue =
+	const repeatCheckedValue = ! (
 		repeatValue === 'no-repeat' ||
 		( currentValueForToggle === 'cover' && repeatValue === undefined )
-			? false
-			: true;
+	);
 
 	const hasValue = hasBackgroundSizeValue( style );
 
@@ -526,7 +565,7 @@ function BackgroundSizePanelItem( {
 				label={ __( 'Size' ) }
 				value={ currentValueForToggle }
 				onChange={ updateBackgroundSize }
-				isBlock={ true }
+				isBlock
 				help={ backgroundSizeHelpText( sizeValue ) }
 			>
 				<ToggleGroupControlOption
@@ -602,3 +641,9 @@ export function BackgroundImagePanel( props ) {
 		</InspectorControls>
 	);
 }
+
+export default {
+	useBlockProps,
+	attributeKeys: [ 'style' ],
+	hasSupport: hasBackgroundSupport,
+};

package/src/hooks/block-hooks.js

@@ -19,28 +19,38 @@ import { store as blockEditorStore } from '../store';
 
 const EMPTY_OBJECT = {};
 
-function BlockHooksControlPure( { name, clientId } ) {
+function BlockHooksControlPure( {
+	name,
+	clientId,
+	metadata: { ignoredHookedBlocks = [] } = {},
+} ) {
 	const blockTypes = useSelect(
 		( select ) => select( blocksStore ).getBlockTypes(),
 		[]
 	);
 
+	// A hooked block added via a filter will not be exposed through a block
+	// type's `blockHooks` property; however, if the containing layout has been
+	// modified, it will be present in the anchor block's `ignoredHookedBlocks`
+	// metadata.
 	const hookedBlocksForCurrentBlock = useMemo(
 		() =>
 			blockTypes?.filter(
-				( { blockHooks } ) => blockHooks && name in blockHooks
+				( { name: blockName, blockHooks } ) =>
+					( blockHooks && name in blockHooks ) ||
+					ignoredHookedBlocks.includes( blockName )
 			),
-		[ blockTypes, name ]
+		[ blockTypes, name, ignoredHookedBlocks ]
 	);
 
 	const { blockIndex, rootClientId, innerBlocksLength } = useSelect(
 		( select ) => {
-			const { getBlock, getBlockIndex, getBlockRootClientId } =
+			const { getBlocks, getBlockIndex, getBlockRootClientId } =
 				select( blockEditorStore );
 
 			return {
 				blockIndex: getBlockIndex( clientId ),
-				innerBlocksLength: getBlock( clientId )?.innerBlocks?.length,
+				innerBlocksLength: getBlocks( clientId )?.length,
 				rootClientId: getBlockRootClientId( clientId ),
 			};
 		},
@@ -49,7 +59,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 
 	const hookedBlockClientIds = useSelect(
 		( select ) => {
-			const { getBlock, getGlobalBlockCount } =
+			const { getBlocks, getGlobalBlockCount } =
 				select( blockEditorStore );
 
 			const _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce(
@@ -69,7 +79,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 							// Any of the current block's siblings (with the right block type) qualifies
 							// as a hooked block (inserted `before` or `after` the current one), as the block
 							// might've been automatically inserted and then moved around a bit by the user.
-							candidates = getBlock( rootClientId )?.innerBlocks;
+							candidates = getBlocks( rootClientId );
 							break;
 
 						case 'first_child':
@@ -77,7 +87,17 @@ function BlockHooksControlPure( { name, clientId } ) {
 							// Any of the current block's child blocks (with the right block type) qualifies
 							// as a hooked first or last child block, as the block might've been automatically
 							// inserted and then moved around a bit by the user.
-							candidates = getBlock( clientId ).innerBlocks;
+							candidates = getBlocks( clientId );
+							break;
+
+						case undefined:
+							// If we haven't found a blockHooks field with a relative position for the hooked
+							// block, it means that it was added by a filter. In this case, we look for the block
+							// both among the current block's siblings and its children.
+							candidates = [
+								...getBlocks( rootClientId ),
+								...getBlocks( clientId ),
+							];
 							break;
 					}
 
@@ -151,6 +171,18 @@ function BlockHooksControlPure( { name, clientId } ) {
 					false
 				);
 				break;
+
+			case undefined:
+				// If we do not know the relative position, it is because the block was
+				// added via a filter. In this case, we default to inserting it after the
+				// current block.
+				insertBlock(
+					block,
+					blockIndex + 1,
+					rootClientId, // Insert as a child of the current block's parent
+					false
+				);
+				break;
 		}
 	};
 
@@ -159,8 +191,13 @@ function BlockHooksControlPure( { name, clientId } ) {
 			<PanelBody
 				className="block-editor-hooks__block-hooks"
 				title={ __( 'Plugins' ) }
-				initialOpen={ true }
+				initialOpen
 			>
+				<p className="block-editor-hooks__block-hooks-helptext">
+					{ __(
+						'Manage the inclusion of blocks added automatically by plugins.'
+					) }
+				</p>
 				{ Object.keys( groupedHookedBlocks ).map( ( vendor ) => {
 					return (
 						<Fragment key={ vendor }>
@@ -214,6 +251,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 
 export default {
 	edit: BlockHooksControlPure,
+	attributeKeys: [ 'metadata' ],
 	hasSupport() {
 		return true;
 	},

package/src/hooks/block-hooks.scss

@@ -13,4 +13,10 @@
 	.components-toggle-control .components-h-stack .components-h-stack {
 		flex-direction: row;
 	}
+
+	.block-editor-hooks__block-hooks-helptext {
+		color: $gray-700;
+		font-size: $helptext-font-size;
+		margin-bottom: $grid-unit-20;
+	}
 }

package/src/hooks/border.js

@@ -18,9 +18,14 @@ import { useSelect } from '@wordpress/data';
 import { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
 import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
-import { cleanEmptyObject, shouldSkipSerialization } from './utils';
+import {
+	cleanEmptyObject,
+	shouldSkipSerialization,
+	useBlockSettings,
+} from './utils';
 import {
 	useHasBorderPanel,
+	useHasBorderPanelControls,
 	BorderPanel as StylesBorderPanel,
 } from '../components/global-styles';
 import { store as blockEditorStore } from '../store';
@@ -220,14 +225,21 @@ export function hasShadowSupport( blockName ) {
 	return hasBlockSupport( blockName, SHADOW_SUPPORT_KEY );
 }
 
-export function getBorderPanelLabel( {
+export function useBorderPanelLabel( {
 	blockName,
 	hasBorderControl,
 	hasShadowControl,
 } = {} ) {
+	const settings = useBlockSettings( blockName );
+	const controls = useHasBorderPanelControls( settings );
+
 	if ( ! hasBorderControl && ! hasShadowControl && blockName ) {
-		hasBorderControl = hasBorderSupport( blockName );
-		hasShadowControl = hasShadowSupport( blockName );
+		hasBorderControl =
+			controls?.hasBorderColor ||
+			controls?.hasBorderStyle ||
+			controls?.hasBorderWidth ||
+			controls?.hasBorderRadius;
+		hasShadowControl = controls?.hasShadow;
 	}
 
 	if ( hasBorderControl && hasShadowControl ) {

package/src/hooks/dimensions.js

@@ -19,8 +19,7 @@ import {
 	DimensionsPanel as StylesDimensionsPanel,
 	useHasDimensionsPanel,
 } from '../components/global-styles';
-import { MarginVisualizer } from './margin';
-import { PaddingVisualizer } from './padding';
+import { MarginVisualizer, PaddingVisualizer } from './spacing-visualizer';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 import { cleanEmptyObject, shouldSkipSerialization } from './utils';

package/src/hooks/font-size.js

@@ -21,10 +21,7 @@ import {
 	shouldSkipSerialization,
 } from './utils';
 import { useSettings } from '../components/use-settings';
-import {
-	getTypographyFontSizeValue,
-	getFluidTypographyOptionsFromSettings,
-} from '../components/global-styles/typography-utils';
+import { getTypographyFontSizeValue } from '../components/global-styles/typography-utils';
 
 export const FONT_SIZE_SUPPORT_KEY = 'typography.fontSize';
 
@@ -173,18 +170,16 @@ function useBlockProps( { name, fontSize, style } ) {
 	let props;
 
 	if ( style?.typography?.fontSize ) {
-		const fluidSettings = getFluidTypographyOptionsFromSettings( {
-			typography: {
-				fluid: fluidTypographySettings,
-			},
-			layout: layoutSettings,
-		} );
-
 		props = {
 			style: {
 				fontSize: getTypographyFontSizeValue(
 					{ size: style.typography.fontSize },
-					fluidSettings
+					{
+						typography: {
+							fluid: fluidTypographySettings,
+						},
+						layout: layoutSettings,
+					}
 				),
 			},
 		};

package/src/hooks/index.js

@@ -8,6 +8,7 @@ import {
 } from './utils';
 import './compat';
 import align from './align';
+import background from './background';
 import './lock';
 import anchor from './anchor';
 import ariaLabel from './aria-label';
@@ -42,10 +43,12 @@ createBlockEditFilter(
 		contentLockUI,
 		blockHooks,
 		blockRenaming,
+		childLayout,
 	].filter( Boolean )
 );
 createBlockListBlockFilter( [
 	align,
+	background,
 	style,
 	color,
 	dimensions,

package/src/hooks/layout-child.js

@@ -10,13 +10,21 @@ import { useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../store';
 import { useStyleOverride } from './utils';
 import { useLayout } from '../components/block-list/layout';
+import { GridVisualizer, GridItemResizer } from '../components/grid-visualizer';
 
 function useBlockPropsChildLayoutStyles( { style } ) {
 	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
 		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
 	} );
 	const layout = style?.layout ?? {};
-	const { selfStretch, flexSize, columnSpan, rowSpan } = layout;
+	const {
+		selfStretch,
+		flexSize,
+		columnStart,
+		rowStart,
+		columnSpan,
+		rowSpan,
+	} = layout;
 	const parentLayout = useLayout() || {};
 	const { columnCount, minimumColumnWidth } = parentLayout;
 	const id = useInstanceId( useBlockPropsChildLayoutStyles );
@@ -33,6 +41,14 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 			css = `${ selector } {
 				flex-grow: 1;
 			}`;
+		} else if ( columnStart && columnSpan ) {
+			css = `${ selector } {
+				grid-column: ${ columnStart } / span ${ columnSpan };
+			}`;
+		} else if ( columnStart ) {
+			css = `${ selector } {
+				grid-column: ${ columnStart };
+			}`;
 		} else if ( columnSpan ) {
 			css = `${ selector } {
 				grid-column: span ${ columnSpan };
@@ -43,9 +59,20 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 		 * columnCount is set, the grid is responsive so a
 		 * container query is needed for the span to resize.
 		 */
-		if ( columnSpan && ( minimumColumnWidth || ! columnCount ) ) {
-			// Calculate the container query value.
-			const columnSpanNumber = parseInt( columnSpan );
+		if (
+			( columnSpan || columnStart ) &&
+			( minimumColumnWidth || ! columnCount )
+		) {
+			// Check if columnSpan and columnStart are numbers so Math.max doesn't break.
+			const columnSpanNumber = columnSpan ? parseInt( columnSpan ) : null;
+			const columnStartNumber = columnStart
+				? parseInt( columnStart )
+				: null;
+			const highestNumber = Math.max(
+				columnSpanNumber,
+				columnStartNumber
+			);
+
 			let parentColumnValue = parseFloat( minimumColumnWidth );
 			/**
 			 * 12rem is the default minimumColumnWidth value.
@@ -69,16 +96,26 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 
 			const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;
 			const containerQueryValue =
-				columnSpanNumber * parentColumnValue +
-				( columnSpanNumber - 1 ) * defaultGapValue;
+				highestNumber * parentColumnValue +
+				( highestNumber - 1 ) * defaultGapValue;
+			// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
+			const gridColumnValue = columnSpan ? '1/-1' : 'auto';
 
 			css += `@container (max-width: ${ containerQueryValue }${ parentColumnUnit }) {
 				${ selector } {
-					grid-column: 1 / -1;
+					grid-column: ${ gridColumnValue };
 				}
 			}`;
 		}
-		if ( rowSpan ) {
+		if ( rowStart && rowSpan ) {
+			css += `${ selector } {
+				grid-row: ${ rowStart } / span ${ rowSpan };
+			}`;
+		} else if ( rowStart ) {
+			css += `${ selector } {
+				grid-row: ${ rowStart };
+			}`;
+		} else if ( rowSpan ) {
 			css += `${ selector } {
 				grid-row: span ${ rowSpan };
 			}`;
@@ -96,8 +133,45 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 	return { className: `wp-container-content-${ id }` };
 }
 
+function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
+	const parentLayout = useLayout() || {};
+	const rootClientId = useSelect(
+		( select ) => {
+			return select( blockEditorStore ).getBlockRootClientId( clientId );
+		},
+		[ clientId ]
+	);
+	if ( parentLayout.type !== 'grid' ) {
+		return null;
+	}
+	if ( ! window.__experimentalEnableGridInteractivity ) {
+		return null;
+	}
+	return (
+		<>
+			<GridVisualizer clientId={ rootClientId } />
+			<GridItemResizer
+				clientId={ clientId }
+				onChange={ ( { columnSpan, rowSpan } ) => {
+					setAttributes( {
+						style: {
+							...style,
+							layout: {
+								...style?.layout,
+								columnSpan,
+								rowSpan,
+							},
+						},
+					} );
+				} }
+			/>
+		</>
+	);
+}
+
 export default {
 	useBlockProps: useBlockPropsChildLayoutStyles,
+	edit: ChildLayoutControlsPure,
 	attributeKeys: [ 'style' ],
 	hasSupport() {
 		return true;

package/src/hooks/layout.js

@@ -125,22 +125,24 @@ export function useLayoutStyles( blockAttributes = {}, blockName, selector ) {
 	const fullLayoutType = getLayoutType( usedLayout?.type || 'default' );
 	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
-	const css = fullLayoutType?.getLayoutStyle?.( {
+	return fullLayoutType?.getLayoutStyle?.( {
 		blockName,
 		selector,
 		layout,
 		style,
 		hasBlockGapSupport,
 	} );
-	return css;
 }
 
-function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
+function LayoutPanelPure( {
+	layout,
+	setAttributes,
+	name: blockName,
+	clientId,
+} ) {
 	const settings = useBlockSettings( blockName );
 	// Block settings come from theme.json under settings.[blockName].
 	const { layout: layoutSettings } = settings;
-	// Layout comes from block attributes.
-	const [ defaultThemeLayout ] = useSettings( 'layout' );
 	const { themeSupportsLayout } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		return {
@@ -174,36 +176,43 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 		return null;
 	}
 
+	/*
+	 * Try to find the layout type from either the
+	 * block's layout settings or any saved layout config.
+	 */
+	const blockSupportAndLayout = {
+		...layoutBlockSupport,
+		...layout,
+	};
+	const { type, default: { type: defaultType = 'default' } = {} } =
+		blockSupportAndLayout;
+	const blockLayoutType = type || defaultType;
+
 	// Only show the inherit toggle if it's supported,
-	// a default theme layout is set (e.g. one that provides `contentSize` and/or `wideSize` values),
 	// and either the default / flow or the constrained layout type is in use, as the toggle switches from one to the other.
 	const showInheritToggle = !! (
 		allowInheriting &&
-		!! defaultThemeLayout &&
-		( ! layout?.type ||
-			layout?.type === 'default' ||
-			layout?.type === 'constrained' ||
-			layout?.inherit )
+		( ! blockLayoutType ||
+			blockLayoutType === 'default' ||
+			blockLayoutType === 'constrained' ||
+			blockSupportAndLayout.inherit )
 	);
 
 	const usedLayout = layout || defaultBlockLayout || {};
-	const {
-		inherit = false,
-		type = 'default',
-		contentSize = null,
-	} = usedLayout;
+	const { inherit = false, contentSize = null } = usedLayout;
 	/**
 	 * `themeSupportsLayout` is only relevant to the `default/flow` or
 	 * `constrained` layouts and it should not be taken into account when other
 	 * `layout` types are used.
 	 */
 	if (
-		( type === 'default' || type === 'constrained' ) &&
+		( blockLayoutType === 'default' ||
+			blockLayoutType === 'constrained' ) &&
 		! themeSupportsLayout
 	) {
 		return null;
 	}
-	const layoutType = getLayoutType( type );
+	const layoutType = getLayoutType( blockLayoutType );
 	const constrainedType = getLayoutType( 'constrained' );
 	const displayControlsForLegacyLayouts =
 		! usedLayout.type && ( contentSize || inherit );
@@ -256,7 +265,7 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 
 					{ ! inherit && allowSwitching && (
 						<LayoutTypeSwitcher
-							type={ type }
+							type={ blockLayoutType }
 							onChange={ onChangeType }
 						/>
 					) }
@@ -266,6 +275,8 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
 							layoutBlockSupport={ blockSupportAndThemeSettings }
+							name={ blockName }
+							clientId={ clientId }
 						/>
 					) }
 					{ constrainedType && displayControlsForLegacyLayouts && (
@@ -273,6 +284,8 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 							layout={ usedLayout }
 							onChange={ onChangeLayout }
 							layoutBlockSupport={ blockSupportAndThemeSettings }
+							name={ blockName }
+							clientId={ clientId }
 						/>
 					) }
 				</PanelBody>
@@ -282,6 +295,8 @@ function LayoutPanelPure( { layout, setAttributes, name: blockName } ) {
 					layout={ usedLayout }
 					onChange={ onChangeLayout }
 					layoutBlockSupport={ layoutBlockSupport }
+					name={ blockName }
+					clientId={ clientId }
 				/>
 			) }
 		</>

package/src/hooks/line-height.js

@@ -39,7 +39,7 @@ export function LineHeightEdit( props ) {
 	return (
 		<LineHeightControl
 			__unstableInputWidth="100%"
-			__nextHasNoMarginBottom={ true }
+			__nextHasNoMarginBottom
 			value={ style?.typography?.lineHeight }
 			onChange={ onChange }
 			size="__unstable-large"

package/src/hooks/position.js

@@ -152,7 +152,7 @@ export function hasPositionValue( props ) {
  * @return {boolean} Whether or not the block is set to a sticky or fixed position.
  */
 export function hasStickyOrFixedPositionValue( attributes ) {
-	const positionType = attributes.style?.position?.type;
+	const positionType = attributes?.style?.position?.type;
 	return positionType === 'sticky' || positionType === 'fixed';
 }