@wordpress/block-editor 17.1.0 → 17.2.1-next.v.202609171837.0

package/build-module/components/global-styles/inherited-value-context.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/inherited-value-context.js"],
-  "sourcesContent": ["import { useContext, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';\nimport { store as blockEditorStore } from '../../store';\nimport {\n\tglobalStylesDataKey,\n\tglobalStylesLinksDataKey,\n} from '../../store/private-keys';\nimport { getVariationNameFromClass } from '../../hooks/block-style-variation';\nimport { useBlockEditContext } from '../block-edit/context';\nimport BlockContext from '../block-context';\nimport { unlock } from '../../lock-unlock';\nimport { isGlobalStylesInheritanceEnabled } from './inheritance';\n\nconst { resolveStyle } = unlock( globalStylesEnginePrivateApis );\n\n// Undefined so the panels fall back to their `inheritedValue = value` default.\nconst NO_RESOLVED_STYLE = { value: undefined, sources: undefined };\n\n/**\n * Reads the Global Styles payload and returns it as a `GlobalStylesConfig`\n * (`{ styles, _links }`), the shape `resolveStyle` expects. `_links` carries\n * the theme-file map used to resolve pointers such as background images.\n *\n * @return {?Object} Global Styles config, or `null` before the payload settles.\n */\nfunction useRawGlobalStyles() {\n\tconst { rawGlobalStylesData, links } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\trawGlobalStylesData: settings[ globalStylesDataKey ] ?? null,\n\t\t\tlinks: settings[ globalStylesLinksDataKey ] ?? null,\n\t\t};\n\t}, [] );\n\treturn useMemo(\n\t\t() =>\n\t\t\trawGlobalStylesData\n\t\t\t\t? { styles: rawGlobalStylesData, _links: links ?? undefined }\n\t\t\t\t: null,\n\t\t[ rawGlobalStylesData, links ]\n\t);\n}\n\n/**\n * Blocks whose heading level is handed down by a parent through block context\n * rather than held in their own `level` attribute, mapped to that context key\n * and the level they fall back to.\n *\n * Accordion Heading is the only one: the parent Accordion owns the level, and\n * the child's `level` attribute has no default and is absent on pattern-,\n * template- and paste-inserted blocks.\n */\nconst CONTEXT_HEADING_LEVEL_BLOCKS = {\n\t'core/accordion-heading': {\n\t\tcontextKey: 'core/accordion-heading-level',\n\t\tfallbackLevel: 3,\n\t},\n};\n\n/**\n * Resolves the heading level that selects a block's `h1`-`h6` element layer.\n *\n * @param {string}  blockName      Block name.\n * @param {?number} levelAttribute The block's own `level` attribute, if it has one.\n * @param {?number} contextLevel   Level supplied by a parent through block context.\n * @return {?number} Resolved heading level, or `undefined` when the block has none.\n */\nfunction getHeadingLevel( blockName, levelAttribute, contextLevel ) {\n\tconst contextOwned = CONTEXT_HEADING_LEVEL_BLOCKS[ blockName ];\n\tif ( ! contextOwned ) {\n\t\treturn levelAttribute;\n\t}\n\t// Mirrors the block's own chain (Accordion Heading saves `h${ level || 3 }`),\n\t// so `0` coerces to the fallback instead of reading as a level-0 state.\n\treturn levelAttribute || contextLevel || contextOwned.fallbackLevel;\n}\n\n/**\n * Reads the heading level a parent supplies through block context.\n *\n * Only the blocks in `CONTEXT_HEADING_LEVEL_BLOCKS` read a key: the value\n * reaches every descendant, so an ordinary Heading inside an Accordion Panel\n * must not pick it up. Returns a primitive so callers can use it as a\n * `useSelect` dependency.\n *\n * @param {?string} blockName Block name.\n * @return {?number} Level from block context, or `undefined`.\n */\nfunction useContextHeadingLevel( blockName ) {\n\tconst blockContext = useContext( BlockContext );\n\tconst contextKey = CONTEXT_HEADING_LEVEL_BLOCKS[ blockName ]?.contextKey;\n\treturn contextKey ? blockContext[ contextKey ] : undefined;\n}\n\n/**\n * Maps a block to the root-level Global Styles *element* layers that paint it\n * on the canvas, in addition to (or instead of) the block's own class — e.g. a\n * Button renders `.wp-element-button`, a level-2 Heading renders `<h2>`.\n *\n * Keys are ordered low to high precedence, so a level-specific `h2` wins over\n * the generic `heading`. A level of `0` (e.g. a Site or Post Title rendered as\n * a paragraph) renders no heading tag, so no element layer applies.\n *\n * Hand-maintained by necessity: the block-to-element relationship is not\n * inferable from block metadata. `supports.color.link` and friends mark blocks\n * that *contain* an element, not blocks that *are* one, and only the inverse\n * element-to-selector map exists (`__EXPERIMENTAL_ELEMENTS`). Standardizing it\n * as a block property is tracked in\n * https://github.com/WordPress/gutenberg/issues/80438.\n *\n * Only blocks that *are* a link fold the `link` layer (e.g. Read More, Login/out\n * and the pagination links render `<a>` as their whole selves). Blocks that\n * merely *contain* a link — the heading family, Paragraph, Group, and the\n * hybrid blocks with a Link colour control (Post Author Name, Post Date, …) —\n * get no `link` layer: their inner-link control reads the\n * `inheritedValue.elements.link` passthrough instead, so folding `link` in would\n * bleed link color into the block's own text.\n *\n * @param {string}  blockName    Block name.\n * @param {?number} headingLevel Resolved heading level, from `getHeadingLevel`.\n * @return {string[]} Ordered element keys, low to high precedence.\n */\nfunction getElementLayers( blockName, headingLevel ) {\n\tswitch ( blockName ) {\n\t\tcase 'core/button':\n\t\t\treturn [ 'button' ];\n\t\tcase 'core/accordion-heading':\n\t\tcase 'core/heading':\n\t\tcase 'core/post-title':\n\t\tcase 'core/site-title':\n\t\tcase 'core/query-title':\n\t\tcase 'core/comments-title':\n\t\tcase 'core/term-name':\n\t\tcase 'core/site-tagline':\n\t\t\tif ( headingLevel === 0 ) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\treturn headingLevel\n\t\t\t\t? [ 'heading', `h${ headingLevel }` ]\n\t\t\t\t: [ 'heading' ];\n\t\t// Whole-block link blocks: the entire block renders as an `<a>`, so the\n\t\t// root `styles.elements.link` layer paints it, mirroring how `button`\n\t\t// paints Button. For the blocks whose `color.text` support is disabled\n\t\t// this is inert at the (hidden) text control while their typography\n\t\t// controls now reflect the link element; Read More (`color.text: true`)\n\t\t// surfaces the inherited link color at its Text control.\n\t\tcase 'core/read-more':\n\t\tcase 'core/loginout':\n\t\tcase 'core/post-navigation-link':\n\t\tcase 'core/query-pagination-next':\n\t\tcase 'core/query-pagination-previous':\n\t\tcase 'core/query-pagination-numbers':\n\t\tcase 'core/comments-pagination-next':\n\t\tcase 'core/comments-pagination-previous':\n\t\tcase 'core/comments-pagination-numbers':\n\t\tcase 'core/comment-edit-link':\n\t\tcase 'core/comment-reply-link':\n\t\tcase 'core/post-comments-link':\n\t\t\treturn [ 'link' ];\n\t\tdefault:\n\t\t\treturn [];\n\t}\n}\n\n/**\n * Internal hook that derives the active block-style-variation slug from a\n * block's `className` by matching registered styles via\n * `getVariationNameFromClass`, together with the element layers that paint\n * the block. Both come from a single store subscription.\n *\n * The lookup is scoped to a single `useSelect` subscription; the\n * `@wordpress/blocks` registered-styles slice changes only when a block's\n * styles are (un)registered, so this subscription is cold in steady-state\n * editor use.\n *\n * The block's `clientId` comes from the block edit context rather than an\n * argument: these panels always render inside `BlockEditContextProvider`, so\n * the caller does not have to thread it through.\n *\n * @param {?string} blockName Block name (e.g. `core/heading`).\n * @param {?string} className Space-separated class string from block attributes.\n * @return {{ variationName: ?string, headingLevel: ?number }} Variation slug\n * (without the `is-style-` prefix) and the block's heading level, if any.\n */\nfunction useVariationAndElements( blockName, className ) {\n\tconst { clientId } = useBlockEditContext();\n\tconst contextHeadingLevel = useContextHeadingLevel( blockName );\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! blockName ) {\n\t\t\t\treturn { variationName: null, headingLevel: undefined };\n\t\t\t}\n\t\t\tconst registeredStyles =\n\t\t\t\tselect( blocksStore ).getBlockStyles( blockName );\n\t\t\tconst { level } =\n\t\t\t\tselect( blockEditorStore ).getBlockAttributes( clientId ) || {};\n\t\t\t// Primitives only: `useSelect` shallow-compares this object, so\n\t\t\t// returning a fresh array here would re-render on every action.\n\t\t\treturn {\n\t\t\t\tvariationName: className\n\t\t\t\t\t? getVariationNameFromClass( className, registeredStyles )\n\t\t\t\t\t: null,\n\t\t\t\theadingLevel: getHeadingLevel(\n\t\t\t\t\tblockName,\n\t\t\t\t\tlevel,\n\t\t\t\t\tcontextHeadingLevel\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ blockName, className, clientId, contextHeadingLevel ]\n\t);\n}\n\n/**\n * Hook: computes the merged, cascade-resolved `inheritedValue` payload and\n * source map for a selected block, ready to hand to a shared Global Styles\n * panel via props.\n *\n * It reads the merged Global Styles payload and the block's applied variation,\n * then folds the Root ‹ Block-type ‹ applied-variation cascade (resolving\n * `{ ref }` envelopes and theme-file pointers) via the pure `resolveStyle`\n * resolver in `@wordpress/global-styles-engine`. All store access lives here;\n * the panels stay presentational.\n *\n * Before the `globalStylesDataKey` payload settles (hydration) or when\n * `blockName` is missing, the hook returns empty value and source objects, so\n * each panel's `inheritedValue = value` default preserves pre-feature behavior.\n *\n * @param {?string} blockName       Selected block name (e.g. `core/heading`).\n * @param {?string} className       Block `className` used to detect an applied variation.\n * @param {?Object} [selectedState] Selected block style state (`{ viewport, pseudo }`), or null for the default state.\n * @return {{ value: Object, sources: Object }} Merged panel-scoped payload and source map.\n */\nexport function useResolvedStyle( blockName, className, selectedState = null ) {\n\tconst { variationName, headingLevel } = useVariationAndElements(\n\t\tblockName,\n\t\tclassName\n\t);\n\tconst globalStyles = useRawGlobalStyles();\n\n\treturn useMemo( () => {\n\t\t// Skip the cascade merge entirely when the experiment is off.\n\t\tif ( ! isGlobalStylesInheritanceEnabled() ) {\n\t\t\treturn NO_RESOLVED_STYLE;\n\t\t}\n\t\tif ( ! blockName ) {\n\t\t\treturn { value: {}, sources: {} };\n\t\t}\n\t\treturn resolveStyle( globalStyles, {\n\t\t\tblockName,\n\t\t\tvariationName,\n\t\t\telements: getElementLayers( blockName, headingLevel ),\n\t\t\tviewport: selectedState?.viewport ?? null,\n\t\t\tpseudoState: selectedState?.pseudo ?? null,\n\t\t} );\n\t}, [\n\t\tblockName,\n\t\tvariationName,\n\t\theadingLevel,\n\t\tglobalStyles,\n\t\tselectedState,\n\t] );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useContext, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';\nimport { store as blockEditorStore } from '../../store';\nimport {\n\tglobalStylesDataKey,\n\tglobalStylesLinksDataKey,\n} from '../../store/private-keys';\nimport { getVariationNameFromClass } from '../../hooks/block-style-variation';\nimport { useBlockEditContext } from '../block-edit/context';\nimport BlockContext from '../block-context';\nimport { unlock } from '../../lock-unlock';\n\nconst { resolveStyle } = unlock( globalStylesEnginePrivateApis );\n\n/**\n * Reads the Global Styles payload and returns it as a `GlobalStylesConfig`\n * (`{ styles, _links }`), the shape `resolveStyle` expects. `_links` carries\n * the theme-file map used to resolve pointers such as background images.\n *\n * @return {?Object} Global Styles config, or `null` before the payload settles.\n */\nfunction useRawGlobalStyles() {\n\tconst { rawGlobalStylesData, links } = useSelect( ( select ) => {\n\t\tconst settings = select( blockEditorStore ).getSettings();\n\t\treturn {\n\t\t\trawGlobalStylesData: settings[ globalStylesDataKey ] ?? null,\n\t\t\tlinks: settings[ globalStylesLinksDataKey ] ?? null,\n\t\t};\n\t}, [] );\n\treturn useMemo(\n\t\t() =>\n\t\t\trawGlobalStylesData\n\t\t\t\t? { styles: rawGlobalStylesData, _links: links ?? undefined }\n\t\t\t\t: null,\n\t\t[ rawGlobalStylesData, links ]\n\t);\n}\n\n/**\n * Blocks whose heading level is handed down by a parent through block context\n * rather than held in their own `level` attribute, mapped to that context key\n * and the level they fall back to.\n *\n * Accordion Heading is the only one: the parent Accordion owns the level, and\n * the child's `level` attribute has no default and is absent on pattern-,\n * template- and paste-inserted blocks.\n */\nconst CONTEXT_HEADING_LEVEL_BLOCKS = {\n\t'core/accordion-heading': {\n\t\tcontextKey: 'core/accordion-heading-level',\n\t\tfallbackLevel: 3,\n\t},\n};\n\n/**\n * Resolves the heading level that selects a block's `h1`-`h6` element layer.\n *\n * @param {string}  blockName      Block name.\n * @param {?number} levelAttribute The block's own `level` attribute, if it has one.\n * @param {?number} contextLevel   Level supplied by a parent through block context.\n * @return {?number} Resolved heading level, or `undefined` when the block has none.\n */\nfunction getHeadingLevel( blockName, levelAttribute, contextLevel ) {\n\tconst contextOwned = CONTEXT_HEADING_LEVEL_BLOCKS[ blockName ];\n\tif ( ! contextOwned ) {\n\t\treturn levelAttribute;\n\t}\n\t// Mirrors the block's own chain (Accordion Heading saves `h${ level || 3 }`),\n\t// so `0` coerces to the fallback instead of reading as a level-0 state.\n\treturn levelAttribute || contextLevel || contextOwned.fallbackLevel;\n}\n\n/**\n * Reads the heading level a parent supplies through block context.\n *\n * Only the blocks in `CONTEXT_HEADING_LEVEL_BLOCKS` read a key: the value\n * reaches every descendant, so an ordinary Heading inside an Accordion Panel\n * must not pick it up. Returns a primitive so callers can use it as a\n * `useSelect` dependency.\n *\n * @param {?string} blockName Block name.\n * @return {?number} Level from block context, or `undefined`.\n */\nfunction useContextHeadingLevel( blockName ) {\n\tconst blockContext = useContext( BlockContext );\n\tconst contextKey = CONTEXT_HEADING_LEVEL_BLOCKS[ blockName ]?.contextKey;\n\treturn contextKey ? blockContext[ contextKey ] : undefined;\n}\n\n/**\n * Maps a block to the root-level Global Styles *element* layers that paint it\n * on the canvas, in addition to (or instead of) the block's own class — e.g. a\n * Button renders `.wp-element-button`, a level-2 Heading renders `<h2>`.\n *\n * Keys are ordered low to high precedence, so a level-specific `h2` wins over\n * the generic `heading`. A level of `0` (e.g. a Site or Post Title rendered as\n * a paragraph) renders no heading tag, so no element layer applies.\n *\n * Hand-maintained by necessity: the block-to-element relationship is not\n * inferable from block metadata. `supports.color.link` and friends mark blocks\n * that *contain* an element, not blocks that *are* one, and only the inverse\n * element-to-selector map exists (`__EXPERIMENTAL_ELEMENTS`). Standardizing it\n * as a block property is tracked in\n * https://github.com/WordPress/gutenberg/issues/80438.\n *\n * Only blocks that *are* a link fold the `link` layer (e.g. Read More, Login/out\n * and the pagination links render `<a>` as their whole selves). Blocks that\n * merely *contain* a link — the heading family, Paragraph, Group, and the\n * hybrid blocks with a Link colour control (Post Author Name, Post Date, …) —\n * get no `link` layer: their inner-link control reads the\n * `inheritedValue.elements.link` passthrough instead, so folding `link` in would\n * bleed link color into the block's own text.\n *\n * @param {string}  blockName    Block name.\n * @param {?number} headingLevel Resolved heading level, from `getHeadingLevel`.\n * @return {string[]} Ordered element keys, low to high precedence.\n */\nfunction getElementLayers( blockName, headingLevel ) {\n\tswitch ( blockName ) {\n\t\tcase 'core/button':\n\t\t\treturn [ 'button' ];\n\t\tcase 'core/accordion-heading':\n\t\tcase 'core/heading':\n\t\tcase 'core/post-title':\n\t\tcase 'core/site-title':\n\t\tcase 'core/query-title':\n\t\tcase 'core/comments-title':\n\t\tcase 'core/term-name':\n\t\tcase 'core/site-tagline':\n\t\t\tif ( headingLevel === 0 ) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\treturn headingLevel\n\t\t\t\t? [ 'heading', `h${ headingLevel }` ]\n\t\t\t\t: [ 'heading' ];\n\t\t// Whole-block link blocks: the entire block renders as an `<a>`, so the\n\t\t// root `styles.elements.link` layer paints it, mirroring how `button`\n\t\t// paints Button. For the blocks whose `color.text` support is disabled\n\t\t// this is inert at the (hidden) text control while their typography\n\t\t// controls now reflect the link element; Read More (`color.text: true`)\n\t\t// surfaces the inherited link color at its Text control.\n\t\tcase 'core/read-more':\n\t\tcase 'core/loginout':\n\t\tcase 'core/post-navigation-link':\n\t\tcase 'core/query-pagination-next':\n\t\tcase 'core/query-pagination-previous':\n\t\tcase 'core/query-pagination-numbers':\n\t\tcase 'core/comments-pagination-next':\n\t\tcase 'core/comments-pagination-previous':\n\t\tcase 'core/comments-pagination-numbers':\n\t\tcase 'core/comment-edit-link':\n\t\tcase 'core/comment-reply-link':\n\t\tcase 'core/post-comments-link':\n\t\t\treturn [ 'link' ];\n\t\tdefault:\n\t\t\treturn [];\n\t}\n}\n\n/**\n * Internal hook that derives the active block-style-variation slug from a\n * block's `className` by matching registered styles via\n * `getVariationNameFromClass`, together with the element layers that paint\n * the block. Both come from a single store subscription.\n *\n * The lookup is scoped to a single `useSelect` subscription; the\n * `@wordpress/blocks` registered-styles slice changes only when a block's\n * styles are (un)registered, so this subscription is cold in steady-state\n * editor use.\n *\n * The block's `clientId` comes from the block edit context rather than an\n * argument: these panels always render inside `BlockEditContextProvider`, so\n * the caller does not have to thread it through.\n *\n * @param {?string} blockName Block name (e.g. `core/heading`).\n * @param {?string} className Space-separated class string from block attributes.\n * @return {{ variationName: ?string, headingLevel: ?number }} Variation slug\n * (without the `is-style-` prefix) and the block's heading level, if any.\n */\nfunction useVariationAndElements( blockName, className ) {\n\tconst { clientId } = useBlockEditContext();\n\tconst contextHeadingLevel = useContextHeadingLevel( blockName );\n\treturn useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! blockName ) {\n\t\t\t\treturn { variationName: null, headingLevel: undefined };\n\t\t\t}\n\t\t\tconst registeredStyles =\n\t\t\t\tselect( blocksStore ).getBlockStyles( blockName );\n\t\t\tconst { level } =\n\t\t\t\tselect( blockEditorStore ).getBlockAttributes( clientId ) || {};\n\t\t\t// Primitives only: `useSelect` shallow-compares this object, so\n\t\t\t// returning a fresh array here would re-render on every action.\n\t\t\treturn {\n\t\t\t\tvariationName: className\n\t\t\t\t\t? getVariationNameFromClass( className, registeredStyles )\n\t\t\t\t\t: null,\n\t\t\t\theadingLevel: getHeadingLevel(\n\t\t\t\t\tblockName,\n\t\t\t\t\tlevel,\n\t\t\t\t\tcontextHeadingLevel\n\t\t\t\t),\n\t\t\t};\n\t\t},\n\t\t[ blockName, className, clientId, contextHeadingLevel ]\n\t);\n}\n\n/**\n * Hook: computes the merged, cascade-resolved `inheritedValue` payload and\n * source map for a selected block, ready to hand to a shared Global Styles\n * panel via props.\n *\n * It reads the merged Global Styles payload and the block's applied variation,\n * then folds the Root ‹ Block-type ‹ applied-variation cascade (resolving\n * `{ ref }` envelopes and theme-file pointers) via the pure `resolveStyle`\n * resolver in `@wordpress/global-styles-engine`. All store access lives here;\n * the panels stay presentational.\n *\n * Before the `globalStylesDataKey` payload settles (hydration) or when\n * `blockName` is missing, the hook returns empty value and source objects, so\n * each panel reads no inherited value and renders its local value alone.\n *\n * @param {?string} blockName       Selected block name (e.g. `core/heading`).\n * @param {?string} className       Block `className` used to detect an applied variation.\n * @param {?Object} [selectedState] Selected block style state (`{ viewport, pseudo }`), or null for the default state.\n * @return {{ value: Object, sources: Object }} Merged panel-scoped payload and source map.\n */\nexport function useResolvedStyle( blockName, className, selectedState = null ) {\n\tconst { variationName, headingLevel } = useVariationAndElements(\n\t\tblockName,\n\t\tclassName\n\t);\n\tconst globalStyles = useRawGlobalStyles();\n\n\treturn useMemo( () => {\n\t\tif ( ! blockName ) {\n\t\t\treturn { value: {}, sources: {} };\n\t\t}\n\t\treturn resolveStyle( globalStyles, {\n\t\t\tblockName,\n\t\t\tvariationName,\n\t\t\telements: getElementLayers( blockName, headingLevel ),\n\t\t\tviewport: selectedState?.viewport ?? null,\n\t\t\tpseudoState: selectedState?.pseudo ?? null,\n\t\t} );\n\t}, [\n\t\tblockName,\n\t\tvariationName,\n\t\theadingLevel,\n\t\tglobalStyles,\n\t\tselectedState,\n\t] );\n}\n"],
+  "mappings": ";AAAA,SAAS,YAAY,eAAe;AACpC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,mBAAmB;AACrC,SAAS,eAAe,qCAAqC;AAC7D,SAAS,SAAS,wBAAwB;AAC1C;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,iCAAiC;AAC1C,SAAS,2BAA2B;AACpC,OAAO,kBAAkB;AACzB,SAAS,cAAc;AAEvB,IAAM,EAAE,aAAa,IAAI,OAAQ,6BAA8B;AAS/D,SAAS,qBAAqB;AAC7B,QAAM,EAAE,qBAAqB,MAAM,IAAI,UAAW,CAAE,WAAY;AAC/D,UAAM,WAAW,OAAQ,gBAAiB,EAAE,YAAY;AACxD,WAAO;AAAA,MACN,qBAAqB,SAAU,mBAAoB,KAAK;AAAA,MACxD,OAAO,SAAU,wBAAyB,KAAK;AAAA,IAChD;AAAA,EACD,GAAG,CAAC,CAAE;AACN,SAAO;AAAA,IACN,MACC,sBACG,EAAE,QAAQ,qBAAqB,QAAQ,SAAS,OAAU,IAC1D;AAAA,IACJ,CAAE,qBAAqB,KAAM;AAAA,EAC9B;AACD;AAWA,IAAM,+BAA+B;AAAA,EACpC,0BAA0B;AAAA,IACzB,YAAY;AAAA,IACZ,eAAe;AAAA,EAChB;AACD;AAUA,SAAS,gBAAiB,WAAW,gBAAgB,cAAe;AACnE,QAAM,eAAe,6BAA8B,SAAU;AAC7D,MAAK,CAAE,cAAe;AACrB,WAAO;AAAA,EACR;AAGA,SAAO,kBAAkB,gBAAgB,aAAa;AACvD;AAaA,SAAS,uBAAwB,WAAY;AAC5C,QAAM,eAAe,WAAY,YAAa;AAC9C,QAAM,aAAa,6BAA8B,SAAU,GAAG;AAC9D,SAAO,aAAa,aAAc,UAAW,IAAI;AAClD;AA8BA,SAAS,iBAAkB,WAAW,cAAe;AACpD,UAAS,WAAY;AAAA,IACpB,KAAK;AACJ,aAAO,CAAE,QAAS;AAAA,IACnB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACJ,UAAK,iBAAiB,GAAI;AACzB,eAAO,CAAC;AAAA,MACT;AACA,aAAO,eACJ,CAAE,WAAW,IAAK,YAAa,EAAG,IAClC,CAAE,SAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AACJ,aAAO,CAAE,MAAO;AAAA,IACjB;AACC,aAAO,CAAC;AAAA,EACV;AACD;AAsBA,SAAS,wBAAyB,WAAW,WAAY;AACxD,QAAM,EAAE,SAAS,IAAI,oBAAoB;AACzC,QAAM,sBAAsB,uBAAwB,SAAU;AAC9D,SAAO;AAAA,IACN,CAAE,WAAY;AACb,UAAK,CAAE,WAAY;AAClB,eAAO,EAAE,eAAe,MAAM,cAAc,OAAU;AAAA,MACvD;AACA,YAAM,mBACL,OAAQ,WAAY,EAAE,eAAgB,SAAU;AACjD,YAAM,EAAE,MAAM,IACb,OAAQ,gBAAiB,EAAE,mBAAoB,QAAS,KAAK,CAAC;AAG/D,aAAO;AAAA,QACN,eAAe,YACZ,0BAA2B,WAAW,gBAAiB,IACvD;AAAA,QACH,cAAc;AAAA,UACb;AAAA,UACA;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,WAAW,WAAW,UAAU,mBAAoB;AAAA,EACvD;AACD;AAsBO,SAAS,iBAAkB,WAAW,WAAW,gBAAgB,MAAO;AAC9E,QAAM,EAAE,eAAe,aAAa,IAAI;AAAA,IACvC;AAAA,IACA;AAAA,EACD;AACA,QAAM,eAAe,mBAAmB;AAExC,SAAO,QAAS,MAAM;AACrB,QAAK,CAAE,WAAY;AAClB,aAAO,EAAE,OAAO,CAAC,GAAG,SAAS,CAAC,EAAE;AAAA,IACjC;AACA,WAAO,aAAc,cAAc;AAAA,MAClC;AAAA,MACA;AAAA,MACA,UAAU,iBAAkB,WAAW,YAAa;AAAA,MACpD,UAAU,eAAe,YAAY;AAAA,MACrC,aAAa,eAAe,UAAU;AAAA,IACvC,CAAE;AAAA,EACH,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACH;",
   "names": []
 }

