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

package/CHANGELOG.md

@@ -2,12 +2,26 @@
 
 ## Unreleased
 
-## 15.19.0-next.0 (2026-05-13)
+## 15.20.0 (2026-05-27)
+
+### Bug Fixes
+
+-   `ColorPanel`: Theme CSS custom-property gradients are now decoded to their preset slug and persisted as a `gradient` block attribute rather than as a raw `style.color.gradient` value ([#78328](https://github.com/WordPress/gutenberg/pull/78328)).
+
+### Internal
+
+-   Remove legacy `Notice` overrides in block placeholder notices and media replace flow error UI ([#78231](https://github.com/WordPress/gutenberg/pull/78231)).
+
+## 15.19.0 (2026-05-14)
 
 ### Enhancements
 
 -   `BlockManager`: Add stacking context isolation to category list ([#77759](https://github.com/WordPress/gutenberg/pull/77759)).
 
+### Bug Fixes
+
+-   `ColorPanel`: Fix incorrect color selection and text↔link sync with duplicate-value palette entries. Slug-based selection is now threaded through the color panel so that two palette entries sharing the same hex value but different slugs are treated as distinct choices. The text↔link sync condition now compares raw stored references instead of decoded hex values; the previous decoded comparison incorrectly conflated entries that shared a hex value ([#78048](https://github.com/WordPress/gutenberg/pull/78048)).
+
 ## 15.18.0 (2026-04-29)
 
 ### Enhancements

package/build/components/block-card/index.cjs

@@ -35,6 +35,7 @@ __export(block_card_exports, {
 module.exports = __toCommonJS(block_card_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_components = require("@wordpress/components");
+var import_ui = require("@wordpress/ui");
 var import_data = require("@wordpress/data");
 var import_deprecated = __toESM(require("@wordpress/deprecated"));
 var import_i18n = require("@wordpress/i18n");
@@ -70,7 +71,8 @@ function BlockCard({
   parentClientId,
   isChild,
   children,
-  clientId
+  clientId,
+  controls
 }) {
   if (blockType) {
     (0, import_deprecated.default)("`blockType` property in `BlockCard component`", {
@@ -110,47 +112,55 @@ function BlockCard({
         },
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "flex-start", spacing: 0, children: [
-          parentBlockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_components.Button,
-            {
-              onClick: () => selectBlock(parentBlockClientId),
-              label: parentBlockName ? (0, import_i18n.sprintf)(
-                /* translators: %s: The name of the parent block. */
-                (0, import_i18n.__)('Go to "%s" block'),
-                (0, import_blocks.getBlockType)(parentBlockName)?.title
-              ) : (0, import_i18n.__)("Go to parent block"),
-              style: (
-                // TODO: This style override is also used in ToolsPanelHeader.
-                // It should be supported out-of-the-box by Button.
-                { minWidth: 24, padding: 0 }
-              ),
-              icon: (0, import_i18n.isRTL)() ? import_icons.chevronRight : import_icons.chevronLeft,
-              size: "small"
-            }
-          ),
-          isChild && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block-editor-block-card__child-indicator-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: (0, import_i18n.isRTL)() ? import_icons.arrowLeft : import_icons.arrowRight }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-            OptionalParentSelectButton,
-            {
-              onClick: parentClientId ? () => {
-                selectBlock(parentClientId);
-              } : void 0,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_icon.default, { icon, showColors: true }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 1, children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TitleElement, { className: "block-editor-block-card__title", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block-editor-block-card__name", children: !!name?.length ? name : title }),
-                    !parentClientId && !isChild && !!name?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WCBadge, { children: title })
-                  ] }),
-                  children
-                ] })
-              ]
-            }
-          )
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "column", gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "row", align: "center", justify: "space-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "row", align: "center", justify: "flex-start", children: [
+            parentBlockClientId && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.Button,
+              {
+                onClick: () => selectBlock(parentBlockClientId),
+                label: parentBlockName ? (0, import_i18n.sprintf)(
+                  /* translators: %s: The name of the parent block. */
+                  (0, import_i18n.__)('Go to "%s" block'),
+                  (0, import_blocks.getBlockType)(parentBlockName)?.title
+                ) : (0, import_i18n.__)("Go to parent block"),
+                style: (
+                  // TODO: This style override is also used in ToolsPanelHeader.
+                  // It should be supported out-of-the-box by Button.
+                  { minWidth: 24, padding: 0 }
+                ),
+                icon: (0, import_i18n.isRTL)() ? import_icons.chevronRight : import_icons.chevronLeft,
+                size: "small"
+              }
+            ),
+            isChild && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block-editor-block-card__child-indicator-icon", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.Icon,
+              {
+                icon: (0, import_i18n.isRTL)() ? import_icons.arrowLeft : import_icons.arrowRight
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              OptionalParentSelectButton,
+              {
+                onClick: parentClientId ? () => {
+                  selectBlock(parentClientId);
+                } : void 0,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_icon.default, { icon, showColors: true }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui.Stack, { direction: "column", gap: "xs", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TitleElement, { className: "block-editor-block-card__title", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "block-editor-block-card__name", children: !!name?.length ? name : title }),
+                      !parentClientId && !isChild && !!name?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WCBadge, { children: title })
+                    ] }),
+                    children
+                  ] })
+                ]
+              }
+            )
+          ] }),
+          controls
         ] }),
