@wordpress/block-editor 13.1.0 → 13.3.0

package/src/hooks/grid-visualizer.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { GridVisualizer, useGridLayoutSync } from '../components/grid';
+import { store as blockEditorStore } from '../store';
+
+function GridLayoutSync( props ) {
+	useGridLayoutSync( props );
+}
+
+function GridTools( { clientId, layout } ) {
+	const { isSelected, isDragging } = useSelect( ( select ) => {
+		const { isBlockSelected, isDraggingBlocks } =
+			select( blockEditorStore );
+
+		return {
+			isSelected: isBlockSelected( clientId ),
+			isDragging: isDraggingBlocks(),
+		};
+	} );
+
+	if ( ! isSelected && ! isDragging ) {
+		return null;
+	}
+
+	return (
+		<>
+			<GridVisualizer clientId={ clientId } parentLayout={ layout } />
+			<GridLayoutSync clientId={ clientId } />
+		</>
+	);
+}
+
+const addGridVisualizerToBlockEdit = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		if ( props.attributes.layout?.type !== 'grid' ) {
+			return <BlockEdit { ...props } />;
+		}
+
+		return (
+			<>
+				<GridTools
+					clientId={ props.clientId }
+					layout={ props.attributes.layout }
+				/>
+				<BlockEdit { ...props } />
+			</>
+		);
+	},
+	'addGridVisualizerToBlockEdit'
+);
+
+addFilter(
+	'editor.BlockEdit',
+	'core/editor/grid-visualizer',
+	addGridVisualizerToBlockEdit
+);

package/src/hooks/index.js

@@ -33,6 +33,7 @@ import blockHooks from './block-hooks';
 import blockBindingsPanel from './block-bindings';
 import './block-renaming';
 import './use-bindings-attributes';
