@wordpress/block-editor 13.2.0 → 13.3.0

package/src/components/tabbed-sidebar/style.scss

@@ -0,0 +1,53 @@
+.block-editor-tabbed-sidebar {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow: hidden;
+
+	@include break-medium() {
+		width: 350px;
+	}
+}
+
+.block-editor-tabbed-sidebar__tablist-and-close-button {
+	border-bottom: $border-width solid $gray-300;
+	display: flex;
+	justify-content: space-between;
+	padding-right: $grid-unit-15;
+}
+
+
+.block-editor-tabbed-sidebar__close-button {
+	background: $white;
+	/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
+	order: 1;
+	align-self: center;
+}
+
+.block-editor-tabbed-sidebar__tablist {
+	box-sizing: border-box;
+	flex-grow: 1;
+	margin-bottom: -$border-width;
+	width: 100%;
+}
+
+.block-editor-tabbed-sidebar__tab {
+	flex-grow: 1;
+	margin-bottom: -$border-width;
+
+	&[id$="reusable"] {
+		flex-grow: inherit;
+		// These are to align the `reusable` icon with the search icon.
+		padding-left: $grid-unit-20;
+		padding-right: $grid-unit-20;
+	}
+}
+
+.block-editor-tabbed-sidebar__tabpanel {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	overflow-y: auto;
+	scrollbar-gutter: auto;
+}

package/src/components/url-popover/index.js