-        !parentClientId && !isChild && description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { className: "block-editor-block-card__description", children: description })
+        !parentClientId && !isChild && description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Text, { className: "block-editor-block-card__description", children: description })
       ] })
     }
   );

package/build/components/block-card/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-card/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__experimentalText as WCText,\n\t__experimentalVStack as VStack,\n\t__experimentalHStack as HStack,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport {\n\tchevronLeft,\n\tchevronRight,\n\tarrowRight,\n\tarrowLeft,\n} from '@wordpress/icons';\nimport { getBlockType, hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport BlockIcon from '../block-icon';\n\nconst { Badge: WCBadge } = unlock( componentsPrivateApis );\n\nfunction OptionalParentSelectButton( { children, onClick } ) {\n\tif ( ! onClick ) {\n\t\treturn children;\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\t__next40pxDefaultSize\n\t\t\tclassName=\"block-editor-block-card__parent-select-button\"\n\t\t\tonClick={ onClick }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\n/**\n * A card component that displays block information including title, icon, and description.\n * Can be used to show block metadata and navigation controls for parent blocks.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-card/README.md\n *\n * @example\n * ```jsx\n * function Example() {\n *   return (\n *     <BlockCard\n *       title=\"My Block\"\n *       icon=\"smiley\"\n *       description=\"A simple block example\"\n *       name=\"Custom Block\"\n *     />\n *   );\n * }\n * ```\n *\n * @param {Object}        props                         Component props.\n * @param {string}        props.title                   The title of the block.\n * @param {string|Object} props.icon                    The icon of the block. This can be any of [WordPress' Dashicons](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element.\n * @param {string}        props.description             The description of the block.\n * @param {Object}        [props.blockType]             Deprecated: Object containing block type data.\n * @param {string}        [props.className]             Additional classes to apply to the card.\n * @param {string}        [props.name]                  Custom block name to display before the title.\n * @param {string}        [props.allowParentNavigation] Show a back arrow to the parent block in some situations.\n * @param {string}        [props.parentClientId]        The parent clientId, if this card is for a parent block.\n * @param {string}        [props.isChild]               Whether the block card is for a child block, in which case, indent the block using an arrow.\n * @param {string}        [props.clientId]              Whether the block card is for a child block, in which case, indent the block using an arrow.\n * @param {Element}       [props.children]              Children.\n * @return {Element}                        Block card component.\n */\nfunction BlockCard( {\n\ttitle,\n\ticon,\n\tdescription,\n\tblockType,\n\tclassName,\n\tname,\n\tallowParentNavigation,\n\tparentClientId,\n\tisChild,\n\tchildren,\n\tclientId,\n} ) {\n\tif ( blockType ) {\n\t\tdeprecated( '`blockType` property in `BlockCard component`', {\n\t\t\tsince: '5.7',\n\t\t\talternative: '`title, icon and description` properties',\n\t\t} );\n\t\t( { title, icon, description } = blockType );\n\t}\n\n\tconst { parentBlockClientId, parentBlockName } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( parentClientId || isChild || ! allowParentNavigation ) {\n\t\t\t\treturn {};\n\t\t\t}\n\t\t\tconst { getBlockParents, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\t// Find the top-most parent block that is either:\n\t\t\t// 1. A navigation block (special case for ad-hoc list view support)\n\t\t\t// 2. Any block with listView support\n\t\t\tconst parents = getBlockParents( clientId, false );\n\t\t\tconst foundParentId = parents.find( ( parentId ) => {\n\t\t\t\tconst parentName = getBlockName( parentId );\n\t\t\t\treturn (\n\t\t\t\t\tparentName === 'core/navigation' ||\n\t\t\t\t\thasBlockSupport( parentName, 'listView' )\n\t\t\t\t);\n\t\t\t} );\n\n\t\t\treturn {\n\t\t\t\tparentBlockClientId: foundParentId,\n\t\t\t\tparentBlockName: foundParentId\n\t\t\t\t\t? getBlockName( foundParentId )\n\t\t\t\t\t: null,\n\t\t\t};\n\t\t},\n\t\t[ clientId, allowParentNavigation, isChild, parentClientId ]\n\t);\n\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\tconst TitleElement = parentClientId ? 'div' : 'h2';\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-block-card',\n\t\t\t\t{\n\t\t\t\t\t'is-parent': parentClientId,\n\t\t\t\t\t'is-child': isChild,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<VStack>\n\t\t\t\t<HStack justify=\"flex-start\" spacing={ 0 }>\n\t\t\t\t\t{ parentBlockClientId && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={ () => selectBlock( parentBlockClientId ) }\n\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\tparentBlockName\n\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t/* translators: %s: The name of the parent block. */\n\t\t\t\t\t\t\t\t\t\t\t__( 'Go to \"%s\" block' ),\n\t\t\t\t\t\t\t\t\t\t\tgetBlockType( parentBlockName )\n\t\t\t\t\t\t\t\t\t\t\t\t?.title\n\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t: __( 'Go to parent block' )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t{ isChild && (\n\t\t\t\t\t\t<span className=\"block-editor-block-card__child-indicator-icon\">\n\t\t\t\t\t\t\t<Icon icon={ isRTL() ? arrowLeft : arrowRight } />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t) }\n\t\t\t\t\t<OptionalParentSelectButton\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\tparentClientId\n\t\t\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t\t\tselectBlock( parentClientId );\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t\t\t\t<VStack spacing={ 1 }>\n\t\t\t\t\t\t\t<TitleElement className=\"block-editor-block-card__title\">\n\t\t\t\t\t\t\t\t<span className=\"block-editor-block-card__name\">\n\t\t\t\t\t\t\t\t\t{ !! name?.length ? name : title }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t{ ! parentClientId &&\n\t\t\t\t\t\t\t\t\t! isChild &&\n\t\t\t\t\t\t\t\t\t!! name?.length && (\n\t\t\t\t\t\t\t\t\t\t<WCBadge>{ title }</WCBadge>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</TitleElement>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</OptionalParentSelectButton>\n\t\t\t\t</HStack>\n\t\t\t\t{ ! parentClientId && ! isChild && description && (\n\t\t\t\t\t<WCText className=\"block-editor-block-card__description\">\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</WCText>\n\t\t\t\t) }\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nexport default BlockCard;\n"],
-  "mappings": "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",
-  "names": ["componentsPrivateApis", "deprecated", "blockEditorStore", "clsx", "VStack", "HStack", "BlockIcon", "WCText"]
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon as WCIcon,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { Text, Stack } from '@wordpress/ui';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport deprecated from '@wordpress/deprecated';\nimport { __, sprintf, isRTL } from '@wordpress/i18n';\nimport {\n\tchevronLeft,\n\tchevronRight,\n\tarrowRight,\n\tarrowLeft,\n} from '@wordpress/icons';\nimport { getBlockType, hasBlockSupport } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { store as blockEditorStore } from '../../store';\nimport BlockIcon from '../block-icon';\n\nconst { Badge: WCBadge } = unlock( componentsPrivateApis );\n\nfunction OptionalParentSelectButton( { children, onClick } ) {\n\tif ( ! onClick ) {\n\t\treturn children;\n\t}\n\n\treturn (\n\t\t<Button\n\t\t\t__next40pxDefaultSize\n\t\t\tclassName=\"block-editor-block-card__parent-select-button\"\n\t\t\tonClick={ onClick }\n\t\t>\n\t\t\t{ children }\n\t\t</Button>\n\t);\n}\n\n/**\n * A card component that displays block information including title, icon, and description.\n * Can be used to show block metadata and navigation controls for parent blocks.\n *\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-card/README.md\n *\n * @example\n * ```jsx\n * function Example() {\n *   return (\n *     <BlockCard\n *       title=\"My Block\"\n *       icon=\"smiley\"\n *       description=\"A simple block example\"\n *       name=\"Custom Block\"\n *     />\n *   );\n * }\n * ```\n *\n * @param {Object}        props                         Component props.\n * @param {string}        props.title                   The title of the block.\n * @param {string|Object} props.icon                    The icon of the block. This can be any of [WordPress' Dashicons](https://developer.wordpress.org/resource/dashicons/), or a custom `svg` element.\n * @param {string}        props.description             The description of the block.\n * @param {Object}        [props.blockType]             Deprecated: Object containing block type data.\n * @param {string}        [props.className]             Additional classes to apply to the card.\n * @param {string}        [props.name]                  Custom block name to display before the title.\n * @param {string}        [props.allowParentNavigation] Show a back arrow to the parent block in some situations.\n * @param {string}        [props.parentClientId]        The parent clientId, if this card is for a parent block.\n * @param {string}        [props.isChild]               Whether the block card is for a child block, in which case, indent the block using an arrow.\n * @param {string}        [props.clientId]              Whether the block card is for a child block, in which case, indent the block using an arrow.\n * @param {Element}       [props.controls]              Controls rendered beside the block title.\n * @param {Element}       [props.children]              Children.\n * @return {Element}                        Block card component.\n */\nfunction BlockCard( {\n\ttitle,\n\ticon,\n\tdescription,\n\tblockType,\n\tclassName,\n\tname,\n\tallowParentNavigation,\n\tparentClientId,\n\tisChild,\n\tchildren,\n\tclientId,\n\tcontrols,\n} ) {\n\tif ( blockType ) {\n\t\tdeprecated( '`blockType` property in `BlockCard component`', {\n\t\t\tsince: '5.7',\n\t\t\talternative: '`title, icon and description` properties',\n\t\t} );\n\t\t( { title, icon, description } = blockType );\n\t}\n\n\tconst { parentBlockClientId, parentBlockName } = useSelect(\n\t\t( select ) => {\n\t\t\tif ( parentClientId || isChild || ! allowParentNavigation ) {\n\t\t\t\treturn {};\n\t\t\t}\n\t\t\tconst { getBlockParents, getBlockName } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\t// Find the top-most parent block that is either:\n\t\t\t// 1. A navigation block (special case for ad-hoc list view support)\n\t\t\t// 2. Any block with listView support\n\t\t\tconst parents = getBlockParents( clientId, false );\n\t\t\tconst foundParentId = parents.find( ( parentId ) => {\n\t\t\t\tconst parentName = getBlockName( parentId );\n\t\t\t\treturn (\n\t\t\t\t\tparentName === 'core/navigation' ||\n\t\t\t\t\thasBlockSupport( parentName, 'listView' )\n\t\t\t\t);\n\t\t\t} );\n\n\t\t\treturn {\n\t\t\t\tparentBlockClientId: foundParentId,\n\t\t\t\tparentBlockName: foundParentId\n\t\t\t\t\t? getBlockName( foundParentId )\n\t\t\t\t\t: null,\n\t\t\t};\n\t\t},\n\t\t[ clientId, allowParentNavigation, isChild, parentClientId ]\n\t);\n\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\n\tconst TitleElement = parentClientId ? 'div' : 'h2';\n\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\t'block-editor-block-card',\n\t\t\t\t{\n\t\t\t\t\t'is-parent': parentClientId,\n\t\t\t\t\t'is-child': isChild,\n\t\t\t\t},\n\t\t\t\tclassName\n\t\t\t) }\n\t\t>\n\t\t\t<Stack direction=\"column\" gap=\"sm\">\n\t\t\t\t<Stack direction=\"row\" align=\"center\" justify=\"space-between\">\n\t\t\t\t\t<Stack direction=\"row\" align=\"center\" justify=\"flex-start\">\n\t\t\t\t\t\t{ parentBlockClientId && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\tselectBlock( parentBlockClientId )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\tparentBlockName\n\t\t\t\t\t\t\t\t\t\t? sprintf(\n\t\t\t\t\t\t\t\t\t\t\t\t/* translators: %s: The name of the parent block. */\n\t\t\t\t\t\t\t\t\t\t\t\t__( 'Go to \"%s\" block' ),\n\t\t\t\t\t\t\t\t\t\t\t\tgetBlockType( parentBlockName )\n\t\t\t\t\t\t\t\t\t\t\t\t\t?.title\n\t\t\t\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t\t\t\t: __( 'Go to parent block' )\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tstyle={\n\t\t\t\t\t\t\t\t\t// TODO: This style override is also used in ToolsPanelHeader.\n\t\t\t\t\t\t\t\t\t// It should be supported out-of-the-box by Button.\n\t\t\t\t\t\t\t\t\t{ minWidth: 24, padding: 0 }\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\ticon={ isRTL() ? chevronRight : chevronLeft }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ isChild && (\n\t\t\t\t\t\t\t<span className=\"block-editor-block-card__child-indicator-icon\">\n\t\t\t\t\t\t\t\t<WCIcon\n\t\t\t\t\t\t\t\t\ticon={ isRTL() ? arrowLeft : arrowRight }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<OptionalParentSelectButton\n\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\tparentClientId\n\t\t\t\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t\t\t\tselectBlock( parentClientId );\n\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BlockIcon icon={ icon } showColors />\n\t\t\t\t\t\t\t<Stack direction=\"column\" gap=\"xs\">\n\t\t\t\t\t\t\t\t<TitleElement className=\"block-editor-block-card__title\">\n\t\t\t\t\t\t\t\t\t<span className=\"block-editor-block-card__name\">\n\t\t\t\t\t\t\t\t\t\t{ !! name?.length ? name : title }\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{ ! parentClientId &&\n\t\t\t\t\t\t\t\t\t\t! isChild &&\n\t\t\t\t\t\t\t\t\t\t!! name?.length && (\n\t\t\t\t\t\t\t\t\t\t\t<WCBadge>{ title }</WCBadge>\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</TitleElement>\n\t\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</OptionalParentSelectButton>\n\t\t\t\t\t</Stack>\n\t\t\t\t\t{ controls }\n\t\t\t\t</Stack>\n\t\t\t\t{ ! parentClientId && ! isChild && description && (\n\t\t\t\t\t<Text className=\"block-editor-block-card__description\">\n\t\t\t\t\t\t{ description }\n\t\t\t\t\t</Text>\n\t\t\t\t) }\n\t\t\t</Stack>\n\t\t</div>\n\t);\n}\n\nexport default BlockCard;\n"],
+  "mappings": "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",
+  "names": ["componentsPrivateApis", "deprecated", "blockEditorStore", "clsx", "WCIcon", "BlockIcon"]
 }

package/build/components/block-heading-level-dropdown/heading-level-icon.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-heading-level-dropdown/heading-level-icon.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\theadingLevel1,\n\theadingLevel2,\n\theadingLevel3,\n\theadingLevel4,\n\theadingLevel5,\n\theadingLevel6,\n\tparagraph,\n} from '@wordpress/icons';\nimport { Icon } from '@wordpress/components';\n\n/** @typedef {React.ComponentType} ComponentType */\n\n/**\n * HeadingLevelIcon props.\n *\n * @typedef WPHeadingLevelIconProps\n *\n * @property {number} level The heading level to show an icon for.\n */\n\nconst LEVEL_TO_PATH = {\n\t0: paragraph,\n\t1: headingLevel1,\n\t2: headingLevel2,\n\t3: headingLevel3,\n\t4: headingLevel4,\n\t5: headingLevel5,\n\t6: headingLevel6,\n};\n\n/**\n * Heading level icon.\n *\n * @param {WPHeadingLevelIconProps} props Component props.\n *\n * @return {?ComponentType} The icon.\n */\nexport default function HeadingLevelIcon( { level } ) {\n\tif ( LEVEL_TO_PATH[ level ] ) {\n\t\treturn <Icon icon={ LEVEL_TO_PATH[ level ] } />;\n\t}\n\n\treturn null;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAQO;AACP,wBAAqB;AA+BZ;AAnBT,IAAM,gBAAgB;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACJ;AASe,SAAR,iBAAmC,EAAE,MAAM,GAAI;AACrD,MAAK,cAAe,KAAM,GAAI;AAC7B,WAAO,4CAAC,0BAAK,MAAO,cAAe,KAAM,GAAI;AAAA,EAC9C;AAEA,SAAO;AACR;",
-  "names": []
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\theadingLevel1,\n\theadingLevel2,\n\theadingLevel3,\n\theadingLevel4,\n\theadingLevel5,\n\theadingLevel6,\n\tparagraph,\n} from '@wordpress/icons';\nimport { Icon as WCIcon } from '@wordpress/components';\n\n/** @typedef {React.ComponentType} ComponentType */\n\n/**\n * HeadingLevelIcon props.\n *\n * @typedef WPHeadingLevelIconProps\n *\n * @property {number} level The heading level to show an icon for.\n */\n\nconst LEVEL_TO_PATH = {\n\t0: paragraph,\n\t1: headingLevel1,\n\t2: headingLevel2,\n\t3: headingLevel3,\n\t4: headingLevel4,\n\t5: headingLevel5,\n\t6: headingLevel6,\n};\n\n/**\n * Heading level icon.\n *\n * @param {WPHeadingLevelIconProps} props Component props.\n *\n * @return {?ComponentType} The icon.\n */\nexport default function HeadingLevelIcon( { level } ) {\n\tif ( LEVEL_TO_PATH[ level ] ) {\n\t\treturn <WCIcon icon={ LEVEL_TO_PATH[ level ] } />;\n\t}\n\n\treturn null;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,mBAQO;AACP,wBAA+B;AA+BtB;AAnBT,IAAM,gBAAgB;AAAA,EACrB,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACJ;AASe,SAAR,iBAAmC,EAAE,MAAM,GAAI;AACrD,MAAK,cAAe,KAAM,GAAI;AAC7B,WAAO,4CAAC,kBAAAA,MAAA,EAAO,MAAO,cAAe,KAAM,GAAI;AAAA,EAChD;AAEA,SAAO;AACR;",
+  "names": ["WCIcon"]
 }

package/build/components/block-icon/index.cjs

@@ -44,7 +44,13 @@ function BlockIcon({ icon, showColors = false, className, context }) {
       src: import_icons.blockDefault
     };
   }
