@wordpress/block-editor 13.2.0 → 13.4.0

package/src/hooks/duotone.js

@@ -295,26 +295,30 @@ function useDuotoneStyles( {
 			return;
 		}
 
-		// Safari does not always update the duotone filter when the duotone colors
-		// are changed. When using Safari, force the block element to be repainted by
-		// the browser to ensure any changes are reflected visually. This logic matches
-		// that used on the site frontend in `block-supports/duotone.php`.
+		// Safari does not always update the duotone filter when the duotone
+		// colors are changed. When using Safari, force the block element to be
+		// repainted by the browser to ensure any changes are reflected
+		// visually. This logic matches that used on the site frontend in
+		// `block-supports/duotone.php`.
 		if ( blockElement && isSafari ) {
 			const display = blockElement.style.display;
-			// Switch to `inline-block` to force a repaint. In the editor, `inline-block`
-			// is used instead of `none` to ensure that scroll position is not affected,
-			// as `none` results in the editor scrolling to the top of the block.
+			// Switch to `inline-block` to force a repaint. In the editor,
+			// `inline-block` is used instead of `none` to ensure that scroll
+			// position is not affected, as `none` results in the editor
+			// scrolling to the top of the block.
 			blockElement.style.display = 'inline-block';
-			// Simply accessing el.offsetHeight flushes layout and style
-			// changes in WebKit without having to wait for setTimeout.
+			// Simply accessing el.offsetHeight flushes layout and style changes
+			// in WebKit without having to wait for setTimeout.
 			// eslint-disable-next-line no-unused-expressions
 			blockElement.offsetHeight;
 			blockElement.style.display = display;
 		}
-	}, [ isValidFilter, blockElement ] );
+		// `colors` must be a dependency so this effect runs when the colors
+		// change in Safari.
+	}, [ isValidFilter, blockElement, colors ] );
 }
 
-function useBlockProps( { name, style } ) {
+function useBlockProps( { clientId, name, style } ) {
 	const id = useInstanceId( useBlockProps );
 	const selector = useMemo( () => {
 		const blockType = getBlockType( name );
@@ -362,7 +366,7 @@ function useBlockProps( { name, style } ) {
 	const shouldRender = selector && attribute;
 
 	useDuotoneStyles( {
-		clientId: id,
+		clientId,
 		id: filterClass,
 		selector,
 		attribute,

package/src/hooks/grid-visualizer.js

@@ -0,0 +1,62 @@
+/**
+ * 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(),
+		};
+	} );
+
+	return (
+		<>
+			<GridLayoutSync clientId={ clientId } />
+			{ ( isSelected || isDragging ) && (
+				<GridVisualizer clientId={ clientId } parentLayout={ layout } />
+			) }
+		</>
+	);
+}
+
+const addGridVisualizerToBlockEdit = createHigherOrderComponent(
+	( BlockEdit ) => ( props ) => {
+		if ( props.attributes.layout?.type !== 'grid' ) {
+			return <BlockEdit key="edit" { ...props } />;
+		}
+
+		return (
+			<>
+				<GridTools
+					clientId={ props.clientId }
+					layout={ props.attributes.layout }
+				/>
+				<BlockEdit key="edit" { ...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

@@ -35,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 ) {
@@ -59,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
@@ -68,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.
@@ -99,32 +119,38 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 				parentColumnUnit = 'rem';
 			}
 
+			let numColsToBreakAt = 2;
+
+			if ( columnSpan && columnStart ) {
+				numColsToBreakAt = columnSpan + columnStart - 1;
+			} else if ( columnSpan ) {
+				numColsToBreakAt = columnSpan;
+			} else {
+				numColsToBreakAt = columnStart;
+			}
+
 			const defaultGapValue = parentColumnUnit === 'px' ? 24 : 1.5;
 			const containerQueryValue =
-				highestNumber * parentColumnValue +
-				( highestNumber - 1 ) * defaultGapValue;
+				numColsToBreakAt * parentColumnValue +
+				( numColsToBreakAt - 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 } );
@@ -143,7 +169,7 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
 	const {
 		type: parentLayoutType = 'default',
 		allowSizingOnChildren = false,
-		columnCount,
+		isManualPlacement,
 	} = parentLayout;
 
 	const rootClientId = useSelect(
@@ -160,8 +186,6 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
 		return null;
 	}
 
-	const isManualGrid = !! columnCount;
-
 	function updateLayout( layout ) {
 		setAttributes( {
 			style: {
@@ -190,15 +214,16 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
 					parentLayout={ parentLayout }
 				/>
 			) }
-			{ isManualGrid && window.__experimentalEnableGridInteractivity && (
-				<GridItemMovers
-					layout={ style?.layout }
-					parentLayout={ parentLayout }
-					onChange={ updateLayout }
-					gridClientId={ rootClientId }
-					blockClientId={ clientId }
-				/>
-			) }
+			{ isManualPlacement &&
+				window.__experimentalEnableGridInteractivity && (
+					<GridItemMovers
+						layout={ style?.layout }
+						parentLayout={ parentLayout }
+						onChange={ updateLayout }
+						gridClientId={ rootClientId }
+						blockClientId={ clientId }
+					/>
+				) }
 		</>
 	);
 }

package/src/hooks/position.js

@@ -8,10 +8,7 @@ import clsx from 'clsx';
  */
 import { __, _x, sprintf } from '@wordpress/i18n';
 import { getBlockSupport, hasBlockSupport } from '@wordpress/blocks';
-import {
-	BaseControl,
-	privateApis as componentsPrivateApis,
-} from '@wordpress/components';
+import { BaseControl, CustomSelectControl } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
 import { useSelect } from '@wordpress/data';
 import { useMemo, Platform } from '@wordpress/element';
@@ -23,29 +20,21 @@ import { useSettings } from '../components/use-settings';
 import InspectorControls from '../components/inspector-controls';
 import useBlockDisplayInformation from '../components/use-block-display-information';
 import { cleanEmptyObject, useStyleOverride } from './utils';
-import { unlock } from '../lock-unlock';
 import { store as blockEditorStore } from '../store';
 
-const { 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: __(
+	hint: __(
 		'The block will stick to the top of the window instead of scrolling.'
 	),
 };
@@ -54,10 +43,7 @@ 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.'
-	),
+	hint: __( 'The block will not move when the page is scrolled.' ),
 };
 
 const POSITION_SIDES = [ 'top', 'right', 'bottom', 'left' ];
@@ -283,13 +269,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 +283,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' },
+					},
+				},
+			},
+		} );
+	} );
+} );