package/build-module/components/global-styles/state-control-badges.mjs

@@ -54,7 +54,6 @@ function StateControlBadges({
           WCBadge,
           {
             className: "block-editor-global-styles-state-control__badge",
-            intent: "info",
             children: [
               state.label,
               !!state.tooltipText && /* @__PURE__ */ jsx(VisuallyHidden, { render: /* @__PURE__ */ jsx("span", {}), children: state.tooltipText })

package/build-module/components/global-styles/state-control-badges.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/state-control-badges.jsx"],
-  "sourcesContent": ["import { privateApis as componentsPrivateApis } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Stack, Tooltip, VisuallyHidden } from '@wordpress/ui';\nimport { unlock } from '../../lock-unlock';\n\nconst { Badge: WCBadge } = unlock( componentsPrivateApis );\n\nexport default function StateControlBadges( {\n\tviewportStates = [],\n\tpseudoStates = [],\n\tviewportValue = 'default',\n\tpseudoStateValue = 'default',\n\tclassName = 'block-editor-global-styles-state-control__badges',\n} ) {\n\tconst activeStates = [];\n\tconst selectedViewport = viewportStates.find(\n\t\t( state ) => state.value === viewportValue\n\t);\n\tconst selectedPseudoState = pseudoStates.find(\n\t\t( state ) => state.value === pseudoStateValue\n\t);\n\n\tif ( selectedViewport ) {\n\t\tactiveStates.push( {\n\t\t\tkey: `viewport-${ selectedViewport.value }`,\n\t\t\tlabel: selectedViewport.label,\n\t\t\ttooltipText: sprintf(\n\t\t\t\t/* translators: %s: viewport name, e.g. \"Tablet\". */\n\t\t\t\t__( 'Style changes apply to the %s viewport.' ),\n\t\t\t\tselectedViewport.label\n\t\t\t),\n\t\t} );\n\t}\n\n\tif ( selectedPseudoState ) {\n\t\tactiveStates.push( {\n\t\t\tkey: `pseudo-${ selectedPseudoState.value }`,\n\t\t\tlabel: selectedPseudoState.label,\n\t\t\ttooltipText: sprintf(\n\t\t\t\t/* translators: %s: pseudo state name, e.g. \"Hover\". */\n\t\t\t\t__( 'Style changes apply to the %s state.' ),\n\t\t\t\tselectedPseudoState.label\n\t\t\t),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<Stack\n\t\t\tclassName={ className }\n\t\t\tdirection=\"row\"\n\t\t\tjustify=\"flex-start\"\n\t\t\tgap=\"xs\"\n\t\t\twrap=\"wrap\"\n\t\t>\n\t\t\t{ activeStates.map( ( state ) => {\n\t\t\t\tconst badge = (\n\t\t\t\t\t<WCBadge\n\t\t\t\t\t\tkey={ state.key }\n\t\t\t\t\t\tclassName=\"block-editor-global-styles-state-control__badge\"\n\t\t\t\t\t\tintent=\"info\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ state.label }\n\t\t\t\t\t\t{ !! state.tooltipText && (\n\t\t\t\t\t\t\t<VisuallyHidden render={ <span /> }>\n\t\t\t\t\t\t\t\t{ state.tooltipText }\n\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</WCBadge>\n\t\t\t\t);\n\n\t\t\t\tif ( ! state.tooltipText ) {\n\t\t\t\t\treturn badge;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Tooltip.Root key={ state.key }>\n\t\t\t\t\t\t<Tooltip.Trigger\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<span className=\"block-editor-global-styles-state-control__badge-tooltip-trigger\">\n\t\t\t\t\t\t\t\t\t{ badge }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Tooltip.Popup>{ state.tooltipText }</Tooltip.Popup>\n\t\t\t\t\t</Tooltip.Root>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Stack>\n\t);\n}\n"],
-  "mappings": ";AAAA,SAAS,eAAe,6BAA6B;AACrD,SAAS,IAAI,eAAe;AAC5B,SAAS,OAAO,SAAS,sBAAsB;AAC/C,SAAS,cAAc;AAqDlB,SAO2B,KAP3B;AAnDL,IAAM,EAAE,OAAO,QAAQ,IAAI,OAAQ,qBAAsB;AAE1C,SAAR,mBAAqC;AAAA,EAC3C,iBAAiB,CAAC;AAAA,EAClB,eAAe,CAAC;AAAA,EAChB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,YAAY;AACb,GAAI;AACH,QAAM,eAAe,CAAC;AACtB,QAAM,mBAAmB,eAAe;AAAA,IACvC,CAAE,UAAW,MAAM,UAAU;AAAA,EAC9B;AACA,QAAM,sBAAsB,aAAa;AAAA,IACxC,CAAE,UAAW,MAAM,UAAU;AAAA,EAC9B;AAEA,MAAK,kBAAmB;AACvB,iBAAa,KAAM;AAAA,MAClB,KAAK,YAAa,iBAAiB,KAAM;AAAA,MACzC,OAAO,iBAAiB;AAAA,MACxB,aAAa;AAAA;AAAA,QAEZ,GAAI,yCAA0C;AAAA,QAC9C,iBAAiB;AAAA,MAClB;AAAA,IACD,CAAE;AAAA,EACH;AAEA,MAAK,qBAAsB;AAC1B,iBAAa,KAAM;AAAA,MAClB,KAAK,UAAW,oBAAoB,KAAM;AAAA,MAC1C,OAAO,oBAAoB;AAAA,MAC3B,aAAa;AAAA;AAAA,QAEZ,GAAI,sCAAuC;AAAA,QAC3C,oBAAoB;AAAA,MACrB;AAAA,IACD,CAAE;AAAA,EACH;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,KAAI;AAAA,MACJ,MAAK;AAAA,MAEH,uBAAa,IAAK,CAAE,UAAW;AAChC,cAAM,QACL;AAAA,UAAC;AAAA;AAAA,YAEA,WAAU;AAAA,YACV,QAAO;AAAA,YAEL;AAAA,oBAAM;AAAA,cACN,CAAC,CAAE,MAAM,eACV,oBAAC,kBAAe,QAAS,oBAAC,UAAK,GAC5B,gBAAM,aACT;AAAA;AAAA;AAAA,UARK,MAAM;AAAA,QAUb;AAGD,YAAK,CAAE,MAAM,aAAc;AAC1B,iBAAO;AAAA,QACR;AAEA,eACC,qBAAC,QAAQ,MAAR,EACA;AAAA;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACA,QACC,oBAAC,UAAK,WAAU,mEACb,iBACH;AAAA;AAAA,UAEF;AAAA,UACA,oBAAC,QAAQ,OAAR,EAAgB,gBAAM,aAAa;AAAA,aARjB,MAAM,GAS1B;AAAA,MAEF,CAAE;AAAA;AAAA,EACH;AAEF;",
+  "sourcesContent": ["import { privateApis as componentsPrivateApis } from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Stack, Tooltip, VisuallyHidden } from '@wordpress/ui';\nimport { unlock } from '../../lock-unlock';\n\nconst { Badge: WCBadge } = unlock( componentsPrivateApis );\n\nexport default function StateControlBadges( {\n\tviewportStates = [],\n\tpseudoStates = [],\n\tviewportValue = 'default',\n\tpseudoStateValue = 'default',\n\tclassName = 'block-editor-global-styles-state-control__badges',\n} ) {\n\tconst activeStates = [];\n\tconst selectedViewport = viewportStates.find(\n\t\t( state ) => state.value === viewportValue\n\t);\n\tconst selectedPseudoState = pseudoStates.find(\n\t\t( state ) => state.value === pseudoStateValue\n\t);\n\n\tif ( selectedViewport ) {\n\t\tactiveStates.push( {\n\t\t\tkey: `viewport-${ selectedViewport.value }`,\n\t\t\tlabel: selectedViewport.label,\n\t\t\ttooltipText: sprintf(\n\t\t\t\t/* translators: %s: viewport name, e.g. \"Tablet\". */\n\t\t\t\t__( 'Style changes apply to the %s viewport.' ),\n\t\t\t\tselectedViewport.label\n\t\t\t),\n\t\t} );\n\t}\n\n\tif ( selectedPseudoState ) {\n\t\tactiveStates.push( {\n\t\t\tkey: `pseudo-${ selectedPseudoState.value }`,\n\t\t\tlabel: selectedPseudoState.label,\n\t\t\ttooltipText: sprintf(\n\t\t\t\t/* translators: %s: pseudo state name, e.g. \"Hover\". */\n\t\t\t\t__( 'Style changes apply to the %s state.' ),\n\t\t\t\tselectedPseudoState.label\n\t\t\t),\n\t\t} );\n\t}\n\n\treturn (\n\t\t<Stack\n\t\t\tclassName={ className }\n\t\t\tdirection=\"row\"\n\t\t\tjustify=\"flex-start\"\n\t\t\tgap=\"xs\"\n\t\t\twrap=\"wrap\"\n\t\t>\n\t\t\t{ activeStates.map( ( state ) => {\n\t\t\t\tconst badge = (\n\t\t\t\t\t<WCBadge\n\t\t\t\t\t\tkey={ state.key }\n\t\t\t\t\t\tclassName=\"block-editor-global-styles-state-control__badge\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ state.label }\n\t\t\t\t\t\t{ !! state.tooltipText && (\n\t\t\t\t\t\t\t<VisuallyHidden render={ <span /> }>\n\t\t\t\t\t\t\t\t{ state.tooltipText }\n\t\t\t\t\t\t\t</VisuallyHidden>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</WCBadge>\n\t\t\t\t);\n\n\t\t\t\tif ( ! state.tooltipText ) {\n\t\t\t\t\treturn badge;\n\t\t\t\t}\n\n\t\t\t\treturn (\n\t\t\t\t\t<Tooltip.Root key={ state.key }>\n\t\t\t\t\t\t<Tooltip.Trigger\n\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t<span className=\"block-editor-global-styles-state-control__badge-tooltip-trigger\">\n\t\t\t\t\t\t\t\t\t{ badge }\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Tooltip.Popup>{ state.tooltipText }</Tooltip.Popup>\n\t\t\t\t\t</Tooltip.Root>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Stack>\n\t);\n}\n"],
+  "mappings": ";AAAA,SAAS,eAAe,6BAA6B;AACrD,SAAS,IAAI,eAAe;AAC5B,SAAS,OAAO,SAAS,sBAAsB;AAC/C,SAAS,cAAc;AAqDlB,SAM2B,KAN3B;AAnDL,IAAM,EAAE,OAAO,QAAQ,IAAI,OAAQ,qBAAsB;AAE1C,SAAR,mBAAqC;AAAA,EAC3C,iBAAiB,CAAC;AAAA,EAClB,eAAe,CAAC;AAAA,EAChB,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,YAAY;AACb,GAAI;AACH,QAAM,eAAe,CAAC;AACtB,QAAM,mBAAmB,eAAe;AAAA,IACvC,CAAE,UAAW,MAAM,UAAU;AAAA,EAC9B;AACA,QAAM,sBAAsB,aAAa;AAAA,IACxC,CAAE,UAAW,MAAM,UAAU;AAAA,EAC9B;AAEA,MAAK,kBAAmB;AACvB,iBAAa,KAAM;AAAA,MAClB,KAAK,YAAa,iBAAiB,KAAM;AAAA,MACzC,OAAO,iBAAiB;AAAA,MACxB,aAAa;AAAA;AAAA,QAEZ,GAAI,yCAA0C;AAAA,QAC9C,iBAAiB;AAAA,MAClB;AAAA,IACD,CAAE;AAAA,EACH;AAEA,MAAK,qBAAsB;AAC1B,iBAAa,KAAM;AAAA,MAClB,KAAK,UAAW,oBAAoB,KAAM;AAAA,MAC1C,OAAO,oBAAoB;AAAA,MAC3B,aAAa;AAAA;AAAA,QAEZ,GAAI,sCAAuC;AAAA,QAC3C,oBAAoB;AAAA,MACrB;AAAA,IACD,CAAE;AAAA,EACH;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,KAAI;AAAA,MACJ,MAAK;AAAA,MAEH,uBAAa,IAAK,CAAE,UAAW;AAChC,cAAM,QACL;AAAA,UAAC;AAAA;AAAA,YAEA,WAAU;AAAA,YAER;AAAA,oBAAM;AAAA,cACN,CAAC,CAAE,MAAM,eACV,oBAAC,kBAAe,QAAS,oBAAC,UAAK,GAC5B,gBAAM,aACT;AAAA;AAAA;AAAA,UAPK,MAAM;AAAA,QASb;AAGD,YAAK,CAAE,MAAM,aAAc;AAC1B,iBAAO;AAAA,QACR;AAEA,eACC,qBAAC,QAAQ,MAAR,EACA;AAAA;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACA,QACC,oBAAC,UAAK,WAAU,mEACb,iBACH;AAAA;AAAA,UAEF;AAAA,UACA,oBAAC,QAAQ,OAAR,EAAgB,gBAAM,aAAa;AAAA,aARjB,MAAM,GAS1B;AAAA,MAEF,CAAE;AAAA;AAAA,EACH;AAEF;",
   "names": []
 }

package/build-module/components/global-styles/state-control.mjs

@@ -12,7 +12,8 @@ function StateControl({
   onChangeViewport,
   onChangePseudoState,
   showText = true,
-  popoverProps = {}
+  popoverProps = {},
+  children
 }) {
   if (!viewportStates.length && !pseudoStates.length) {
     return null;
@@ -88,7 +89,7 @@ function StateControl({
               {
                 onClick: () => {
                   onChangeViewport?.(option.value);
-                  if (!hasPseudoStateOptions) {
+                  if (!hasPseudoStateOptions && !children) {
                     onClose();
                   }
                 },
@@ -104,7 +105,7 @@ function StateControl({
                   onChangePseudoState?.(
                     option.value
                   );
-                  if (!hasViewportOptions) {
+                  if (!hasViewportOptions && !children) {
                     onClose();
                   }
                 },
@@ -112,7 +113,8 @@ function StateControl({
                 children: option.label
               },
               `pseudo-${option.value}`
-            )) })
+            )) }),
+            children
           ] })
         }
       )