-  const renderedIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Icon, { icon: icon && icon.src ? icon.src : icon, context });
+  const renderedIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Icon,
+    {
+      icon: icon && icon.src ? icon.src : icon,
+      context
+    }
+  );
   const style = showColors ? {
     backgroundColor: icon && icon.background,
     color: icon && icon.foreground

package/build/components/block-icon/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/block-icon/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\nimport { blockDefault } from '@wordpress/icons';\nimport { memo } from '@wordpress/element';\n\nfunction BlockIcon( { icon, showColors = false, className, context } ) {\n\tif ( icon?.src === 'block-default' ) {\n\t\ticon = {\n\t\t\tsrc: blockDefault,\n\t\t};\n\t}\n\n\tconst renderedIcon = (\n\t\t<Icon icon={ icon && icon.src ? icon.src : icon } context={ context } />\n\t);\n\tconst style = showColors\n\t\t? {\n\t\t\t\tbackgroundColor: icon && icon.background,\n\t\t\t\tcolor: icon && icon.foreground,\n\t\t  }\n\t\t: {};\n\n\treturn (\n\t\t<span\n\t\t\tstyle={ style }\n\t\t\tclassName={ clsx( 'block-editor-block-icon', className, {\n\t\t\t\t'has-colors': showColors,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ renderedIcon }\n\t\t</span>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-icon/README.md\n */\nexport default memo( BlockIcon );\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAAqB;AACrB,mBAA6B;AAC7B,qBAAqB;AAUnB;AARF,SAAS,UAAW,EAAE,MAAM,aAAa,OAAO,WAAW,QAAQ,GAAI;AACtE,MAAK,MAAM,QAAQ,iBAAkB;AACpC,WAAO;AAAA,MACN,KAAK;AAAA,IACN;AAAA,EACD;AAEA,QAAM,eACL,4CAAC,0BAAK,MAAO,QAAQ,KAAK,MAAM,KAAK,MAAM,MAAO,SAAoB;AAEvE,QAAM,QAAQ,aACX;AAAA,IACA,iBAAiB,QAAQ,KAAK;AAAA,IAC9B,OAAO,QAAQ,KAAK;AAAA,EACpB,IACA,CAAC;AAEJ,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,eAAY,YAAAA,SAAM,2BAA2B,WAAW;AAAA,QACvD,cAAc;AAAA,MACf,CAAE;AAAA,MAEA;AAAA;AAAA,EACH;AAEF;AAKA,IAAO,yBAAQ,qBAAM,SAAU;",
-  "names": ["clsx"]
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Icon as WCIcon } from '@wordpress/components';\nimport { blockDefault } from '@wordpress/icons';\nimport { memo } from '@wordpress/element';\n\nfunction BlockIcon( { icon, showColors = false, className, context } ) {\n\tif ( icon?.src === 'block-default' ) {\n\t\ticon = {\n\t\t\tsrc: blockDefault,\n\t\t};\n\t}\n\n\tconst renderedIcon = (\n\t\t<WCIcon\n\t\t\ticon={ icon && icon.src ? icon.src : icon }\n\t\t\tcontext={ context }\n\t\t/>\n\t);\n\tconst style = showColors\n\t\t? {\n\t\t\t\tbackgroundColor: icon && icon.background,\n\t\t\t\tcolor: icon && icon.foreground,\n\t\t  }\n\t\t: {};\n\n\treturn (\n\t\t<span\n\t\t\tstyle={ style }\n\t\t\tclassName={ clsx( 'block-editor-block-icon', className, {\n\t\t\t\t'has-colors': showColors,\n\t\t\t} ) }\n\t\t>\n\t\t\t{ renderedIcon }\n\t\t</span>\n\t);\n}\n\n/**\n * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-icon/README.md\n */\nexport default memo( BlockIcon );\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,wBAA+B;AAC/B,mBAA6B;AAC7B,qBAAqB;AAUnB;AARF,SAAS,UAAW,EAAE,MAAM,aAAa,OAAO,WAAW,QAAQ,GAAI;AACtE,MAAK,MAAM,QAAQ,iBAAkB;AACpC,WAAO;AAAA,MACN,KAAK;AAAA,IACN;AAAA,EACD;AAEA,QAAM,eACL;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,MAAO,QAAQ,KAAK,MAAM,KAAK,MAAM;AAAA,MACrC;AAAA;AAAA,EACD;AAED,QAAM,QAAQ,aACX;AAAA,IACA,iBAAiB,QAAQ,KAAK;AAAA,IAC9B,OAAO,QAAQ,KAAK;AAAA,EACpB,IACA,CAAC;AAEJ,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,eAAY,YAAAC,SAAM,2BAA2B,WAAW;AAAA,QACvD,cAAc;AAAA,MACf,CAAE;AAAA,MAEA;AAAA;AAAA,EACH;AAEF;AAKA,IAAO,yBAAQ,qBAAM,SAAU;",
+  "names": ["WCIcon", "clsx"]
 }

package/build/components/block-inspector/index.cjs

@@ -48,6 +48,7 @@ var import_store = require("../../store/index.cjs");
 var import_block_styles = __toESM(require("../block-styles/index.cjs"));
 var import_list_view_content_popover = require("../inspector-controls/list-view-content-popover.cjs");
 var import_inspector_controls = __toESM(require("../inspector-controls/index.cjs"));
+var import_inspector_pre_tabs_slot_fill = require("./inspector-pre-tabs-slot-fill.cjs");
 var import_inspector_controls_tabs = __toESM(require("../inspector-controls-tabs/index.cjs"));
 var import_use_inspector_controls_tabs = __toESM(require("../inspector-controls-tabs/use-inspector-controls-tabs.cjs"));
 var import_last_item = __toESM(require("../inspector-controls/last-item.cjs"));
@@ -55,9 +56,12 @@ var import_advanced_controls_panel = __toESM(require("../inspector-controls-tabs
 var import_position_controls_panel = __toESM(require("../inspector-controls-tabs/position-controls-panel.cjs"));
 var import_useBlockInspectorAnimationSettings = __toESM(require("./useBlockInspectorAnimationSettings.cjs"));
 var import_border = require("../../hooks/border.cjs");
+var import_states = require("../../hooks/states.cjs");
 var import_content_tab = __toESM(require("../inspector-controls-tabs/content-tab.cjs"));
 var import_viewport_visibility_info = __toESM(require("../block-visibility/viewport-visibility-info.cjs"));
 var import_lock_unlock = require("../../lock-unlock.cjs");
+var import_block_style_state = require("../../hooks/block-style-state.cjs");
+var import_private_keys = require("../../store/private-keys.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function StyleInspectorSlots({
   blockName,
@@ -91,6 +95,7 @@ function StyleInspectorSlots({
         label: (0, import_i18n.__)("Typography")
       }
     ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_controls.default.Slot, { group: "layout", label: (0, import_i18n.__)("Layout") }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_inspector_controls.default.Slot,
       {
@@ -99,12 +104,56 @@ function StyleInspectorSlots({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_controls.default.Slot, { group: "border", label: borderPanelLabel }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_controls.default.Slot, { group: "styles" }),
     showPositionControls && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_position_controls_panel.default, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_controls.default.Slot, { group: "styles" }),
     showBindingsControls && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_controls.default.Slot, { group: "bindings" }),
     showAdvancedControls && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_advanced_controls_panel.default, {}) })
   ] });
 }
