@wordpress/global-styles-ui 1.12.0 → 1.12.1-next.v.202605131006.0

package/build-module/screen-block.mjs

@@ -24,7 +24,7 @@ import {
 import { useStyle, useSetting } from "./hooks.mjs";
 import { GlobalStylesContext } from "./context.mjs";
 import { unlock } from "./lock-unlock.mjs";
-import { getValidStates } from "./utils.mjs";
+import { getValidPseudoStates, getValidViewportStates } from "./utils.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var BACKGROUND_BLOCK_DEFAULT_VALUES = {
   backgroundSize: "cover",
@@ -83,22 +83,28 @@ function ScreenBlock({ name, variation }) {
     prefixParts = ["variations", variation].concat(prefixParts);
   }
   const prefix = prefixParts.join(".");
-  const [selectedState, setSelectedState] = useState("default");
-  const validStates = useMemo(() => getValidStates(name), [name]);
-  const stateParam = selectedState !== "default" ? selectedState : void 0;
+  const [selectedViewport, setSelectedViewport] = useState("default");
+  const [selectedPseudoState, setSelectedPseudoState] = useState("default");
+  const validViewportStates = useMemo(() => getValidViewportStates(), []);
+  const validPseudoStates = useMemo(
+    () => getValidPseudoStates(name),
+    [name]
+  );
+  const stateParam = [selectedViewport, selectedPseudoState].filter((value) => value !== "default").join(".");
+  const hasSelectedState = stateParam.length > 0;
   const [style, setStyle] = useStyle(
     prefix,
     name,
     "user",
     false,
-    stateParam
+    hasSelectedState ? stateParam : void 0
   );
   const [inheritedStyle] = useStyle(
     prefix,
     name,
     "merged",
     false,
-    stateParam
+    hasSelectedState ? stateParam : void 0
   );
   const [userSettings] = useSetting("", name, "user");
   const [rawSettings, setSettings] = useSetting("", name);
@@ -134,6 +140,7 @@ function ScreenBlock({ name, variation }) {
   const hasBorderPanel = useHasBorderPanel(settings);
   const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasFiltersPanel = useHasFiltersPanel(settings);
+  const shouldShowFiltersPanel = hasFiltersPanel && selectedViewport === "default";
   const hasImageSettingsPanel = useHasImageSettingsPanel(
     name,
     userSettings,
@@ -191,9 +198,10 @@ function ScreenBlock({ name, variation }) {
   const onChangeTypography = (newStyle) => {
     const { settings: newSettings, ...styleWithoutSettings } = newStyle;
     if (newSettings?.typography) {
+      const stylePathForState = [prefix, stateParam].filter(Boolean).join(".");
       let updatedConfig = setStyleHelper(
         userConfig,
-        prefix,
+        stylePathForState,
         styleWithoutSettings,
         name
       );
@@ -236,9 +244,12 @@ function ScreenBlock({ name, variation }) {
       ScreenHeader,
       {
         title: variation ? currentBlockStyle?.label : blockType?.title,
-        states: validStates,
-        selectedState,
-        onChangeState: setSelectedState
+        viewportStates: validViewportStates,
+        pseudoStates: validPseudoStates,
+        selectedViewport,
+        selectedPseudoState,
+        onChangeViewport: setSelectedViewport,
+        onChangePseudoState: setSelectedPseudoState
       }
     ),
     /* @__PURE__ */ jsx(
@@ -246,8 +257,8 @@ function ScreenBlock({ name, variation }) {
       {
         name,
         variation,
-        selectedState,
-        stateStyles: selectedState !== "default" ? style : void 0
+        selectedState: hasSelectedState ? stateParam : "default",
+        stateStyles: hasSelectedState ? style : void 0
       }
     ),
     hasVariationsPanel && /* @__PURE__ */ jsx("div", { className: "global-styles-ui-screen-variations", children: /* @__PURE__ */ jsxs(VStack, { spacing: 3, children: [
@@ -280,7 +291,7 @@ function ScreenBlock({ name, variation }) {
         value: style,
         onChange: onChangeTypography,
         settings,
-        isGlobalStyles: true
+        isGlobalStyles: !hasSelectedState
       }
     ),
     hasDimensionsPanel && /* @__PURE__ */ jsx(
@@ -302,7 +313,7 @@ function ScreenBlock({ name, variation }) {
         settings
       }
     ),
-    hasFiltersPanel && /* @__PURE__ */ jsx(
+    shouldShowFiltersPanel && /* @__PURE__ */ jsx(
       StylesFiltersPanel,
       {
         inheritedValue: inheritedStyleWithLayout,
@@ -312,7 +323,7 @@ function ScreenBlock({ name, variation }) {
         includeLayoutControls: true
       }
     ),
-    hasImageSettingsPanel && /* @__PURE__ */ jsx(
+    hasImageSettingsPanel && !hasSelectedState && /* @__PURE__ */ jsx(
       ImageSettingsPanel,
       {
         onChange: onChangeLightbox,

package/build-module/screen-block.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/screen-block.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useContext, useMemo, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\tPanelBody,\n\t__experimentalVStack as VStack,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tsetStyle as setStyleHelper,\n\tsetSetting as setSettingHelper,\n} from '@wordpress/global-styles-engine';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { Subtitle } from './subtitle';\nimport {\n\tuseBlockVariations,\n\tVariationsPanel,\n} from './variations/variations-panel';\nimport { useStyle, useSetting } from './hooks';\nimport { GlobalStylesContext } from './context';\nimport { unlock } from './lock-unlock';\nimport { getValidStates } from './utils';\n\n// Initial control values.\nconst BACKGROUND_BLOCK_DEFAULT_VALUES = {\n\tbackgroundSize: 'cover',\n\tbackgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.\n};\n\nfunction applyFallbackStyle( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tconst hasColorOrWidth = border.color || border.width;\n\n\tif ( ! border.style && hasColorOrWidth ) {\n\t\treturn { ...border, style: 'solid' };\n\t}\n\n\tif ( border.style && ! hasColorOrWidth ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n}\n\nfunction applyAllFallbackStyles( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tif ( hasSplitBorders( border ) ) {\n\t\treturn {\n\t\t\ttop: applyFallbackStyle( border.top ),\n\t\t\tright: applyFallbackStyle( border.right ),\n\t\t\tbottom: applyFallbackStyle( border.bottom ),\n\t\t\tleft: applyFallbackStyle( border.left ),\n\t\t};\n\t}\n\n\treturn applyFallbackStyle( border );\n}\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n\tuseHasFiltersPanel,\n\tuseHasImageSettingsPanel,\n\tuseHasBackgroundPanel,\n\tBackgroundPanel: StylesBackgroundPanel,\n\tBorderPanel: StylesBorderPanel,\n\tColorPanel: StylesColorPanel,\n\tTypographyPanel: StylesTypographyPanel,\n\tDimensionsPanel: StylesDimensionsPanel,\n\tFiltersPanel: StylesFiltersPanel,\n\tImageSettingsPanel,\n\tAdvancedPanel: StylesAdvancedPanel,\n} = unlock( blockEditorPrivateApis );\n\ninterface ScreenBlockProps {\n\tname: string;\n\tvariation?: string;\n}\n\nfunction ScreenBlock( { name, variation }: ScreenBlockProps ) {\n\tconst { user: userConfig, onChange: onChangeGlobalStyles } =\n\t\tuseContext( GlobalStylesContext );\n\n\tlet prefixParts: string[] = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\t// State selector state\n\tconst [ selectedState, setSelectedState ] = useState< string >( 'default' );\n\tconst validStates = useMemo( () => getValidStates( name ), [ name ] );\n\n\tconst stateParam = selectedState !== 'default' ? selectedState : undefined;\n\tconst [ style, setStyle ] = useStyle(\n\t\tprefix,\n\t\tname,\n\t\t'user',\n\t\tfalse,\n\t\tstateParam\n\t);\n\tconst [ inheritedStyle ] = useStyle(\n\t\tprefix,\n\t\tname,\n\t\t'merged',\n\t\tfalse,\n\t\tstateParam\n\t);\n\n\tconst [ userSettings ] = useSetting( '', name, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '', name );\n\tconst settingsForBlockElement = useSettingsForBlockElement(\n\t\trawSettings,\n\t\tname\n\t);\n\tconst blockType = getBlockType( name );\n\n\t// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.\n\tlet disableBlockGap = false;\n\tif (\n\t\tsettingsForBlockElement?.spacing?.blockGap &&\n\t\tblockType?.supports?.spacing?.blockGap &&\n\t\t( blockType?.supports?.spacing?.__experimentalSkipSerialization ===\n\t\t\ttrue ||\n\t\t\tblockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(\n\t\t\t\t( spacingType: string ) => spacingType === 'blockGap'\n\t\t\t) )\n\t) {\n\t\tdisableBlockGap = true;\n\t}\n\n\t// Only allow `aspectRatio` support if the block is not the grouping block.\n\t// The grouping block allows the user to use Group, Row and Stack variations,\n\t// and it is highly likely that the user will not want to set an aspect ratio\n\t// for all three at once. Until there is the ability to set a different aspect\n\t// ratio for each variation, we disable the aspect ratio controls for the\n\t// grouping block in global styles.\n\tlet disableAspectRatio = false;\n\tif (\n\t\tsettingsForBlockElement?.dimensions?.aspectRatio &&\n\t\tname === 'core/group'\n\t) {\n\t\tdisableAspectRatio = true;\n\t}\n\n\tconst settings = useMemo( () => {\n\t\tconst updatedSettings = structuredClone( settingsForBlockElement );\n\t\tif ( disableBlockGap ) {\n\t\t\tupdatedSettings.spacing.blockGap = false;\n\t\t}\n\t\tif ( disableAspectRatio ) {\n\t\t\tupdatedSettings.dimensions.aspectRatio = false;\n\t\t}\n\t\treturn updatedSettings;\n\t}, [ settingsForBlockElement, disableBlockGap, disableAspectRatio ] );\n\n\tconst blockVariations = useBlockVariations( name );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasFiltersPanel = useHasFiltersPanel( settings );\n\tconst hasImageSettingsPanel = useHasImageSettingsPanel(\n\t\tname,\n\t\tuserSettings,\n\t\tsettings\n\t);\n\tconst hasVariationsPanel = !! blockVariations?.length && ! variation;\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! ( globalStyles as GlobalStylesConfig )?._links?.[\n\t\t\t\t'wp:action-edit-css'\n\t\t\t],\n\t\t};\n\t}, [] );\n\tconst currentBlockStyle = variation\n\t\t? blockVariations.find( ( s: any ) => s.name === variation )\n\t\t: null;\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\tconst onChangeDimensions = ( newStyle: any ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tsetSettings( {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeLightbox = ( newSetting: any ) => {\n\t\t// If the newSetting is undefined, this means that the user has deselected\n\t\t// (reset) the lightbox setting.\n\t\tif ( newSetting === undefined ) {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: undefined,\n\t\t\t} );\n\n\t\t\t// Otherwise, we simply set the lightbox setting to the new value but\n\t\t\t// taking care of not overriding the other lightbox settings.\n\t\t} else {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: {\n\t\t\t\t\t...rawSettings.lightbox,\n\t\t\t\t\t...newSetting,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onChangeTypography = ( newStyle: any ) => {\n\t\t// Extract settings if present (e.g., from textIndent toggle)\n\t\tconst { settings: newSettings, ...styleWithoutSettings } = newStyle;\n\n\t\t// If there are settings changes, we need to update both styles and\n\t\t// settings atomically to avoid race conditions.\n\t\tif ( newSettings?.typography ) {\n\t\t\tlet updatedConfig = setStyleHelper(\n\t\t\t\tuserConfig,\n\t\t\t\tprefix,\n\t\t\t\tstyleWithoutSettings,\n\t\t\t\tname\n\t\t\t);\n\t\t\tupdatedConfig = setSettingHelper(\n\t\t\t\tupdatedConfig,\n\t\t\t\t'typography',\n\t\t\t\t{\n\t\t\t\t\t...userSettings.typography,\n\t\t\t\t\t...newSettings.typography,\n\t\t\t\t},\n\t\t\t\tname\n\t\t\t);\n\t\t\tonChangeGlobalStyles( updatedConfig );\n\t\t} else {\n\t\t\tsetStyle( styleWithoutSettings );\n\t\t}\n\t};\n\tconst onChangeBorders = ( newStyle: any ) => {\n\t\tif ( ! newStyle?.border ) {\n\t\t\tsetStyle( newStyle );\n\t\t\treturn;\n\t\t}\n\n\t\t// As Global Styles can't conditionally generate styles based on if\n\t\t// other style properties have been set, we need to force split\n\t\t// border definitions for user set global border styles. Border\n\t\t// radius is derived from the same property i.e. `border.radius` if\n\t\t// it is a string that is used. The longhand border radii styles are\n\t\t// only generated if that property is an object.\n\t\t//\n\t\t// For borders (color, style, and width) those are all properties on\n\t\t// the `border` style property. This means if the theme.json defined\n\t\t// split borders and the user condenses them into a flat border or\n\t\t// vice-versa we'd get both sets of styles which would conflict.\n\t\tconst { radius, ...newBorder } = newStyle.border;\n\t\tconst border = applyAllFallbackStyles( newBorder );\n\t\tconst updatedBorder = ! hasSplitBorders( border )\n\t\t\t? {\n\t\t\t\t\ttop: border,\n\t\t\t\t\tright: border,\n\t\t\t\t\tbottom: border,\n\t\t\t\t\tleft: border,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tcolor: null,\n\t\t\t\t\tstyle: null,\n\t\t\t\t\twidth: null,\n\t\t\t\t\t...border,\n\t\t\t  };\n\n\t\tsetStyle( { ...newStyle, border: { ...updatedBorder, radius } } );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={\n\t\t\t\t\tvariation ? currentBlockStyle?.label! : blockType?.title!\n\t\t\t\t}\n\t\t\t\tstates={ validStates }\n\t\t\t\tselectedState={ selectedState }\n\t\t\t\tonChangeState={ setSelectedState }\n\t\t\t/>\n\t\t\t<BlockPreviewPanel\n\t\t\t\tname={ name }\n\t\t\t\tvariation={ variation }\n\t\t\t\tselectedState={ selectedState }\n\t\t\t\tstateStyles={ selectedState !== 'default' ? style : undefined }\n\t\t\t/>\n\t\t\t{ hasVariationsPanel && (\n\t\t\t\t<div className=\"global-styles-ui-screen-variations\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Style Variations' ) }</Subtitle>\n\t\t\t\t\t\t<VariationsPanel name={ name } />\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<StylesColorPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBackgroundPanel && (\n\t\t\t\t<StylesBackgroundPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tdefaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<StylesTypographyPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeTypography }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tisGlobalStyles\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<StylesDimensionsPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ onChangeDimensions }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<StylesBorderPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeBorders }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasFiltersPanel && (\n\t\t\t\t<StylesFiltersPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasImageSettingsPanel && (\n\t\t\t\t<ImageSettingsPanel\n\t\t\t\t\tonChange={ onChangeLightbox }\n\t\t\t\t\tvalue={ userSettings }\n\t\t\t\t\tinheritedValue={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ canEditCSS && (\n\t\t\t\t<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>\n\t\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\thelp={ sprintf(\n\t\t\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tblockType?.title!\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { getBlockType } from '@wordpress/blocks';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useContext, useMemo, useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\tPanelBody,\n\t__experimentalVStack as VStack,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport {\n\tsetStyle as setStyleHelper,\n\tsetSetting as setSettingHelper,\n} from '@wordpress/global-styles-engine';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { Subtitle } from './subtitle';\nimport {\n\tuseBlockVariations,\n\tVariationsPanel,\n} from './variations/variations-panel';\nimport { useStyle, useSetting } from './hooks';\nimport { GlobalStylesContext } from './context';\nimport { unlock } from './lock-unlock';\nimport { getValidPseudoStates, getValidViewportStates } from './utils';\n\n// Initial control values.\nconst BACKGROUND_BLOCK_DEFAULT_VALUES = {\n\tbackgroundSize: 'cover',\n\tbackgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.\n};\n\nfunction applyFallbackStyle( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tconst hasColorOrWidth = border.color || border.width;\n\n\tif ( ! border.style && hasColorOrWidth ) {\n\t\treturn { ...border, style: 'solid' };\n\t}\n\n\tif ( border.style && ! hasColorOrWidth ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n}\n\nfunction applyAllFallbackStyles( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tif ( hasSplitBorders( border ) ) {\n\t\treturn {\n\t\t\ttop: applyFallbackStyle( border.top ),\n\t\t\tright: applyFallbackStyle( border.right ),\n\t\t\tbottom: applyFallbackStyle( border.bottom ),\n\t\t\tleft: applyFallbackStyle( border.left ),\n\t\t};\n\t}\n\n\treturn applyFallbackStyle( border );\n}\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n\tuseHasFiltersPanel,\n\tuseHasImageSettingsPanel,\n\tuseHasBackgroundPanel,\n\tBackgroundPanel: StylesBackgroundPanel,\n\tBorderPanel: StylesBorderPanel,\n\tColorPanel: StylesColorPanel,\n\tTypographyPanel: StylesTypographyPanel,\n\tDimensionsPanel: StylesDimensionsPanel,\n\tFiltersPanel: StylesFiltersPanel,\n\tImageSettingsPanel,\n\tAdvancedPanel: StylesAdvancedPanel,\n} = unlock( blockEditorPrivateApis );\n\ninterface ScreenBlockProps {\n\tname: string;\n\tvariation?: string;\n}\n\nfunction ScreenBlock( { name, variation }: ScreenBlockProps ) {\n\tconst { user: userConfig, onChange: onChangeGlobalStyles } =\n\t\tuseContext( GlobalStylesContext );\n\n\tlet prefixParts: string[] = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\t// State selector state\n\tconst [ selectedViewport, setSelectedViewport ] =\n\t\tuseState< string >( 'default' );\n\tconst [ selectedPseudoState, setSelectedPseudoState ] =\n\t\tuseState< string >( 'default' );\n\tconst validViewportStates = useMemo( () => getValidViewportStates(), [] );\n\tconst validPseudoStates = useMemo(\n\t\t() => getValidPseudoStates( name ),\n\t\t[ name ]\n\t);\n\n\tconst stateParam = [ selectedViewport, selectedPseudoState ]\n\t\t.filter( ( value ) => value !== 'default' )\n\t\t.join( '.' );\n\tconst hasSelectedState = stateParam.length > 0;\n\tconst [ style, setStyle ] = useStyle(\n\t\tprefix,\n\t\tname,\n\t\t'user',\n\t\tfalse,\n\t\thasSelectedState ? stateParam : undefined\n\t);\n\tconst [ inheritedStyle ] = useStyle(\n\t\tprefix,\n\t\tname,\n\t\t'merged',\n\t\tfalse,\n\t\thasSelectedState ? stateParam : undefined\n\t);\n\n\tconst [ userSettings ] = useSetting( '', name, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '', name );\n\tconst settingsForBlockElement = useSettingsForBlockElement(\n\t\trawSettings,\n\t\tname\n\t);\n\tconst blockType = getBlockType( name );\n\n\t// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.\n\tlet disableBlockGap = false;\n\tif (\n\t\tsettingsForBlockElement?.spacing?.blockGap &&\n\t\tblockType?.supports?.spacing?.blockGap &&\n\t\t( blockType?.supports?.spacing?.__experimentalSkipSerialization ===\n\t\t\ttrue ||\n\t\t\tblockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(\n\t\t\t\t( spacingType: string ) => spacingType === 'blockGap'\n\t\t\t) )\n\t) {\n\t\tdisableBlockGap = true;\n\t}\n\n\t// Only allow `aspectRatio` support if the block is not the grouping block.\n\t// The grouping block allows the user to use Group, Row and Stack variations,\n\t// and it is highly likely that the user will not want to set an aspect ratio\n\t// for all three at once. Until there is the ability to set a different aspect\n\t// ratio for each variation, we disable the aspect ratio controls for the\n\t// grouping block in global styles.\n\tlet disableAspectRatio = false;\n\tif (\n\t\tsettingsForBlockElement?.dimensions?.aspectRatio &&\n\t\tname === 'core/group'\n\t) {\n\t\tdisableAspectRatio = true;\n\t}\n\n\tconst settings = useMemo( () => {\n\t\tconst updatedSettings = structuredClone( settingsForBlockElement );\n\t\tif ( disableBlockGap ) {\n\t\t\tupdatedSettings.spacing.blockGap = false;\n\t\t}\n\t\tif ( disableAspectRatio ) {\n\t\t\tupdatedSettings.dimensions.aspectRatio = false;\n\t\t}\n\t\treturn updatedSettings;\n\t}, [ settingsForBlockElement, disableBlockGap, disableAspectRatio ] );\n\n\tconst blockVariations = useBlockVariations( name );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasFiltersPanel = useHasFiltersPanel( settings );\n\tconst shouldShowFiltersPanel =\n\t\thasFiltersPanel && selectedViewport === 'default';\n\tconst hasImageSettingsPanel = useHasImageSettingsPanel(\n\t\tname,\n\t\tuserSettings,\n\t\tsettings\n\t);\n\tconst hasVariationsPanel = !! blockVariations?.length && ! variation;\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! ( globalStyles as GlobalStylesConfig )?._links?.[\n\t\t\t\t'wp:action-edit-css'\n\t\t\t],\n\t\t};\n\t}, [] );\n\tconst currentBlockStyle = variation\n\t\t? blockVariations.find( ( s: any ) => s.name === variation )\n\t\t: null;\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\tconst onChangeDimensions = ( newStyle: any ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tsetSettings( {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeLightbox = ( newSetting: any ) => {\n\t\t// If the newSetting is undefined, this means that the user has deselected\n\t\t// (reset) the lightbox setting.\n\t\tif ( newSetting === undefined ) {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: undefined,\n\t\t\t} );\n\n\t\t\t// Otherwise, we simply set the lightbox setting to the new value but\n\t\t\t// taking care of not overriding the other lightbox settings.\n\t\t} else {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: {\n\t\t\t\t\t...rawSettings.lightbox,\n\t\t\t\t\t...newSetting,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onChangeTypography = ( newStyle: any ) => {\n\t\t// Extract settings if present (e.g., from textIndent toggle)\n\t\tconst { settings: newSettings, ...styleWithoutSettings } = newStyle;\n\n\t\t// If there are settings changes, we need to update both styles and\n\t\t// settings atomically to avoid race conditions.\n\t\tif ( newSettings?.typography ) {\n\t\t\t// Build the state-aware path so that viewport styles (e.g. mobile)\n\t\t\t// are written to the correct sub-path and do not overwrite the default.\n\t\t\tconst stylePathForState = [ prefix, stateParam ]\n\t\t\t\t.filter( Boolean )\n\t\t\t\t.join( '.' );\n\t\t\tlet updatedConfig = setStyleHelper(\n\t\t\t\tuserConfig,\n\t\t\t\tstylePathForState,\n\t\t\t\tstyleWithoutSettings,\n\t\t\t\tname\n\t\t\t);\n\t\t\tupdatedConfig = setSettingHelper(\n\t\t\t\tupdatedConfig,\n\t\t\t\t'typography',\n\t\t\t\t{\n\t\t\t\t\t...userSettings.typography,\n\t\t\t\t\t...newSettings.typography,\n\t\t\t\t},\n\t\t\t\tname\n\t\t\t);\n\t\t\tonChangeGlobalStyles( updatedConfig );\n\t\t} else {\n\t\t\tsetStyle( styleWithoutSettings );\n\t\t}\n\t};\n\tconst onChangeBorders = ( newStyle: any ) => {\n\t\tif ( ! newStyle?.border ) {\n\t\t\tsetStyle( newStyle );\n\t\t\treturn;\n\t\t}\n\n\t\t// As Global Styles can't conditionally generate styles based on if\n\t\t// other style properties have been set, we need to force split\n\t\t// border definitions for user set global border styles. Border\n\t\t// radius is derived from the same property i.e. `border.radius` if\n\t\t// it is a string that is used. The longhand border radii styles are\n\t\t// only generated if that property is an object.\n\t\t//\n\t\t// For borders (color, style, and width) those are all properties on\n\t\t// the `border` style property. This means if the theme.json defined\n\t\t// split borders and the user condenses them into a flat border or\n\t\t// vice-versa we'd get both sets of styles which would conflict.\n\t\tconst { radius, ...newBorder } = newStyle.border;\n\t\tconst border = applyAllFallbackStyles( newBorder );\n\t\tconst updatedBorder = ! hasSplitBorders( border )\n\t\t\t? {\n\t\t\t\t\ttop: border,\n\t\t\t\t\tright: border,\n\t\t\t\t\tbottom: border,\n\t\t\t\t\tleft: border,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tcolor: null,\n\t\t\t\t\tstyle: null,\n\t\t\t\t\twidth: null,\n\t\t\t\t\t...border,\n\t\t\t  };\n\n\t\tsetStyle( { ...newStyle, border: { ...updatedBorder, radius } } );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={\n\t\t\t\t\tvariation ? currentBlockStyle?.label! : blockType?.title!\n\t\t\t\t}\n\t\t\t\tviewportStates={ validViewportStates }\n\t\t\t\tpseudoStates={ validPseudoStates }\n\t\t\t\tselectedViewport={ selectedViewport }\n\t\t\t\tselectedPseudoState={ selectedPseudoState }\n\t\t\t\tonChangeViewport={ setSelectedViewport }\n\t\t\t\tonChangePseudoState={ setSelectedPseudoState }\n\t\t\t/>\n\t\t\t<BlockPreviewPanel\n\t\t\t\tname={ name }\n\t\t\t\tvariation={ variation }\n\t\t\t\tselectedState={ hasSelectedState ? stateParam : 'default' }\n\t\t\t\tstateStyles={ hasSelectedState ? style : undefined }\n\t\t\t/>\n\t\t\t{ hasVariationsPanel && (\n\t\t\t\t<div className=\"global-styles-ui-screen-variations\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Style Variations' ) }</Subtitle>\n\t\t\t\t\t\t<VariationsPanel name={ name } />\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<StylesColorPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBackgroundPanel && (\n\t\t\t\t<StylesBackgroundPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tdefaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<StylesTypographyPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeTypography }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t// Only expose global-settings controls (e.g. \"Indent all\n\t\t\t\t\t// paragraphs\") when not editing a state-specific variation,\n\t\t\t\t\t// because those settings are global and cannot be per-breakpoint.\n\t\t\t\t\tisGlobalStyles={ ! hasSelectedState }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<StylesDimensionsPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ onChangeDimensions }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<StylesBorderPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeBorders }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ shouldShowFiltersPanel && (\n\t\t\t\t<StylesFiltersPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasImageSettingsPanel && ! hasSelectedState && (\n\t\t\t\t<ImageSettingsPanel\n\t\t\t\t\tonChange={ onChangeLightbox }\n\t\t\t\t\tvalue={ userSettings }\n\t\t\t\t\tinheritedValue={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ canEditCSS && (\n\t\t\t\t<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>\n\t\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\thelp={ sprintf(\n\t\t\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tblockType?.title!\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/screen-header.mjs

@@ -18,12 +18,15 @@ function ScreenHeader({
   title,
   description,
   onBack,
-  states,
-  selectedState = "default",
-  onChangeState
+  viewportStates,
+  pseudoStates,
+  selectedViewport = "default",
+  selectedPseudoState = "default",
+  onChangeViewport,
+  onChangePseudoState
 }) {
   return /* @__PURE__ */ jsx(VStack, { spacing: 0, children: /* @__PURE__ */ jsx(View, { children: /* @__PURE__ */ jsx(Spacer, { marginBottom: 0, paddingX: 4, paddingY: 3, children: /* @__PURE__ */ jsxs(VStack, { spacing: 2, children: [
-    /* @__PURE__ */ jsxs(HStack, { spacing: 2, children: [
+    /* @__PURE__ */ jsxs(HStack, { spacing: 2, alignment: "top", children: [
       /* @__PURE__ */ jsx(
         Navigator.BackButton,
         {
@@ -33,32 +36,28 @@ function ScreenHeader({
           onClick: onBack
         }
       ),
-      /* @__PURE__ */ jsx(Spacer, { children: /* @__PURE__ */ jsxs(
-        HStack,
-        {
-          justify: "space-between",
-          alignment: "center",
-          children: [
-            /* @__PURE__ */ jsx(
-              Heading,
-              {
-                className: "global-styles-ui-header",
-                level: 2,
-                size: 13,
-                children: title
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              StateControl,
-              {
-                states,
-                value: selectedState,
-                onChange: onChangeState
-              }
-            )
-          ]
-        }
-      ) })
+      /* @__PURE__ */ jsx(Spacer, { children: /* @__PURE__ */ jsxs(HStack, { justify: "space-between", alignment: "top", children: [
+        /* @__PURE__ */ jsx(
+          Heading,
+          {
+            className: "global-styles-ui-header",
+            level: 2,
+            size: 13,
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          StateControl,
+          {
+            viewportStates,
+            pseudoStates,
+            viewportValue: selectedViewport,
+            pseudoStateValue: selectedPseudoState,
+            onChangeViewport,
+            onChangePseudoState
+          }
+        )
+      ] }) })
     ] }),
     description && /* @__PURE__ */ jsx(WCText, { className: "global-styles-ui-header__description", children: description })
   ] }) }) }) });

package/build-module/screen-header.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/screen-header.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\t__experimentalText as WCText,\n\tNavigator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport type { StateDefinition } from './utils';\nimport { unlock } from './lock-unlock';\n\nconst { StateControl } = unlock( blockEditorPrivateApis );\n\ninterface ScreenHeaderProps {\n\ttitle: string;\n\tdescription?: string | React.ReactElement;\n\tonBack?: () => void;\n\tstates?: StateDefinition[];\n\tselectedState?: string;\n\tonChangeState?: ( value: string ) => void;\n}\n\nexport function ScreenHeader( {\n\ttitle,\n\tdescription,\n\tonBack,\n\tstates,\n\tselectedState = 'default',\n\tonChangeState,\n}: ScreenHeaderProps ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t\t<HStack spacing={ 2 }>\n\t\t\t\t\t\t\t<Navigator.BackButton\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\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\t\t\t\talignment=\"center\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t\t<StateControl\n\t\t\t\t\t\t\t\t\t\tstates={ states }\n\t\t\t\t\t\t\t\t\t\tvalue={ selectedState }\n\t\t\t\t\t\t\t\t\t\tonChange={ onChangeState }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ description && (\n\t\t\t\t\t\t\t<WCText className=\"global-styles-ui-header__description\">\n\t\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t</VStack>\n\t);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAE1C,SAAS,eAAe,8BAA8B;AAMtD,SAAS,cAAc;AA2BhB,cAOC,YAPD;AAzBP,IAAM,EAAE,aAAa,IAAI,OAAQ,sBAAuB;AAWjD,SAAS,aAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AACD,GAAuB;AACtB,SACC,oBAAC,UAAO,SAAU,GACjB,8BAAC,QACA,8BAAC,UAAO,cAAe,GAAI,UAAW,GAAI,UAAW,GACpD,+BAAC,UAAO,SAAU,GACjB;AAAA,yBAAC,UAAO,SAAU,GACjB;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACA,MAAO,MAAM,IAAI,eAAe;AAAA,UAChC,MAAK;AAAA,UACL,OAAQ,GAAI,MAAO;AAAA,UACnB,SAAU;AAAA;AAAA,MACX;AAAA,MACA,oBAAC,UACA;AAAA,QAAC;AAAA;AAAA,UACA,SAAQ;AAAA,UACR,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,OAAQ;AAAA,gBACR,MAAO;AAAA,gBAEL;AAAA;AAAA,YACH;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA,gBACA,OAAQ;AAAA,gBACR,UAAW;AAAA;AAAA,YACZ;AAAA;AAAA;AAAA,MACD,GACD;AAAA,OACD;AAAA,IACE,eACD,oBAAC,UAAO,WAAU,wCACf,uBACH;AAAA,KAEF,GACD,GACD,GACD;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalHeading as Heading,\n\t__experimentalView as View,\n\t__experimentalText as WCText,\n\tNavigator,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport type { StateDefinition } from './utils';\nimport { unlock } from './lock-unlock';\n\nconst { StateControl } = unlock( blockEditorPrivateApis );\n\ninterface ScreenHeaderProps {\n\ttitle: string;\n\tdescription?: string | React.ReactElement;\n\tonBack?: () => void;\n\tviewportStates?: StateDefinition[];\n\tpseudoStates?: StateDefinition[];\n\tselectedViewport?: string;\n\tselectedPseudoState?: string;\n\tonChangeViewport?: ( value: string ) => void;\n\tonChangePseudoState?: ( value: string ) => void;\n}\n\nexport function ScreenHeader( {\n\ttitle,\n\tdescription,\n\tonBack,\n\tviewportStates,\n\tpseudoStates,\n\tselectedViewport = 'default',\n\tselectedPseudoState = 'default',\n\tonChangeViewport,\n\tonChangePseudoState,\n}: ScreenHeaderProps ) {\n\treturn (\n\t\t<VStack spacing={ 0 }>\n\t\t\t<View>\n\t\t\t\t<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>\n\t\t\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t\t\t<HStack spacing={ 2 } alignment=\"top\">\n\t\t\t\t\t\t\t<Navigator.BackButton\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\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\tonClick={ onBack }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<Spacer>\n\t\t\t\t\t\t\t\t<HStack justify=\"space-between\" alignment=\"top\">\n\t\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t\t<StateControl\n\t\t\t\t\t\t\t\t\t\tviewportStates={ viewportStates }\n\t\t\t\t\t\t\t\t\t\tpseudoStates={ pseudoStates }\n\t\t\t\t\t\t\t\t\t\tviewportValue={ selectedViewport }\n\t\t\t\t\t\t\t\t\t\tpseudoStateValue={ selectedPseudoState }\n\t\t\t\t\t\t\t\t\t\tonChangeViewport={ onChangeViewport }\n\t\t\t\t\t\t\t\t\t\tonChangePseudoState={\n\t\t\t\t\t\t\t\t\t\t\tonChangePseudoState\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</HStack>\n\t\t\t\t\t\t\t</Spacer>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t{ description && (\n\t\t\t\t\t\t\t<WCText className=\"global-styles-ui-header__description\">\n\t\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</Spacer>\n\t\t\t</View>\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,wBAAwB;AAAA,EACxB,yBAAyB;AAAA,EACzB,sBAAsB;AAAA,EACtB,sBAAsB;AAAA,EACtB;AAAA,OACM;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAE1C,SAAS,eAAe,8BAA8B;AAMtD,SAAS,cAAc;AAiChB,cAOC,YAPD;AA/BP,IAAM,EAAE,aAAa,IAAI,OAAQ,sBAAuB;AAcjD,SAAS,aAAc;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB;AAAA,EACA;AACD,GAAuB;AACtB,SACC,oBAAC,UAAO,SAAU,GACjB,8BAAC,QACA,8BAAC,UAAO,cAAe,GAAI,UAAW,GAAI,UAAW,GACpD,+BAAC,UAAO,SAAU,GACjB;AAAA,yBAAC,UAAO,SAAU,GAAI,WAAU,OAC/B;AAAA;AAAA,QAAC,UAAU;AAAA,QAAV;AAAA,UACA,MAAO,MAAM,IAAI,eAAe;AAAA,UAChC,MAAK;AAAA,UACL,OAAQ,GAAI,MAAO;AAAA,UACnB,SAAU;AAAA;AAAA,MACX;AAAA,MACA,oBAAC,UACA,+BAAC,UAAO,SAAQ,iBAAgB,WAAU,OACzC;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,OAAQ;AAAA,YACR,MAAO;AAAA,YAEL;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YACA;AAAA,YACA,eAAgB;AAAA,YAChB,kBAAmB;AAAA,YACnB;AAAA,YACA;AAAA;AAAA,QAGD;AAAA,SACD,GACD;AAAA,OACD;AAAA,IACE,eACD,oBAAC,UAAO,WAAU,wCACf,uBACH;AAAA,KAEF,GACD,GACD,GACD;AAEF;",
   "names": []
 }

package/build-module/utils.mjs

@@ -29,15 +29,22 @@ var VALID_BLOCK_STATES = {
     { value: ":active", label: __("Active") }
   ]
 };
-function getValidStates(name) {
+var RESPONSIVE_STATES = [
+  { value: "tablet", label: __("Tablet") },
+  { value: "mobile", label: __("Mobile") }
+];
+function getValidPseudoStates(name) {
   if (VALID_BLOCK_STATES[name]) {
-    return VALID_BLOCK_STATES[name];
+    return VALID_BLOCK_STATES[name] ?? [];
   }
   if (VALID_ELEMENT_STATES[name]) {
     return VALID_ELEMENT_STATES[name];
   }
   return [];
 }
+function getValidViewportStates() {
+  return RESPONSIVE_STATES;
+}
 function removePropertiesFromObject(object, properties) {
   if (!properties?.length) {
     return object;
@@ -206,6 +213,7 @@ function getNewIndexFromPresets(presets, slugPrefix) {
   return highestPresetValue + 1;
 }
 export {
+  RESPONSIVE_STATES,
   VALID_BLOCK_STATES,
   VALID_ELEMENT_STATES,
   filterObjectByProperties,
@@ -213,7 +221,8 @@ export {
   getFamilyPreviewStyle,
   getFontFamilies,
   getNewIndexFromPresets,
-  getValidStates,
+  getValidPseudoStates,
+  getValidViewportStates,
   getVariationClassName,
   isVariationWithProperties,
   removePropertiesFromObject

package/build-module/utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/utils.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { areGlobalStylesEqual } from '@wordpress/global-styles-engine';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * State definition with value and label.\n */\nexport interface StateDefinition {\n\tvalue: string;\n\tlabel: string;\n}\n\n/**\n * Valid states for elements with their labels.\n * This mirrors the PHP constant in lib/class-wp-theme-json-gutenberg.php\n */\nexport const VALID_ELEMENT_STATES: Record< string, StateDefinition[] > = {\n\tlink: [\n\t\t{ value: ':link', label: __( 'Link' ) },\n\t\t{ value: ':any-link', label: __( 'Any Link' ) },\n\t\t{ value: ':visited', label: __( 'Visited' ) },\n\t\t{ value: ':hover', label: __( 'Hover' ) },\n\t\t{ value: ':focus', label: __( 'Focus' ) },\n\t\t{ value: ':focus-visible', label: __( 'Focus-visible' ) },\n\t\t{ value: ':active', label: __( 'Active' ) },\n\t],\n\tbutton: [\n\t\t{ value: ':link', label: __( 'Link' ) },\n\t\t{ value: ':any-link', label: __( 'Any Link' ) },\n\t\t{ value: ':visited', label: __( 'Visited' ) },\n\t\t{ value: ':hover', label: __( 'Hover' ) },\n\t\t{ value: ':focus', label: __( 'Focus' ) },\n\t\t{ value: ':focus-visible', label: __( 'Focus-visible' ) },\n\t\t{ value: ':active', label: __( 'Active' ) },\n\t],\n};\n\n/**\n * Valid states for blocks with their labels.\n * This mirrors the PHP constant in lib/class-wp-theme-json-gutenberg.php\n */\nexport const VALID_BLOCK_STATES: Record< string, StateDefinition[] > = {\n\t'core/button': [\n\t\t{ value: ':hover', label: __( 'Hover' ) },\n\t\t{ value: ':focus', label: __( 'Focus' ) },\n\t\t{ value: ':focus-visible', label: __( 'Focus-visible' ) },\n\t\t{ value: ':active', label: __( 'Active' ) },\n\t],\n};\n\n/**\n * Get the valid states for a given block or element.\n *\n * @param name The block name (e.g., 'core/button') or element name (e.g., 'button')\n * @return Array of valid state definitions, or empty array if none\n */\nexport function getValidStates( name: string ): StateDefinition[] {\n\t// Check if it's a block\n\tif ( VALID_BLOCK_STATES[ name ] ) {\n\t\treturn VALID_BLOCK_STATES[ name ];\n\t}\n\n\t// Check if it's an element\n\tif ( VALID_ELEMENT_STATES[ name ] ) {\n\t\treturn VALID_ELEMENT_STATES[ name ];\n\t}\n\n\treturn [];\n}\n\n/**\n * Removes all instances of properties from an object.\n *\n * @param object     The object to remove the properties from.\n * @param properties The properties to remove.\n * @return The modified object.\n */\nexport function removePropertiesFromObject(\n\tobject: any,\n\tproperties: string[]\n): any {\n\tif ( ! properties?.length ) {\n\t\treturn object;\n\t}\n\n\tif (\n\t\ttypeof object !== 'object' ||\n\t\t! object ||\n\t\t! Object.keys( object ).length\n\t) {\n\t\treturn object;\n\t}\n\n\tfor ( const key in object ) {\n\t\tif ( properties.includes( key ) ) {\n\t\t\tdelete object[ key ];\n\t\t} else if ( typeof object[ key ] === 'object' ) {\n\t\t\tremovePropertiesFromObject( object[ key ], properties );\n\t\t}\n\t}\n\treturn object;\n}\n\n/**\n * Returns a new object, with properties specified in `properties` array.,\n * maintain the original object tree structure.\n * The function is recursive, so it will perform a deep search for the given properties.\n * E.g., the function will return `{ a: { b: { c: { test: 1 } } } }` if the properties are  `[ 'test' ]`.\n *\n * @param object     The object to filter\n * @param properties The properties to filter by\n * @return The merged object.\n */\nexport const filterObjectByProperties = (\n\tobject: any,\n\tproperties: string[]\n): any => {\n\tif ( ! object || ! properties?.length ) {\n\t\treturn {};\n\t}\n\n\tconst newObject: any = {};\n\tObject.keys( object ).forEach( ( key ) => {\n\t\tif ( properties.includes( key ) ) {\n\t\t\tnewObject[ key ] = object[ key ];\n\t\t} else if ( typeof object[ key ] === 'object' ) {\n\t\t\tconst newFilter = filterObjectByProperties(\n\t\t\t\tobject[ key ],\n\t\t\t\tproperties\n\t\t\t);\n\t\t\tif ( Object.keys( newFilter ).length ) {\n\t\t\t\tnewObject[ key ] = newFilter;\n\t\t\t}\n\t\t}\n\t} );\n\treturn newObject;\n};\n\n/**\n * Compares a style variation to the same variation filtered by the specified properties.\n * Returns true if the variation contains only the properties specified.\n *\n * @param variation  The variation to compare.\n * @param properties The properties to compare.\n * @return Whether the variation contains only the specified properties.\n */\nexport function isVariationWithProperties(\n\tvariation: GlobalStylesConfig,\n\tproperties: string[]\n): boolean {\n\tconst variationWithProperties = filterObjectByProperties(\n\t\tstructuredClone( variation ),\n\t\tproperties\n\t);\n\n\treturn areGlobalStylesEqual( variationWithProperties, variation );\n}\n\nfunction getFontFamilyFromSetting( fontFamilies: any[], setting: string ): any {\n\tif ( ! Array.isArray( fontFamilies ) || ! setting ) {\n\t\treturn null;\n\t}\n\n\tconst fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );\n\tconst fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];\n\n\treturn fontFamilies.find(\n\t\t( fontFamily ) => fontFamily.slug === fontFamilySlug\n\t);\n}\n\n/**\n * Extracts font families from a theme JSON configuration.\n *\n * @param themeJson The theme JSON configuration\n * @return Array containing [bodyFontFamily, headingFontFamily]\n */\nexport function getFontFamilies( themeJson: any ): [ any, any ] {\n\tconst themeFontFamilies =\n\t\tthemeJson?.settings?.typography?.fontFamilies?.theme;\n\tconst customFontFamilies =\n\t\tthemeJson?.settings?.typography?.fontFamilies?.custom;\n\n\tlet fontFamilies: any[] = [];\n\tif ( themeFontFamilies && customFontFamilies ) {\n\t\tfontFamilies = [ ...themeFontFamilies, ...customFontFamilies ];\n\t} else if ( themeFontFamilies ) {\n\t\tfontFamilies = themeFontFamilies;\n\t} else if ( customFontFamilies ) {\n\t\tfontFamilies = customFontFamilies;\n\t}\n\tconst bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;\n\tconst bodyFontFamily = getFontFamilyFromSetting(\n\t\tfontFamilies,\n\t\tbodyFontFamilySetting\n\t);\n\n\tconst headingFontFamilySetting =\n\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily;\n\n\tlet headingFontFamily;\n\tif ( ! headingFontFamilySetting ) {\n\t\theadingFontFamily = bodyFontFamily;\n\t} else {\n\t\theadingFontFamily = getFontFamilyFromSetting(\n\t\t\tfontFamilies,\n\t\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily\n\t\t);\n\t}\n\n\treturn [ bodyFontFamily, headingFontFamily ];\n}\n\nfunction findNearest( input: number, numbers: number[] ): number | null {\n\t// If the numbers array is empty, return null\n\tif ( numbers.length === 0 ) {\n\t\treturn null;\n\t}\n\t// Sort the array based on the absolute difference with the input\n\tnumbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );\n\t// Return the first element (which will be the nearest) from the sorted array\n\treturn numbers[ 0 ];\n}\n\nfunction extractFontWeights( fontFaces: any[] ): number[] {\n\tconst result: number[] = [];\n\n\tfontFaces.forEach( ( face ) => {\n\t\tconst weights = String( face.fontWeight ).split( ' ' );\n\n\t\tif ( weights.length === 2 ) {\n\t\t\tconst start = parseInt( weights[ 0 ] );\n\t\t\tconst end = parseInt( weights[ 1 ] );\n\n\t\t\tfor ( let i = start; i <= end; i += 100 ) {\n\t\t\t\tresult.push( i );\n\t\t\t}\n\t\t} else if ( weights.length === 1 ) {\n\t\t\tresult.push( parseInt( weights[ 0 ] ) );\n\t\t}\n\t} );\n\n\treturn result;\n}\n\n/*\n * Format the font family to use in the CSS font-family property of a CSS rule.\n *\n * The input can be a string with the font family name or a string with multiple font family names separated by commas.\n * It follows the recommendations from the CSS Fonts Module Level 4.\n * https://www.w3.org/TR/css-fonts-4/#font-family-prop\n *\n * @param input - The font family.\n * @return The formatted font family.\n */\nexport function formatFontFamily( input: string ): string {\n\t// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).\n\tconst regex = /^(?!generic\\([ a-zA-Z\\-]+\\)$)(?!^[a-zA-Z\\-]+$).+/;\n\tconst output = input.trim();\n\n\tconst formatItem = ( item: string ) => {\n\t\titem = item.trim();\n\t\tif ( item.match( regex ) ) {\n\t\t\t// removes leading and trailing quotes.\n\t\t\titem = item.replace( /^[\"']|[\"']$/g, '' );\n\t\t\treturn `\"${ item }\"`;\n\t\t}\n\t\treturn item;\n\t};\n\n\tif ( output.includes( ',' ) ) {\n\t\treturn output\n\t\t\t.split( ',' )\n\t\t\t.map( formatItem )\n\t\t\t.filter( ( item ) => item !== '' )\n\t\t\t.join( ', ' );\n\t}\n\n\treturn formatItem( output );\n}\n\n/**\n * Gets the preview style for a font family.\n *\n * @param family The font family object\n * @return CSS style object for the font family\n */\nexport function getFamilyPreviewStyle( family: any ): React.CSSProperties {\n\tconst style: React.CSSProperties = {\n\t\tfontFamily: formatFontFamily( family.fontFamily ),\n\t};\n\n\tif ( ! Array.isArray( family.fontFace ) ) {\n\t\tstyle.fontWeight = '400';\n\t\tstyle.fontStyle = 'normal';\n\t\treturn style;\n\t}\n\n\tif ( family.fontFace ) {\n\t\t//get all the font faces with normal style\n\t\tconst normalFaces = family.fontFace.filter(\n\t\t\t( face: any ) =>\n\t\t\t\tface?.fontStyle && face.fontStyle.toLowerCase() === 'normal'\n\t\t);\n\t\tif ( normalFaces.length > 0 ) {\n\t\t\tstyle.fontStyle = 'normal';\n\t\t\tconst normalWeights = extractFontWeights( normalFaces );\n\t\t\tconst nearestWeight = findNearest( 400, normalWeights );\n\t\t\tstyle.fontWeight = String( nearestWeight ) || '400';\n\t\t} else {\n\t\t\tstyle.fontStyle =\n\t\t\t\t( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||\n\t\t\t\t'normal';\n\t\t\tstyle.fontWeight =\n\t\t\t\t( family.fontFace.length &&\n\t\t\t\t\tString( family.fontFace[ 0 ].fontWeight ) ) ||\n\t\t\t\t'400';\n\t\t}\n\t}\n\n\treturn style;\n}\n\n/**\n * Iterates through the presets array and searches for slugs that start with the specified\n * slugPrefix followed by a numerical suffix. It identifies the highest numerical suffix found\n * and returns one greater than the highest found suffix, ensuring that the new index is unique.\n *\n * @param presets    The array of preset objects, each potentially containing a slug property.\n * @param slugPrefix The prefix to look for in the preset slugs.\n *\n * @return The next available index for a preset with the specified slug prefix, or 1 if no matching slugs are found.\n */\n/**\n * Gets the variation class name for a block style variation.\n *\n * @param variation The variation name.\n * @return The variation class name.\n */\nexport function getVariationClassName( variation: string ): string {\n\tif ( ! variation ) {\n\t\treturn '';\n\t}\n\treturn `is-style-${ variation }`;\n}\n\nexport function getNewIndexFromPresets(\n\tpresets: any[],\n\tslugPrefix: string\n): number {\n\tconst nameRegex = new RegExp( `^${ slugPrefix }([\\\\d]+)$` );\n\tconst highestPresetValue = presets.reduce( ( currentHighest, preset ) => {\n\t\tif ( typeof preset?.slug === 'string' ) {\n\t\t\tconst matches = preset?.slug.match( nameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id > currentHighest ) {\n\t\t\t\t\treturn id;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn currentHighest;\n\t}, 0 );\n\treturn highestPresetValue + 1;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { areGlobalStylesEqual } from '@wordpress/global-styles-engine';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * State definition with value and label.\n */\nexport interface StateDefinition {\n\tvalue: string;\n\tlabel: string;\n}\n\n/**\n * Valid states for elements with their labels.\n * This mirrors the PHP constant in lib/class-wp-theme-json-gutenberg.php\n */\nexport const VALID_ELEMENT_STATES: Record< string, StateDefinition[] > = {\n\tlink: [\n\t\t{ value: ':link', label: __( 'Link' ) },\n\t\t{ value: ':any-link', label: __( 'Any Link' ) },\n\t\t{ value: ':visited', label: __( 'Visited' ) },\n\t\t{ value: ':hover', label: __( 'Hover' ) },\n\t\t{ value: ':focus', label: __( 'Focus' ) },\n\t\t{ value: ':focus-visible', label: __( 'Focus-visible' ) },\n\t\t{ value: ':active', label: __( 'Active' ) },\n\t],\n\tbutton: [\n\t\t{ value: ':link', label: __( 'Link' ) },\n\t\t{ value: ':any-link', label: __( 'Any Link' ) },\n\t\t{ value: ':visited', label: __( 'Visited' ) },\n\t\t{ value: ':hover', label: __( 'Hover' ) },\n\t\t{ value: ':focus', label: __( 'Focus' ) },\n\t\t{ value: ':focus-visible', label: __( 'Focus-visible' ) },\n\t\t{ value: ':active', label: __( 'Active' ) },\n\t],\n};\n\n/**\n * Valid states for blocks with their labels.\n * This mirrors the PHP constant in lib/class-wp-theme-json-gutenberg.php\n */\nexport const VALID_BLOCK_STATES: Record< string, StateDefinition[] > = {\n\t'core/button': [\n\t\t{ value: ':hover', label: __( 'Hover' ) },\n\t\t{ value: ':focus', label: __( 'Focus' ) },\n\t\t{ value: ':focus-visible', label: __( 'Focus-visible' ) },\n\t\t{ value: ':active', label: __( 'Active' ) },\n\t],\n};\n\n/**\n * Responsive breakpoint states available for all blocks.\n * These map to CSS media queries wrapping the block's styles.\n */\nexport const RESPONSIVE_STATES: StateDefinition[] = [\n\t{ value: 'tablet', label: __( 'Tablet' ) },\n\t{ value: 'mobile', label: __( 'Mobile' ) },\n];\n\n/**\n * Get the valid pseudo states for a given block or element.\n *\n * @param name The block name (e.g., 'core/button') or element name (e.g., 'button')\n * @return Array of valid pseudo state definitions, or empty array if none\n */\nexport function getValidPseudoStates( name: string ): StateDefinition[] {\n\t// Check if it's a block (contains a slash, e.g. 'core/button').\n\tif ( VALID_BLOCK_STATES[ name ] ) {\n\t\treturn VALID_BLOCK_STATES[ name ] ?? [];\n\t}\n\n\t// Check if it's an element\n\tif ( VALID_ELEMENT_STATES[ name ] ) {\n\t\treturn VALID_ELEMENT_STATES[ name ];\n\t}\n\n\treturn [];\n}\n\n/**\n * Get the valid viewport state definitions.\n *\n * @return Array of valid viewport state definitions.\n */\nexport function getValidViewportStates(): StateDefinition[] {\n\treturn RESPONSIVE_STATES;\n}\n\n/**\n * Removes all instances of properties from an object.\n *\n * @param object     The object to remove the properties from.\n * @param properties The properties to remove.\n * @return The modified object.\n */\nexport function removePropertiesFromObject(\n\tobject: any,\n\tproperties: string[]\n): any {\n\tif ( ! properties?.length ) {\n\t\treturn object;\n\t}\n\n\tif (\n\t\ttypeof object !== 'object' ||\n\t\t! object ||\n\t\t! Object.keys( object ).length\n\t) {\n\t\treturn object;\n\t}\n\n\tfor ( const key in object ) {\n\t\tif ( properties.includes( key ) ) {\n\t\t\tdelete object[ key ];\n\t\t} else if ( typeof object[ key ] === 'object' ) {\n\t\t\tremovePropertiesFromObject( object[ key ], properties );\n\t\t}\n\t}\n\treturn object;\n}\n\n/**\n * Returns a new object, with properties specified in `properties` array.,\n * maintain the original object tree structure.\n * The function is recursive, so it will perform a deep search for the given properties.\n * E.g., the function will return `{ a: { b: { c: { test: 1 } } } }` if the properties are  `[ 'test' ]`.\n *\n * @param object     The object to filter\n * @param properties The properties to filter by\n * @return The merged object.\n */\nexport const filterObjectByProperties = (\n\tobject: any,\n\tproperties: string[]\n): any => {\n\tif ( ! object || ! properties?.length ) {\n\t\treturn {};\n\t}\n\n\tconst newObject: any = {};\n\tObject.keys( object ).forEach( ( key ) => {\n\t\tif ( properties.includes( key ) ) {\n\t\t\tnewObject[ key ] = object[ key ];\n\t\t} else if ( typeof object[ key ] === 'object' ) {\n\t\t\tconst newFilter = filterObjectByProperties(\n\t\t\t\tobject[ key ],\n\t\t\t\tproperties\n\t\t\t);\n\t\t\tif ( Object.keys( newFilter ).length ) {\n\t\t\t\tnewObject[ key ] = newFilter;\n\t\t\t}\n\t\t}\n\t} );\n\treturn newObject;\n};\n\n/**\n * Compares a style variation to the same variation filtered by the specified properties.\n * Returns true if the variation contains only the properties specified.\n *\n * @param variation  The variation to compare.\n * @param properties The properties to compare.\n * @return Whether the variation contains only the specified properties.\n */\nexport function isVariationWithProperties(\n\tvariation: GlobalStylesConfig,\n\tproperties: string[]\n): boolean {\n\tconst variationWithProperties = filterObjectByProperties(\n\t\tstructuredClone( variation ),\n\t\tproperties\n\t);\n\n\treturn areGlobalStylesEqual( variationWithProperties, variation );\n}\n\nfunction getFontFamilyFromSetting( fontFamilies: any[], setting: string ): any {\n\tif ( ! Array.isArray( fontFamilies ) || ! setting ) {\n\t\treturn null;\n\t}\n\n\tconst fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );\n\tconst fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];\n\n\treturn fontFamilies.find(\n\t\t( fontFamily ) => fontFamily.slug === fontFamilySlug\n\t);\n}\n\n/**\n * Extracts font families from a theme JSON configuration.\n *\n * @param themeJson The theme JSON configuration\n * @return Array containing [bodyFontFamily, headingFontFamily]\n */\nexport function getFontFamilies( themeJson: any ): [ any, any ] {\n\tconst themeFontFamilies =\n\t\tthemeJson?.settings?.typography?.fontFamilies?.theme;\n\tconst customFontFamilies =\n\t\tthemeJson?.settings?.typography?.fontFamilies?.custom;\n\n\tlet fontFamilies: any[] = [];\n\tif ( themeFontFamilies && customFontFamilies ) {\n\t\tfontFamilies = [ ...themeFontFamilies, ...customFontFamilies ];\n\t} else if ( themeFontFamilies ) {\n\t\tfontFamilies = themeFontFamilies;\n\t} else if ( customFontFamilies ) {\n\t\tfontFamilies = customFontFamilies;\n\t}\n\tconst bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;\n\tconst bodyFontFamily = getFontFamilyFromSetting(\n\t\tfontFamilies,\n\t\tbodyFontFamilySetting\n\t);\n\n\tconst headingFontFamilySetting =\n\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily;\n\n\tlet headingFontFamily;\n\tif ( ! headingFontFamilySetting ) {\n\t\theadingFontFamily = bodyFontFamily;\n\t} else {\n\t\theadingFontFamily = getFontFamilyFromSetting(\n\t\t\tfontFamilies,\n\t\t\tthemeJson?.styles?.elements?.heading?.typography?.fontFamily\n\t\t);\n\t}\n\n\treturn [ bodyFontFamily, headingFontFamily ];\n}\n\nfunction findNearest( input: number, numbers: number[] ): number | null {\n\t// If the numbers array is empty, return null\n\tif ( numbers.length === 0 ) {\n\t\treturn null;\n\t}\n\t// Sort the array based on the absolute difference with the input\n\tnumbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );\n\t// Return the first element (which will be the nearest) from the sorted array\n\treturn numbers[ 0 ];\n}\n\nfunction extractFontWeights( fontFaces: any[] ): number[] {\n\tconst result: number[] = [];\n\n\tfontFaces.forEach( ( face ) => {\n\t\tconst weights = String( face.fontWeight ).split( ' ' );\n\n\t\tif ( weights.length === 2 ) {\n\t\t\tconst start = parseInt( weights[ 0 ] );\n\t\t\tconst end = parseInt( weights[ 1 ] );\n\n\t\t\tfor ( let i = start; i <= end; i += 100 ) {\n\t\t\t\tresult.push( i );\n\t\t\t}\n\t\t} else if ( weights.length === 1 ) {\n\t\t\tresult.push( parseInt( weights[ 0 ] ) );\n\t\t}\n\t} );\n\n\treturn result;\n}\n\n/*\n * Format the font family to use in the CSS font-family property of a CSS rule.\n *\n * The input can be a string with the font family name or a string with multiple font family names separated by commas.\n * It follows the recommendations from the CSS Fonts Module Level 4.\n * https://www.w3.org/TR/css-fonts-4/#font-family-prop\n *\n * @param input - The font family.\n * @return The formatted font family.\n */\nexport function formatFontFamily( input: string ): string {\n\t// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).\n\tconst regex = /^(?!generic\\([ a-zA-Z\\-]+\\)$)(?!^[a-zA-Z\\-]+$).+/;\n\tconst output = input.trim();\n\n\tconst formatItem = ( item: string ) => {\n\t\titem = item.trim();\n\t\tif ( item.match( regex ) ) {\n\t\t\t// removes leading and trailing quotes.\n\t\t\titem = item.replace( /^[\"']|[\"']$/g, '' );\n\t\t\treturn `\"${ item }\"`;\n\t\t}\n\t\treturn item;\n\t};\n\n\tif ( output.includes( ',' ) ) {\n\t\treturn output\n\t\t\t.split( ',' )\n\t\t\t.map( formatItem )\n\t\t\t.filter( ( item ) => item !== '' )\n\t\t\t.join( ', ' );\n\t}\n\n\treturn formatItem( output );\n}\n\n/**\n * Gets the preview style for a font family.\n *\n * @param family The font family object\n * @return CSS style object for the font family\n */\nexport function getFamilyPreviewStyle( family: any ): React.CSSProperties {\n\tconst style: React.CSSProperties = {\n\t\tfontFamily: formatFontFamily( family.fontFamily ),\n\t};\n\n\tif ( ! Array.isArray( family.fontFace ) ) {\n\t\tstyle.fontWeight = '400';\n\t\tstyle.fontStyle = 'normal';\n\t\treturn style;\n\t}\n\n\tif ( family.fontFace ) {\n\t\t//get all the font faces with normal style\n\t\tconst normalFaces = family.fontFace.filter(\n\t\t\t( face: any ) =>\n\t\t\t\tface?.fontStyle && face.fontStyle.toLowerCase() === 'normal'\n\t\t);\n\t\tif ( normalFaces.length > 0 ) {\n\t\t\tstyle.fontStyle = 'normal';\n\t\t\tconst normalWeights = extractFontWeights( normalFaces );\n\t\t\tconst nearestWeight = findNearest( 400, normalWeights );\n\t\t\tstyle.fontWeight = String( nearestWeight ) || '400';\n\t\t} else {\n\t\t\tstyle.fontStyle =\n\t\t\t\t( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||\n\t\t\t\t'normal';\n\t\t\tstyle.fontWeight =\n\t\t\t\t( family.fontFace.length &&\n\t\t\t\t\tString( family.fontFace[ 0 ].fontWeight ) ) ||\n\t\t\t\t'400';\n\t\t}\n\t}\n\n\treturn style;\n}\n\n/**\n * Iterates through the presets array and searches for slugs that start with the specified\n * slugPrefix followed by a numerical suffix. It identifies the highest numerical suffix found\n * and returns one greater than the highest found suffix, ensuring that the new index is unique.\n *\n * @param presets    The array of preset objects, each potentially containing a slug property.\n * @param slugPrefix The prefix to look for in the preset slugs.\n *\n * @return The next available index for a preset with the specified slug prefix, or 1 if no matching slugs are found.\n */\n/**\n * Gets the variation class name for a block style variation.\n *\n * @param variation The variation name.\n * @return The variation class name.\n */\nexport function getVariationClassName( variation: string ): string {\n\tif ( ! variation ) {\n\t\treturn '';\n\t}\n\treturn `is-style-${ variation }`;\n}\n\nexport function getNewIndexFromPresets(\n\tpresets: any[],\n\tslugPrefix: string\n): number {\n\tconst nameRegex = new RegExp( `^${ slugPrefix }([\\\\d]+)$` );\n\tconst highestPresetValue = presets.reduce( ( currentHighest, preset ) => {\n\t\tif ( typeof preset?.slug === 'string' ) {\n\t\t\tconst matches = preset?.slug.match( nameRegex );\n\t\t\tif ( matches ) {\n\t\t\t\tconst id = parseInt( matches[ 1 ], 10 );\n\t\t\t\tif ( id > currentHighest ) {\n\t\t\t\t\treturn id;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn currentHighest;\n\t}, 0 );\n\treturn highestPresetValue + 1;\n}\n"],
+  "mappings": ";AAGA,SAAS,4BAA4B;AAErC,SAAS,UAAU;AAcZ,IAAM,uBAA4D;AAAA,EACxE,MAAM;AAAA,IACL,EAAE,OAAO,SAAS,OAAO,GAAI,MAAO,EAAE;AAAA,IACtC,EAAE,OAAO,aAAa,OAAO,GAAI,UAAW,EAAE;AAAA,IAC9C,EAAE,OAAO,YAAY,OAAO,GAAI,SAAU,EAAE;AAAA,IAC5C,EAAE,OAAO,UAAU,OAAO,GAAI,OAAQ,EAAE;AAAA,IACxC,EAAE,OAAO,UAAU,OAAO,GAAI,OAAQ,EAAE;AAAA,IACxC,EAAE,OAAO,kBAAkB,OAAO,GAAI,eAAgB,EAAE;AAAA,IACxD,EAAE,OAAO,WAAW,OAAO,GAAI,QAAS,EAAE;AAAA,EAC3C;AAAA,EACA,QAAQ;AAAA,IACP,EAAE,OAAO,SAAS,OAAO,GAAI,MAAO,EAAE;AAAA,IACtC,EAAE,OAAO,aAAa,OAAO,GAAI,UAAW,EAAE;AAAA,IAC9C,EAAE,OAAO,YAAY,OAAO,GAAI,SAAU,EAAE;AAAA,IAC5C,EAAE,OAAO,UAAU,OAAO,GAAI,OAAQ,EAAE;AAAA,IACxC,EAAE,OAAO,UAAU,OAAO,GAAI,OAAQ,EAAE;AAAA,IACxC,EAAE,OAAO,kBAAkB,OAAO,GAAI,eAAgB,EAAE;AAAA,IACxD,EAAE,OAAO,WAAW,OAAO,GAAI,QAAS,EAAE;AAAA,EAC3C;AACD;AAMO,IAAM,qBAA0D;AAAA,EACtE,eAAe;AAAA,IACd,EAAE,OAAO,UAAU,OAAO,GAAI,OAAQ,EAAE;AAAA,IACxC,EAAE,OAAO,UAAU,OAAO,GAAI,OAAQ,EAAE;AAAA,IACxC,EAAE,OAAO,kBAAkB,OAAO,GAAI,eAAgB,EAAE;AAAA,IACxD,EAAE,OAAO,WAAW,OAAO,GAAI,QAAS,EAAE;AAAA,EAC3C;AACD;AAMO,IAAM,oBAAuC;AAAA,EACnD,EAAE,OAAO,UAAU,OAAO,GAAI,QAAS,EAAE;AAAA,EACzC,EAAE,OAAO,UAAU,OAAO,GAAI,QAAS,EAAE;AAC1C;AAQO,SAAS,qBAAsB,MAAkC;AAEvE,MAAK,mBAAoB,IAAK,GAAI;AACjC,WAAO,mBAAoB,IAAK,KAAK,CAAC;AAAA,EACvC;AAGA,MAAK,qBAAsB,IAAK,GAAI;AACnC,WAAO,qBAAsB,IAAK;AAAA,EACnC;AAEA,SAAO,CAAC;AACT;AAOO,SAAS,yBAA4C;AAC3D,SAAO;AACR;AASO,SAAS,2BACf,QACA,YACM;AACN,MAAK,CAAE,YAAY,QAAS;AAC3B,WAAO;AAAA,EACR;AAEA,MACC,OAAO,WAAW,YAClB,CAAE,UACF,CAAE,OAAO,KAAM,MAAO,EAAE,QACvB;AACD,WAAO;AAAA,EACR;AAEA,aAAY,OAAO,QAAS;AAC3B,QAAK,WAAW,SAAU,GAAI,GAAI;AACjC,aAAO,OAAQ,GAAI;AAAA,IACpB,WAAY,OAAO,OAAQ,GAAI,MAAM,UAAW;AAC/C,iCAA4B,OAAQ,GAAI,GAAG,UAAW;AAAA,IACvD;AAAA,EACD;AACA,SAAO;AACR;AAYO,IAAM,2BAA2B,CACvC,QACA,eACS;AACT,MAAK,CAAE,UAAU,CAAE,YAAY,QAAS;AACvC,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,YAAiB,CAAC;AACxB,SAAO,KAAM,MAAO,EAAE,QAAS,CAAE,QAAS;AACzC,QAAK,WAAW,SAAU,GAAI,GAAI;AACjC,gBAAW,GAAI,IAAI,OAAQ,GAAI;AAAA,IAChC,WAAY,OAAO,OAAQ,GAAI,MAAM,UAAW;AAC/C,YAAM,YAAY;AAAA,QACjB,OAAQ,GAAI;AAAA,QACZ;AAAA,MACD;AACA,UAAK,OAAO,KAAM,SAAU,EAAE,QAAS;AACtC,kBAAW,GAAI,IAAI;AAAA,MACpB;AAAA,IACD;AAAA,EACD,CAAE;AACF,SAAO;AACR;AAUO,SAAS,0BACf,WACA,YACU;AACV,QAAM,0BAA0B;AAAA,IAC/B,gBAAiB,SAAU;AAAA,IAC3B;AAAA,EACD;AAEA,SAAO,qBAAsB,yBAAyB,SAAU;AACjE;AAEA,SAAS,yBAA0B,cAAqB,SAAuB;AAC9E,MAAK,CAAE,MAAM,QAAS,YAAa,KAAK,CAAE,SAAU;AACnD,WAAO;AAAA,EACR;AAEA,QAAM,qBAAqB,QAAQ,QAAS,QAAQ,EAAG,EAAE,QAAS,KAAK,EAAG;AAC1E,QAAM,iBAAiB,oBAAoB,MAAO,IAAK,EAAE,MAAO,EAAG,EAAG,CAAE;AAExE,SAAO,aAAa;AAAA,IACnB,CAAE,eAAgB,WAAW,SAAS;AAAA,EACvC;AACD;AAQO,SAAS,gBAAiB,WAA+B;AAC/D,QAAM,oBACL,WAAW,UAAU,YAAY,cAAc;AAChD,QAAM,qBACL,WAAW,UAAU,YAAY,cAAc;AAEhD,MAAI,eAAsB,CAAC;AAC3B,MAAK,qBAAqB,oBAAqB;AAC9C,mBAAe,CAAE,GAAG,mBAAmB,GAAG,kBAAmB;AAAA,EAC9D,WAAY,mBAAoB;AAC/B,mBAAe;AAAA,EAChB,WAAY,oBAAqB;AAChC,mBAAe;AAAA,EAChB;AACA,QAAM,wBAAwB,WAAW,QAAQ,YAAY;AAC7D,QAAM,iBAAiB;AAAA,IACtB;AAAA,IACA;AAAA,EACD;AAEA,QAAM,2BACL,WAAW,QAAQ,UAAU,SAAS,YAAY;AAEnD,MAAI;AACJ,MAAK,CAAE,0BAA2B;AACjC,wBAAoB;AAAA,EACrB,OAAO;AACN,wBAAoB;AAAA,MACnB;AAAA,MACA,WAAW,QAAQ,UAAU,SAAS,YAAY;AAAA,IACnD;AAAA,EACD;AAEA,SAAO,CAAE,gBAAgB,iBAAkB;AAC5C;AAEA,SAAS,YAAa,OAAe,SAAmC;AAEvE,MAAK,QAAQ,WAAW,GAAI;AAC3B,WAAO;AAAA,EACR;AAEA,UAAQ,KAAM,CAAE,GAAG,MAAO,KAAK,IAAK,QAAQ,CAAE,IAAI,KAAK,IAAK,QAAQ,CAAE,CAAE;AAExE,SAAO,QAAS,CAAE;AACnB;AAEA,SAAS,mBAAoB,WAA6B;AACzD,QAAM,SAAmB,CAAC;AAE1B,YAAU,QAAS,CAAE,SAAU;AAC9B,UAAM,UAAU,OAAQ,KAAK,UAAW,EAAE,MAAO,GAAI;AAErD,QAAK,QAAQ,WAAW,GAAI;AAC3B,YAAM,QAAQ,SAAU,QAAS,CAAE,CAAE;AACrC,YAAM,MAAM,SAAU,QAAS,CAAE,CAAE;AAEnC,eAAU,IAAI,OAAO,KAAK,KAAK,KAAK,KAAM;AACzC,eAAO,KAAM,CAAE;AAAA,MAChB;AAAA,IACD,WAAY,QAAQ,WAAW,GAAI;AAClC,aAAO,KAAM,SAAU,QAAS,CAAE,CAAE,CAAE;AAAA,IACvC;AAAA,EACD,CAAE;AAEF,SAAO;AACR;AAYO,SAAS,iBAAkB,OAAwB;AAEzD,QAAM,QAAQ;AACd,QAAM,SAAS,MAAM,KAAK;AAE1B,QAAM,aAAa,CAAE,SAAkB;AACtC,WAAO,KAAK,KAAK;AACjB,QAAK,KAAK,MAAO,KAAM,GAAI;AAE1B,aAAO,KAAK,QAAS,gBAAgB,EAAG;AACxC,aAAO,IAAK,IAAK;AAAA,IAClB;AACA,WAAO;AAAA,EACR;AAEA,MAAK,OAAO,SAAU,GAAI,GAAI;AAC7B,WAAO,OACL,MAAO,GAAI,EACX,IAAK,UAAW,EAChB,OAAQ,CAAE,SAAU,SAAS,EAAG,EAChC,KAAM,IAAK;AAAA,EACd;AAEA,SAAO,WAAY,MAAO;AAC3B;AAQO,SAAS,sBAAuB,QAAmC;AACzE,QAAM,QAA6B;AAAA,IAClC,YAAY,iBAAkB,OAAO,UAAW;AAAA,EACjD;AAEA,MAAK,CAAE,MAAM,QAAS,OAAO,QAAS,GAAI;AACzC,UAAM,aAAa;AACnB,UAAM,YAAY;AAClB,WAAO;AAAA,EACR;AAEA,MAAK,OAAO,UAAW;AAEtB,UAAM,cAAc,OAAO,SAAS;AAAA,MACnC,CAAE,SACD,MAAM,aAAa,KAAK,UAAU,YAAY,MAAM;AAAA,IACtD;AACA,QAAK,YAAY,SAAS,GAAI;AAC7B,YAAM,YAAY;AAClB,YAAM,gBAAgB,mBAAoB,WAAY;AACtD,YAAM,gBAAgB,YAAa,KAAK,aAAc;AACtD,YAAM,aAAa,OAAQ,aAAc,KAAK;AAAA,IAC/C,OAAO;AACN,YAAM,YACH,OAAO,SAAS,UAAU,OAAO,SAAU,CAAE,EAAE,aACjD;AACD,YAAM,aACH,OAAO,SAAS,UACjB,OAAQ,OAAO,SAAU,CAAE,EAAE,UAAW,KACzC;AAAA,IACF;AAAA,EACD;AAEA,SAAO;AACR;AAkBO,SAAS,sBAAuB,WAA4B;AAClE,MAAK,CAAE,WAAY;AAClB,WAAO;AAAA,EACR;AACA,SAAO,YAAa,SAAU;AAC/B;AAEO,SAAS,uBACf,SACA,YACS;AACT,QAAM,YAAY,IAAI,OAAQ,IAAK,UAAW,WAAY;AAC1D,QAAM,qBAAqB,QAAQ,OAAQ,CAAE,gBAAgB,WAAY;AACxE,QAAK,OAAO,QAAQ,SAAS,UAAW;AACvC,YAAM,UAAU,QAAQ,KAAK,MAAO,SAAU;AAC9C,UAAK,SAAU;AACd,cAAM,KAAK,SAAU,QAAS,CAAE,GAAG,EAAG;AACtC,YAAK,KAAK,gBAAiB;AAC1B,iBAAO;AAAA,QACR;AAAA,MACD;AAAA,IACD;AACA,WAAO;AAAA,EACR,GAAG,CAAE;AACL,SAAO,qBAAqB;AAC7B;",
   "names": []
 }

package/build-style/style-rtl.css

@@ -541,6 +541,7 @@ button.font-library__upload-area {
 
 .global-styles-ui-header {
   margin-bottom: 0 !important;
+  line-height: 1.9 !important;
 }
 
 .global-styles-ui-subtitle {

package/build-style/style.css

@@ -541,6 +541,7 @@ button.font-library__upload-area {
 
 .global-styles-ui-header {
   margin-bottom: 0 !important;
+  line-height: 1.9 !important;
 }
 
 .global-styles-ui-subtitle {

package/build-types/background-panel.d.ts

@@ -1,3 +1,6 @@
+/**
+ * WordPress dependencies
+ */
 /**
  * Checks if there is a current value in the background image block support
  * attributes.

package/build-types/background-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"background-panel.d.ts","sourceRoot":"","sources":["../src/background-panel.tsx"],"names":[],"mappings":"AAqBA;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,KAAK,EAAE,GAAG,GAAI,OAAO,CAM7D;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,gCAmBtC"}
+{"version":3,"file":"background-panel.d.ts","sourceRoot":"","sources":["../src/background-panel.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAmBH;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CAAE,KAAK,EAAE,GAAG,GAAI,OAAO,CAM7D;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,gCAmBtC"}

package/build-types/block-preview-panel.d.ts

@@ -1,3 +1,6 @@
+/**
+ * WordPress dependencies
+ */
 interface BlockPreviewPanelProps {
     name: string;
     variation?: string;

package/build-types/block-preview-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"block-preview-panel.d.ts","sourceRoot":"","sources":["../src/block-preview-panel.tsx"],"names":[],"mappings":"AAeA,UAAU,sBAAsB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,GAAG,CAAC;CAClB;AAED,QAAA,MAAM,iBAAiB,GAAK,kDAKzB,sBAAsB,uCA2ExB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"block-preview-panel.d.ts","sourceRoot":"","sources":["../src/block-preview-panel.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAaH,UAAU,sBAAsB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,GAAG,CAAC;CAClB;AAED,QAAA,MAAM,iBAAiB,qDAKpB,sBAAsB,uCA2ExB,CAAC;eAEa,iBAAiB"}

package/build-types/color-indicator-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-indicator-wrapper.d.ts","sourceRoot":"","sources":["../src/color-indicator-wrapper.tsx"],"names":[],"mappings":"AAUA,UAAU,0BAA0B;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAE,GAAG,EAAE,MAAM,GAAI,GAAG,CAAC;CACrB;AAED,iBAAS,qBAAqB,CAAE,EAC/B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,0BAA0B,+BAY5B;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"color-indicator-wrapper.d.ts","sourceRoot":"","sources":["../src/color-indicator-wrapper.tsx"],"names":[],"mappings":"AAUA,UAAU,0BAA0B;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAE,GAAG,EAAE,MAAM,GAAI,GAAG,CAAC;CACrB;AAED,iBAAS,qBAAqB,CAAE,EAC/B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,0BAA0B,+BAY5B;eAEc,qBAAqB"}

package/build-types/confirm-reset-shadow-dialog.d.ts

@@ -5,6 +5,6 @@ interface ConfirmResetShadowDialogProps {
     toggleOpen: () => void;
     onConfirm: () => void;
 }
-declare function ConfirmResetShadowDialog({ text, confirmButtonText, isOpen, toggleOpen, onConfirm, }: ConfirmResetShadowDialogProps): import("react").JSX.Element;
+declare function ConfirmResetShadowDialog({ text, confirmButtonText, isOpen, toggleOpen, onConfirm }: ConfirmResetShadowDialogProps): import("react").JSX.Element;
 export default ConfirmResetShadowDialog;
 //# sourceMappingURL=confirm-reset-shadow-dialog.d.ts.map

package/build-types/confirm-reset-shadow-dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"confirm-reset-shadow-dialog.d.ts","sourceRoot":"","sources":["../src/confirm-reset-shadow-dialog.tsx"],"names":[],"mappings":"AAMA,UAAU,6BAA6B;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,iBAAS,wBAAwB,CAAE,EAClC,IAAI,EACJ,iBAAiB,EACjB,MAAM,EACN,UAAU,EACV,SAAS,GACT,EAAE,6BAA6B,+BAsB/B;AAED,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"confirm-reset-shadow-dialog.d.ts","sourceRoot":"","sources":["../src/confirm-reset-shadow-dialog.tsx"],"names":[],"mappings":"AAMA,UAAU,6BAA6B;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,iBAAS,wBAAwB,CAAE,EAClC,IAAI,EACJ,iBAAiB,EACjB,MAAM,EACN,UAAU,EACV,SAAS,EACT,EAAE,6BAA6B,+BAsB/B;eAEc,wBAAwB"}

package/build-types/dimensions-panel.d.ts

@@ -1,2 +1,5 @@
+/**
+ * WordPress dependencies
+ */
 export default function DimensionsPanel(): import("react").JSX.Element;
 //# sourceMappingURL=dimensions-panel.d.ts.map

package/build-types/dimensions-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dimensions-panel.d.ts","sourceRoot":"","sources":["../src/dimensions-panel.tsx"],"names":[],"mappings":"AA6BA,MAAM,CAAC,OAAO,UAAU,eAAe,gCA0DtC"}
+{"version":3,"file":"dimensions-panel.d.ts","sourceRoot":"","sources":["../src/dimensions-panel.tsx"],"names":[],"mappings":"AAAA;;GAEG;AA2BH,MAAM,CAAC,OAAO,UAAU,eAAe,gCA0DtC"}

package/build-types/font-family-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-family-item.d.ts","sourceRoot":"","sources":["../src/font-family-item.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAQvD,UAAU,mBAAmB;IAC5B,IAAI,EAAE,UAAU,CAAC;CACjB;AAED,iBAAS,cAAc,CAAE,EAAE,IAAI,EAAE,EAAE,mBAAmB,+BA2BrD;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"font-family-item.d.ts","sourceRoot":"","sources":["../src/font-family-item.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAQvD,UAAU,mBAAmB;IAC5B,IAAI,EAAE,UAAU,CAAC;CACjB;AAED,iBAAS,cAAc,CAAE,EAAE,IAAI,EAAE,EAAE,mBAAmB,+BA2BrD;eAEc,cAAc"}

package/build-types/font-library/api.d.ts

@@ -1,12 +1,10 @@
 import type { FontFace } from '@wordpress/core-data';
 import type { DataRegistry } from '@wordpress/data';
 export declare function fetchInstallFontFamily(data: FormData, registry: DataRegistry): Promise<{
-    fontFace: never[];
     name: string;
     slug: string;
     fontFamily: string;
     preview?: string;
-    id: string;
     source?: string;
     version?: string;
     author?: string;
@@ -15,6 +13,8 @@ export declare function fetchInstallFontFamily(data: FormData, registry: DataReg
     tags?: string[];
     variants?: FontFace[];
     category?: string;
+    id: string;
+    fontFace: never[];
 }>;
 export declare function fetchInstallFontFace(fontFamilyId: string, data: FormData, registry: DataRegistry): Promise<FontFace>;
 //# sourceMappingURL=api.d.ts.map

package/build-types/font-library/api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../src/font-library/api.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGX,QAAQ,EACR,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA0BpD,wBAAsB,sBAAsB,CAC3C,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,YAAY;;;;;;;;;;;;;;;GAetB;AAED,wBAAsB,oBAAoB,CACzC,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,YAAY,GACpB,OAAO,CAAE,QAAQ,CAAE,CAYrB"}
+{"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../../src/font-library/api.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAGX,QAAQ,EACR,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AA0BpD,wBAAsB,sBAAsB,CAC3C,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,YAAY;;;;;;;;;;;;;QAWF,MAAM;;GAI1B;AAED,wBAAsB,oBAAoB,CACzC,YAAY,EAAE,MAAM,EACpB,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,YAAY,GACpB,OAAO,CAAE,QAAQ,CAAE,CAYrB"}

package/build-types/font-library/collection-font-variant.d.ts

@@ -1,4 +1,4 @@
 import type { CollectionFontVariantProps } from './types';
-declare function CollectionFontVariant({ face, font, handleToggleVariant, selected, }: CollectionFontVariantProps): import("react").JSX.Element;
+declare function CollectionFontVariant({ face, font, handleToggleVariant, selected }: CollectionFontVariantProps): import("react").JSX.Element;
 export default CollectionFontVariant;
 //# sourceMappingURL=collection-font-variant.d.ts.map

package/build-types/font-library/collection-font-variant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"collection-font-variant.d.ts","sourceRoot":"","sources":["../../src/font-library/collection-font-variant.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D,iBAAS,qBAAqB,CAAE,EAC/B,IAAI,EACJ,IAAI,EACJ,mBAAmB,EACnB,QAAQ,GACR,EAAE,0BAA0B,+BA8B5B;AAED,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"collection-font-variant.d.ts","sourceRoot":"","sources":["../../src/font-library/collection-font-variant.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAE1D,iBAAS,qBAAqB,CAAE,EAC/B,IAAI,EACJ,IAAI,EACJ,mBAAmB,EACnB,QAAQ,EACR,EAAE,0BAA0B,+BA8B5B;eAEc,qBAAqB"}

package/build-types/font-library/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/font-library/context.tsx"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGpE,eAAO,MAAM,kBAAkB,2CAE9B,CAAC;AAGF,iBAAS,mBAAmB,CAAE,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,+BA4gBxE;AAED,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/font-library/context.tsx"],"names":[],"mappings":"AA6CA,OAAO,KAAK,EAAsB,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGpE,eAAO,MAAM,kBAAkB,2CAE9B,CAAC;AAGF,iBAAS,mBAAmB,CAAE,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,+BA4gBxE;eAEc,mBAAmB"}

package/build-types/font-library/font-card.d.ts

@@ -1,5 +1,5 @@
 import type { FontFamily } from '@wordpress/core-data';
-declare function FontCard({ font, onClick, variantsText, navigatorPath, }: {
+declare function FontCard({ font, onClick, variantsText, navigatorPath }: {
     font: FontFamily;
     onClick: () => void;
     variantsText?: string;

package/build-types/font-library/font-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-card.d.ts","sourceRoot":"","sources":["../../src/font-library/font-card.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAOvD,iBAAS,QAAQ,CAAE,EAClB,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,aAAa,GACb,EAAE;IACF,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,+BA6CA;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"font-card.d.ts","sourceRoot":"","sources":["../../src/font-library/font-card.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAOvD,iBAAS,QAAQ,CAAE,EAClB,IAAI,EACJ,OAAO,EACP,YAAY,EACZ,aAAa,EACb,EAAE;IACF,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,+BA6CA;eAEc,QAAQ"}

package/build-types/font-library/font-collection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"font-collection.d.ts","sourceRoot":"","sources":["../../src/font-library/font-collection.tsx"],"names":[],"mappings":"AAoEA,iBAAS,cAAc,CAAE,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BAoflD;AAED,eAAe,cAAc,CAAC"}
+{"version":3,"file":"font-collection.d.ts","sourceRoot":"","sources":["../../src/font-library/font-collection.tsx"],"names":[],"mappings":"AAoEA,iBAAS,cAAc,CAAE,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,+BAkflD;eAEc,cAAc"}