package/build-module/components/global-styles/state-control.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/global-styles/state-control.jsx"],
-  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport { check, chevronDown, moreVertical } from '@wordpress/icons';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * State control for managing viewport and pseudo-state styles.\n * Displays a dropdown menu with separate groups for each selector.\n *\n * @param {Object}   props                     Component props.\n * @param {Array}    props.viewportStates      Array of available viewport states.\n * @param {Array}    props.pseudoStates        Array of available pseudo states.\n * @param {string}   props.viewportValue       Currently selected viewport value.\n * @param {string}   props.pseudoStateValue    Currently selected pseudo state value.\n * @param {Function} props.onChangeViewport    Callback when viewport selection changes.\n * @param {Function} props.onChangePseudoState Callback when pseudo state selection changes.\n * @param {boolean}  props.showText            Whether to show text label on the toggle. Default true.\n * @param {Object}   props.popoverProps        Popover props for the dropdown menu.\n * @return {Element|null} State control component.\n */\nexport default function StateControl( {\n\tviewportStates = [],\n\tpseudoStates = [],\n\tviewportValue = 'default',\n\tpseudoStateValue = 'default',\n\tonChangeViewport,\n\tonChangePseudoState,\n\tshowText = true,\n\tpopoverProps = {},\n} ) {\n\tif ( ! viewportStates.length && ! pseudoStates.length ) {\n\t\treturn null;\n\t}\n\n\tconst viewportOptions = [\n\t\t{ label: __( 'Default' ), value: 'default' },\n\t\t...viewportStates.map( ( state ) => ( {\n\t\t\tlabel: state.label,\n\t\t\tvalue: state.value,\n\t\t} ) ),\n\t];\n\tconst pseudoStateOptions = [\n\t\t{ label: __( 'Default' ), value: 'default' },\n\t\t...pseudoStates.map( ( state ) => ( {\n\t\t\tlabel: state.label,\n\t\t\tvalue: state.value,\n\t\t} ) ),\n\t];\n\n\tconst hasViewportOptions = viewportStates.length > 0;\n\tconst hasPseudoStateOptions = pseudoStates.length > 0;\n\tconst triggerLabel = __( 'States' );\n\tconst activeStates = [];\n\n\tif ( hasViewportOptions && viewportValue !== 'default' ) {\n\t\tconst selectedViewport = viewportOptions.find(\n\t\t\t( option ) => option.value === viewportValue\n\t\t);\n\n\t\tif ( selectedViewport ) {\n\t\t\tactiveStates.push( {\n\t\t\t\tkey: `viewport-${ selectedViewport.value }`,\n\t\t\t\tlabel: selectedViewport.label,\n\t\t\t} );\n\t\t}\n\t}\n\n\tif ( hasPseudoStateOptions && pseudoStateValue !== 'default' ) {\n\t\tconst selectedPseudoState = pseudoStateOptions.find(\n\t\t\t( option ) => option.value === pseudoStateValue\n\t\t);\n\n\t\tif ( selectedPseudoState ) {\n\t\t\tactiveStates.push( {\n\t\t\t\tkey: `pseudo-${ selectedPseudoState.value }`,\n\t\t\t\tlabel: selectedPseudoState.label,\n\t\t\t} );\n\t\t}\n\t}\n\n\tconst currentStateLabel = activeStates.length\n\t\t? activeStates.map( ( state ) => state.label ).join( ', ' )\n\t\t: __( 'Default' );\n\tconst icon = showText ? chevronDown : moreVertical;\n\tconst toggleProps = showText\n\t\t? { size: 'compact', iconPosition: 'right' }\n\t\t: { size: 'small' };\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"sm\"\n\t\t\talign=\"flex-end\"\n\t\t\tclassName=\"block-editor-global-styles-state-control\"\n\t\t>\n\t\t\t<DropdownMenu\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={\n\t\t\t\t\tshowText\n\t\t\t\t\t\t? triggerLabel\n\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t/* translators: %s: Current state (e.g. \"Hover\", \"Focus\") */\n\t\t\t\t\t\t\t\t__( 'State: %s' ),\n\t\t\t\t\t\t\t\tcurrentStateLabel\n\t\t\t\t\t\t  )\n\t\t\t\t}\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tplacement: 'right-start',\n\t\t\t\t\t...popoverProps,\n\t\t\t\t} }\n\t\t\t\ttext={ showText ? triggerLabel : undefined }\n\t\t\t\ttoggleProps={ toggleProps }\n\t\t\t>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ hasViewportOptions && (\n\t\t\t\t\t\t\t<MenuGroup label={ __( 'Viewport' ) }>\n\t\t\t\t\t\t\t\t{ viewportOptions.map( ( option ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ `viewport-${ option.value }` }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChangeViewport?.( option.value );\n\t\t\t\t\t\t\t\t\t\t\tif ( ! hasPseudoStateOptions ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tviewportValue === option.value\n\t\t\t\t\t\t\t\t\t\t\t\t? check\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ hasPseudoStateOptions && (\n\t\t\t\t\t\t\t<MenuGroup label={ __( 'Pseudo state' ) }>\n\t\t\t\t\t\t\t\t{ pseudoStateOptions.map( ( option ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ `pseudo-${ option.value }` }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChangePseudoState?.(\n\t\t\t\t\t\t\t\t\t\t\t\toption.value\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\tif ( ! hasViewportOptions ) {\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tpseudoStateValue === option.value\n\t\t\t\t\t\t\t\t\t\t\t\t? check\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t</Stack>\n\t);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { __, sprintf } from '@wordpress/i18n';\nimport { check, chevronDown, moreVertical } from '@wordpress/icons';\nimport { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * State control for managing viewport and pseudo-state styles.\n * Displays a dropdown menu with separate groups for each selector.\n *\n * @param {Object}   props                     Component props.\n * @param {Array}    props.viewportStates      Array of available viewport states.\n * @param {Array}    props.pseudoStates        Array of available pseudo states.\n * @param {string}   props.viewportValue       Currently selected viewport value.\n * @param {string}   props.pseudoStateValue    Currently selected pseudo state value.\n * @param {Function} props.onChangeViewport    Callback when viewport selection changes.\n * @param {Function} props.onChangePseudoState Callback when pseudo state selection changes.\n * @param {boolean}  props.showText            Whether to show text label on the toggle. Default true.\n * @param {Object}   props.popoverProps        Popover props for the dropdown menu.\n * @param {Element}  props.children            Optional menu content rendered after the state groups.\n * @return {Element|null} State control component.\n */\nexport default function StateControl( {\n\tviewportStates = [],\n\tpseudoStates = [],\n\tviewportValue = 'default',\n\tpseudoStateValue = 'default',\n\tonChangeViewport,\n\tonChangePseudoState,\n\tshowText = true,\n\tpopoverProps = {},\n\tchildren,\n} ) {\n\tif ( ! viewportStates.length && ! pseudoStates.length ) {\n\t\treturn null;\n\t}\n\n\tconst viewportOptions = [\n\t\t{ label: __( 'Default' ), value: 'default' },\n\t\t...viewportStates.map( ( state ) => ( {\n\t\t\tlabel: state.label,\n\t\t\tvalue: state.value,\n\t\t} ) ),\n\t];\n\tconst pseudoStateOptions = [\n\t\t{ label: __( 'Default' ), value: 'default' },\n\t\t...pseudoStates.map( ( state ) => ( {\n\t\t\tlabel: state.label,\n\t\t\tvalue: state.value,\n\t\t} ) ),\n\t];\n\n\tconst hasViewportOptions = viewportStates.length > 0;\n\tconst hasPseudoStateOptions = pseudoStates.length > 0;\n\tconst triggerLabel = __( 'States' );\n\tconst activeStates = [];\n\n\tif ( hasViewportOptions && viewportValue !== 'default' ) {\n\t\tconst selectedViewport = viewportOptions.find(\n\t\t\t( option ) => option.value === viewportValue\n\t\t);\n\n\t\tif ( selectedViewport ) {\n\t\t\tactiveStates.push( {\n\t\t\t\tkey: `viewport-${ selectedViewport.value }`,\n\t\t\t\tlabel: selectedViewport.label,\n\t\t\t} );\n\t\t}\n\t}\n\n\tif ( hasPseudoStateOptions && pseudoStateValue !== 'default' ) {\n\t\tconst selectedPseudoState = pseudoStateOptions.find(\n\t\t\t( option ) => option.value === pseudoStateValue\n\t\t);\n\n\t\tif ( selectedPseudoState ) {\n\t\t\tactiveStates.push( {\n\t\t\t\tkey: `pseudo-${ selectedPseudoState.value }`,\n\t\t\t\tlabel: selectedPseudoState.label,\n\t\t\t} );\n\t\t}\n\t}\n\n\tconst currentStateLabel = activeStates.length\n\t\t? activeStates.map( ( state ) => state.label ).join( ', ' )\n\t\t: __( 'Default' );\n\tconst icon = showText ? chevronDown : moreVertical;\n\tconst toggleProps = showText\n\t\t? { size: 'compact', iconPosition: 'right' }\n\t\t: { size: 'small' };\n\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"sm\"\n\t\t\talign=\"flex-end\"\n\t\t\tclassName=\"block-editor-global-styles-state-control\"\n\t\t>\n\t\t\t<DropdownMenu\n\t\t\t\ticon={ icon }\n\t\t\t\tlabel={\n\t\t\t\t\tshowText\n\t\t\t\t\t\t? triggerLabel\n\t\t\t\t\t\t: sprintf(\n\t\t\t\t\t\t\t\t/* translators: %s: Current state (e.g. \"Hover\", \"Focus\") */\n\t\t\t\t\t\t\t\t__( 'State: %s' ),\n\t\t\t\t\t\t\t\tcurrentStateLabel\n\t\t\t\t\t\t\t)\n\t\t\t\t}\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tplacement: 'right-start',\n\t\t\t\t\t...popoverProps,\n\t\t\t\t} }\n\t\t\t\ttext={ showText ? triggerLabel : undefined }\n\t\t\t\ttoggleProps={ toggleProps }\n\t\t\t>\n\t\t\t\t{ ( { onClose } ) => (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{ hasViewportOptions && (\n\t\t\t\t\t\t\t<MenuGroup label={ __( 'Viewport' ) }>\n\t\t\t\t\t\t\t\t{ viewportOptions.map( ( option ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ `viewport-${ option.value }` }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChangeViewport?.( option.value );\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t! hasPseudoStateOptions &&\n\t\t\t\t\t\t\t\t\t\t\t\t! children\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tviewportValue === option.value\n\t\t\t\t\t\t\t\t\t\t\t\t? check\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ hasPseudoStateOptions && (\n\t\t\t\t\t\t\t<MenuGroup label={ __( 'Pseudo state' ) }>\n\t\t\t\t\t\t\t\t{ pseudoStateOptions.map( ( option ) => (\n\t\t\t\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\t\t\t\tkey={ `pseudo-${ option.value }` }\n\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\tonChangePseudoState?.(\n\t\t\t\t\t\t\t\t\t\t\t\toption.value\n\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\t\t\t\t\t! hasViewportOptions &&\n\t\t\t\t\t\t\t\t\t\t\t\t! children\n\t\t\t\t\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\tpseudoStateValue === option.value\n\t\t\t\t\t\t\t\t\t\t\t\t? check\n\t\t\t\t\t\t\t\t\t\t\t\t: null\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ option.label }\n\t\t\t\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t</MenuGroup>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</>\n\t\t\t\t) }\n\t\t\t</DropdownMenu>\n\t\t</Stack>\n\t);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/global-styles/text-shadow-panel.mjs

@@ -0,0 +1,224 @@
+// packages/block-editor/src/components/global-styles/text-shadow-panel.tsx
+import { __ } from "@wordpress/i18n";
+import {
+  Button,
+  Composite,
+  Dropdown,
+  SelectControl as WCSelectControl
+} from "@wordpress/components";
+import { Stack, Text } from "@wordpress/ui";
+import { useRef, useMemo } from "@wordpress/element";
+import { shadow as textShadowIcon, Icon, check, reset } from "@wordpress/icons";
+import clsx from "clsx";
+import { useSettings } from "../use-settings/index.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var EMPTY_ARRAY = [];
+var PRESETS_SELECT_THRESHOLD = 7;
+function getTextShadowPresetSlug(rawValue) {
+  if (!rawValue || typeof rawValue !== "string") {
+    return void 0;
+  }
+  if (rawValue.startsWith("var:preset|text-shadow|")) {
+    return rawValue.replace("var:preset|text-shadow|", "");
+  }
+  const cssVarMatch = rawValue.match(
+    /^var\(--wp--preset--text-shadow--([^)]+)\)$/
+  );
+  if (cssVarMatch) {
+    return cssVarMatch[1];
+  }
+  return void 0;
+}
+function TextShadowPopover({ textShadow, onChange }) {
+  const popoverProps = {
+    placement: "left-start",
+    offset: 36,
+    shift: true,
+    className: "block-editor-global-styles__text-shadow-popover"
+  };
+  return /* @__PURE__ */ jsx(
+    Dropdown,
+    {
+      popoverProps,
+      className: "block-editor-global-styles__text-shadow-dropdown",
+      renderToggle: ({ onToggle, isOpen }) => /* @__PURE__ */ jsx(
+        TextShadowToggle,
+        {
+          textShadow,
+          onChange,
+          onToggle,
+          isOpen
+        }
+      ),
+      renderContent: () => /* @__PURE__ */ jsx(
+        TextShadowControl,
+        {
+          textShadow,
+          onChange
+        }
+      )
+    }
+  );
+}
+function TextShadowControl({ textShadow, onChange }) {
+  const [
+    defaultPresetsEnabled,
+    defaultPresets,
+    themePresets,
+    customPresets
+  ] = useSettings(
+    "typography.defaultTextShadowPresets",
+    "typography.textShadowPresets.default",
+    "typography.textShadowPresets.theme",
+    "typography.textShadowPresets.custom"
+  );
+  const presets = useMemo(
+    () => [
+      ...defaultPresetsEnabled && defaultPresets || EMPTY_ARRAY,
+      ...themePresets || EMPTY_ARRAY,
+      ...customPresets || EMPTY_ARRAY
+    ],
+    [defaultPresetsEnabled, defaultPresets, themePresets, customPresets]
+  );
+  const choices = [
+    { value: "none", label: __("None") },
+    ...presets.map((preset) => ({
+      value: `var:preset|text-shadow|${preset.slug}`,
+      label: preset.name
+    }))
+  ];
+  const activeSlug = getTextShadowPresetSlug(textShadow);
+  const activeValue = activeSlug ? `var:preset|text-shadow|${activeSlug}` : textShadow ?? "";
+  const previewValue = activeSlug ? presets.find((preset) => preset.slug === activeSlug)?.textShadow : textShadow;
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      className: "block-editor-global-styles__text-shadow",
+      direction: "column",
+      gap: "sm",
+      children: [
+        /* @__PURE__ */ jsx(Text, { variant: "heading-sm", render: /* @__PURE__ */ jsx("h2", {}), children: __("Text shadow") }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "block-editor-global-styles__text-shadow-preview",
+            style: { textShadow: previewValue },
+            children: __("Code is poetry")
+          }
+        ),
+        presets.length >= PRESETS_SELECT_THRESHOLD ? /* @__PURE__ */ jsx(
+          WCSelectControl,
+          {
+            hideLabelFromVision: true,
+            label: __("Text shadow preset"),
+            value: activeValue,
+            options: [
+              { value: "", label: __("Default") },
+              ...choices
+            ],
+            onChange
+          }
+        ) : /* @__PURE__ */ jsx(
+          Composite,
+          {
+            role: "listbox",
+            "aria-label": __("Text shadow presets"),
+            render: /* @__PURE__ */ jsx(Stack, { direction: "column" }),
+            children: choices.map(({ value, label }) => {
+              const isActive = value === activeValue;
+              return /* @__PURE__ */ jsxs(
+                Composite.Item,
+                {
+                  role: "option",
+                  "aria-selected": isActive,
+                  className: clsx(
+                    "block-editor-global-styles__text-shadow-list-item",
+                    { "is-active": isActive }
+                  ),
+                  onClick: () => onChange(value),
+                  render: /* @__PURE__ */ jsx(Button, { __next40pxDefaultSize: true }),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: label }),
+                    /* @__PURE__ */ jsx(Icon, { icon: check })
+                  ]
+                },
+                value
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(Stack, { direction: "row", justify: "flex-end", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            __next40pxDefaultSize: true,
+            variant: "tertiary",
+            onClick: () => onChange(void 0),
+            disabled: !textShadow,
+            accessibleWhenDisabled: true,
+            children: __("Clear")
+          }
+        ) })
+      ]
+    }
+  );
+}
+function TextShadowToggle({
+  textShadow,
+  onChange,
+  onToggle,
+  isOpen
+}) {
+  const buttonRef = useRef(void 0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        __next40pxDefaultSize: true,
+        onClick: onToggle,
+        className: clsx(
+          "block-editor-global-styles__text-shadow-dropdown-toggle",
+          { "is-open": isOpen }
+        ),
+        "aria-expanded": isOpen,
+        ref: buttonRef,
+        children: /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: "row",
+            justify: "flex-start",
+            align: "center",
+            gap: "sm",
+            children: [
+              /* @__PURE__ */ jsx(Icon, { icon: textShadowIcon, size: 24 }),
+              /* @__PURE__ */ jsx("span", { children: __("Text shadow") })
+            ]
+          }
+        )
+      }
+    ),
+    !!textShadow && /* @__PURE__ */ jsx(
+      Button,
+      {
+        __next40pxDefaultSize: true,
+        size: "small",
+        icon: reset,
+        onClick: () => {
+          if (isOpen) {
+            onToggle();
+          }
+          onChange(void 0);
+          buttonRef.current?.focus();
+        },
+        className: clsx(
+          "block-editor-global-styles__text-shadow-remove-button",
+          { "is-open": isOpen }
+        ),
+        label: __("Remove text shadow")
+      }
+    )
+  ] });
+}
+export {
+  TextShadowPopover
+};
+//# sourceMappingURL=text-shadow-panel.mjs.map