@@ -71,6 +71,9 @@ const URLPopover = forwardRef(
 		return (
 			<Popover
 				ref={ ref }
+				role="dialog"
+				aria-modal="true"
+				aria-label={ __( 'Edit URL' ) }
 				className="block-editor-url-popover"
 				focusOnMount={ focusOnMount }
 				placement={ computedPlacement }

package/src/hooks/background.js

@@ -16,6 +16,10 @@ import {
 	useHasBackgroundPanel,
 	hasBackgroundImageValue,
 } from '../components/global-styles/background-panel';
+import {
+	globalStylesDataKey,
+	globalStylesLinksDataKey,
+} from '../store/private-keys';
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
@@ -134,10 +138,25 @@ export function BackgroundImagePanel( {
 	setAttributes,
 	settings,
 } ) {
-	const style = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
-		[ clientId ]
+	const { style, inheritedValue, _links } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getSettings } =
+				select( blockEditorStore );
+			const _settings = getSettings();
+			return {
+				style: getBlockAttributes( clientId )?.style,
+				_links: _settings[ globalStylesLinksDataKey ],
+				/*
+				 * @TODO 1. Pass inherited value down to all block style controls,
+				 *   See: packages/block-editor/src/hooks/style.js
+				 * @TODO 2. Add support for block style variations,
+				 *   See implementation: packages/block-editor/src/hooks/block-style-variation.js
+				 */
+				inheritedValue:
+					_settings[ globalStylesDataKey ]?.blocks?.[ name ],
+			};
+		},
+		[ clientId, name ]
 	);
 
 	if (
@@ -147,11 +166,6 @@ export function BackgroundImagePanel( {
 		return null;
 	}
 
-	const defaultControls = getBlockSupport( name, [
-		BACKGROUND_SUPPORT_KEY,
-		'__experimentalDefaultControls',
-	] );
-
 	const onChange = ( newStyle ) => {
 		setAttributes( {
 			style: cleanEmptyObject( newStyle ),
@@ -170,13 +184,14 @@ export function BackgroundImagePanel( {
 
 	return (
 		<StylesBackgroundPanel
+			inheritedValue={ inheritedValue }
 			as={ BackgroundInspectorControl }
 			panelId={ clientId }
-			defaultControls={ defaultControls }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
 			value={ style }
+			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }

package/src/hooks/block-hooks.js

@@ -43,25 +43,12 @@ function BlockHooksControlPure( {
 		[ blockTypes, name, ignoredHookedBlocks ]
 	);
 
-	const { blockIndex, rootClientId, innerBlocksLength } = useSelect(
-		( select ) => {
-			const { getBlocks, getBlockIndex, getBlockRootClientId } =
-				select( blockEditorStore );
-
-			return {
-				blockIndex: getBlockIndex( clientId ),
-				innerBlocksLength: getBlocks( clientId )?.length,
-				rootClientId: getBlockRootClientId( clientId ),
-			};
-		},
-		[ clientId ]
-	);
-
 	const hookedBlockClientIds = useSelect(
 		( select ) => {
-			const { getBlocks, getGlobalBlockCount } =
+			const { getBlocks, getBlockRootClientId, getGlobalBlockCount } =
 				select( blockEditorStore );
 
+			const rootClientId = getBlockRootClientId( clientId );
 			const _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce(
 				( clientIds, block ) => {
 					// If the block doesn't exist anywhere in the block tree,
@@ -127,9 +114,11 @@ function BlockHooksControlPure( {
 
 			return EMPTY_OBJECT;
 		},
-		[ hookedBlocksForCurrentBlock, name, clientId, rootClientId ]
+		[ hookedBlocksForCurrentBlock, name, clientId ]
 	);
 
+	const { getBlockIndex, getBlockCount, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const { insertBlock, removeBlock } = useDispatch( blockEditorStore );
 
 	if ( ! hookedBlocksForCurrentBlock.length ) {
@@ -150,6 +139,10 @@ function BlockHooksControlPure( {
 	);
 
 	const insertBlockIntoDesignatedLocation = ( block, relativePosition ) => {
+		const blockIndex = getBlockIndex( clientId );
+		const innerBlocksLength = getBlockCount( clientId );
+		const rootClientId = getBlockRootClientId( clientId );
+
 		switch ( relativePosition ) {
 			case 'before':
 			case 'after':

package/src/hooks/block-style-variation.js

@@ -14,8 +14,10 @@ import {
 	getBlockSelectors,
 } from '../components/global-styles';
 import { useStyleOverride } from './utils';
+import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
+import { unlock } from '../lock-unlock';
 
 const VARIATION_PREFIX = 'is-style-';
 
@@ -59,6 +61,197 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 	return null;
 }
 
+// A helper component to apply a style override using the useStyleOverride hook.
+function OverrideStyles( { override } ) {
+	useStyleOverride( override );
+}
+
+/**
+ * This component is used to generate new block style variation overrides
+ * based on an incoming theme config. If a matching style is found in the config,
+ * a new override is created and returned. The overrides can be used in conjunction with
+ * useStyleOverride to apply the new styles to the editor. Its use is
+ * subject to change.
+ *
+ * @param {Object} props        Props.
+ * @param {Object} props.config A global styles object, containing settings and styles.
+ * @return {JSX.Element|undefined} An array of new block variation overrides.
+ */
+export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
+	const { getBlockStyles, overrides } = useSelect(
+		( select ) => ( {
+			getBlockStyles: select( blocksStore ).getBlockStyles,
+			overrides: unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		} ),
+		[]
+	);
+	const { getBlockName } = useSelect( blockEditorStore );
+
+	const overridesWithConfig = useMemo( () => {
+		if ( ! overrides?.length ) {
+			return;
+		}
+		const newOverrides = [];
+		const overriddenClientIds = [];
+		for ( const [ , override ] of overrides ) {
+			if (
+				override?.variation &&
+				override?.clientId &&
+				/*
+				 * Because this component overwrites existing style overrides,
+				 * filter out any overrides that are already present in the store.
+				 */
+				! overriddenClientIds.includes( override.clientId )
+			) {
+				const blockName = getBlockName( override.clientId );
+				const configStyles =
+					config?.styles?.blocks?.[ blockName ]?.variations?.[
+						override.variation
+					];
+				if ( configStyles ) {
+					const variationConfig = {
+						settings: config?.settings,
+						// The variation style data is all that is needed to generate
+						// the styles for the current application to a block. The variation
+						// name is updated to match the instance specific class name.
+						styles: {
+							blocks: {
+								[ blockName ]: {
+									variations: {
+										[ `${ override.variation }-${ override.clientId }` ]:
+											configStyles,
+									},
+								},
+							},
+						},
+					};
+					const blockSelectors = getBlockSelectors(
+						getBlockTypes(),
+						getBlockStyles,
+						override.clientId
+					);
+					const hasBlockGapSupport = false;
+					const hasFallbackGapSupport = true;
+					const disableLayoutStyles = true;
+					const disableRootPadding = true;
+					const variationStyles = toStyles(
+						variationConfig,
+						blockSelectors,
+						hasBlockGapSupport,
+						hasFallbackGapSupport,
+						disableLayoutStyles,
+						disableRootPadding,
+						{
+							blockGap: false,
+							blockStyles: true,
+							layoutStyles: false,
+							marginReset: false,
+							presets: false,
+							rootPadding: false,
+							variationStyles: true,
+						}
+					);
+					newOverrides.push( {
+						id: `${ override.variation }-${ override.clientId }`,
+						css: variationStyles,
+						__unstableType: 'variation',
+						variation: override.variation,
+						// The clientId will be stored with the override and used to ensure
+						// the order of overrides matches the order of blocks so that the
+						// correct CSS cascade is maintained.
+						clientId: override.clientId,
+					} );
+					overriddenClientIds.push( override.clientId );
+				}
+			}
+		}
+		return newOverrides;
+	}, [ config, overrides, getBlockStyles, getBlockName ] );
+
+	if ( ! overridesWithConfig || ! overridesWithConfig.length ) {
+		return;
+	}
+
+	return (
+		<>
+			{ overridesWithConfig.map( ( override ) => (
+				<OverrideStyles key={ override.id } override={ override } />
+			) ) }
+		</>
+	);
+}
+
+/**
+ * Retrieves any variation styles data and resolves any referenced values.
+ *
+ * @param {Object}    globalStyles A complete global styles object, containing settings and styles.
+ * @param {string}    name         The name of the desired block type.
+ * @param {variation} variation    The of the block style variation to retrieve data for.
+ *
+ * @return {Object|undefined} The global styles data for the specified variation.
+ */
+export function getVariationStylesWithRefValues(
+	globalStyles,
+	name,
+	variation
+) {
+	if ( ! globalStyles?.styles?.blocks?.[ name ]?.variations?.[ variation ] ) {
+		return;
+	}
+
+	// Helper to recursively look for `ref` values to resolve.
+	const replaceRefs = ( variationStyles ) => {
+		Object.keys( variationStyles ).forEach( ( key ) => {
+			const value = variationStyles[ key ];
+
+			// Only process objects.
+			if ( typeof value === 'object' && value !== null ) {
+				// Process `ref` value if present.
+				if ( value.ref !== undefined ) {
+					if (
+						typeof value.ref !== 'string' ||
+						value.ref.trim() === ''
+					) {
+						// Remove invalid ref.
+						delete variationStyles[ key ];
+					} else {
+						// Resolve `ref` value.
+						const refValue = getValueFromObjectPath(
+							globalStyles,
+							value.ref
+						);
+
+						if ( refValue ) {
+							variationStyles[ key ] = refValue;
+						} else {
+							delete variationStyles[ key ];
+						}
+					}
+				} else {
+					// Recursively resolve `ref` values in nested objects.
+					replaceRefs( value );
+
+					// After recursion, if value is empty due to explicitly
+					// `undefined` ref value, remove it.
+					if ( Object.keys( value ).length === 0 ) {
+						delete variationStyles[ key ];
+					}
+				}
+			}
+		} );
+	};
+
+	// Deep clone variation node to avoid mutating it within global styles and losing refs.
+	const styles = JSON.parse(
+		JSON.stringify(
+			globalStyles.styles.blocks[ name ].variations[ variation ]
+		)
+	);
+	replaceRefs( styles );
+
+	return styles;
+}
+
 function useBlockStyleVariation( name, variation, clientId ) {
 	// Prefer global styles data in GlobalStylesContext, which are available
 	// if in the site editor. Otherwise fall back to whatever is in the
@@ -73,9 +266,14 @@ function useBlockStyleVariation( name, variation, clientId ) {
 	}, [] );
 
 	return useMemo( () => {
-		const styles = mergedConfig?.styles ?? globalStyles;
-		const variationStyles =
-			styles?.blocks?.[ name ]?.variations?.[ variation ];
+		const variationStyles = getVariationStylesWithRefValues(
+			{
+				settings: mergedConfig?.settings ?? globalSettings,
+				styles: mergedConfig?.styles ?? globalStyles,
+			},
+			name,
+			variation
+		);
 
 		return {
 			settings: mergedConfig?.settings ?? globalSettings,
@@ -157,6 +355,7 @@ function useBlockProps( { name, className, clientId } ) {
 		id: `variation-${ clientId }`,
 		css: variationStyles,
 		__unstableType: 'variation',
+		variation,
 		// The clientId will be stored with the override and used to ensure
 		// the order of overrides matches the order of blocks so that the
 		// correct CSS cascade is maintained.

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,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

@@ -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,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 } );
@@ -143,7 +160,7 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
 	const {
 		type: parentLayoutType = 'default',
 		allowSizingOnChildren = false,
-		columnCount,
+		isManualPlacement,
 	} = parentLayout;
 
 	const rootClientId = useSelect(
@@ -160,8 +177,6 @@ function ChildLayoutControlsPure( { clientId, style, setAttributes } ) {
 		return null;
 	}
 
-	const isManualGrid = !! columnCount;
-
 	function updateLayout( layout ) {
 		setAttributes( {
 			style: {
@@ -190,15 +205,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 }
+					/>
+				) }
 		</>
 	);
 }