@wordpress/block-editor 13.4.0 → 14.0.0

package/src/components/global-styles/use-global-styles-output.js

@@ -24,6 +24,8 @@ import {
 	scopeFeatureSelectors,
 	appendToSelector,
 	getBlockStyleVariationSelector,
+	compileStyleValue,
+	getResolvedValue,
 } from './utils';
 import { getBlockCSSSelector } from './get-block-css-selector';
 import { getTypographyFontSizeValue } from './typography-utils';
@@ -36,7 +38,6 @@ import { store as blockEditorStore } from '../../store';
 import { LAYOUT_DEFINITIONS } from '../../layouts/definitions';
 import { getValueFromObjectPath, setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
-import { setThemeFileUris } from './theme-file-uri-utils';
 
 // Elements that rely on class names in their selectors.
 const ELEMENT_CLASS_NAMES = {
@@ -54,21 +55,6 @@ const BLOCK_SUPPORT_FEATURE_LEVEL_SELECTORS = {
 };
 const { kebabCase } = unlock( componentsPrivateApis );
 
-function compileStyleValue( uncompiledValue ) {
-	const VARIABLE_REFERENCE_PREFIX = 'var:';
-	const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
-	const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
-
-	if ( uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX ) ) {
-		const variable = uncompiledValue
-			.slice( VARIABLE_REFERENCE_PREFIX.length )
-			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
-			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
-		return `var(--wp--${ variable })`;
-	}
-	return uncompiledValue;
-}
-
 /**
  * Transform given preset tree into a set of style declarations.
  *
@@ -395,21 +381,40 @@ export function getStylesDeclarations(
 	);
 
 	/*
-	 * Set background defaults.
-	 * Applies to all background styles except the top-level site background.
+	 * Preprocess background image values.
+	 *
+	 * Note: As we absorb more and more styles into the engine, we could simplify this function.
+	 * A refactor is for the style engine to handle ref resolution (and possibly defaults)
+	 * via a public util used internally and externally. Theme.json tree and defaults could be passed
+	 * as options.
 	 */
-	if ( ! isRoot && !! blockStyles.background ) {
-		blockStyles = {
-			...blockStyles,
-			background: {
-				...blockStyles.background,
-				...setBackgroundStyleDefaults( blockStyles.background ),
-			},
-		};
+	if ( !! blockStyles.background ) {
+		/*
+		 * Resolve dynamic values before they are compiled by the style engine,
+		 * which doesn't (yet) resolve dynamic values.
+		 */
+		if ( blockStyles.background?.backgroundImage ) {
+			blockStyles.background.backgroundImage = getResolvedValue(
+				blockStyles.background.backgroundImage,
+				tree
+			);
+		}
+
+		/*
+		 * Set default values for block background styles.
+		 * Top-level styles are an exception as they are applied to the body.
+		 */
+		if ( ! isRoot && !! blockStyles.background?.backgroundImage?.id ) {
+			blockStyles = {
+				...blockStyles,
+				background: {
+					...blockStyles.background,
+					...setBackgroundStyleDefaults( blockStyles.background ),
+				},
+			};
+		}
 	}
 
-	// The goal is to move everything to server side generated engine styles
-	// This is temporary as we absorb more and more styles into the engine.
 	const extraRules = getCSSRules( blockStyles );
 	extraRules.forEach( ( rule ) => {
 		// Don't output padding properties if padding variables are set or if we're not editing a full template.
@@ -424,18 +429,7 @@ export function getStylesDeclarations(
 			? rule.key
 			: kebabCase( rule.key );
 
-		let ruleValue = rule.value;
-		if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
-			const refPath = ruleValue.ref.split( '.' );
-			ruleValue = compileStyleValue(
-				getValueFromObjectPath( tree, refPath )
-			);
-			// Presence of another ref indicates a reference to another dynamic value.
-			// Pointing to another dynamic value is not supported.
-			if ( ! ruleValue || ruleValue?.ref ) {
-				return;
-			}
-		}
+		let ruleValue = getResolvedValue( rule.value, tree, null );
 
 		// Calculate fluid typography rules where available.
 		if ( cssProperty === 'font-size' ) {
@@ -1327,9 +1321,17 @@ function updateConfigWithSeparator( config ) {
 export function processCSSNesting( css, blockSelector ) {
 	let processedCSS = '';
 
+	if ( ! css || css.trim() === '' ) {
+		return processedCSS;
+	}
+
 	// Split CSS nested rules.
 	const parts = css.split( '&' );
 	parts.forEach( ( part ) => {
+		if ( ! part || part.trim() === '' ) {
+			return;
+		}
+
 		const isRootCss = ! part.includes( '{' );
 		if ( isRootCss ) {
 			// If the part doesn't contain braces, it applies to the root level.
@@ -1342,11 +1344,32 @@ export function processCSSNesting( css, blockSelector ) {
 			}
 
 			const [ nestedSelector, cssValue ] = splittedPart;
-			const combinedSelector = nestedSelector.startsWith( ' ' )
-				? scopeSelector( blockSelector, nestedSelector )
-				: appendToSelector( blockSelector, nestedSelector );
 
-			processedCSS += `:root :where(${ combinedSelector }){${ cssValue.trim() }}`;
+			// Handle pseudo elements such as ::before, ::after, etc. Regex will also
+			// capture any leading combinator such as >, +, or ~, as well as spaces.
+			// This allows pseudo elements as descendants e.g. `.parent ::before`.
+			const matches = nestedSelector.match( /([>+~\s]*::[a-zA-Z-]+)/ );
+			const pseudoPart = matches ? matches[ 1 ] : '';
+			const withoutPseudoElement = matches
+				? nestedSelector.replace( pseudoPart, '' ).trim()
+				: nestedSelector.trim();
+
+			let combinedSelector;
+			if ( withoutPseudoElement === '' ) {
+				// Only contained a pseudo element to use the block selector to form
+				// the final `:root :where()` selector.
+				combinedSelector = blockSelector;
+			} else {
+				// If the nested selector is a descendant of the block scope it with the
+				// block selector. Otherwise append it to the block selector.
+				combinedSelector = nestedSelector.startsWith( ' ' )
+					? scopeSelector( blockSelector, withoutPseudoElement )
+					: appendToSelector( blockSelector, withoutPseudoElement );
+			}
+
+			// Build final rule, re-adding any pseudo element outside the `:where()`
+			// to maintain valid CSS selector.
+			processedCSS += `:root :where(${ combinedSelector })${ pseudoPart }{${ cssValue.trim() }}`;
 		}
 	} );
 	return processedCSS;
@@ -1369,10 +1392,6 @@ export function useGlobalStylesOutputWithConfig(
 	disableRootPadding
 ) {
 	const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
-	mergedConfig = setThemeFileUris(
-		mergedConfig,
-		mergedConfig?._links?.[ 'wp:theme-file' ]
-	);
 	const hasBlockGapSupport = blockGap !== null;
 	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
 	const disableLayoutStyles = useSelect( ( select ) => {

package/src/components/global-styles/utils.js

@@ -525,3 +525,115 @@ export function getBlockStyleVariationSelector( variation, blockSelector ) {
 
 	return result.join( ',' );
 }
+
+/**
+ * Converts style preset values `var:` to CSS custom var values.
+ * TODO: Export and use the style engine util: getCSSVarFromStyleValue().
+ *
+ * Example:
+ *
+ * compileStyleValue( 'var:preset|color|primary' ) // returns 'var(--wp--color-primary)'
+ *
+ * @param {string} uncompiledValue A block style value.
+ * @return {string} The compiled, or original value.
+ */
+export function compileStyleValue( uncompiledValue ) {
+	const VARIABLE_REFERENCE_PREFIX = 'var:';
+	if (
+		'string' === typeof uncompiledValue &&
+		uncompiledValue?.startsWith?.( VARIABLE_REFERENCE_PREFIX )
+	) {
+		const VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE = '|';
+		const VARIABLE_PATH_SEPARATOR_TOKEN_STYLE = '--';
+		const variable = uncompiledValue
+			.slice( VARIABLE_REFERENCE_PREFIX.length )
+			.split( VARIABLE_PATH_SEPARATOR_TOKEN_ATTRIBUTE )
+			.join( VARIABLE_PATH_SEPARATOR_TOKEN_STYLE );
+		return `var(--wp--${ variable })`;
+	}
+	return uncompiledValue;
+}
+
+/**
+ * Looks up a theme file URI based on a relative path.
+ *
+ * @param {string}        file          A relative path.
+ * @param {Array<Object>} themeFileURIs A collection of absolute theme file URIs and their corresponding file paths.
+ * @return {string} A resolved theme file URI, if one is found in the themeFileURIs collection.
+ */
+export function getResolvedThemeFilePath( file, themeFileURIs ) {
+	if ( ! file || ! themeFileURIs || ! Array.isArray( themeFileURIs ) ) {
+		return file;
+	}
+
+	const uri = themeFileURIs.find(
+		( themeFileUri ) => themeFileUri?.name === file
+	);
+
+	if ( ! uri?.href ) {
+		return file;
+	}
+
+	return uri?.href;
+}
+
+/**
+ * Resolves ref values in theme JSON.
+ *
+ * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
+ * @param {Object}        tree      A theme.json object.
+ * @return {*} The resolved value or incoming ruleValue.
+ */
+export function getResolvedRefValue( ruleValue, tree ) {
+	if ( ! ruleValue || ! tree ) {
+		return ruleValue;
+	}
+
+	if ( typeof ruleValue !== 'string' && ruleValue?.ref ) {
+		const refPath = ruleValue.ref.split( '.' );
+		const resolvedRuleValue = compileStyleValue(
+			getValueFromObjectPath( tree, refPath )
+		);
+
+		/*
+		 * Presence of another ref indicates a reference to another dynamic value.
+		 * Pointing to another dynamic value is not supported.
+		 */
+		if ( resolvedRuleValue?.ref ) {
+			return undefined;
+		}
+
+		if ( ! resolvedRuleValue ) {
+			return ruleValue;
+		}
+
+		return resolvedRuleValue;
+	}
+	return ruleValue;
+}
+
+/**
+ * Resolves ref and relative path values in theme JSON.
+ *
+ * @param {Object|string} ruleValue A block style value that may contain a reference to a theme.json value.
+ * @param {Object}        tree      A theme.json object.
+ * @return {*} The resolved value or incoming ruleValue.
+ */
+export function getResolvedValue( ruleValue, tree ) {
+	if ( ! ruleValue || ! tree ) {
+		return ruleValue;
+	}
+
+	// Resolve ref values.
+	const resolvedValue = getResolvedRefValue( ruleValue, tree );
+
+	// Resolve relative paths.
+	if ( resolvedValue?.url ) {
+		resolvedValue.url = getResolvedThemeFilePath(
+			resolvedValue.url,
+			tree?._links?.[ 'wp:theme-file' ]
+		);
+	}
+
+	return resolvedValue;
+}

package/src/components/grid/grid-item-movers.js

@@ -55,28 +55,29 @@ export function GridItemMovers( {
 	return (
 		<BlockControls group="parent">
 			<ToolbarGroup className="block-editor-grid-item-mover__move-button-container">
-				<GridItemMover
-					className="is-left-button"
-					icon={ chevronLeft }
-					label={ __( 'Move left' ) }
-					description={ __( 'Move left' ) }
-					isDisabled={ columnStart <= 1 }
-					onClick={ () => {
-						onChange( {
-							columnStart: columnStart - 1,
-						} );
-						__unstableMarkNextChangeAsNotPersistent();
-						moveBlocksToPosition(
-							[ blockClientId ],
-							gridClientId,
-							gridClientId,
-							getNumberOfBlocksBeforeCell(
-								columnStart - 1,
-								rowStart
-							)
-						);
-					} }
-				/>
+				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-left">
+					<GridItemMover
+						icon={ chevronLeft }
+						label={ __( 'Move left' ) }
+						description={ __( 'Move left' ) }
+						isDisabled={ columnStart <= 1 }
+						onClick={ () => {
+							onChange( {
+								columnStart: columnStart - 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart - 1,
+									rowStart
+								)
+							);
+						} }
+					/>
+				</div>
 				<div className="block-editor-grid-item-mover__move-vertical-button-container">
 					<GridItemMover
 						className="is-up-button"
@@ -123,28 +124,29 @@ export function GridItemMovers( {
 						} }
 					/>
 				</div>
-				<GridItemMover
-					className="is-right-button"
-					icon={ chevronRight }
-					label={ __( 'Move right' ) }
-					description={ __( 'Move right' ) }
-					isDisabled={ columnCount && columnEnd >= columnCount }
-					onClick={ () => {
-						onChange( {
-							columnStart: columnStart + 1,
-						} );
-						__unstableMarkNextChangeAsNotPersistent();
-						moveBlocksToPosition(
-							[ blockClientId ],
-							gridClientId,
-							gridClientId,
-							getNumberOfBlocksBeforeCell(
-								columnStart + 1,
-								rowStart
-							)
-						);
-					} }
-				/>
+				<div className="block-editor-grid-item-mover__move-horizontal-button-container is-right">
+					<GridItemMover
+						icon={ chevronRight }
+						label={ __( 'Move right' ) }
+						description={ __( 'Move right' ) }
+						isDisabled={ columnCount && columnEnd >= columnCount }
+						onClick={ () => {
+							onChange( {
+								columnStart: columnStart + 1,
+							} );
+							__unstableMarkNextChangeAsNotPersistent();
+							moveBlocksToPosition(
+								[ blockClientId ],
+								gridClientId,
+								gridClientId,
+								getNumberOfBlocksBeforeCell(
+									columnStart + 1,
+									rowStart
+								)
+							);
+						} }
+					/>
+				</div>
 			</ToolbarGroup>
 		</BlockControls>
 	);

package/src/components/grid/grid-item-resizer.js

@@ -7,7 +7,7 @@ import { useState, useEffect } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockPopoverCover from '../block-popover/cover';
 import { getComputedCSS, getGridTracks, getClosestTrack } from './utils';
 
@@ -98,7 +98,7 @@ function GridItemResizerInner( {
 		<BlockPopoverCover
 			className="block-editor-grid-item-resizer"
 			clientId={ clientId }
-			__unstablePopoverSlot="block-toolbar"
+			__unstablePopoverSlot="__unstable-block-tools-after"
 			additionalStyles={ styles }
 		>
 			<ResizableBox
@@ -119,6 +119,15 @@ function GridItemResizerInner( {
 				} }
 				bounds={ bounds }
 				boundsByDirection
+				onPointerDown={ ( { target, pointerId } ) => {
+					/*
+					 * Captures the pointer to avoid hiccups while dragging over objects
+					 * like iframes and ensures that the event to end the drag is
+					 * captured by the target (resize handle) whether or not it’s under
+					 * the pointer.
+					 */
+					target.setPointerCapture( pointerId );
+				} }
 				onResizeStart={ ( event, direction ) => {
 					/*
 					 * The container justification and alignment need to be set
@@ -126,21 +135,6 @@ function GridItemResizerInner( {
 					 * so that it resizes in the right direction.
 					 */
 					setResizeDirection( direction );
-
-					/*
-					 * The mouseup event on the resize handle doesn't trigger if the mouse
-					 * isn't directly above the handle, so we try to detect if it happens
-					 * outside the grid and dispatch a mouseup event on the handle.
-					 */
-					blockElement.ownerDocument.addEventListener(
-						'mouseup',
-						() => {
-							event.target.dispatchEvent(
-								new Event( 'mouseup', { bubbles: true } )
-							);
-						},
-						{ once: true }
-					);
 				} }
 				onResizeStop={ ( event, direction, boxElement ) => {
 					const columnGap = parseFloat(

package/src/components/grid/grid-visualizer.js

@@ -13,7 +13,7 @@ import { __experimentalUseDropZone as useDropZone } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-block-props/use-block-refs';
+import { useBlockElement } from '../block-list/use-block-props/use-block-refs';
 import BlockPopoverCover from '../block-popover/cover';
 import { range, GridRect, getGridInfo } from './utils';
 import { store as blockEditorStore } from '../../store';

package/src/components/grid/style.scss

@@ -105,7 +105,6 @@
 	.block-editor-grid-item-mover-button {
 		width: $block-toolbar-height * 0.5;
 		min-width: 0 !important; // overrides default button width.
-		overflow: hidden;
 		padding-left: 0;
 		padding-right: 0;
 
@@ -155,7 +154,7 @@
 		justify-content: space-around;
 
 		> .block-editor-grid-item-mover-button.block-editor-grid-item-mover-button {
-			height: $block-toolbar-height * 0.5 - $grid-unit-05;
+			height: $block-toolbar-height * 0.5 - $grid-unit-05 !important; // overrides toolbar button height.
 			width: 100%;
 			min-width: 0 !important; // overrides default button width.
 
@@ -173,18 +172,53 @@
 	}
 }
 
+.editor-collapsible-block-toolbar {
+	.block-editor-grid-item-mover__move-vertical-button-container {
+		// Move up a little to prevent the toolbar shift when focus is on the vertical movers.
+		@include break-small() {
+			height: $grid-unit-50;
+			position: relative;
+			top: -5px; // Should be -4px, but that causes scrolling when focus lands on the movers, in a 60px header.
+		}
+	}
+}
+
 .show-icon-labels {
 
-	.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-left-button {
-		border-right: 1px solid $gray-700;
-		padding-right: 12px;
-	}
+	.block-editor-grid-item-mover__move-horizontal-button-container {
+		position: relative;
 
-	.block-editor-grid-item-mover-button.block-editor-grid-item-mover-button.is-right-button {
-		border-left: 1px solid $gray-700;
-		padding-left: 12px;
-	}
+		&::before {
+			@include break-small() {
+				content: "";
+				height: 100%;
+				width: $border-width;
+				background: $gray-200;
+				position: absolute;
+				top: 0;
+			}
+
+			@include break-medium() {
+				background: $gray-900;
+			}
+		}
+
+		&.is-left {
+			padding-right: 6px;
 
+			&::before {
+				right: 0;
+			}
+		}
+
+		&.is-right {
+			padding-left: 6px;
+
+			&::before {
+				left: 0;
+			}
+		}
+	}
 
 	.block-editor-grid-item-mover__move-vertical-button-container {
 		&::before {
@@ -208,5 +242,21 @@
 		}
 	}
 
+	.block-editor-grid-item-mover-button {
+		white-space: nowrap;
+	}
+
+	.editor-collapsible-block-toolbar {
+		.block-editor-grid-item-mover__move-horizontal-button-container::before {
+			height: $grid-unit-30;
+			background: $gray-300;
+			top: $grid-unit-05;
+		}
+
+		.block-editor-grid-item-mover__move-vertical-button-container::before {
+			background: $gray-300;
+			width: calc(100% - #{$grid-unit-30});
+		}
+	}
 }
 

package/src/components/grid/use-grid-layout-sync.js

@@ -10,6 +10,7 @@ import { usePrevious } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 import { GridRect } from './utils';
+import { setImmutably } from '../../utils/object';
 
 export function useGridLayoutSync( { clientId: gridClientId } ) {
 	const { gridLayout, blockOrder, selectedBlockLayout } = useSelect(
@@ -26,7 +27,8 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 		[ gridClientId ]
 	);
 
-	const { getBlockAttributes } = useSelect( blockEditorStore );
+	const { getBlockAttributes, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 
@@ -37,6 +39,10 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 	);
 
 	const previouslySelectedBlockRect = usePrevious( selectedBlockRect );
+	const previousIsManualPlacement = usePrevious(
+		gridLayout.isManualPlacement
+	);
+	const previousBlockOrder = usePrevious( blockOrder );
 
 	useEffect( () => {
 		const updates = {};
@@ -120,20 +126,65 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 					},
 				};
 			}
+
+			// Unset grid layout attributes for blocks removed from the grid.
+			for ( const clientId of previousBlockOrder ?? [] ) {
+				if ( ! blockOrder.includes( clientId ) ) {
+					const rootClientId = getBlockRootClientId( clientId );
+
+					// Block was removed from the editor, so nothing to do.
+					if ( rootClientId === null ) {
+						continue;
+					}
+
+					// Check if the block is being moved to another grid.
+					// If so, do nothing and let the new grid parent handle
+					// the attributes.
+					const rootAttributes = getBlockAttributes( rootClientId );
+					if ( rootAttributes?.layout?.type === 'grid' ) {
+						continue;
+					}
+
+					const attributes = getBlockAttributes( clientId );
+					const {
+						columnStart,
+						rowStart,
+						columnSpan,
+						rowSpan,
+						...layout
+					} = attributes.style?.layout ?? {};
+
+					if ( columnStart || rowStart || columnSpan || rowSpan ) {
+						const hasEmptyLayoutAttribute =
+							Object.keys( layout ).length === 0;
+
+						updates[ clientId ] = setImmutably(
+							attributes,
+							[ 'style', 'layout' ],
+							hasEmptyLayoutAttribute ? undefined : layout
+						);
+					}
+				}
+			}
 		} else {
-			// When in auto mode, remove all of the columnStart and rowStart values.
-			for ( const clientId of blockOrder ) {
-				const attributes = getBlockAttributes( clientId );
-				const { columnStart, rowStart, ...layout } =
-					attributes.style?.layout ?? {};
-				// Only update attributes if columnStart or rowStart are set.
-				if ( columnStart || rowStart ) {
-					updates[ clientId ] = {
-						style: {
-							...attributes.style,
-							layout,
-						},
-					};
+			// Remove all of the columnStart and rowStart values
+			// when switching from manual to auto mode,
+			if ( previousIsManualPlacement === true ) {
+				for ( const clientId of blockOrder ) {
+					const attributes = getBlockAttributes( clientId );
+					const { columnStart, rowStart, ...layout } =
+						attributes.style?.layout ?? {};
+					// Only update attributes if columnStart or rowStart are set.
+					if ( columnStart || rowStart ) {
+						const hasEmptyLayoutAttribute =
+							Object.keys( layout ).length === 0;
+
+						updates[ clientId ] = setImmutably(
+							attributes,
+							[ 'style', 'layout' ],
+							hasEmptyLayoutAttribute ? undefined : layout
+						);
+					}
 				}
 			}
 
@@ -160,11 +211,14 @@ export function useGridLayoutSync( { clientId: gridClientId } ) {
 		// Actual deps to sync:
 		gridClientId,
 		gridLayout,
+		previousBlockOrder,
 		blockOrder,
 		previouslySelectedBlockRect,
+		previousIsManualPlacement,
 		// These won't change, but the linter thinks they might:
 		__unstableMarkNextChangeAsNotPersistent,
 		getBlockAttributes,
+		getBlockRootClientId,
 		updateBlockAttributes,
 	] );
 }