+import './grid-visualizer';
 
 createBlockEditFilter(
 	[
@@ -87,4 +88,6 @@ export { getSpacingClassesAndStyles } from './use-spacing-props';
 export { getTypographyClassesAndStyles } from './use-typography-props';
 export { getGapCSSValue } from './gap';
 export { useCachedTruthy } from './use-cached-truthy';
+export { setBackgroundStyleDefaults } from './background';
 export { useZoomOut } from './use-zoom-out';
+export { __unstableBlockStyleVariationOverridesWithConfig } from './block-style-variation';

package/src/hooks/layout-child.js

@@ -11,7 +11,11 @@ import { useState } from '@wordpress/element';
 import { store as blockEditorStore } from '../store';
 import { useStyleOverride } from './utils';
 import { useLayout } from '../components/block-list/layout';
-import { GridVisualizer, GridItemResizer } from '../components/grid-visualizer';
+import {
+	GridVisualizer,
+	GridItemResizer,
+	GridItemMovers,
+} from '../components/grid';
 
 function useBlockPropsChildLayoutStyles( { style } ) {
 	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
@@ -31,6 +35,23 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 	const id = useInstanceId( useBlockPropsChildLayoutStyles );
 	const selector = `.wp-container-content-${ id }`;
 
+	// Check that the grid layout attributes are of the correct type, so that we don't accidentally
+	// write code that stores a string attribute instead of a number.
+	if ( process.env.NODE_ENV === 'development' ) {
+		if ( columnStart && typeof columnStart !== 'number' ) {
+			throw new Error( 'columnStart must be a number' );
+		}
+		if ( rowStart && typeof rowStart !== 'number' ) {
+			throw new Error( 'rowStart must be a number' );
+		}
+		if ( columnSpan && typeof columnSpan !== 'number' ) {
+			throw new Error( 'columnSpan must be a number' );
+		}
+		if ( rowSpan && typeof rowSpan !== 'number' ) {
+			throw new Error( 'rowSpan must be a number' );
+		}
+	}
+
 	let css = '';
 	if ( shouldRenderChildLayoutStyles ) {
 		if ( selfStretch === 'fixed' && flexSize ) {
@@ -55,6 +76,19 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 				grid-column: span ${ columnSpan };
 			}`;
 		}
+		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 };
+			}`;
+		}
 		/**
 		 * If minimumColumnWidth is set on the parent, or if no
 		 * columnCount is set, the grid is responsive so a
@@ -64,16 +98,6 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 			( 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.
@@ -95,32 +119,29 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 				parentColumnUnit = 'rem';
 			}
 
+			const highestNumber = Math.max( columnSpan, columnStart );
 			const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;
 			const containerQueryValue =
 				highestNumber * parentColumnValue +
 				( highestNumber - 1 ) * defaultGapValue;
+			// For blocks that only span one column, we want to remove any rowStart values as
+			// the container reduces in size, so that blocks are still arranged in markup order.
+			const minimumContainerQueryValue =
+				parentColumnValue * 2 + defaultGapValue - 1;
 			// 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';
+			const gridColumnValue =
+				columnSpan && columnSpan > 1 ? '1/-1' : 'auto';
 
-			css += `@container (max-width: ${ containerQueryValue }${ parentColumnUnit }) {
+			css += `@container (max-width: ${ Math.max(
+				containerQueryValue,
+				minimumContainerQueryValue
+			) }${ parentColumnUnit }) {
 				${ selector } {
 					grid-column: ${ gridColumnValue };
+					grid-row: auto;
 				}
 			}`;
 		}
-		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 };
-			}`;
-		}
 	}
 
 	useStyleOverride( { css } );
@@ -135,10 +156,12 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 }
 
 function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
+	const parentLayout = useLayout() || {};
 	const {
 		type: parentLayoutType = 'default',
 		allowSizingOnChildren = false,
-	} = useLayout() || {};
+		isManualPlacement,
+	} = parentLayout;
 
 	const rootClientId = useSelect(
 		( select ) => {
@@ -154,31 +177,44 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
 		return null;
 	}
 
+	function updateLayout( layout ) {
+		setAttributes( {
+			style: {
+				...style,
+				layout: {
+					...style?.layout,
+					...layout,
+				},
+			},
+		} );
+	}
+
 	return (
 		<>
 			<GridVisualizer
 				clientId={ rootClientId }
 				contentRef={ setResizerBounds }
+				parentLayout={ parentLayout }
 			/>
 			{ allowSizingOnChildren && (
 				<GridItemResizer
 					clientId={ clientId }
 					// Don't allow resizing beyond the grid visualizer.
 					bounds={ resizerBounds }
-					onChange={ ( { columnSpan, rowSpan } ) => {
-						setAttributes( {
-							style: {
-								...style,
-								layout: {
-									...style?.layout,
-									columnSpan,
-									rowSpan,
-								},
-							},
-						} );
-					} }
+					onChange={ updateLayout }
+					parentLayout={ parentLayout }
 				/>
 			) }
+			{ isManualPlacement &&
+				window.__experimentalEnableGridInteractivity && (
+					<GridItemMovers
+						layout={ style?.layout }
+						parentLayout={ parentLayout }
+						onChange={ updateLayout }
+						gridClientId={ rootClientId }
+						blockClientId={ clientId }
+					/>
+				) }
 		</>
 	);
 }

package/src/hooks/position.js

@@ -26,25 +26,22 @@ import { cleanEmptyObject, useStyleOverride } from './utils';
 import { unlock } from '../lock-unlock';
 import { store as blockEditorStore } from '../store';
 
-const { CustomSelectControl } = unlock( componentsPrivateApis );
+const { CustomSelectControlV2Legacy: CustomSelectControl } = unlock(
+	componentsPrivateApis
+);
 
 const POSITION_SUPPORT_KEY = 'position';
 
-const OPTION_CLASSNAME =
-	'block-editor-hooks__position-selection__select-control__option';
-
 const DEFAULT_OPTION = {
 	key: 'default',
 	value: '',
 	name: __( 'Default' ),
-	className: OPTION_CLASSNAME,
 };
 
 const STICKY_OPTION = {
 	key: 'sticky',
 	value: 'sticky',
 	name: _x( 'Sticky', 'Name for the value of the CSS position property' ),
-	className: OPTION_CLASSNAME,
 	__experimentalHint: __(
 		'The block will stick to the top of the window instead of scrolling.'
 	),
@@ -54,7 +51,6 @@ const FIXED_OPTION = {
 	key: 'fixed',
 	value: 'fixed',
 	name: _x( 'Fixed', 'Name for the value of the CSS position property' ),
-	className: OPTION_CLASSNAME,
 	__experimentalHint: __(
 		'The block will not move when the page is scrolled.'
 	),
@@ -283,13 +279,11 @@ export function PositionPanelPure( {
 			options.length > 1 ? (
 				<InspectorControls group="position">
 					<BaseControl
-						className="block-editor-hooks__position-selection"
 						__nextHasNoMarginBottom
 						help={ stickyHelpText }
 					>
 						<CustomSelectControl
 							__next40pxDefaultSize
-							className="block-editor-hooks__position-selection__select-control"
 							label={ __( 'Position' ) }
 							hideLabelFromVision
 							describedBy={ sprintf(
@@ -299,7 +293,6 @@ export function PositionPanelPure( {
 							) }
 							options={ options }
 							value={ selectedOption }
-							__experimentalShowSelectedHint
 							onChange={ ( { selectedItem } ) => {
 								onChangeType( selectedItem.value );
 							} }

package/src/hooks/test/get-variation-styles-with-ref-values.js

@@ -0,0 +1,91 @@
+/**
+ * Internal dependencies
+ */
+import { getVariationStylesWithRefValues } from '../block-style-variation';
+
+describe( 'getVariationStylesWithRefValues', () => {
+	it( 'should resolve ref values correctly', () => {
+		const globalStyles = {
+			styles: {
+				color: { background: 'red' },
+				blocks: {
+					'core/heading': {
+						color: { text: 'blue' },
+					},
+					'core/group': {
+						variations: {
+							custom: {
+								color: {
+									text: { ref: 'styles.does-not-exist' },
+									background: {
+										ref: 'styles.color.background',
+									},
+								},
+								blocks: {
+									'core/heading': {
+										color: {
+											text: {
+												ref: 'styles.blocks.core/heading.color.text',
+											},
+											background: { ref: '' },
+										},
+									},
+								},
+								elements: {
+									link: {
+										color: {
+											text: {
+												ref: 'styles.elements.link.color.text',
+											},
+											background: { ref: undefined },
+										},
+										':hover': {
+											color: {
+												text: {
+													ref: 'styles.elements.link.:hover.color.text',
+												},
+											},
+										},
+									},
+								},
+							},
+						},
+					},
+				},
+				elements: {
+					link: {
+						color: { text: 'green' },
+						':hover': {
+							color: { text: 'yellow' },
+						},
+					},
+				},
+			},
+		};
+
+		expect(
+			getVariationStylesWithRefValues(
+				globalStyles,
+				'core/group',
+				'custom'
+			)
+		).toEqual( {
+			color: { background: 'red' },
+			blocks: {
+				'core/heading': {
+					color: { text: 'blue' },
+				},
+			},
+			elements: {
+				link: {
+					color: {
+						text: 'green',
+					},
+					':hover': {
+						color: { text: 'yellow' },
+					},
+				},
+			},
+		} );
+	} );
+} );

package/src/hooks/use-bindings-attributes.js

@@ -97,6 +97,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 			unlock( select( blocksStore ) ).getAllBlockBindingsSources()
 		);
 		const { name, clientId, context } = props;
+		const hasParentPattern = !! props.context[ 'pattern/overrides' ];
 		const hasPatternOverridesDefaultBinding =
 			props.attributes.metadata?.bindings?.[ DEFAULT_ATTRIBUTE ]
 				?.source === 'core/pattern-overrides';
@@ -108,6 +109,11 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 				),
 			[ props.attributes.metadata?.bindings, name ]
 		);
