@wordpress/block-editor 15.14.1-next.v.202603102151.0 → 15.15.0

package/build-style/content-rtl.css

@@ -199,6 +199,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   outline-style: solid;
   outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
   z-index: 1;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-block-hidden {
@@ -293,6 +294,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   outline-style: solid;
   outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
 }
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after,

package/build-style/content.css

@@ -199,6 +199,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   outline-style: solid;
   outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
   z-index: 1;
 }
 .block-editor-block-list__layout .block-editor-block-list__block.is-block-hidden {
@@ -293,6 +294,7 @@ _::-webkit-full-page-media, _:future, :root [data-has-multi-selection=true] .blo
   outline-style: solid;
   outline-width: calc(1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
   outline-offset: calc(1 * -1 * var(--wp-admin-border-width-focus) / var(--wp-block-editor-iframe-zoom-out-scale, 1));
+  box-shadow: inset 0 0 0 calc(var(--wp-admin-border-width-focus, 2px) + 1px) #fff, 0 0 0 1px #fff, 0 1px 1px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), 0 3px 3px rgba(0, 0, 0, 0.02), 0 4px 4px rgba(0, 0, 0, 0.01);
 }
 
 .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-hovered::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-selected::after, .is-outline-mode .block-editor-block-list__block:not(.remove-outline).wp-block-template-part.is-highlighted::after,

package/build-style/style-rtl.css

@@ -3432,7 +3432,7 @@ iframe[name=editor-canvas] {
 .block-editor-content-only-controls__media {
   width: 100%;
   box-shadow: inset 0 0 0 1px #ccc;
-  padding: 8px;
+  padding-left: 32px;
 }
 .block-editor-content-only-controls__media:focus:not(:disabled) {
   box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -3464,10 +3464,11 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-content-only-controls__media-thumbnail {
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   border-radius: 2px;
   align-self: center;
+  overflow: hidden;
 }
 .block-editor-content-only-controls__media-thumbnail img {
   width: 100% !important;
@@ -3475,6 +3476,32 @@ iframe[name=editor-canvas] {
   object-fit: cover;
 }
 
+.block-editor-content-only-controls {
+  position: relative;
+}
+
+.block-editor-content-only-controls__media-reset {
+  position: absolute;
+  left: 0;
+  top: 8px;
+  margin: auto 8px auto;
+  opacity: 0;
+  border-radius: 2px;
+}
+@media not (prefers-reduced-motion) {
+  .block-editor-content-only-controls__media-reset {
+    transition: opacity 0.1s ease-in-out;
+  }
+}
+.block-editor-content-only-controls:hover .block-editor-content-only-controls__media-reset, .block-editor-content-only-controls__media-reset:focus, .block-editor-content-only-controls__media-reset:hover {
+  opacity: 1;
+}
+@media (hover: none) {
+  .block-editor-content-only-controls__media-reset {
+    opacity: 1;
+  }
+}
+
 .block-editor-content-only-controls__rich-text {
   width: 100%;
   margin: 0;

package/build-style/style.css

@@ -3434,7 +3434,7 @@ iframe[name=editor-canvas] {
 .block-editor-content-only-controls__media {
   width: 100%;
   box-shadow: inset 0 0 0 1px #ccc;
-  padding: 8px;
+  padding-right: 32px;
 }
 .block-editor-content-only-controls__media:focus:not(:disabled) {
   box-shadow: 0 0 0 currentColor inset, 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
@@ -3466,10 +3466,11 @@ iframe[name=editor-canvas] {
 }
 
 .block-editor-content-only-controls__media-thumbnail {
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   border-radius: 2px;
   align-self: center;
+  overflow: hidden;
 }
 .block-editor-content-only-controls__media-thumbnail img {
   width: 100% !important;
@@ -3477,6 +3478,32 @@ iframe[name=editor-canvas] {
   object-fit: cover;
 }
 
+.block-editor-content-only-controls {
+  position: relative;
+}
+
+.block-editor-content-only-controls__media-reset {
+  position: absolute;
+  right: 0;
+  top: 8px;
+  margin: auto 8px auto;
+  opacity: 0;
+  border-radius: 2px;
+}
+@media not (prefers-reduced-motion) {
+  .block-editor-content-only-controls__media-reset {
+    transition: opacity 0.1s ease-in-out;
+  }
+}
+.block-editor-content-only-controls:hover .block-editor-content-only-controls__media-reset, .block-editor-content-only-controls__media-reset:focus, .block-editor-content-only-controls__media-reset:hover {
+  opacity: 1;
+}
+@media (hover: none) {
+  .block-editor-content-only-controls__media-reset {
+    opacity: 1;
+  }
+}
+
 .block-editor-content-only-controls__rich-text {
   width: 100%;
   margin: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "15.14.1-next.v.202603102151.0+59e17f9ec",
+	"version": "15.15.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -61,43 +61,43 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/api-fetch": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/base-styles": "^6.17.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/blob": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/block-serialization-default-parser": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/blocks": "^15.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/commands": "^1.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/components": "^32.4.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/compose": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/data": "^10.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/dataviews": "^13.1.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/date": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/deprecated": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/dom": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/element": "^6.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/escape-html": "^3.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/global-styles-engine": "^1.8.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/hooks": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/html-entities": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/i18n": "^6.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/icons": "^12.0.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/image-cropper": "^1.5.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/interactivity": "^6.41.2-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/is-shallow-equal": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/keyboard-shortcuts": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/keycodes": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/notices": "^5.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/preferences": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/priority-queue": "^3.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/private-apis": "^1.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/rich-text": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/style-engine": "^2.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/token-list": "^3.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/upload-media": "^0.26.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/url": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/warning": "^3.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/wordcount": "^4.41.1-next.v.202603102151.0+59e17f9ec",
+		"@wordpress/a11y": "^4.42.0",
+		"@wordpress/api-fetch": "^7.42.0",
+		"@wordpress/base-styles": "^6.18.0",
+		"@wordpress/blob": "^4.42.0",
+		"@wordpress/block-serialization-default-parser": "^5.42.0",
+		"@wordpress/blocks": "^15.15.0",
+		"@wordpress/commands": "^1.42.0",
+		"@wordpress/components": "^32.4.0",
+		"@wordpress/compose": "^7.42.0",
+		"@wordpress/data": "^10.42.0",
+		"@wordpress/dataviews": "^13.1.0",
+		"@wordpress/date": "^5.42.0",
+		"@wordpress/deprecated": "^4.42.0",
+		"@wordpress/dom": "^4.42.0",
+		"@wordpress/element": "^6.42.0",
+		"@wordpress/escape-html": "^3.42.0",
+		"@wordpress/global-styles-engine": "^1.9.0",
+		"@wordpress/hooks": "^4.42.0",
+		"@wordpress/html-entities": "^4.42.0",
+		"@wordpress/i18n": "^6.15.0",
+		"@wordpress/icons": "^12.0.0",
+		"@wordpress/image-cropper": "^1.6.0",
+		"@wordpress/interactivity": "^6.42.0",
+		"@wordpress/is-shallow-equal": "^5.42.0",
+		"@wordpress/keyboard-shortcuts": "^5.42.0",
+		"@wordpress/keycodes": "^4.42.0",
+		"@wordpress/notices": "^5.42.0",
+		"@wordpress/preferences": "^4.42.0",
+		"@wordpress/priority-queue": "^3.42.0",
+		"@wordpress/private-apis": "^1.42.0",
+		"@wordpress/rich-text": "^7.42.0",
+		"@wordpress/style-engine": "^2.42.0",
+		"@wordpress/token-list": "^3.42.0",
+		"@wordpress/upload-media": "^0.27.0",
+		"@wordpress/url": "^4.42.0",
+		"@wordpress/warning": "^3.42.0",
+		"@wordpress/wordcount": "^4.42.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -124,5 +124,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
+	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
 }

package/src/components/block-bindings/attribute-control.js

@@ -50,10 +50,15 @@ export default function BlockBindingsAttributeControl( {
 				getBlockType,
 			} = unlock( select( blocksStore ) );
 
-			const _attributeType =
-				getBlockType( blockName ).attributes?.[ attribute ]?.type;
+			const _attribute =
+				getBlockType( blockName ).attributes?.[ attribute ];
+
+			if ( _attribute?.enum ) {
+				return {};
+			}
+
 			const attributeType =
-				_attributeType === 'rich-text' ? 'string' : _attributeType;
+				_attribute?.type === 'rich-text' ? 'string' : _attribute?.type;
 
 			const sourceFields = {};
 			Object.entries( getAllBlockBindingsSources() ).forEach(

package/src/components/block-inspector/edit-contents.js

@@ -92,19 +92,21 @@ export default function EditContents( { clientId } ) {
 		stopEditingContentOnlySection,
 	} = useContentOnlySectionEdit( clientId );
 
-	const { block, onNavigateToEntityRecord } = useSelect(
+	const { block, onNavigateToEntityRecord, canEdit } = useSelect(
 		( select ) => {
-			const { getBlock, getSettings } = select( blockEditorStore );
+			const { getBlock, getSettings, canEditBlock } =
+				select( blockEditorStore );
 			return {
 				block: getBlock( clientId ),
 				onNavigateToEntityRecord:
 					getSettings().onNavigateToEntityRecord,
+				canEdit: canEditBlock( clientId ),
 			};
 		},
 		[ clientId ]
 	);
 
-	if ( ! isWithinSection && ! isWithinEditedSection ) {
+	if ( ! canEdit || ( ! isWithinSection && ! isWithinEditedSection ) ) {
 		return null;
 	}
 

package/src/components/block-list/block.js

@@ -23,7 +23,7 @@ import {
 } from '@wordpress/blocks';
 import { withFilters } from '@wordpress/components';
 import { withDispatch, useSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { compose, useRefEffect } from '@wordpress/compose';
 import { safeHTML } from '@wordpress/dom';
 
 /**
@@ -741,10 +741,19 @@ function BlockListBlockProvider( props ) {
 		[ clientId, rootClientId ]
 	);
 
+	const defaultViewRef = useRefEffect( ( element ) => {
+		if ( element ) {
+			const { ownerDocument } = element;
+			const { defaultView } = ownerDocument;
+			defaultViewRef.current = defaultView;
+		}
+	}, [] );
+
 	// Use block visibility hook with data from existing useSelect to avoid extra subscription
 	const { isBlockCurrentlyHidden } = useBlockVisibility( {
 		blockVisibility: selectedProps?.blockVisibility,
 		deviceType: selectedProps?.deviceType,
+		view: defaultViewRef.current,
 	} );
 
 	// Users of the editor.BlockListBlock filter used to be able to

package/src/components/block-list/use-block-props/index.js

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { useContext } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { __unstableGetBlockProps as getBlockProps } from '@wordpress/blocks';
-import { useMergeRefs, useDisabled } from '@wordpress/compose';
+import { useMergeRefs, useDisabled, useRefEffect } from '@wordpress/compose';
 import warning from '@wordpress/warning';
 
 /**
@@ -107,6 +107,14 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 		deviceType,
 	} = useContext( PrivateBlockContext );
 
+	const defaultViewRef = useRefEffect( ( element ) => {
+		if ( element ) {
+			const { ownerDocument } = element;
+			const { defaultView } = ownerDocument;
+			defaultViewRef.current = defaultView;
+		}
+	}, [] );
+
 	// translators: %s: Type of block (i.e. Text, Image etc)
 	const blockLabel = sprintf( __( 'Block: %s' ), blockTitle );
 	const htmlSuffix = mode === 'html' && ! __unstableIsHtml ? '-visual' : '';
@@ -114,6 +122,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const isHoverEnabled = ! isWithinSectionBlock;
 	const mergedRefs = useMergeRefs( [
 		props.ref,
+		defaultViewRef,
 		useFocusFirstElement( { clientId, initialPosition } ),
 		useBlockRefProvider( clientId ),
 		useFocusHandler( clientId ),
@@ -144,6 +153,7 @@ export function useBlockProps( props = {}, { __unstableIsHtml } = {} ) {
 	const { isBlockCurrentlyHidden } = useBlockVisibility( {
 		blockVisibility,
 		deviceType,
+		view: defaultViewRef.current,
 	} );
 
 	// Ensures it warns only inside the `edit` implementation for the block.

package/src/components/block-styles/index.js

@@ -7,6 +7,7 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { useState, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import { debounce } from '@wordpress/compose';
 import {
 	Button,
@@ -23,11 +24,16 @@ import PreviewBlockPopover from '../block-switcher/preview-block-popover';
 import useStylesForBlocks from './use-styles-for-block';
 import { useToolsPanelDropdownMenuProps } from '../global-styles/utils';
 import { getDefaultStyle, replaceActiveStyle } from './utils';
+import { store as blockEditorStore } from '../../store';
 
 const noop = () => {};
 
 // Block Styles component for the Settings Sidebar.
 function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
+	const canEdit = useSelect(
+		( select ) => select( blockEditorStore ).canEditBlock( clientId ),
+		[ clientId ]
+	);
 	const {
 		onSelect,
 		stylesToRender,
@@ -62,7 +68,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		];
 	}, [ hoveredStyle, genericPreviewBlock, className, activeStyle ] );
 
-	if ( ! stylesToRender || stylesToRender.length === 0 ) {
+	if ( ! canEdit || ! stylesToRender || stylesToRender.length === 0 ) {
 		return null;
 	}
 

package/src/components/block-variation-transforms/index.js

@@ -146,41 +146,46 @@ function VariationsToggleGroupControl( {
 
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { activeBlockVariation, variations, isContentOnly, isSection } =
-		useSelect(
-			( select ) => {
-				const { getActiveBlockVariation, getBlockVariations } =
-					select( blocksStore );
-
-				const {
-					getBlockName,
-					getBlockAttributes,
-					getBlockEditingMode,
-					isSectionBlock,
-				} = unlock( select( blockEditorStore ) );
-
-				const name = blockClientId && getBlockName( blockClientId );
-
-				const { hasContentRoleAttribute } = unlock(
-					select( blocksStore )
-				);
-				const isContentBlock = hasContentRoleAttribute( name );
-
-				return {
-					activeBlockVariation: getActiveBlockVariation(
-						name,
-						getBlockAttributes( blockClientId ),
-						'transform'
-					),
-					variations: name && getBlockVariations( name, 'transform' ),
-					isContentOnly:
-						getBlockEditingMode( blockClientId ) ===
-							'contentOnly' && ! isContentBlock,
-					isSection: isSectionBlock( blockClientId ),
-				};
-			},
-			[ blockClientId ]
-		);
+	const {
+		activeBlockVariation,
+		variations,
+		canEdit,
+		isContentOnly,
+		isSection,
+	} = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+
+			const {
+				getBlockName,
+				getBlockAttributes,
+				getBlockEditingMode,
+				isSectionBlock,
+			} = unlock( select( blockEditorStore ) );
+			const { canEditBlock } = select( blockEditorStore );
+
+			const name = blockClientId && getBlockName( blockClientId );
+
+			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
+			const isContentBlock = hasContentRoleAttribute( name );
+
+			return {
+				activeBlockVariation: getActiveBlockVariation(
+					name,
+					getBlockAttributes( blockClientId ),
+					'transform'
+				),
+				variations: name && getBlockVariations( name, 'transform' ),
+				canEdit: canEditBlock( blockClientId ),
+				isContentOnly:
+					getBlockEditingMode( blockClientId ) === 'contentOnly' &&
+					! isContentBlock,
+				isSection: isSectionBlock( blockClientId ),
+			};
+		},
+		[ blockClientId ]
+	);
 
 	const selectedValue = activeBlockVariation?.name;
 
@@ -205,7 +210,7 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 		} );
 	};
 
-	if ( ! variations?.length || isContentOnly || isSection ) {
+	if ( ! variations?.length || ! canEdit || isContentOnly || isSection ) {
 		return null;
 	}
 

package/src/components/block-visibility/use-block-visibility.js

@@ -14,16 +14,18 @@ import { BLOCK_VISIBILITY_VIEWPORTS } from './constants';
  * @param {Object}         options                 Parameters to avoid extra store subscriptions.
  * @param {Object|boolean} options.blockVisibility Block visibility metadata.
  * @param {string}         options.deviceType      Current device type ('desktop', 'tablet', 'mobile').
+ * @param {Window?}        options.view            Window instance in which to perform viewport matching
  * @return {Object} Object with `isBlockCurrentlyHidden` (boolean) and `currentViewport` (string) properties.
  */
 export default function useBlockVisibility( options = {} ) {
 	const {
 		blockVisibility = undefined,
 		deviceType = BLOCK_VISIBILITY_VIEWPORTS.desktop.key,
+		view = window,
 	} = options;
 
-	const isLargerThanMobile = useViewportMatch( 'mobile', '>=' ); // >= 480px
-	const isLargerThanTablet = useViewportMatch( 'medium', '>=' ); // >= 782px
+	const isLargerThanMobile = useViewportMatch( 'mobile', '>=', view ); // >= 480px
+	const isLargerThanTablet = useViewportMatch( 'medium', '>=', view ); // >= 782px
 
 	/*
 	 * Priority:

package/src/components/global-styles/color-panel.js

@@ -10,6 +10,8 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalHStack as HStack,
+	// TODO: Replace this ZStack with ad hoc CSS.
+	// eslint-disable-next-line @wordpress/use-recommended-components
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	ColorIndicator,
@@ -22,6 +24,7 @@ import {
 import { useCallback, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getValueFromVariable } from '@wordpress/global-styles-engine';
+import { reset as resetIcon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -31,7 +34,6 @@ import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import { unlock } from '../../lock-unlock';
-import { reset as resetIcon } from '@wordpress/icons';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );

package/src/components/global-styles/filters-panel.js

@@ -10,6 +10,8 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalHStack as HStack,
+	// TODO: Replace this ZStack with ad hoc CSS.
+	// eslint-disable-next-line @wordpress/use-recommended-components
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	MenuGroup,

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

@@ -23,3 +23,4 @@ export {
 	default as BackgroundPanel,
 	useHasBackgroundPanel,
 } from './background-panel';
+export { default as StateControl } from './state-control';

package/src/components/global-styles/state-control.js

@@ -0,0 +1,75 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { check, chevronDown } from '@wordpress/icons';
+import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
+
+/**
+ * State control for managing block state styles (hover, focus, etc.).
+ * Displays a dropdown menu to select between different states.
+ *
+ * @param {Object}   props          Component props.
+ * @param {Array}    props.states   Array of available states with value and label.
+ * @param {string}   props.value    Currently selected state value.
+ * @param {Function} props.onChange Callback when selection changes.
+ * @return {Element|null} State control component.
+ */
+export default function StateControl( {
+	states = [],
+	value = 'default',
+	onChange,
+} ) {
+	if ( ! states || states.length === 0 ) {
+		return null;
+	}
+
+	const stateOptions = [
+		{ label: __( 'Default' ), value: 'default' },
+		...states.map( ( state ) => ( {
+			label: state.label,
+			value: state.value,
+		} ) ),
+	];
+
+	const getCurrentStateLabel = () => {
+		const currentOption = stateOptions.find(
+			( option ) => option.value === value
+		);
+		return currentOption?.label || __( 'Default' );
+	};
+
+	return (
+		<DropdownMenu
+			icon={ chevronDown }
+			label={ sprintf(
+				/* translators: %s: Current state (e.g. "Hover", "Focus") */
+				__( 'State: %s' ),
+				getCurrentStateLabel()
+			) }
+			text={ getCurrentStateLabel() }
+			toggleProps={ {
+				size: 'compact',
+				variant: 'tertiary',
+				iconPosition: 'right',
+			} }
+		>
+			{ ( { onClose } ) => (
+				<MenuGroup label={ __( 'State' ) }>
+					{ stateOptions.map( ( option ) => (
+						<MenuItem
+							key={ option.value }
+							onClick={ () => {
+								onChange( option.value );
+								onClose();
+							} }
+							icon={ value === option.value ? check : null }
+						>
+							{ option.label }
+						</MenuItem>
+					) ) }
+				</MenuGroup>
+			) }
+		</DropdownMenu>
+	);
+}