+function StyleStateInspectorSlots({ blockName, selectedBlockStyleState }) {
+  const borderPanelLabel = (0, import_border.useBorderPanelLabel)({ blockName });
+  const showLayoutControls = (0, import_block_style_state.hasViewportBlockStyleState)(selectedBlockStyleState) && !(0, import_block_style_state.hasPseudoBlockStyleState)(selectedBlockStyleState);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_inspector_controls.default.Slot,
+      {
+        group: "color",
+        label: (0, import_i18n.__)("Color"),
+        className: "color-block-support-panel__inner-wrapper"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_inspector_controls.default.Slot,
+      {
+        group: "background",
+        label: (0, import_i18n.__)("Background image"),
+        className: "background-block-support-panel__inner-wrapper"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_inspector_controls.default.Slot,
+      {
+        group: "typography",
+        label: (0, import_i18n.__)("Typography")
+      }
+    ),
+    showLayoutControls && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_inspector_controls.default.Slot,
+      {
+        group: "layout",
+        label: (0, import_i18n.__)("Layout")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_inspector_controls.default.Slot,
+      {
+        group: "dimensions",
+        label: (0, import_i18n.__)("Dimensions")
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_controls.default.Slot, { group: "border", label: borderPanelLabel })
+  ] });
+}
 function BlockInspector() {
   const {
     selectedBlockCount,
@@ -114,7 +163,11 @@ function BlockInspector() {
     isSectionBlock,
     isSectionBlockInSelection,
     hasBlockStyles,
-    editedContentOnlySection
+    editedContentOnlySection,
+    blockEditingMode,
+    selectedBlockStyleState,
+    showStateOnCanvas,
+    onViewportStateChange
   } = (0, import_data.useSelect)((select) => {
     const {
       getSelectedBlockClientId,
@@ -124,8 +177,12 @@ function BlockInspector() {
       getParentSectionBlock,
       isSectionBlock: _isSectionBlock,
       getEditedContentOnlySection,
-      isWithinEditedContentOnlySection
+      isWithinEditedContentOnlySection,
+      getBlockEditingMode,
+      getSelectedBlockStyleState,
+      isSelectedBlockStyleStateShownOnCanvas
     } = (0, import_lock_unlock.unlock)(select(import_store.store));
+    const blockEditorSettings = select(import_store.store).getSettings();
     const { getBlockStyles } = select(import_blocks.store);
     const _selectedBlockClientId = getSelectedBlockClientId();
     const isWithinEditedSection = isWithinEditedContentOnlySection(
@@ -148,7 +205,15 @@ function BlockInspector() {
       isSectionBlockInSelection: _isSectionBlockInSelection,
       isSectionBlock: _isSectionBlock(_renderedBlockClientId),
       hasBlockStyles: _hasBlockStyles,
-      editedContentOnlySection: getEditedContentOnlySection()
+      editedContentOnlySection: getEditedContentOnlySection(),
+      blockEditingMode: getBlockEditingMode(_renderedBlockClientId),
+      selectedBlockStyleState: getSelectedBlockStyleState(
+        _renderedBlockClientId
+      ),
+      showStateOnCanvas: isSelectedBlockStyleStateShownOnCanvas(
+        _renderedBlockClientId
+      ),
+      onViewportStateChange: blockEditorSettings?.[import_private_keys.onViewportStateChangeKey]
     };
   }, []);
   const contentClientIds = (0, import_data.useSelect)(
@@ -189,6 +254,9 @@ function BlockInspector() {
   const hasMultipleTabs = availableTabs?.length > 1;
   const blockInspectorAnimationSettings = (0, import_useBlockInspectorAnimationSettings.default)(blockType);
   const hasSelectedBlocks = selectedBlockCount > 1;
+  const isBlockStyleStateSelected = !(0, import_block_style_state.isDefaultBlockStyleState)(
+    selectedBlockStyleState
+  );
   if (hasSelectedBlocks && !isSectionBlockInSelection) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-editor-block-inspector", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_multi_selection_inspector.default, {}),
@@ -232,7 +300,12 @@ function BlockInspector() {
           availableTabs,
           contentClientIds,
           hasBlockStyles,
-          editedContentOnlySection
+          editedContentOnlySection,
+          blockEditingMode,
+          selectedBlockStyleState,
+          showStateOnCanvas,
+          onViewportStateChange,
+          isBlockStyleStateSelected
         }
       )
     }
@@ -276,7 +349,12 @@ var BlockInspectorSingleBlock = ({
   availableTabs,
   contentClientIds,
   hasBlockStyles,
-  editedContentOnlySection
+  editedContentOnlySection,
+  blockEditingMode,
+  selectedBlockStyleState,
+  showStateOnCanvas,
+  onViewportStateChange,
+  isBlockStyleStateSelected
 }) => {
   const listViewRef = (0, import_element.useRef)(null);
   const hasMultipleTabs = availableTabs?.length > 1;
@@ -288,6 +366,35 @@ var BlockInspectorSingleBlock = ({
     renderedBlockClientId
   );
   const isBlockSynced = blockInformation.isSynced;
+  const {
+    setSelectedBlockStyleState,
+    setSelectedBlockStyleStateCanvasPreview
+  } = (0, import_lock_unlock.unlock)((0, import_data.useDispatch)(import_store.store));
+  const onBlockStyleStateChange = (value) => {
+    const nextSelectedBlockStyleState = {
+      ...selectedBlockStyleState,
+      ...value
+    };
+    setSelectedBlockStyleState(
+      renderedBlockClientId,
+      nextSelectedBlockStyleState
+    );
+    if (value.viewport) {
+      onViewportStateChange?.({
+        viewport: nextSelectedBlockStyleState.viewport,
+        showStateOnCanvas
+      });
+    }
+  };
+  const onShowStateOnCanvasChange = (value) => {
+    setSelectedBlockStyleStateCanvasPreview(renderedBlockClientId, value);
+    if (value) {
+      onViewportStateChange?.({
+        viewport: selectedBlockStyleState.viewport,
+        showStateOnCanvas: value
+      });
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "block-editor-block-inspector", children: [
     hasParentChildBlockCards && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_block_card.default,
@@ -304,13 +411,51 @@ var BlockInspectorSingleBlock = ({
         allowParentNavigation: true,
         className: isBlockSynced && "is-synced",
         isChild: hasParentChildBlockCards,
-        clientId: renderedBlockClientId
+        clientId: renderedBlockClientId,
+        controls: blockEditingMode === "default" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_states.BlockStatesControl,
+          {
+            name: blockName,
+            value: selectedBlockStyleState,
+            onChange: onBlockStyleStateChange
+          }
+        )
       }
     ),
+    blockEditingMode === "default" && isBlockStyleStateSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalSpacer, { paddingX: 4, paddingY: 2, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.ToggleControl,
+        {
+          label: (0, import_i18n.__)("Show state on canvas"),
+          checked: showStateOnCanvas,
+          onChange: onShowStateOnCanvasChange
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_states.BlockStateBadges,
+        {
+          name: blockName,
+          value: selectedBlockStyleState
+        }
+      )
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_viewport_visibility_info.default, { clientId: renderedBlockClientId }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_edit_contents.default, { clientId: renderedBlockClientId }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_variation_transforms.default, { blockClientId: renderedBlockClientId }),
-    hasMultipleTabs && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    !isBlockStyleStateSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_block_variation_transforms.default,
+      {
+        blockClientId: renderedBlockClientId
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_pre_tabs_slot_fill.BlockInspectorPreTabsSlot, {}),
+    isBlockStyleStateSelected && !isSectionBlock && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StyleStateInspectorSlots,
+      {
+        blockName,
+        selectedBlockStyleState
+      }
+    ),
+    !isBlockStyleStateSelected && hasMultipleTabs && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_inspector_controls_tabs.default,
       {
         hasBlockStyles,
@@ -321,7 +466,7 @@ var BlockInspectorSingleBlock = ({
         contentClientIds
       }
     ) }),
-    !hasMultipleTabs && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    !isBlockStyleStateSelected && !hasMultipleTabs && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
       hasBlockStyles && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_styles.default, { clientId: renderedBlockClientId }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_content_tab.default, { contentClientIds }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_inspector_controls.default.Slot, { group: "content" }),
@@ -329,7 +474,7 @@ var BlockInspectorSingleBlock = ({
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_list_view_content_popover.ListViewContentPopover, { listViewRef }),
       !isSectionBlock && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyleInspectorSlots, { blockName })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_last_item.default.Slot, {}),
+    !isBlockStyleStateSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_last_item.default.Slot, {}),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_skip_to_selected_block.default, {}, "back")
   ] });
 };