package/build-module/components/global-styles/text-shadow-panel.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/text-shadow-panel.tsx"],
+  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport {\n\tButton,\n\tComposite,\n\tDropdown,\n\tSelectControl as WCSelectControl,\n} from '@wordpress/components';\nimport { Stack, Text } from '@wordpress/ui';\nimport { useRef, useMemo } from '@wordpress/element';\nimport { shadow as textShadowIcon, Icon, check, reset } from '@wordpress/icons';\nimport type { TextShadowPreset } from '@wordpress/global-styles-engine';\nimport clsx from 'clsx';\nimport { useSettings } from '../use-settings';\n\ntype TextShadowValue = string | undefined;\n\ninterface TextShadowProps {\n\ttextShadow: TextShadowValue;\n\tonChange: ( textShadow: TextShadowValue ) => void;\n}\n\ninterface TextShadowToggleProps extends TextShadowProps {\n\tonToggle: () => void;\n\tisOpen: boolean;\n}\n\n/**\n * Shared reference to an empty array for cases where it is important to avoid\n * returning a new array reference on every invocation.\n */\nconst EMPTY_ARRAY: TextShadowPreset[] = [];\n\n// Above this number of presets, the list is rendered as a compact dropdown\n// rather than a long list of options.\nconst PRESETS_SELECT_THRESHOLD = 7;\n\n/**\n * Extracts the preset slug from a raw text shadow value.\n *\n * @param rawValue The stored text shadow value.\n * @return The preset slug, or undefined for custom values.\n */\nfunction getTextShadowPresetSlug( rawValue: TextShadowValue ) {\n\tif ( ! rawValue || typeof rawValue !== 'string' ) {\n\t\treturn undefined;\n\t}\n\n\t// Block supports use the `var:preset|text-shadow|slug` format.\n\tif ( rawValue.startsWith( 'var:preset|text-shadow|' ) ) {\n\t\treturn rawValue.replace( 'var:preset|text-shadow|', '' );\n\t}\n\n\t// Global styles data uses the `var(--wp--preset--text-shadow--slug)` format.\n\tconst cssVarMatch = rawValue.match(\n\t\t/^var\\(--wp--preset--text-shadow--([^)]+)\\)$/\n\t);\n\tif ( cssVarMatch ) {\n\t\treturn cssVarMatch[ 1 ];\n\t}\n\n\treturn undefined;\n}\n\nexport function TextShadowPopover( { textShadow, onChange }: TextShadowProps ) {\n\tconst popoverProps = {\n\t\tplacement: 'left-start' as const,\n\t\toffset: 36,\n\t\tshift: true,\n\t\tclassName: 'block-editor-global-styles__text-shadow-popover',\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName=\"block-editor-global-styles__text-shadow-dropdown\"\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => (\n\t\t\t\t<TextShadowToggle\n\t\t\t\t\ttextShadow={ textShadow }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\tonToggle={ onToggle }\n\t\t\t\t\tisOpen={ isOpen }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trenderContent={ () => (\n\t\t\t\t<TextShadowControl\n\t\t\t\t\ttextShadow={ textShadow }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction TextShadowControl( { textShadow, onChange }: TextShadowProps ) {\n\tconst [\n\t\tdefaultPresetsEnabled,\n\t\tdefaultPresets,\n\t\tthemePresets,\n\t\tcustomPresets,\n\t] = useSettings(\n\t\t'typography.defaultTextShadowPresets',\n\t\t'typography.textShadowPresets.default',\n\t\t'typography.textShadowPresets.theme',\n\t\t'typography.textShadowPresets.custom'\n\t) as [\n\t\tboolean | undefined,\n\t\tTextShadowPreset[] | undefined,\n\t\tTextShadowPreset[] | undefined,\n\t\tTextShadowPreset[] | undefined,\n\t];\n\n\tconst presets = useMemo(\n\t\t() => [\n\t\t\t...( ( defaultPresetsEnabled && defaultPresets ) || EMPTY_ARRAY ),\n\t\t\t...( themePresets || EMPTY_ARRAY ),\n\t\t\t...( customPresets || EMPTY_ARRAY ),\n\t\t],\n\t\t[ defaultPresetsEnabled, defaultPresets, themePresets, customPresets ]\n\t);\n\n\tconst choices = [\n\t\t{ value: 'none', label: __( 'None' ) },\n\t\t...presets.map( ( preset ) => ( {\n\t\t\tvalue: `var:preset|text-shadow|${ preset.slug }`,\n\t\t\tlabel: preset.name,\n\t\t} ) ),\n\t];\n\n\tconst activeSlug = getTextShadowPresetSlug( textShadow );\n\tconst activeValue = activeSlug\n\t\t? `var:preset|text-shadow|${ activeSlug }`\n\t\t: ( textShadow ?? '' );\n\tconst previewValue = activeSlug\n\t\t? presets.find( ( preset ) => preset.slug === activeSlug )?.textShadow\n\t\t: textShadow;\n\n\treturn (\n\t\t<Stack\n\t\t\tclassName=\"block-editor-global-styles__text-shadow\"\n\t\t\tdirection=\"column\"\n\t\t\tgap=\"sm\"\n\t\t>\n\t\t\t<Text variant=\"heading-sm\" render={ <h2 /> }>\n\t\t\t\t{ __( 'Text shadow' ) }\n\t\t\t</Text>\n\t\t\t<div\n\t\t\t\tclassName=\"block-editor-global-styles__text-shadow-preview\"\n\t\t\t\tstyle={ { textShadow: previewValue } }\n\t\t\t>\n\t\t\t\t{ __( 'Code is poetry' ) }\n\t\t\t</div>\n\t\t\t{ presets.length >= PRESETS_SELECT_THRESHOLD ? (\n\t\t\t\t<WCSelectControl\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\tlabel={ __( 'Text shadow preset' ) }\n\t\t\t\t\tvalue={ activeValue }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{ value: '', label: __( 'Default' ) },\n\t\t\t\t\t\t...choices,\n\t\t\t\t\t] }\n\t\t\t\t\tonChange={ onChange }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<Composite\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\taria-label={ __( 'Text shadow presets' ) }\n\t\t\t\t\trender={ <Stack direction=\"column\" /> }\n\t\t\t\t>\n\t\t\t\t\t{ choices.map( ( { value, label } ) => {\n\t\t\t\t\t\tconst isActive = value === activeValue;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Composite.Item\n\t\t\t\t\t\t\t\tkey={ value }\n\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\taria-selected={ isActive }\n\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t'block-editor-global-styles__text-shadow-list-item',\n\t\t\t\t\t\t\t\t\t{ 'is-active': isActive }\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\tonClick={ () => onChange( value ) }\n\t\t\t\t\t\t\t\trender={ <Button __next40pxDefaultSize /> }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span>{ label }</span>\n\t\t\t\t\t\t\t\t<Icon icon={ check } />\n\t\t\t\t\t\t\t</Composite.Item>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Composite>\n\t\t\t) }\n\t\t\t<Stack direction=\"row\" justify=\"flex-end\">\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\tonClick={ () => onChange( undefined ) }\n\t\t\t\t\tdisabled={ ! textShadow }\n\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Clear' ) }\n\t\t\t\t</Button>\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n}\n\nfunction TextShadowToggle( {\n\ttextShadow,\n\tonChange,\n\tonToggle,\n\tisOpen,\n}: TextShadowToggleProps ) {\n\tconst buttonRef = useRef< HTMLButtonElement >( undefined );\n\n\treturn (\n\t\t<>\n\t\t\t<Button\n\t\t\t\t__next40pxDefaultSize\n\t\t\t\tonClick={ onToggle }\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'block-editor-global-styles__text-shadow-dropdown-toggle',\n\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t) }\n\t\t\t\taria-expanded={ isOpen }\n\t\t\t\tref={ buttonRef }\n\t\t\t>\n\t\t\t\t<Stack\n\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\talign=\"center\"\n\t\t\t\t\tgap=\"sm\"\n\t\t\t\t>\n\t\t\t\t\t<Icon icon={ textShadowIcon } size={ 24 } />\n\t\t\t\t\t<span>{ __( 'Text shadow' ) }</span>\n\t\t\t\t</Stack>\n\t\t\t</Button>\n\t\t\t{ !! textShadow && (\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t\ticon={ reset }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tif ( isOpen ) {\n\t\t\t\t\t\t\tonToggle();\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonChange( undefined );\n\t\t\t\t\t\t// Return focus to parent button.\n\t\t\t\t\t\tbuttonRef.current?.focus();\n\t\t\t\t\t} }\n\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t'block-editor-global-styles__text-shadow-remove-button',\n\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t) }\n\t\t\t\t\tlabel={ __( 'Remove text shadow' ) }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";AAAA,SAAS,UAAU;AACnB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,OACX;AACP,SAAS,OAAO,YAAY;AAC5B,SAAS,QAAQ,eAAe;AAChC,SAAS,UAAU,gBAAgB,MAAM,OAAO,aAAa;AAE7D,OAAO,UAAU;AACjB,SAAS,mBAAmB;AAgExB,SAyIF,UAzIE,KA+FG,YA/FH;AA9CJ,IAAM,cAAkC,CAAC;AAIzC,IAAM,2BAA2B;AAQjC,SAAS,wBAAyB,UAA4B;AAC7D,MAAK,CAAE,YAAY,OAAO,aAAa,UAAW;AACjD,WAAO;AAAA,EACR;AAGA,MAAK,SAAS,WAAY,yBAA0B,GAAI;AACvD,WAAO,SAAS,QAAS,2BAA2B,EAAG;AAAA,EACxD;AAGA,QAAM,cAAc,SAAS;AAAA,IAC5B;AAAA,EACD;AACA,MAAK,aAAc;AAClB,WAAO,YAAa,CAAE;AAAA,EACvB;AAEA,SAAO;AACR;AAEO,SAAS,kBAAmB,EAAE,YAAY,SAAS,GAAqB;AAC9E,QAAM,eAAe;AAAA,IACpB,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,WAAW;AAAA,EACZ;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAU;AAAA,MACV,cAAe,CAAE,EAAE,UAAU,OAAO,MACnC;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACD;AAAA,MAED,eAAgB,MACf;AAAA,QAAC;AAAA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,MACD;AAAA;AAAA,EAEF;AAEF;AAEA,SAAS,kBAAmB,EAAE,YAAY,SAAS,GAAqB;AACvE,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAOA,QAAM,UAAU;AAAA,IACf,MAAM;AAAA,MACL,GAAO,yBAAyB,kBAAoB;AAAA,MACpD,GAAK,gBAAgB;AAAA,MACrB,GAAK,iBAAiB;AAAA,IACvB;AAAA,IACA,CAAE,uBAAuB,gBAAgB,cAAc,aAAc;AAAA,EACtE;AAEA,QAAM,UAAU;AAAA,IACf,EAAE,OAAO,QAAQ,OAAO,GAAI,MAAO,EAAE;AAAA,IACrC,GAAG,QAAQ,IAAK,CAAE,YAAc;AAAA,MAC/B,OAAO,0BAA2B,OAAO,IAAK;AAAA,MAC9C,OAAO,OAAO;AAAA,IACf,EAAI;AAAA,EACL;AAEA,QAAM,aAAa,wBAAyB,UAAW;AACvD,QAAM,cAAc,aACjB,0BAA2B,UAAW,KACpC,cAAc;AACnB,QAAM,eAAe,aAClB,QAAQ,KAAM,CAAE,WAAY,OAAO,SAAS,UAAW,GAAG,aAC1D;AAEH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,WAAU;AAAA,MACV,KAAI;AAAA,MAEJ;AAAA,4BAAC,QAAK,SAAQ,cAAa,QAAS,oBAAC,QAAG,GACrC,aAAI,aAAc,GACrB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAQ,EAAE,YAAY,aAAa;AAAA,YAEjC,aAAI,gBAAiB;AAAA;AAAA,QACxB;AAAA,QACE,QAAQ,UAAU,2BACnB;AAAA,UAAC;AAAA;AAAA,YACA,qBAAmB;AAAA,YACnB,OAAQ,GAAI,oBAAqB;AAAA,YACjC,OAAQ;AAAA,YACR,SAAU;AAAA,cACT,EAAE,OAAO,IAAI,OAAO,GAAI,SAAU,EAAE;AAAA,cACpC,GAAG;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD,IAEA;AAAA,UAAC;AAAA;AAAA,YACA,MAAK;AAAA,YACL,cAAa,GAAI,qBAAsB;AAAA,YACvC,QAAS,oBAAC,SAAM,WAAU,UAAS;AAAA,YAEjC,kBAAQ,IAAK,CAAE,EAAE,OAAO,MAAM,MAAO;AACtC,oBAAM,WAAW,UAAU;AAC3B,qBACC;AAAA,gBAAC,UAAU;AAAA,gBAAV;AAAA,kBAEA,MAAK;AAAA,kBACL,iBAAgB;AAAA,kBAChB,WAAY;AAAA,oBACX;AAAA,oBACA,EAAE,aAAa,SAAS;AAAA,kBACzB;AAAA,kBACA,SAAU,MAAM,SAAU,KAAM;AAAA,kBAChC,QAAS,oBAAC,UAAO,uBAAqB,MAAC;AAAA,kBAEvC;AAAA,wCAAC,UAAO,iBAAO;AAAA,oBACf,oBAAC,QAAK,MAAO,OAAQ;AAAA;AAAA;AAAA,gBAXf;AAAA,cAYP;AAAA,YAEF,CAAE;AAAA;AAAA,QACH;AAAA,QAED,oBAAC,SAAM,WAAU,OAAM,SAAQ,YAC9B;AAAA,UAAC;AAAA;AAAA,YACA,uBAAqB;AAAA,YACrB,SAAQ;AAAA,YACR,SAAU,MAAM,SAAU,MAAU;AAAA,YACpC,UAAW,CAAE;AAAA,YACb,wBAAsB;AAAA,YAEpB,aAAI,OAAQ;AAAA;AAAA,QACf,GACD;AAAA;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,iBAAkB;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA2B;AAC1B,QAAM,YAAY,OAA6B,MAAU;AAEzD,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,SAAU;AAAA,QACV,WAAY;AAAA,UACX;AAAA,UACA,EAAE,WAAW,OAAO;AAAA,QACrB;AAAA,QACA,iBAAgB;AAAA,QAChB,KAAM;AAAA,QAEN;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,OAAM;AAAA,YACN,KAAI;AAAA,YAEJ;AAAA,kCAAC,QAAK,MAAO,gBAAiB,MAAO,IAAK;AAAA,cAC1C,oBAAC,UAAO,aAAI,aAAc,GAAG;AAAA;AAAA;AAAA,QAC9B;AAAA;AAAA,IACD;AAAA,IACE,CAAC,CAAE,cACJ;AAAA,MAAC;AAAA;AAAA,QACA,uBAAqB;AAAA,QACrB,MAAK;AAAA,QACL,MAAO;AAAA,QACP,SAAU,MAAM;AACf,cAAK,QAAS;AACb,qBAAS;AAAA,UACV;AACA,mBAAU,MAAU;AAEpB,oBAAU,SAAS,MAAM;AAAA,QAC1B;AAAA,QACA,WAAY;AAAA,UACX;AAAA,UACA,EAAE,WAAW,OAAO;AAAA,QACrB;AAAA,QACA,OAAQ,GAAI,oBAAqB;AAAA;AAAA,IAClC;AAAA,KAEF;AAEF;",
+  "names": []
+}