+
+		// While this hook doesn't directly call any selectors, `useSelect` is
+		// used purposely here to ensure `boundAttributes` is updated whenever
+		// there are attribute updates.
+		// `source.getValues` may also call a selector via `registry.select`.
 		const boundAttributes = useSelect( () => {
 			if ( ! bindings ) {
 				return;
@@ -216,13 +222,20 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 						}
 					}
 
-					// Only apply normal attribute updates to blocks
-					// that have partial bindings. Currently this is
-					// only skipped for pattern overrides sources.
 					if (
-						! hasPatternOverridesDefaultBinding &&
+						// Don't update non-connected attributes if the block is using pattern overrides
+						// and the editing is happening while overriding the pattern (not editing the original).
+						! (
+							hasPatternOverridesDefaultBinding &&
+							hasParentPattern
+						) &&
 						Object.keys( keptAttributes ).length
 					) {
+						// Don't update caption and href until they are supported.
+						if ( hasPatternOverridesDefaultBinding ) {
+							delete keptAttributes?.caption;
+							delete keptAttributes?.href;
+						}
 						setAttributes( keptAttributes );
 					}
 				} );
@@ -236,6 +249,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 				setAttributes,
 				sources,
 				hasPatternOverridesDefaultBinding,
+				hasParentPattern,
 			]
 		);
 

