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

package/src/hooks/block-fields/link/index.js

@@ -3,7 +3,7 @@
  */
 import {
 	Button,
-	Icon,
+	Icon as WCIcon,
 	__experimentalGrid as Grid,
 	Popover,
 } from '@wordpress/components';
@@ -104,7 +104,7 @@ export default function Link( { data, field, onChange } ) {
 				>
 					{ url && (
 						<>
-							<Icon icon={ link } size={ 24 } />
+							<WCIcon icon={ link } size={ 24 } />
 							<span className="block-editor-content-only-controls__link-title">
 								{ url }
 							</span>
@@ -112,7 +112,7 @@ export default function Link( { data, field, onChange } ) {
 					) }
 					{ ! url && (
 						<>
-							<Icon
+							<WCIcon
 								icon={ link }
 								size={ 24 }
 								style={ { opacity: 0.3 } }

package/src/hooks/block-fields/media/index.js

@@ -3,7 +3,7 @@
  */
 import {
 	Button,
-	Icon,
+	Icon as WCIcon,
 	__experimentalGrid as Grid,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -92,11 +92,11 @@ function MediaThumbnail( { data, field, attachment, config } ) {
 		}
 
 		if ( icon ) {
-			return <Icon icon={ icon } size={ 20 } />;
+			return <WCIcon icon={ icon } size={ 20 } />;
 		}
 	}
 
-	return <Icon icon={ mediaIcon } size={ 20 } />;
+	return <WCIcon icon={ mediaIcon } size={ 20 } />;
 }
 
 export default function Media( { data, field, onChange, config = {} } ) {

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

@@ -0,0 +1,127 @@
+/**
+ * WordPress dependencies
+ */
+import { createContext, useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { cleanEmptyObject } from './utils';
+import { getValueFromObjectPath, setImmutably } from '../utils/object';
+
+const DEFAULT_STATE_VALUE = 'default';
+
+export const DEFAULT_BLOCK_STYLE_STATE = {
+	viewport: DEFAULT_STATE_VALUE,
+	pseudo: DEFAULT_STATE_VALUE,
+};
+
+const BlockStyleStateContext = createContext( DEFAULT_BLOCK_STYLE_STATE );
+
+export const BlockStyleStateProvider = BlockStyleStateContext.Provider;
+
+export function useBlockStyleState() {
+	return useContext( BlockStyleStateContext );
+}
+
+/**
+ * Returns true when a viewport style state is selected.
+ *
+ * @param {Object} selectedState Selected block style state.
+ * @return {boolean} Whether a viewport state is selected.
+ */
+export function hasViewportBlockStyleState( selectedState ) {
+	return (
+		!! selectedState?.viewport &&
+		selectedState.viewport !== DEFAULT_STATE_VALUE
+	);
+}
+
+/**
+ * Returns true when a pseudo style state is selected.
+ *
+ * @param {Object} selectedState Selected block style state.
+ * @return {boolean} Whether a pseudo state is selected.
+ */
+export function hasPseudoBlockStyleState( selectedState ) {
+	return (
+		!! selectedState?.pseudo && selectedState.pseudo !== DEFAULT_STATE_VALUE
+	);
+}
+
+/**
+ * Returns true when the default style state is selected.
+ *
+ * @param {Object} selectedState Selected block style state.
+ * @return {boolean} Whether the default style state is selected.
+ */
+export function isDefaultBlockStyleState( selectedState ) {
+	return (
+		! hasViewportBlockStyleState( selectedState ) &&
+		! hasPseudoBlockStyleState( selectedState )
+	);
+}
+
+/**
+ * Returns the style object path for the selected block style state.
+ *
+ * @param {Object} selectedState Selected block style state.
+ * @return {string[]} Object path for the selected state styles.
+ */
+function getStyleStatePath( selectedState ) {
+	if ( isDefaultBlockStyleState( selectedState ) ) {
+		return [];
+	}
+
+	return [ selectedState.viewport, selectedState.pseudo ].filter(
+		( state ) => state && state !== DEFAULT_STATE_VALUE
+	);
+}
+
+export function getStyleForState( style, selectedState ) {
+	const path = getStyleStatePath( selectedState );
+	if ( ! path.length ) {
+		return style;
+	}
+	return getValueFromObjectPath( style, path );
+}
+
+export function setStyleForState( style, selectedState, newStyle ) {
+	const path = getStyleStatePath( selectedState );
+	if ( ! path.length ) {
+		return cleanEmptyObject( newStyle );
+	}
+	return cleanEmptyObject( setImmutably( style, path, newStyle ) );
+}
+
+export function scopeResetAllFilterToState( selectedState, resetAllFilter ) {
+	if ( ! resetAllFilter || isDefaultBlockStyleState( selectedState ) ) {
+		return resetAllFilter;
+	}
+
+	return ( attributes ) => {
+		const existingStateStyle =
+			getStyleForState( attributes?.style, selectedState ) || {};
+		const updatedStateAttributes = resetAllFilter( {
+			style: existingStateStyle,
+		} );
+		const updatedStateStyle =
+			updatedStateAttributes &&
+			typeof updatedStateAttributes === 'object' &&
+			! Array.isArray( updatedStateAttributes ) &&
+			Object.prototype.hasOwnProperty.call(
+				updatedStateAttributes,
+				'style'
+			)
+				? updatedStateAttributes.style
+				: updatedStateAttributes;
+
+		return {
+			style: setStyleForState(
+				attributes?.style,
+				selectedState,
+				updatedStateStyle
+			),
+		};
+	};
+}

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' }