package/build-module/components/global-styles/typography-panel.mjs

@@ -18,6 +18,7 @@ import TextTransformControl from "../text-transform-control/index.mjs";
 import TextDecorationControl from "../text-decoration-control/index.mjs";
 import TextIndentControl from "../text-indent-control/index.mjs";
 import WritingModeControl from "../writing-mode-control/index.mjs";
+import { TextShadowPopover } from "./text-shadow-panel.mjs";
 import ColorGradientDropdownItem from "./color-gradient-dropdown-item.mjs";
 import { useHasTextPanel } from "./color-panel.mjs";
 import { useColorGradientSettings } from "./hooks.mjs";
@@ -35,7 +36,7 @@ import { getFontStylesAndWeights } from "../../utils/get-font-styles-and-weights
 import {
   getInheritanceProps,
   InheritanceToolsPanelItem,
-  isGlobalStylesInheritanceEnabled
+  isGlobalStylesInheritanceIndicatorUIEnabled
 } from "./inheritance/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var MIN_TEXT_COLUMNS = 1;
@@ -61,7 +62,8 @@ function useHasTypographyPanel(settings) {
   const hasTextColumns = useHasTextColumnsControl(settings);
   const hasFontSize = useHasFontSizeControl(settings);
   const hasTextColor = useHasTextPanel(settings);
-  return hasFontFamily || hasLineHeight || hasFontAppearance || hasLetterSpacing || hasTextAlign || hasTextTransform || hasFontSize || hasTextDecoration || hasTextIndent || hasWritingMode || hasTextColumns || hasTextColor;
+  const hasTextShadow = useHasTextShadowControl(settings);
+  return hasFontFamily || hasLineHeight || hasFontAppearance || hasLetterSpacing || hasTextAlign || hasTextTransform || hasFontSize || hasTextDecoration || hasTextIndent || hasWritingMode || hasTextColumns || hasTextColor || hasTextShadow;
 }
 function useHasFontSizeControl(settings) {
   return settings?.typography?.defaultFontSizes !== false && settings?.typography?.fontSizes?.default?.length || settings?.typography?.fontSizes?.theme?.length || settings?.typography?.fontSizes?.custom?.length || settings?.typography?.customFontSize;
@@ -107,6 +109,9 @@ function useHasTextColumnsControl(settings) {
 function useHasTextIndentControl(settings) {
   return settings?.typography?.textIndent;
 }
+function useHasTextShadowControl(settings) {
+  return settings?.typography?.textShadow;
+}
 function getMergedFontSizes(settings) {
   const fontSizes = settings?.typography?.fontSizes;
   const defaultFontSizesEnabled = !!settings?.typography?.defaultFontSizes;
@@ -152,7 +157,8 @@ var DEFAULT_CONTROLS = {
   textDecoration: true,
   textIndent: true,
   writingMode: true,
-  textColumns: true
+  textColumns: true,
+  textShadow: true
 };
 var EMPTY_VALUES = [void 0, null, ""];
 function hasValue(value) {
@@ -174,7 +180,7 @@ function TypographyPanel({
   panelId,
   defaultControls = DEFAULT_CONTROLS,
   isGlobalStyles = false,
-  showInheritanceLabelIndicators = isGlobalStylesInheritanceEnabled(),
+  showInheritanceLabelIndicators = isGlobalStylesInheritanceIndicatorUIEnabled(),
   contrastWarning
 }) {
   const { colors, allColors, areCustomSolidsEnabled, decodeValue } = useColorGradientSettings(settings);
@@ -194,8 +200,7 @@ function TypographyPanel({
       newSlug
     );
     let changedObject = setImmutably(value, ["color", "text"], encoded);
-    const syncLinkColor = isGlobalStylesInheritanceEnabled() ? shouldSyncLinkColor(value, inheritedValue) : inheritedValue?.color?.text === inheritedValue?.elements?.link?.color?.text;
-    if (syncLinkColor) {
+    if (shouldSyncLinkColor(value, inheritedValue)) {
       changedObject = setImmutably(
         changedObject,
         ["elements", "link", "color", "text"],
@@ -548,6 +553,21 @@ function TypographyPanel({
   };
   const hasTextAlign = () => hasValue(value?.typography?.textAlign);
   const resetTextAlign = () => setTextAlign(void 0);
+  const hasTextShadowControl = useHasTextShadowControl(settings);
+  const inheritedTextShadow = inheritedValue?.typography?.textShadow;
+  const textShadow = value?.typography?.textShadow ?? inheritedTextShadow;
+  const isTextShadowPlaceholder = !hasValue(value?.typography?.textShadow) && hasValue(inheritedTextShadow);
+  const setTextShadow = (newValue) => {
+    onChange(
+      setImmutably(
+        value,
+        ["typography", "textShadow"],
+        newValue || void 0
+      )
+    );
+  };
+  const hasTextShadow = () => hasValue(value?.typography?.textShadow);
+  const resetTextShadow = () => setTextShadow(void 0);
   const resetAllFilter = useCallback(
     (previousValue) => {
       if (!hasTextColorEnabled) {
@@ -874,6 +894,27 @@ function TypographyPanel({
             )
           }
         ),
+        hasTextShadowControl && /* @__PURE__ */ jsx(
+          InheritanceToolsPanelItem,
+          {
+            ...inheritanceProps(
+              isTextShadowPlaceholder,
+              hasTextShadow() && inheritedTextShadow !== void 0
+            ),
+            label: __("Text shadow"),
+            hasValue: hasTextShadow,
+            onDeselect: resetTextShadow,
+            isShownByDefault: defaultControls.textShadow,
+            panelId,
+            children: /* @__PURE__ */ jsx(
+              TextShadowPopover,
+              {
+                textShadow,
+                onChange: setTextShadow
+              }
+            )
+          }
+        ),
         hasTextAlignmentControl && /* @__PURE__ */ jsxs(
           InheritanceToolsPanelItem,
           {