package/src/hooks/utils.js

@@ -140,6 +140,7 @@ export function useStyleOverride( {
 	css,
 	assets,
 	__unstableType,
+	variation,
 	clientId,
 } = {} ) {
 	const { setStyleOverride, deleteStyleOverride } = unlock(
@@ -159,6 +160,7 @@ export function useStyleOverride( {
 			css,
 			assets,
 			__unstableType,
+			variation,
 			clientId,
 		};
 		// Batch updates to style overrides to avoid triggering cascading renders
@@ -582,6 +584,7 @@ export function createBlockListBlockFilter( features ) {
 						hasSupport,
 						attributeKeys = [],
 						useBlockProps,
+						isMatch,
 					} = feature;
 
 					const neededProps = {};
@@ -595,7 +598,8 @@ export function createBlockListBlockFilter( features ) {
 						// Skip rendering if none of the needed attributes are
 						// set.
 						! Object.keys( neededProps ).length ||
-						! hasSupport( props.name )
+						! hasSupport( props.name ) ||
+						( isMatch && ! isMatch( neededProps ) )
 					) {
 						return null;
 					}

package/src/layouts/constrained.js

@@ -24,6 +24,7 @@ import { getCSSRules } from '@wordpress/style-engine';
 import { useSettings } from '../components/use-settings';
 import { appendSelectors, getBlockGapCSS, getAlignmentsInfo } from './utils';
 import { getGapCSSValue } from '../hooks/gap';
+import { BlockControls, JustifyContentControl } from '../components';
 import { shouldSkipSerialization } from '../hooks/utils';
 import { LAYOUT_DEFINITIONS } from './definitions';
 
@@ -146,8 +147,24 @@ export default {
 			</>
 		);
 	},
-	toolBarControls: function DefaultLayoutToolbarControls() {
-		return null;
+	toolBarControls: function DefaultLayoutToolbarControls( {
+		layout = {},
+		onChange,
+		layoutBlockSupport,
+	} ) {
+		const { allowJustification = true } = layoutBlockSupport;
+
+		if ( ! allowJustification ) {
+			return null;
+		}
+		return (
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
+				<DefaultLayoutJustifyContentControl
+					layout={ layout }
+					onChange={ onChange }
+				/>
+			</BlockControls>
+		);
 	},
 	getLayoutStyle: function getLayoutStyle( {
 		selector,
@@ -278,3 +295,27 @@ export default {
 		return alignments;
 	},
 };
+
+const POPOVER_PROPS = {
+	placement: 'bottom-start',
+};
+
+function DefaultLayoutJustifyContentControl( { layout, onChange } ) {
+	const { justifyContent = 'center' } = layout;
+	const onJustificationChange = ( value ) => {
+		onChange( {
+			...layout,
+			justifyContent: value,
+		} );
+	};
+	const allowedControls = [ 'left', 'center', 'right' ];
+
+	return (
+		<JustifyContentControl
+			allowedControls={ allowedControls }
+			value={ justifyContent }
+			onChange={ onJustificationChange }
+			popoverProps={ POPOVER_PROPS }
+		/>
+	);
+}