@wordpress/block-editor 15.22.1-next.v.202606191442.0 → 15.23.0

package/src/hooks/layout-child.js

@@ -9,6 +9,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../store';
+import { unlock } from '../lock-unlock';
 import { useStyleOverride } from './utils';
 import { useLayout } from '../components/block-list/layout';
 import {
@@ -16,16 +17,21 @@ import {
 	GridItemResizer,
 	GridItemMovers,
 } from '../components/grid';
+import { useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
 import useBlockVisibility from '../components/block-visibility/use-block-visibility';
 import { deviceTypeKey } from '../store/private-keys';
 import { BLOCK_VISIBILITY_VIEWPORTS } from '../components/block-visibility/constants';
+import {
+	DEFAULT_BLOCK_STYLE_STATE,
+	getStyleForState,
+} from './block-style-state';
 
 // 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)',
+	'@mobile': '@media (width <= 480px)',
+	'@tablet': '@media (480px < width <= 782px)',
 };
 
 // These are the serialized `selfStretch` values. `max` used to be called
@@ -252,7 +258,10 @@ export function getResponsiveChildLayoutStyles( {
 
 	return Object.entries( RESPONSIVE_BREAKPOINTS )
 		.map( ( [ viewport, mediaQuery ] ) => {
-			const viewportLayout = style?.[ viewport ]?.layout;
+			const viewportLayout = getStyleForState( style, {
+				viewport,
+				pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
+			} )?.layout;
 			if ( ! viewportLayout || ! Object.keys( viewportLayout ).length ) {
 				return '';
 			}
@@ -390,6 +399,9 @@ function GridTools( {
 			const parentAttributes = getBlockAttributes( _rootClientId );
 			const blockAttributes = getBlockAttributes( clientId );
 			const settings = getSettings();
+			const currentDeviceType =
+				settings?.[ deviceTypeKey ]?.toLowerCase() ||
+				BLOCK_VISIBILITY_VIEWPORTS.desktop.key;
 
 			return {
 				rootClientId: _rootClientId,
@@ -398,9 +410,7 @@ function GridTools( {
 					parentAttributes?.metadata?.blockVisibility,
 				blockBlockVisibility:
 					blockAttributes?.metadata?.blockVisibility,
-				deviceType:
-					settings?.[ deviceTypeKey ]?.toLowerCase() ||
-					BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+				deviceType: currentDeviceType,
 				// Check if the selected child block is itself a grid.
 				isChildBlockAGrid: blockAttributes?.layout?.type === 'grid',
 			};
@@ -408,16 +418,45 @@ function GridTools( {
 		[ clientId ]
 	);
 
-	const { isBlockCurrentlyHidden: isParentBlockCurrentlyHidden } =
-		useBlockVisibility( {
-			blockVisibility: parentBlockVisibility,
-			deviceType,
-		} );
+	// Get the block's DOM element to derive the canvas iframe window,
+	// so viewport detection matches the actual block rendering context
+	const blockElement = useBlockElement( clientId );
+	const rawCanvasView = blockElement?.ownerDocument?.defaultView;
+	const canvasView = rawCanvasView === null ? undefined : rawCanvasView;
+
+	const {
+		isBlockCurrentlyHidden: isParentBlockCurrentlyHidden,
+		currentViewport,
+	} = useBlockVisibility( {
+		blockVisibility: parentBlockVisibility,
+		deviceType,
+		view: canvasView,
+	} );
+
+	// Check whether any ancestor of the parent grid is hidden at the viewport
+	// actually detected from the canvas, so it stays consistent with how
+	// blocks are hidden.
+	const isAnyAncestorHidden = useSelect(
+		( select ) => {
+			if ( ! rootClientId ) {
+				return false;
+			}
+			const { isBlockParentHiddenAtViewport } = unlock(
+				select( blockEditorStore )
+			);
+			return isBlockParentHiddenAtViewport(
+				rootClientId,
+				currentViewport
+			);
+		},
+		[ rootClientId, currentViewport ]
+	);
 
 	const { isBlockCurrentlyHidden: isBlockItselfCurrentlyHidden } =
 		useBlockVisibility( {
 			blockVisibility: blockBlockVisibility,
 			deviceType,
+			view: canvasView,
 		} );
 
 	// Use useState() instead of useRef() so that GridItemResizer updates when ref is set.
@@ -425,7 +464,7 @@ function GridTools( {
 
 	const childGridClientId = isChildBlockAGrid ? clientId : undefined;
 
-	if ( ! isVisible || isParentBlockCurrentlyHidden ) {
+	if ( ! isVisible || isParentBlockCurrentlyHidden || isAnyAncestorHidden ) {
 		return null;
 	}
 

package/src/hooks/layout.js

@@ -52,8 +52,8 @@ const layoutBlockSupportKey = 'layout';
 // Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and
 // packages/global-styles-engine/src/core/render.tsx.
 const RESPONSIVE_BREAKPOINTS = {
-	mobile: '@media (width <= 480px)',
-	tablet: '@media (480px < width <= 782px)',
+	'@mobile': '@media (width <= 480px)',
+	'@tablet': '@media (480px < width <= 782px)',
 };
 const CHILD_LAYOUT_KEYS = [
 	'selfStretch',
@@ -252,7 +252,10 @@ export function getResponsiveLayoutStyles( {
 } ) {
 	return Object.entries( RESPONSIVE_BREAKPOINTS )
 		.map( ( [ viewport, mediaQuery ] ) => {
-			const viewportStyle = attributes?.style?.[ viewport ];
+			const viewportStyle = getStyleForState( attributes?.style, {
+				viewport,
+				pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
+			} );
 			const viewportLayout = getLayoutContainerValues(
 				viewportStyle?.layout
 			);

package/src/hooks/states.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -19,10 +18,23 @@ export const PSEUDO_STATE_LABELS = {
 };
 
 export const RESPONSIVE_STATE_LABELS = {
-	tablet: __( 'Tablet' ),
-	mobile: __( 'Mobile' ),
+	'@tablet': __( 'Tablet' ),
+	'@mobile': __( 'Mobile' ),
 };
 
+// Viewport states are selected globally via the editor's device preview
+// (Responsive editing). 'default' maps to the Desktop device, the remaining
+// options are derived from the shared responsive-state labels.
+const DEVICE_STATE_OPTIONS = [
+	{ value: 'default', label: __( 'Desktop' ) },
+	...Object.entries( RESPONSIVE_STATE_LABELS ).map(
+		( [ value, label ] ) => ( {
+			value,
+			label,
+		} )
+	),
+];
+
 // Keep in sync with WP_Theme_JSON_Gutenberg::VALID_BLOCK_PSEUDO_SELECTORS
 // and packages/global-styles-engine/src/core/render.tsx.
 export const VALID_BLOCK_PSEUDO_STATES = {
@@ -43,23 +55,11 @@ function getPseudoStateOptions( name ) {
 
 const DEFAULT_STATE_VALUE = 'default';
 
-function getViewportStateOptions( name ) {
-	if ( ! getBlockType( name )?.attributes?.style ) {
-		return [];
-	}
-
-	return Object.entries( RESPONSIVE_STATE_LABELS ).map(
-		( [ value, label ] ) => ( {
-			value,
-			label,
-		} )
-	);
-}
-
 /**
- * Renders a style-state selector in the block card header.
- * Viewport states are shown for blocks with a style attribute, while
- * pseudo-states are shown for blocks with configured pseudo-state support.
+ * Renders a pseudo-state selector in the block card header.
+ *
+ * Viewport states are selected globally via the editor's device preview
+ * (Responsive editing), so only pseudo-states are exposed here.
  *
  * @param {Object}   props          Component props.
  * @param {string}   props.name     Block name.
@@ -68,21 +68,17 @@ function getViewportStateOptions( name ) {
  * @return {Element|null} State control component, or null if not applicable.
  */
 export function BlockStatesControl( { name, value, onChange } ) {
-	const viewportStateOptions = getViewportStateOptions( name );
 	const pseudoStateOptions = getPseudoStateOptions( name );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	if ( ! viewportStateOptions.length && ! pseudoStateOptions.length ) {
+	if ( ! pseudoStateOptions.length ) {
 		return null;
 	}
 
 	return (
 		<StateControl
-			viewportStates={ viewportStateOptions }
 			pseudoStates={ pseudoStateOptions }
-			viewportValue={ value?.viewport ?? DEFAULT_STATE_VALUE }
 			pseudoStateValue={ value?.pseudo ?? DEFAULT_STATE_VALUE }
-			onChangeViewport={ ( viewport ) => onChange( { viewport } ) }
 			onChangePseudoState={ ( pseudo ) => onChange( { pseudo } ) }
 			popoverProps={ dropdownMenuProps.popoverProps }
 			showText={ false }
@@ -90,17 +86,25 @@ export function BlockStatesControl( { name, value, onChange } ) {
 	);
 }
 
-export function BlockStateBadges( { name, value } ) {
-	const viewportStateOptions = getViewportStateOptions( name );
+/**
+ * Renders badges for the active style states of a block.
+ *
+ * @param {Object}  props                     Component props.
+ * @param {string}  props.name                Block name.
+ * @param {Object}  props.value               Currently selected style-state value.
+ * @param {boolean} props.isResponsiveEditing Whether Responsive editing is enabled.
+ * @return {Element|null} Badges component, or null if there is nothing to show.
+ */
+export function BlockStateBadges( { name, value, isResponsiveEditing } ) {
 	const pseudoStateOptions = getPseudoStateOptions( name );
 
-	if ( ! viewportStateOptions.length && ! pseudoStateOptions.length ) {
+	if ( ! pseudoStateOptions.length && ! isResponsiveEditing ) {
 		return null;
 	}
 
 	return (
 		<StateControlBadges
-			viewportStates={ viewportStateOptions }
+			viewportStates={ isResponsiveEditing ? DEVICE_STATE_OPTIONS : [] }
 			pseudoStates={ pseudoStateOptions }
 			viewportValue={ value?.viewport ?? DEFAULT_STATE_VALUE }
 			pseudoStateValue={ value?.pseudo ?? DEFAULT_STATE_VALUE }

package/src/hooks/style.js

@@ -19,7 +19,8 @@ import { getCSSRules, compileCSS } from '@wordpress/style-engine';
  */
 import { BACKGROUND_SUPPORT_KEY, BackgroundImagePanel } from './background';
 import { BORDER_SUPPORT_KEY, BorderPanel, SHADOW_SUPPORT_KEY } from './border';
-import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
+import { COLOR_SUPPORT_KEY } from './color';
+import { ElementsEdit } from './elements';
 import {
 	TypographyPanel,
 	TYPOGRAPHY_SUPPORT_KEY,
@@ -57,8 +58,8 @@ const BORDER_SIDES = [ 'Top', 'Right', 'Bottom', 'Left' ];
 // Keep in sync with WP_Theme_JSON_Gutenberg::RESPONSIVE_BREAKPOINTS and
 // packages/global-styles-engine/src/core/render.tsx.
 const RESPONSIVE_BREAKPOINTS = {
-	mobile: '@media (width <= 480px)',
-	tablet: '@media (480px < width <= 782px)',
+	'@mobile': '@media (width <= 480px)',
+	'@tablet': '@media (480px < width <= 782px)',
 };
 
 const styleSupportKeys = [
@@ -419,7 +420,10 @@ export function getResponsiveStateCSSRules( style, name, baseSelector ) {
 
 	Object.entries( RESPONSIVE_BREAKPOINTS ).forEach(
 		( [ viewport, mediaQuery ] ) => {
-			const viewportStyles = style?.[ viewport ];
+			const viewportStyles = getStyleForState( style, {
+				viewport,
+				pseudo: DEFAULT_BLOCK_STYLE_STATE.pseudo,
+			} );
 			if ( ! viewportStyles ) {
 				return;
 			}
@@ -464,8 +468,8 @@ export function getResponsiveStateCSSRules( style, name, baseSelector ) {
  * Returns the style value used to force-preview a selected state on canvas.
  *
  * Responsive pseudo states inherit from their default-viewport pseudo state.
- * For example, selecting `mobile + :hover` should preview styles from
- * `:hover`, with `mobile.:hover` values layered on top when present.
+ * For example, selecting `@mobile + :hover` should preview styles from
+ * `:hover`, with `@mobile.:hover` values layered on top when present.
  *
  * @param {Object} style         Block style object.
  * @param {Object} selectedState Selected block style state.
@@ -848,7 +852,7 @@ function BlockStyleControls( {
 
 	return (
 		<BlockStyleStateProvider value={ selectedState }>
-			<ColorEdit { ...passedProps } />
+			<ElementsEdit { ...passedProps } />
 			<BackgroundImagePanel { ...passedProps } />
 			<TypographyPanel { ...passedProps } />
 			<BorderPanel { ...passedProps } />

package/src/hooks/test/background.js

@@ -3,10 +3,69 @@
  */
 import {
 	setBackgroundStyleDefaults,
+	backgroundResetAllFilter,
 	BACKGROUND_BLOCK_DEFAULT_VALUES,
 } from '../background';
 
 describe( 'background', () => {
+	describe( 'backgroundResetAllFilter', () => {
+		it( 'clears every background-owned value, including a custom legacy color.gradient', () => {
+			const result = backgroundResetAllFilter( {
+				backgroundColor: 'primary',
+				gradient: 'vivid-cyan-blue',
+				className: 'is-style-fancy has-background',
+				style: {
+					color: {
+						text: 'var:preset|color|contrast',
+						background: 'var:preset|color|base',
+						gradient:
+							'linear-gradient(135deg,rgb(100,100,200) 0%,rgb(200,100,100) 100%)',
+					},
+					spacing: { padding: '10px' },
+					background: { backgroundImage: { url: 'image.png' } },
+				},
+			} );
+
+			// Background color and gradient attributes are cleared.
+			expect( result.backgroundColor ).toBeUndefined();
+			expect( result.gradient ).toBeUndefined();
+
+			// The legacy `color.gradient` (a raw/custom value) is cleared. This
+			// is the regression guard: it was previously kept for blocks
+			// without `background.gradient` support.
+			expect( result.style?.color?.gradient ).toBeUndefined();
+			expect( result.style?.color?.background ).toBeUndefined();
+			expect( result.style?.background ).toBeUndefined();
+
+			// Unrelated styles are preserved.
+			expect( result.style?.color?.text ).toBe(
+				'var:preset|color|contrast'
+			);
+			expect( result.style?.spacing ).toEqual( { padding: '10px' } );
+
+			// The `has-background` class is removed, other classes remain.
+			expect( result.className ).toBe( 'is-style-fancy' );
+		} );
+
+		it( 'drops className entirely when has-background was its only value', () => {
+			const result = backgroundResetAllFilter( {
+				className: 'has-background',
+				style: {
+					color: { gradient: 'linear-gradient(0deg,#000,#fff)' },
+				},
+			} );
+			expect( result.className ).toBeUndefined();
+		} );
+
+		it( 'leaves className untouched when has-background is not present', () => {
+			const result = backgroundResetAllFilter( {
+				className: 'is-style-fancy',
+				style: {},
+			} );
+			expect( result.className ).toBe( 'is-style-fancy' );
+		} );
+	} );
+
 	describe( 'setBackgroundStyleDefaults', () => {
 		const backgroundStyles = {
 			backgroundImage: { id: 123, url: 'image.png' },

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

@@ -38,12 +38,12 @@ describe( 'getStyleForState', () => {
 	it( 'returns the selected viewport state style', () => {
 		const style = {
 			color: { text: '#000000' },
-			mobile: { color: { text: '#ff0000' } },
+			'@mobile': { color: { text: '#ff0000' } },
 		};
 
 		expect(
 			getStyleForState( style, {
-				viewport: 'mobile',
+				viewport: '@mobile',
 				pseudo: 'default',
 			} )
 		).toEqual( {
@@ -53,14 +53,14 @@ describe( 'getStyleForState', () => {
 
 	it( 'returns the selected viewport pseudo state style', () => {
 		const style = {
-			mobile: {
+			'@mobile': {
 				':hover': { color: { text: '#ff0000' } },
 			},
 		};
 
 		expect(
 			getStyleForState( style, {
-				viewport: 'mobile',
+				viewport: '@mobile',
 				pseudo: ':hover',
 			} )
 		).toEqual( {
@@ -105,14 +105,14 @@ describe( 'setStyleForState', () => {
 			setStyleForState(
 				{
 					color: { text: '#000000' },
-					mobile: { color: { text: '#ff0000' } },
+					'@mobile': { color: { text: '#ff0000' } },
 				},
-				{ viewport: 'mobile', pseudo: 'default' },
+				{ viewport: '@mobile', pseudo: 'default' },
 				{ typography: { fontSize: '32px' } }
 			)
 		).toEqual( {
 			color: { text: '#000000' },
-			mobile: { typography: { fontSize: '32px' } },
+			'@mobile': { typography: { fontSize: '32px' } },
 		} );
 	} );
 
@@ -121,17 +121,17 @@ describe( 'setStyleForState', () => {
 			setStyleForState(
 				{
 					color: { text: '#000000' },
-					mobile: {
+					'@mobile': {
 						color: { text: '#ff0000' },
 						':hover': { color: { text: '#00ff00' } },
 					},
 				},
-				{ viewport: 'mobile', pseudo: ':hover' },
+				{ viewport: '@mobile', pseudo: ':hover' },
 				{ typography: { fontSize: '32px' } }
 			)
 		).toEqual( {
 			color: { text: '#000000' },
-			mobile: {
+			'@mobile': {
 				color: { text: '#ff0000' },
 				':hover': { typography: { fontSize: '32px' } },
 			},
@@ -234,7 +234,7 @@ describe( 'scopeResetAllFilterToState', () => {
 		const attributes = {
 			style: {
 				color: { text: '#000000' },
-				mobile: {
+				'@mobile': {
 					color: { text: '#ff0000' },
 					':hover': { color: { text: '#00ff00' } },
 				},
@@ -242,17 +242,17 @@ describe( 'scopeResetAllFilterToState', () => {
 		};
 
 		const result = scopeResetAllFilterToState(
-			{ viewport: 'mobile', pseudo: ':hover' },
+			{ viewport: '@mobile', pseudo: ':hover' },
 			innerReset
 		)( attributes );
 
 		expect( innerReset ).toHaveBeenCalledWith( {
-			style: attributes.style.mobile[ ':hover' ],
+			style: attributes.style[ '@mobile' ][ ':hover' ],
 		} );
 		expect( result ).toEqual( {
 			style: {
 				color: { text: '#000000' },
-				mobile: { color: { text: '#ff0000' } },
+				'@mobile': { color: { text: '#ff0000' } },
 			},
 		} );
 	} );

package/src/hooks/test/layout.js

@@ -52,7 +52,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								spacing: {
 									blockGap: '12px',
 								},
@@ -74,7 +74,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								spacing: {
 									blockGap: '12px',
 								},
@@ -96,7 +96,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								layout: {
 									minimumColumnWidth: '8rem',
 								},
@@ -118,7 +118,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								layout: {
 									columnCount: 3,
 								},
@@ -140,7 +140,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							mobile: {
+							'@mobile': {
 								layout: {
 									columnCount: 3,
 								},
@@ -165,7 +165,7 @@ describe( 'layout', () => {
 				getResponsiveLayoutStyles( {
 					attributes: {
 						style: {
-							tablet: {
+							'@tablet': {
 								spacing: {
 									blockGap: '12px',
 								},

package/src/hooks/test/style.js

@@ -402,7 +402,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						color: { text: 'red' },
 					},
 				},
@@ -418,7 +418,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						color: { background: '#ff00d0' },
 						dimensions: { width: '50%' },
 					},
@@ -435,7 +435,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						dimensions: { objectFit: 'fill' },
 					},
 				},
@@ -451,7 +451,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						':hover': {
 							color: { background: 'black' },
 						},
@@ -469,7 +469,7 @@ describe( 'getResponsiveStateCSSRules', () => {
 		expect(
 			getResponsiveStateCSSRules(
 				{
-					mobile: {
+					'@mobile': {
 						elements: {
 							link: {
 								color: { text: 'blue' },
@@ -510,7 +510,7 @@ describe( 'getCanvasStateStyleValue', () => {
 						color: { text: 'red' },
 					},
 				},
-				{ viewport: 'mobile', pseudo: ':hover' }
+				{ viewport: '@mobile', pseudo: ':hover' }
 			)
 		).toEqual( {
 			color: { text: 'red' },
@@ -524,13 +524,13 @@ describe( 'getCanvasStateStyleValue', () => {
 					':hover': {
 						color: { background: 'blue', text: 'red' },
 					},
-					mobile: {
+					'@mobile': {
 						':hover': {
 							color: { text: 'yellow' },
 						},
 					},
 				},
-				{ viewport: 'mobile', pseudo: ':hover' }
+				{ viewport: '@mobile', pseudo: ':hover' }
 			)
 		).toEqual( {
 			color: { background: 'blue', text: 'yellow' },