@wordpress/block-editor 15.19.1-next.v.202605131032.0 → 15.21.0

package/src/hooks/border.js

@@ -11,6 +11,7 @@ import { __experimentalHasSplitBorders as hasSplitBorders } from '@wordpress/com
 import { Platform, useCallback, useMemo } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -29,7 +30,12 @@ import {
 	BorderPanel as StylesBorderPanel,
 } from '../components/global-styles';
 import { store as blockEditorStore } from '../store';
-import { __ } from '@wordpress/i18n';
+import {
+	getStyleForState,
+	isDefaultBlockStyleState,
+	setStyleForState,
+	useBlockStyleState,
+} from './block-style-state';
 
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
 export const SHADOW_SUPPORT_KEY = 'shadow';
@@ -141,6 +147,7 @@ function BordersInspectorControl( { label, children, resetAllFilter } ) {
 }
 
 export function BorderPanel( { clientId, name, setAttributes, settings } ) {
+	const selectedState = useBlockStyleState();
 	const isEnabled = useHasBorderPanel( settings );
 	const { style, borderColor } = useSelect(
 		( select ) => {
@@ -154,13 +161,25 @@ export function BorderPanel( { clientId, name, setAttributes, settings } ) {
 		},
 		[ clientId, isEnabled ]
 	);
+
+	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
+
 	const value = useMemo( () => {
+		if ( isStateSelected ) {
+			return getStyleForState( style, selectedState );
+		}
 		return attributesToStyle( { style, borderColor } );
-	}, [ style, borderColor ] );
-
-	const onChange = ( newStyle ) => {
-		setAttributes( styleToAttributes( newStyle ) );
-	};
+	}, [ isStateSelected, selectedState, style, borderColor ] );
+
+	const onChange = isStateSelected
+		? ( newStyle ) => {
+				setAttributes( {
+					style: setStyleForState( style, selectedState, newStyle ),
+				} );
+		  }
+		: ( newStyle ) => {
+				setAttributes( styleToAttributes( newStyle ) );
+		  };
 
 	if ( ! isEnabled ) {
 		return null;

package/src/hooks/color.js

@@ -31,8 +31,15 @@ import {
 	useHasColorPanel,
 	default as StylesColorPanel,
 } from '../components/global-styles/color-panel';
+import { extractPresetSlug } from '../utils/color-values';
 import BlockColorContrastChecker from './contrast-checker';
 import { store as blockEditorStore } from '../store';
+import {
+	getStyleForState,
+	isDefaultBlockStyleState,
+	setStyleForState,
+	useBlockStyleState,
+} from './block-style-state';
 
 export const COLOR_SUPPORT_KEY = 'color';
 
@@ -191,19 +198,14 @@ export function addSaveProps( props, blockNameOrType, attributes ) {
 
 function styleToAttributes( style ) {
 	const textColorValue = style?.color?.text;
-	const textColorSlug = textColorValue?.startsWith( 'var:preset|color|' )
-		? textColorValue.substring( 'var:preset|color|'.length )
-		: undefined;
+	const textColorSlug = extractPresetSlug( textColorValue, 'color' );
 	const backgroundColorValue = style?.color?.background;
-	const backgroundColorSlug = backgroundColorValue?.startsWith(
-		'var:preset|color|'
-	)
-		? backgroundColorValue.substring( 'var:preset|color|'.length )
-		: undefined;
+	const backgroundColorSlug = extractPresetSlug(
+		backgroundColorValue,
+		'color'
+	);
 	const gradientValue = style?.color?.gradient;
-	const gradientSlug = gradientValue?.startsWith( 'var:preset|gradient|' )
-		? gradientValue.substring( 'var:preset|gradient|'.length )
-		: undefined;
+	const gradientSlug = extractPresetSlug( gradientValue, 'gradient' );
 	const updatedStyle = { ...style };
 	updatedStyle.color = {
 		...updatedStyle.color,
@@ -269,6 +271,7 @@ export function ColorEdit( {
 	label,
 	defaultControls,
 } ) {
+	const selectedState = useBlockStyleState();
 	const isEnabled = useHasColorPanel( settings );
 
 	const { style, textColor, backgroundColor, gradient } = useSelect(
@@ -292,18 +295,39 @@ export function ColorEdit( {
 		},
 		[ clientId, isEnabled ]
 	);
+
+	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
+
 	const value = useMemo( () => {
+		if ( isStateSelected ) {
+			return getStyleForState( style, selectedState );
+		}
 		return attributesToStyle( {
 			style,
 			textColor,
 			backgroundColor,
 			gradient,
 		} );
-	}, [ style, textColor, backgroundColor, gradient ] );
+	}, [
+		isStateSelected,
+		selectedState,
+		style,
+		textColor,
+		backgroundColor,
+		gradient,
+	] );
+
+	const onChange = isStateSelected
+		? ( newStyle ) => {
+				setAttributes( {
+					style: setStyleForState( style, selectedState, newStyle ),
+				} );
+		  }
+		: ( newStyle ) => {
+				setAttributes( styleToAttributes( newStyle ) );
+		  };
 
-	const onChange = ( newStyle ) => {
-		setAttributes( styleToAttributes( newStyle ) );
-	};
+	const Wrapper = asWrapper || ColorInspectorControl;
 
 	if ( ! isEnabled ) {
 		return null;
@@ -317,6 +341,7 @@ export function ColorEdit( {
 		  ] );
 
 	const enableContrastChecking =
+		! isStateSelected &&
 		Platform.OS === 'web' &&
 		! value?.color?.gradient &&
 		( settings?.color?.text || settings?.color?.link ) &&
@@ -329,9 +354,6 @@ export function ColorEdit( {
 				'enableContrastChecker',
 			] );
 
-	// Use provided wrapper or default to ColorInspectorControl
-	const Wrapper = asWrapper || ColorInspectorControl;
-
 	return (
 		<StylesColorPanel
 			as={ Wrapper }

package/src/hooks/dimensions.js

@@ -23,6 +23,12 @@ import { MarginVisualizer, PaddingVisualizer } from './spacing-visualizer';
 import { store as blockEditorStore } from '../store';
 import { unlock } from '../lock-unlock';
 import { cleanEmptyObject, shouldSkipSerialization } from './utils';
+import {
+	getStyleForState,
+	isDefaultBlockStyleState,
+	setStyleForState,
+	useBlockStyleState,
+} from './block-style-state';
 
 export const DIMENSIONS_SUPPORT_KEY = 'dimensions';
 export const SPACING_SUPPORT_KEY = 'spacing';
@@ -69,8 +75,10 @@ function DimensionsInspectorControl( { children, resetAllFilter } ) {
 }
 
 export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
-	const isEnabled = useHasDimensionsPanel( settings );
-	const value = useSelect(
+	const selectedState = useBlockStyleState();
+	const isStateSelected = ! isDefaultBlockStyleState( selectedState );
+	const isEnabled = useHasDimensionsPanel( settings, selectedState );
+	const style = useSelect(
 		( select ) => {
 			// Early return to avoid subscription when disabled
 			if ( ! isEnabled ) {
@@ -81,13 +89,21 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 		},
 		[ clientId, isEnabled ]
 	);
-
 	const [ visualizedProperty, setVisualizedProperty ] = useVisualizer();
-	const onChange = ( newStyle ) => {
-		setAttributes( {
-			style: cleanEmptyObject( newStyle ),
-		} );
-	};
+	const value = isStateSelected
+		? getStyleForState( style, selectedState )
+		: style;
+	const onChange = isStateSelected
+		? ( newStyle ) => {
+				setAttributes( {
+					style: setStyleForState( style, selectedState, newStyle ),
+				} );
+		  }
+		: ( newStyle ) => {
+				setAttributes( {
+					style: cleanEmptyObject( newStyle ),
+				} );
+		  };
 
 	if ( ! isEnabled ) {
 		return null;
@@ -119,9 +135,13 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 				value={ value }
 				onChange={ onChange }
 				defaultControls={ defaultControls }
-				onVisualize={ setVisualizedProperty }
+				styleState={ selectedState }
+				onVisualize={
+					isStateSelected ? undefined : setVisualizedProperty
+				}
 			/>
-			{ !! settings?.spacing?.padding &&
+			{ ! isStateSelected &&
+				!! settings?.spacing?.padding &&
 				visualizedProperty === 'padding' && (
 					<PaddingVisualizer
 						forceShow={ visualizedProperty === 'padding' }
@@ -129,7 +149,8 @@ export function DimensionsPanel( { clientId, name, setAttributes, settings } ) {
 						value={ value }
 					/>
 				) }
-			{ !! settings?.spacing?.margin &&
+			{ ! isStateSelected &&
+				!! settings?.spacing?.margin &&
 				visualizedProperty === 'margin' && (
 					<MarginVisualizer
 						forceShow={ visualizedProperty === 'margin' }

package/src/hooks/layout-child.js

@@ -22,12 +22,36 @@ import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/const
 
 // Used for generating the instance ID
 const LAYOUT_CHILD_BLOCK_PROPS_REFERENCE = {};
+// Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS.
+const RESPONSIVE_BREAKPOINTS = {
+	mobile: '@media (width <= 480px)',
+	tablet: '@media (480px < width <= 782px)',
+};
 
-function useBlockPropsChildLayoutStyles( { style } ) {
-	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
-		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
-	} );
-	const layout = style?.layout ?? {};
+function serializeRule( { selector, declarations } ) {
+	return `${ selector } {
+		${ Object.entries( declarations )
+			.map( ( [ property, value ] ) => `${ property }: ${ value }` )
+			.join( '; ' ) };
+	}`;
+}
+
+export function getChildLayoutStyleRules( {
+	selector,
+	layout = {},
+	viewportOverrides,
+	parentLayout = {},
+	includeContainerQuery = true,
+} ) {
+	const hasViewportOverrides = viewportOverrides !== undefined;
+	const effectiveLayout = hasViewportOverrides
+		? {
+				...layout,
+				...viewportOverrides,
+		  }
+		: layout;
+	const hasViewportOverride = ( key ) =>
+		Object.hasOwn( viewportOverrides || {}, key );
 	const {
 		selfStretch,
 		flexSize,
@@ -35,66 +59,59 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 		rowStart,
 		columnSpan,
 		rowSpan,
-	} = layout;
-	const parentLayout = useLayout() || {};
+	} = effectiveLayout;
 	const { columnCount, minimumColumnWidth } = parentLayout;
-	const id = useInstanceId( LAYOUT_CHILD_BLOCK_PROPS_REFERENCE );
-	const selector = `.wp-container-content-${ id }`;
+	const rules = [];
 
-	// 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' );
+	const declarations = {};
+	if (
+		! hasViewportOverrides ||
+		hasViewportOverride( 'selfStretch' ) ||
+		hasViewportOverride( 'flexSize' )
+	) {
+		if ( selfStretch === 'fixed' && flexSize ) {
+			declarations[ 'flex-basis' ] = flexSize;
+			declarations[ 'box-sizing' ] = 'border-box';
+		} else if ( selfStretch === 'fill' ) {
+			declarations[ 'flex-grow' ] = '1';
 		}
 	}
 
-	let css = '';
-	if ( shouldRenderChildLayoutStyles ) {
-		if ( selfStretch === 'fixed' && flexSize ) {
-			css = `${ selector } {
-				flex-basis: ${ flexSize };
-				box-sizing: border-box;
-			}`;
-		} else if ( selfStretch === 'fill' ) {
-			css = `${ selector } {
-				flex-grow: 1;
-			}`;
-		} else if ( columnStart && columnSpan ) {
-			css = `${ selector } {
-				grid-column: ${ columnStart } / span ${ columnSpan };
-			}`;
+	if (
+		! hasViewportOverrides ||
+		hasViewportOverride( 'columnStart' ) ||
+		hasViewportOverride( 'columnSpan' )
+	) {
+		if ( columnStart && columnSpan ) {
+			declarations[
+				'grid-column'
+			] = `${ columnStart } / span ${ columnSpan }`;
 		} else if ( columnStart ) {
-			css = `${ selector } {
-				grid-column: ${ columnStart };
-			}`;
+			declarations[ 'grid-column' ] = `${ columnStart }`;
 		} else if ( columnSpan ) {
-			css = `${ selector } {
-				grid-column: span ${ columnSpan };
-			}`;
+			declarations[ 'grid-column' ] = `span ${ columnSpan }`;
 		}
+	}
+
+	if (
+		! hasViewportOverrides ||
+		hasViewportOverride( 'rowStart' ) ||
+		hasViewportOverride( 'rowSpan' )
+	) {
 		if ( rowStart && rowSpan ) {
-			css += `${ selector } {
-				grid-row: ${ rowStart } / span ${ rowSpan };
-			}`;
+			declarations[ 'grid-row' ] = `${ rowStart } / span ${ rowSpan }`;
 		} else if ( rowStart ) {
-			css += `${ selector } {
-				grid-row: ${ rowStart };
-			}`;
+			declarations[ 'grid-row' ] = `${ rowStart }`;
 		} else if ( rowSpan ) {
-			css += `${ selector } {
-				grid-row: span ${ rowSpan };
-			}`;
+			declarations[ 'grid-row' ] = `span ${ rowSpan }`;
 		}
+	}
+
+	if ( Object.keys( declarations ).length ) {
+		rules.push( { selector, declarations } );
+	}
+
+	if ( includeContainerQuery && ! hasViewportOverrides ) {
 		/**
 		 * If minimumColumnWidth is set on the parent, or if no
 		 * columnCount is set, the grid is responsive so a
@@ -147,18 +164,118 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 			const gridColumnValue =
 				columnSpan && columnSpan > 1 ? '1/-1' : 'auto';
 
-			css += `@container (max-width: ${ Math.max(
-				containerQueryValue,
-				minimumContainerQueryValue
-			) }${ parentColumnUnit }) {
-				${ selector } {
-					grid-column: ${ gridColumnValue };
-					grid-row: auto;
-				}
-			}`;
+			rules.push( {
+				rulesGroup: `@container (max-width: ${ Math.max(
+					containerQueryValue,
+					minimumContainerQueryValue
+				) }${ parentColumnUnit })`,
+				selector,
+				declarations: {
+					'grid-column': gridColumnValue,
+					'grid-row': 'auto',
+				},
+			} );
 		}
 	}
 
+	return rules;
+}
+
+export function getChildLayoutStyles( {
+	selector,
+	layout = {},
+	parentLayout = {},
+	includeContainerQuery = true,
+} ) {
+	return getChildLayoutStyleRules( {
+		selector,
+		layout,
+		parentLayout,
+		includeContainerQuery,
+	} )
+		.map( ( rule ) => {
+			const serializedRule = serializeRule( rule );
+			return rule.rulesGroup
+				? `${ rule.rulesGroup } {
+				${ serializedRule }
+			}`
+				: serializedRule;
+		} )
+		.join( '' );
+}
+
+export function getResponsiveChildLayoutStyles( {
+	style = {},
+	selector,
+	parentLayout = {},
+} ) {
+	const baseLayout = style?.layout ?? {};
+
+	return Object.entries( RESPONSIVE_BREAKPOINTS )
+		.map( ( [ viewport, mediaQuery ] ) => {
+			const viewportLayout = style?.[ viewport ]?.layout;
+			if ( ! viewportLayout || ! Object.keys( viewportLayout ).length ) {
+				return '';
+			}
+
+			const viewportRules = getChildLayoutStyleRules( {
+				selector,
+				layout: baseLayout,
+				viewportOverrides: viewportLayout,
+				parentLayout,
+				includeContainerQuery: false,
+			} );
+			const css = viewportRules.map( serializeRule ).join( '' );
+
+			return css ? `${ mediaQuery }{${ css }}` : '';
+		} )
+		.filter( Boolean )
+		.join( '' );
+}
+
+function useBlockPropsChildLayoutStyles( { style } ) {
+	const shouldRenderChildLayoutStyles = useSelect( ( select ) => {
+		return ! select( blockEditorStore ).getSettings().disableLayoutStyles;
+	} );
+	const layout = style?.layout ?? {};
+	const { columnStart, rowStart, columnSpan, rowSpan } = layout;
+	const parentLayout = useLayout() || {};
+	const id = useInstanceId( LAYOUT_CHILD_BLOCK_PROPS_REFERENCE );
+	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 ) {
+		css = [
+			getChildLayoutStyles( {
+				selector,
+				layout,
+				parentLayout,
+			} ),
+			getResponsiveChildLayoutStyles( {
+				style,
+				selector,
+				parentLayout,
+			} ),
+		].join( '' );
+	}
+
 	useStyleOverride( { css } );
 
 	// Only attach a container class if there is generated CSS to be attached.