@wordpress/global-styles-ui 1.13.0 → 1.14.1

package/build-module/screen-block.mjs

@@ -257,8 +257,9 @@ function ScreenBlock({ name, variation }) {
       {
         name,
         variation,
+        selectedViewport,
         selectedState: hasSelectedState ? stateParam : "default",
-        stateStyles: hasSelectedState ? style : void 0
+        stateStyles: hasSelectedState ? inheritedStyle : void 0
       }
     ),
     hasVariationsPanel && /* @__PURE__ */ jsx("div", { className: "global-styles-ui-screen-variations", children: /* @__PURE__ */ jsxs(VStack, { spacing: 3, children: [

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 { 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": ";AAGA,SAAS,oBAAoB;AAE7B,SAAS,eAAe,8BAA8B;AACtD,SAAS,YAAY,SAAS,gBAAgB;AAC9C,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAiB;AACnC;AAAA,EACC;AAAA,EACA,wBAAwB;AAAA,EACxB,iCAAiC;AAAA,OAC3B;AACP,SAAS,IAAI,eAAe;AAC5B;AAAA,EACC,YAAY;AAAA,EACZ,cAAc;AAAA,OACR;AAMP,SAAS,oBAAoB;AAC7B,OAAO,uBAAuB;AAC9B,SAAS,gBAAgB;AACzB;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,SAAS,UAAU,kBAAkB;AACrC,SAAS,2BAA2B;AACpC,SAAS,cAAc;AACvB,SAAS,sBAAsB,8BAA8B;AAiT3D,mBACC,KAmBE,YApBH;AA9SF,IAAM,kCAAkC;AAAA,EACvC,gBAAgB;AAAA,EAChB,oBAAoB;AAAA;AACrB;AAEA,SAAS,mBAAoB,QAAc;AAC1C,MAAK,CAAE,QAAS;AACf,WAAO;AAAA,EACR;AAEA,QAAM,kBAAkB,OAAO,SAAS,OAAO;AAE/C,MAAK,CAAE,OAAO,SAAS,iBAAkB;AACxC,WAAO,EAAE,GAAG,QAAQ,OAAO,QAAQ;AAAA,EACpC;AAEA,MAAK,OAAO,SAAS,CAAE,iBAAkB;AACxC,WAAO;AAAA,EACR;AAEA,SAAO;AACR;AAEA,SAAS,uBAAwB,QAAc;AAC9C,MAAK,CAAE,QAAS;AACf,WAAO;AAAA,EACR;AAEA,MAAK,gBAAiB,MAAO,GAAI;AAChC,WAAO;AAAA,MACN,KAAK,mBAAoB,OAAO,GAAI;AAAA,MACpC,OAAO,mBAAoB,OAAO,KAAM;AAAA,MACxC,QAAQ,mBAAoB,OAAO,MAAO;AAAA,MAC1C,MAAM,mBAAoB,OAAO,IAAK;AAAA,IACvC;AAAA,EACD;AAEA,SAAO,mBAAoB,MAAO;AACnC;AAEA,IAAM;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd;AAAA,EACA,eAAe;AAChB,IAAI,OAAQ,sBAAuB;AAOnC,SAAS,YAAa,EAAE,MAAM,UAAU,GAAsB;AAC7D,QAAM,EAAE,MAAM,YAAY,UAAU,qBAAqB,IACxD,WAAY,mBAAoB;AAEjC,MAAI,cAAwB,CAAC;AAC7B,MAAK,WAAY;AAChB,kBAAc,CAAE,cAAc,SAAU,EAAE,OAAQ,WAAY;AAAA,EAC/D;AACA,QAAM,SAAS,YAAY,KAAM,GAAI;AAGrC,QAAM,CAAE,kBAAkB,mBAAoB,IAC7C,SAAoB,SAAU;AAC/B,QAAM,CAAE,qBAAqB,sBAAuB,IACnD,SAAoB,SAAU;AAC/B,QAAM,sBAAsB,QAAS,MAAM,uBAAuB,GAAG,CAAC,CAAE;AACxE,QAAM,oBAAoB;AAAA,IACzB,MAAM,qBAAsB,IAAK;AAAA,IACjC,CAAE,IAAK;AAAA,EACR;AAEA,QAAM,aAAa,CAAE,kBAAkB,mBAAoB,EACzD,OAAQ,CAAE,UAAW,UAAU,SAAU,EACzC,KAAM,GAAI;AACZ,QAAM,mBAAmB,WAAW,SAAS;AAC7C,QAAM,CAAE,OAAO,QAAS,IAAI;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,aAAa;AAAA,EACjC;AACA,QAAM,CAAE,cAAe,IAAI;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,mBAAmB,aAAa;AAAA,EACjC;AAEA,QAAM,CAAE,YAAa,IAAI,WAAY,IAAI,MAAM,MAAO;AACtD,QAAM,CAAE,aAAa,WAAY,IAAI,WAAY,IAAI,IAAK;AAC1D,QAAM,0BAA0B;AAAA,IAC/B;AAAA,IACA;AAAA,EACD;AACA,QAAM,YAAY,aAAc,IAAK;AAGrC,MAAI,kBAAkB;AACtB,MACC,yBAAyB,SAAS,YAClC,WAAW,UAAU,SAAS,aAC5B,WAAW,UAAU,SAAS,oCAC/B,QACA,WAAW,UAAU,SAAS,iCAAiC;AAAA,IAC9D,CAAE,gBAAyB,gBAAgB;AAAA,EAC5C,IACA;AACD,sBAAkB;AAAA,EACnB;AAQA,MAAI,qBAAqB;AACzB,MACC,yBAAyB,YAAY,eACrC,SAAS,cACR;AACD,yBAAqB;AAAA,EACtB;AAEA,QAAM,WAAW,QAAS,MAAM;AAC/B,UAAM,kBAAkB,gBAAiB,uBAAwB;AACjE,QAAK,iBAAkB;AACtB,sBAAgB,QAAQ,WAAW;AAAA,IACpC;AACA,QAAK,oBAAqB;AACzB,sBAAgB,WAAW,cAAc;AAAA,IAC1C;AACA,WAAO;AAAA,EACR,GAAG,CAAE,yBAAyB,iBAAiB,kBAAmB,CAAE;AAEpE,QAAM,kBAAkB,mBAAoB,IAAK;AACjD,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,QAAM,gBAAgB,iBAAkB,QAAS;AACjD,QAAM,iBAAiB,kBAAmB,QAAS;AACnD,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,QAAM,kBAAkB,mBAAoB,QAAS;AACrD,QAAM,yBACL,mBAAmB,qBAAqB;AACzC,QAAM,wBAAwB;AAAA,IAC7B;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,qBAAqB,CAAC,CAAE,iBAAiB,UAAU,CAAE;AAC3D,QAAM,EAAE,WAAW,IAAI,UAAW,CAAE,WAAY;AAC/C,UAAM,EAAE,iBAAiB,uCAAuC,IAC/D,OAAQ,SAAU;AAEnB,UAAM,iBAAiB,uCAAuC;AAC9D,UAAM,eAAe,iBAClB,gBAAiB,QAAQ,gBAAgB,cAAe,IACxD;AAEH,WAAO;AAAA,MACN,YAAY,CAAC,CAAI,cAAsC,SACtD,oBACD;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AACN,QAAM,oBAAoB,YACvB,gBAAgB,KAAM,CAAE,MAAY,EAAE,SAAS,SAAU,IACzD;AAIH,QAAM,2BAA2B,QAAS,MAAM;AAC/C,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ,SAAS;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,gBAAgB,SAAS,MAAO,CAAE;AACvC,QAAM,kBAAkB,QAAS,MAAM;AACtC,WAAO;AAAA,MACN,GAAG;AAAA,MACH,QAAQ,aAAa;AAAA,IACtB;AAAA,EACD,GAAG,CAAE,OAAO,aAAa,MAAO,CAAE;AAClC,QAAM,qBAAqB,CAAE,aAAmB;AAC/C,UAAM,eAAe,EAAE,GAAG,SAAS;AACnC,WAAO,aAAa;AACpB,aAAU,YAAa;AAEvB,QAAK,SAAS,WAAW,aAAa,QAAS;AAC9C,kBAAa;AAAA,QACZ,GAAG;AAAA,QACH,QAAQ,SAAS;AAAA,MAClB,CAAE;AAAA,IACH;AAAA,EACD;AACA,QAAM,mBAAmB,CAAE,eAAqB;AAG/C,QAAK,eAAe,QAAY;AAC/B,kBAAa;AAAA,QACZ,GAAG;AAAA,QACH,UAAU;AAAA,MACX,CAAE;AAAA,IAIH,OAAO;AACN,kBAAa;AAAA,QACZ,GAAG;AAAA,QACH,UAAU;AAAA,UACT,GAAG,YAAY;AAAA,UACf,GAAG;AAAA,QACJ;AAAA,MACD,CAAE;AAAA,IACH;AAAA,EACD;AAEA,QAAM,qBAAqB,CAAE,aAAmB;AAE/C,UAAM,EAAE,UAAU,aAAa,GAAG,qBAAqB,IAAI;AAI3D,QAAK,aAAa,YAAa;AAG9B,YAAM,oBAAoB,CAAE,QAAQ,UAAW,EAC7C,OAAQ,OAAQ,EAChB,KAAM,GAAI;AACZ,UAAI,gBAAgB;AAAA,QACnB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AACA,sBAAgB;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,UACC,GAAG,aAAa;AAAA,UAChB,GAAG,YAAY;AAAA,QAChB;AAAA,QACA;AAAA,MACD;AACA,2BAAsB,aAAc;AAAA,IACrC,OAAO;AACN,eAAU,oBAAqB;AAAA,IAChC;AAAA,EACD;AACA,QAAM,kBAAkB,CAAE,aAAmB;AAC5C,QAAK,CAAE,UAAU,QAAS;AACzB,eAAU,QAAS;AACnB;AAAA,IACD;AAaA,UAAM,EAAE,QAAQ,GAAG,UAAU,IAAI,SAAS;AAC1C,UAAM,SAAS,uBAAwB,SAAU;AACjD,UAAM,gBAAgB,CAAE,gBAAiB,MAAO,IAC7C;AAAA,MACA,KAAK;AAAA,MACL,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,MAAM;AAAA,IACN,IACA;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,MACP,OAAO;AAAA,MACP,GAAG;AAAA,IACH;AAEH,aAAU,EAAE,GAAG,UAAU,QAAQ,EAAE,GAAG,eAAe,OAAO,EAAE,CAAE;AAAA,EACjE;AAEA,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OACC,YAAY,mBAAmB,QAAS,WAAW;AAAA,QAEpD,gBAAiB;AAAA,QACjB,cAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA,kBAAmB;AAAA,QACnB,qBAAsB;AAAA;AAAA,IACvB;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAgB,mBAAmB,aAAa;AAAA,QAChD,aAAc,mBAAmB,QAAQ;AAAA;AAAA,IAC1C;AAAA,IACE,sBACD,oBAAC,SAAI,WAAU,sCACd,+BAAC,UAAO,SAAU,GACjB;AAAA,0BAAC,YAAW,aAAI,kBAAmB,GAAG;AAAA,MACtC,oBAAC,mBAAgB,MAAc;AAAA,OAChC,GACD;AAAA,IAEC,iBACD;AAAA,MAAC;AAAA;AAAA,QACA,gBAAiB;AAAA,QACjB,OAAQ;AAAA,QACR,UAAW;AAAA,QACX;AAAA;AAAA,IACD;AAAA,IAEC,sBACD;AAAA,MAAC;AAAA;AAAA,QACA,gBAAiB;AAAA,QACjB,OAAQ;AAAA,QACR,UAAW;AAAA,QACX;AAAA,QACA,eAAgB;AAAA;AAAA,IACjB;AAAA,IAEC,sBACD;AAAA,MAAC;AAAA;AAAA,QACA,gBAAiB;AAAA,QACjB,OAAQ;AAAA,QACR,UAAW;AAAA,QACX;AAAA,QAIA,gBAAiB,CAAE;AAAA;AAAA,IACpB;AAAA,IAEC,sBACD;AAAA,MAAC;AAAA;AAAA,QACA,gBAAiB;AAAA,QACjB,OAAQ;AAAA,QACR,UAAW;AAAA,QACX;AAAA,QACA,uBAAqB;AAAA;AAAA,IACtB;AAAA,IAEC,kBACD;AAAA,MAAC;AAAA;AAAA,QACA,gBAAiB;AAAA,QACjB,OAAQ;AAAA,QACR,UAAW;AAAA,QACX;AAAA;AAAA,IACD;AAAA,IAEC,0BACD;AAAA,MAAC;AAAA;AAAA,QACA,gBAAiB;AAAA,QACjB,OAAQ;AAAA,QACR,UAAW;AAAA,QACX;AAAA,QACA,uBAAqB;AAAA;AAAA,IACtB;AAAA,IAEC,yBAAyB,CAAE,oBAC5B;AAAA,MAAC;AAAA;AAAA,QACA,UAAW;AAAA,QACX,OAAQ;AAAA,QACR,gBAAiB;AAAA;AAAA,IAClB;AAAA,IAGC,cACD,oBAAC,aAAU,OAAQ,GAAI,UAAW,GAAI,aAAc,OACnD;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,QACR,UAAW;AAAA,QACX,gBAAiB;AAAA,QACjB,MAAO;AAAA;AAAA,UAEN;AAAA,YACC;AAAA,UACD;AAAA,UACA,WAAW;AAAA,QACZ;AAAA;AAAA,IACD,GACD;AAAA,KAEF;AAEF;AAEA,IAAO,uBAAQ;",
+  "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\tselectedViewport={ selectedViewport }\n\t\t\t\tselectedState={ hasSelectedState ? stateParam : 'default' }\n\t\t\t\tstateStyles={ hasSelectedState ? inheritedStyle : 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

@@ -13,7 +13,7 @@ import { chevronRight, chevronLeft } from "@wordpress/icons";
 import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
 import { unlock } from "./lock-unlock.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
-var { StateControl } = unlock(blockEditorPrivateApis);
+var { StateControl, StateControlBadges } = unlock(blockEditorPrivateApis);
 function ScreenHeader({
   title,
   description,
@@ -46,17 +46,28 @@ function ScreenHeader({
             children: title
           }
         ),
-        /* @__PURE__ */ jsx(
-          StateControl,
-          {
-            viewportStates,
-            pseudoStates,
-            viewportValue: selectedViewport,
-            pseudoStateValue: selectedPseudoState,
-            onChangeViewport,
-            onChangePseudoState
-          }
-        )
+        /* @__PURE__ */ jsxs(VStack, { spacing: 2, alignment: "right", children: [
+          /* @__PURE__ */ jsx(
+            StateControl,
+            {
+              viewportStates,
+              pseudoStates,
+              viewportValue: selectedViewport,
+              pseudoStateValue: selectedPseudoState,
+              onChangeViewport,
+              onChangePseudoState
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            StateControlBadges,
+            {
+              viewportStates,
+              pseudoStates,
+              viewportValue: selectedViewport,
+              pseudoStateValue: selectedPseudoState
+            }
+          )
+        ] })
       ] }) })
     ] }),
     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\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;",
+  "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, StateControlBadges } = 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<VStack spacing={ 2 } alignment=\"right\">\n\t\t\t\t\t\t\t\t\t\t<StateControl\n\t\t\t\t\t\t\t\t\t\t\tviewportStates={ viewportStates }\n\t\t\t\t\t\t\t\t\t\t\tpseudoStates={ pseudoStates }\n\t\t\t\t\t\t\t\t\t\t\tviewportValue={ selectedViewport }\n\t\t\t\t\t\t\t\t\t\t\tpseudoStateValue={\n\t\t\t\t\t\t\t\t\t\t\t\tselectedPseudoState\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonChangeViewport={\n\t\t\t\t\t\t\t\t\t\t\t\tonChangeViewport\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonChangePseudoState={\n\t\t\t\t\t\t\t\t\t\t\t\tonChangePseudoState\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\t<StateControlBadges\n\t\t\t\t\t\t\t\t\t\t\tviewportStates={ viewportStates }\n\t\t\t\t\t\t\t\t\t\t\tpseudoStates={ pseudoStates }\n\t\t\t\t\t\t\t\t\t\t\tviewportValue={ selectedViewport }\n\t\t\t\t\t\t\t\t\t\t\tpseudoStateValue={\n\t\t\t\t\t\t\t\t\t\t\t\tselectedPseudoState\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</VStack>\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,cAeE,YAfF;AA/BP,IAAM,EAAE,cAAc,mBAAmB,IAAI,OAAQ,sBAAuB;AAcrE,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,qBAAC,UAAO,SAAU,GAAI,WAAU,SAC/B;AAAA;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAgB;AAAA,cAChB,kBACC;AAAA,cAED;AAAA,cAGA;AAAA;AAAA,UAGD;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA;AAAA,cACA,eAAgB;AAAA,cAChB,kBACC;AAAA;AAAA,UAEF;AAAA,WACD;AAAA,SACD,GACD;AAAA,OACD;AAAA,IACE,eACD,oBAAC,UAAO,WAAU,wCACf,uBACH;AAAA,KAEF,GACD,GACD,GACD;AAEF;",
   "names": []
 }

package/build-module/variations/variation.mjs

@@ -1,6 +1,6 @@
 // packages/global-styles-ui/src/variations/variation.tsx
 import clsx from "clsx";
-import { Tooltip } from "@wordpress/components";
+import { Tooltip as WCTooltip } from "@wordpress/components";
 import { useMemo, useContext, useState } from "@wordpress/element";
 import { ENTER } from "@wordpress/keycodes";
 import { _x, sprintf } from "@wordpress/i18n";
@@ -82,7 +82,7 @@ function Variation({
       )
     }
   );
-  return /* @__PURE__ */ jsx(GlobalStylesContext.Provider, { value: context, children: showTooltip ? /* @__PURE__ */ jsx(Tooltip, { text: variation?.title, children: content }) : content });
+  return /* @__PURE__ */ jsx(GlobalStylesContext.Provider, { value: context, children: showTooltip ? /* @__PURE__ */ jsx(WCTooltip, { text: variation?.title, children: content }) : content });
 }
 export {
   Variation as default

package/build-module/variations/variation.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/variations/variation.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Tooltip } from '@wordpress/components';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport { _x, sprintf } from '@wordpress/i18n';\nimport {\n\tareGlobalStylesEqual,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from '../context';\nimport { filterObjectByProperties } from '../utils';\n\ninterface VariationProps {\n\tvariation: any;\n\tchildren: ( isFocused: boolean ) => React.ReactNode;\n\tisPill?: boolean;\n\tproperties?: string[];\n\tshowTooltip?: boolean;\n}\n\nexport default function Variation( {\n\tvariation,\n\tchildren,\n\tisPill = false,\n\tproperties,\n\tshowTooltip = false,\n}: VariationProps ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst {\n\t\tbase,\n\t\tuser,\n\t\tonChange: setUserConfig,\n\t} = useContext( GlobalStylesContext );\n\n\tconst context = useMemo( () => {\n\t\tlet merged = mergeGlobalStyles( base, variation );\n\t\tif ( properties ) {\n\t\t\tmerged = filterObjectByProperties( merged, properties );\n\t\t}\n\t\treturn {\n\t\t\tuser: variation,\n\t\t\tbase,\n\t\t\tmerged,\n\t\t\tonChange: () => {},\n\t\t};\n\t}, [ variation, base, properties ] );\n\n\tconst selectVariation = () => setUserConfig( variation );\n\n\tconst selectOnEnter = ( event: React.KeyboardEvent ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo(\n\t\t() => areGlobalStylesEqual( user, variation ),\n\t\t[ user, variation ]\n\t);\n\n\tlet label = variation?.title;\n\tif ( variation?.description ) {\n\t\tlabel = sprintf(\n\t\t\t/* translators: 1: variation title. 2: variation description. */\n\t\t\t_x( '%1$s (%2$s)', 'variation label' ),\n\t\t\tvariation?.title,\n\t\t\tvariation?.description\n\t\t);\n\t}\n\n\tconst content = (\n\t\t<div\n\t\t\tclassName={ clsx( 'global-styles-ui-variations_item', {\n\t\t\t\t'is-active': isActive,\n\t\t\t} ) }\n\t\t\trole=\"button\"\n\t\t\tonClick={ selectVariation }\n\t\t\tonKeyDown={ selectOnEnter }\n\t\t\ttabIndex={ 0 }\n\t\t\taria-label={ label }\n\t\t\taria-current={ isActive }\n\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'global-styles-ui-variations_item-preview', {\n\t\t\t\t\t'is-pill': isPill,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ children( isFocused ) }\n\t\t\t</div>\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t{ showTooltip ? (\n\t\t\t\t<Tooltip text={ variation?.title }>{ content }</Tooltip>\n\t\t\t) : (\n\t\t\t\tcontent\n\t\t\t) }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe;AACxB,SAAS,SAAS,YAAY,gBAAgB;AAC9C,SAAS,aAAa;AACtB,SAAS,IAAI,eAAe;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,OACM;AAKP,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AA2EtC;AAjEY,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,cAAc;AACf,GAAoB;AACnB,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACX,IAAI,WAAY,mBAAoB;AAEpC,QAAM,UAAU,QAAS,MAAM;AAC9B,QAAI,SAAS,kBAAmB,MAAM,SAAU;AAChD,QAAK,YAAa;AACjB,eAAS,yBAA0B,QAAQ,UAAW;AAAA,IACvD;AACA,WAAO;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAAC;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,WAAW,MAAM,UAAW,CAAE;AAEnC,QAAM,kBAAkB,MAAM,cAAe,SAAU;AAEvD,QAAM,gBAAgB,CAAE,UAAgC;AACvD,QAAK,MAAM,YAAY,OAAQ;AAC9B,YAAM,eAAe;AACrB,sBAAgB;AAAA,IACjB;AAAA,EACD;AAEA,QAAM,WAAW;AAAA,IAChB,MAAM,qBAAsB,MAAM,SAAU;AAAA,IAC5C,CAAE,MAAM,SAAU;AAAA,EACnB;AAEA,MAAI,QAAQ,WAAW;AACvB,MAAK,WAAW,aAAc;AAC7B,YAAQ;AAAA;AAAA,MAEP,GAAI,eAAe,iBAAkB;AAAA,MACrC,WAAW;AAAA,MACX,WAAW;AAAA,IACZ;AAAA,EACD;AAEA,QAAM,UACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,oCAAoC;AAAA,QACrD,aAAa;AAAA,MACd,CAAE;AAAA,MACF,MAAK;AAAA,MACL,SAAU;AAAA,MACV,WAAY;AAAA,MACZ,UAAW;AAAA,MACX,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,SAAU,MAAM,aAAc,IAAK;AAAA,MACnC,QAAS,MAAM,aAAc,KAAM;AAAA,MAEnC;AAAA,QAAC;AAAA;AAAA,UACA,WAAY,KAAM,4CAA4C;AAAA,YAC7D,WAAW;AAAA,UACZ,CAAE;AAAA,UAEA,mBAAU,SAAU;AAAA;AAAA,MACvB;AAAA;AAAA,EACD;AAGD,SACC,oBAAC,oBAAoB,UAApB,EAA6B,OAAQ,SACnC,wBACD,oBAAC,WAAQ,MAAO,WAAW,OAAU,mBAAS,IAE9C,SAEF;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Tooltip as WCTooltip } from '@wordpress/components';\nimport { useMemo, useContext, useState } from '@wordpress/element';\nimport { ENTER } from '@wordpress/keycodes';\nimport { _x, sprintf } from '@wordpress/i18n';\nimport {\n\tareGlobalStylesEqual,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from '../context';\nimport { filterObjectByProperties } from '../utils';\n\ninterface VariationProps {\n\tvariation: any;\n\tchildren: ( isFocused: boolean ) => React.ReactNode;\n\tisPill?: boolean;\n\tproperties?: string[];\n\tshowTooltip?: boolean;\n}\n\nexport default function Variation( {\n\tvariation,\n\tchildren,\n\tisPill = false,\n\tproperties,\n\tshowTooltip = false,\n}: VariationProps ) {\n\tconst [ isFocused, setIsFocused ] = useState( false );\n\tconst {\n\t\tbase,\n\t\tuser,\n\t\tonChange: setUserConfig,\n\t} = useContext( GlobalStylesContext );\n\n\tconst context = useMemo( () => {\n\t\tlet merged = mergeGlobalStyles( base, variation );\n\t\tif ( properties ) {\n\t\t\tmerged = filterObjectByProperties( merged, properties );\n\t\t}\n\t\treturn {\n\t\t\tuser: variation,\n\t\t\tbase,\n\t\t\tmerged,\n\t\t\tonChange: () => {},\n\t\t};\n\t}, [ variation, base, properties ] );\n\n\tconst selectVariation = () => setUserConfig( variation );\n\n\tconst selectOnEnter = ( event: React.KeyboardEvent ) => {\n\t\tif ( event.keyCode === ENTER ) {\n\t\t\tevent.preventDefault();\n\t\t\tselectVariation();\n\t\t}\n\t};\n\n\tconst isActive = useMemo(\n\t\t() => areGlobalStylesEqual( user, variation ),\n\t\t[ user, variation ]\n\t);\n\n\tlet label = variation?.title;\n\tif ( variation?.description ) {\n\t\tlabel = sprintf(\n\t\t\t/* translators: 1: variation title. 2: variation description. */\n\t\t\t_x( '%1$s (%2$s)', 'variation label' ),\n\t\t\tvariation?.title,\n\t\t\tvariation?.description\n\t\t);\n\t}\n\n\tconst content = (\n\t\t<div\n\t\t\tclassName={ clsx( 'global-styles-ui-variations_item', {\n\t\t\t\t'is-active': isActive,\n\t\t\t} ) }\n\t\t\trole=\"button\"\n\t\t\tonClick={ selectVariation }\n\t\t\tonKeyDown={ selectOnEnter }\n\t\t\ttabIndex={ 0 }\n\t\t\taria-label={ label }\n\t\t\taria-current={ isActive }\n\t\t\tonFocus={ () => setIsFocused( true ) }\n\t\t\tonBlur={ () => setIsFocused( false ) }\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={ clsx( 'global-styles-ui-variations_item-preview', {\n\t\t\t\t\t'is-pill': isPill,\n\t\t\t\t} ) }\n\t\t\t>\n\t\t\t\t{ children( isFocused ) }\n\t\t\t</div>\n\t\t</div>\n\t);\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ context }>\n\t\t\t{ showTooltip ? (\n\t\t\t\t<WCTooltip text={ variation?.title }>{ content }</WCTooltip>\n\t\t\t) : (\n\t\t\t\tcontent\n\t\t\t) }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,WAAW,iBAAiB;AACrC,SAAS,SAAS,YAAY,gBAAgB;AAC9C,SAAS,aAAa;AACtB,SAAS,IAAI,eAAe;AAC5B;AAAA,EACC;AAAA,EACA;AAAA,OACM;AAKP,SAAS,2BAA2B;AACpC,SAAS,gCAAgC;AA2EtC;AAjEY,SAAR,UAA4B;AAAA,EAClC;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA,cAAc;AACf,GAAoB;AACnB,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU;AAAA,EACX,IAAI,WAAY,mBAAoB;AAEpC,QAAM,UAAU,QAAS,MAAM;AAC9B,QAAI,SAAS,kBAAmB,MAAM,SAAU;AAChD,QAAK,YAAa;AACjB,eAAS,yBAA0B,QAAQ,UAAW;AAAA,IACvD;AACA,WAAO;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,UAAU,MAAM;AAAA,MAAC;AAAA,IAClB;AAAA,EACD,GAAG,CAAE,WAAW,MAAM,UAAW,CAAE;AAEnC,QAAM,kBAAkB,MAAM,cAAe,SAAU;AAEvD,QAAM,gBAAgB,CAAE,UAAgC;AACvD,QAAK,MAAM,YAAY,OAAQ;AAC9B,YAAM,eAAe;AACrB,sBAAgB;AAAA,IACjB;AAAA,EACD;AAEA,QAAM,WAAW;AAAA,IAChB,MAAM,qBAAsB,MAAM,SAAU;AAAA,IAC5C,CAAE,MAAM,SAAU;AAAA,EACnB;AAEA,MAAI,QAAQ,WAAW;AACvB,MAAK,WAAW,aAAc;AAC7B,YAAQ;AAAA;AAAA,MAEP,GAAI,eAAe,iBAAkB;AAAA,MACrC,WAAW;AAAA,MACX,WAAW;AAAA,IACZ;AAAA,EACD;AAEA,QAAM,UACL;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,oCAAoC;AAAA,QACrD,aAAa;AAAA,MACd,CAAE;AAAA,MACF,MAAK;AAAA,MACL,SAAU;AAAA,MACV,WAAY;AAAA,MACZ,UAAW;AAAA,MACX,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,SAAU,MAAM,aAAc,IAAK;AAAA,MACnC,QAAS,MAAM,aAAc,KAAM;AAAA,MAEnC;AAAA,QAAC;AAAA;AAAA,UACA,WAAY,KAAM,4CAA4C;AAAA,YAC7D,WAAW;AAAA,UACZ,CAAE;AAAA,UAEA,mBAAU,SAAU;AAAA;AAAA,MACvB;AAAA;AAAA,EACD;AAGD,SACC,oBAAC,oBAAoB,UAApB,EAA6B,OAAQ,SACnC,wBACD,oBAAC,aAAU,MAAO,WAAW,OAAU,mBAAS,IAEhD,SAEF;AAEF;",
   "names": []
 }

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

@@ -4,9 +4,10 @@
 interface BlockPreviewPanelProps {
     name: string;
     variation?: string;
+    selectedViewport?: string;
     selectedState?: string;
     stateStyles?: any;
 }
-declare const BlockPreviewPanel: ({ name, variation, selectedState, stateStyles, }: BlockPreviewPanelProps) => import("react").JSX.Element | null;
+declare const BlockPreviewPanel: ({ name, variation, selectedViewport, selectedState, stateStyles, }: BlockPreviewPanelProps) => import("react").JSX.Element | null;
 export default BlockPreviewPanel;
 //# sourceMappingURL=block-preview-panel.d.ts.map

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":"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"}
+{"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,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,GAAG,CAAC;CAClB;AASD,QAAA,MAAM,iBAAiB,uEAMpB,sBAAsB,uCAoFxB,CAAC;eAEa,iBAAiB"}

package/build-types/screen-block.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen-block.d.ts","sourceRoot":"","sources":["../src/screen-block.tsx"],"names":[],"mappings":"AAgGA,UAAU,gBAAgB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,iBAAS,WAAW,CAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BAyV1D;eAEc,WAAW"}
+{"version":3,"file":"screen-block.d.ts","sourceRoot":"","sources":["../src/screen-block.tsx"],"names":[],"mappings":"AAgGA,UAAU,gBAAgB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,iBAAS,WAAW,CAAE,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,gBAAgB,+BA0V1D;eAEc,WAAW"}

package/build-types/screen-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"screen-header.d.ts","sourceRoot":"","sources":["../src/screen-header.tsx"],"names":[],"mappings":"AAiBA;;GAEG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK/C,UAAU,iBAAiB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,eAAe,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IAC7C,mBAAmB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;CAChD;AAED,wBAAgB,YAAY,CAAE,EAC7B,KAAK,EACL,WAAW,EACX,MAAM,EACN,cAAc,EACd,YAAY,EACZ,gBAA4B,EAC5B,mBAA+B,EAC/B,gBAAgB,EAChB,mBAAmB,EACnB,EAAE,iBAAiB,+BA6CnB"}
+{"version":3,"file":"screen-header.d.ts","sourceRoot":"","sources":["../src/screen-header.tsx"],"names":[],"mappings":"AAiBA;;GAEG;AACH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAK/C,UAAU,iBAAiB;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,cAAc,CAAC,EAAE,eAAe,EAAE,CAAC;IACnC,YAAY,CAAC,EAAE,eAAe,EAAE,CAAC;IACjC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;IAC7C,mBAAmB,CAAC,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,CAAC;CAChD;AAED,wBAAgB,YAAY,CAAE,EAC7B,KAAK,EACL,WAAW,EACX,MAAM,EACN,cAAc,EACd,YAAY,EACZ,gBAA4B,EAC5B,mBAA+B,EAC/B,gBAAgB,EAChB,mBAAmB,EACnB,EAAE,iBAAiB,+BA2DnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/global-styles-ui",
-	"version": "1.13.0",
+	"version": "1.14.1",
 	"description": "Global Styles UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,22 +44,22 @@
 	},
 	"react-native": "src/index",
 	"dependencies": {
-		"@wordpress/a11y": "^4.46.0",
-		"@wordpress/api-fetch": "^7.46.0",
-		"@wordpress/base-styles": "^8.0.0",
-		"@wordpress/block-editor": "^15.19.0",
-		"@wordpress/blocks": "^15.19.0",
-		"@wordpress/components": "^33.1.0",
-		"@wordpress/compose": "^7.46.0",
-		"@wordpress/core-data": "^7.46.0",
-		"@wordpress/data": "^10.46.0",
-		"@wordpress/date": "^5.46.0",
-		"@wordpress/element": "^6.46.0",
-		"@wordpress/global-styles-engine": "^1.13.0",
-		"@wordpress/i18n": "^6.19.0",
-		"@wordpress/icons": "^13.1.0",
-		"@wordpress/keycodes": "^4.46.0",
-		"@wordpress/private-apis": "^1.46.0",
+		"@wordpress/a11y": "^4.48.0",
+		"@wordpress/api-fetch": "^7.48.0",
+		"@wordpress/base-styles": "^9.1.0",
+		"@wordpress/block-editor": "^15.21.0",
+		"@wordpress/blocks": "^15.21.0",
+		"@wordpress/components": "^35.0.0",
+		"@wordpress/compose": "^8.1.0",
+		"@wordpress/core-data": "^7.48.0",
+		"@wordpress/data": "^10.48.0",
+		"@wordpress/date": "^5.48.0",
+		"@wordpress/element": "^8.0.0",
+		"@wordpress/global-styles-engine": "^1.14.1",
+		"@wordpress/i18n": "^6.21.0",
+		"@wordpress/icons": "^13.3.0",
+		"@wordpress/keycodes": "^4.48.0",
+		"@wordpress/private-apis": "^1.48.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.0",
 		"colord": "^2.7.0"
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "51264e33b95fadff9a06b68141e674ce9cde9675"
+	"gitHead": "ace624620394585491b7f0c28ff0d3a8c13d50d8"
 }

package/src/block-preview-panel.tsx

@@ -16,13 +16,22 @@ import { getVariationClassName } from './utils';
 interface BlockPreviewPanelProps {
 	name: string;
 	variation?: string;
+	selectedViewport?: string;
 	selectedState?: string;
 	stateStyles?: any;
 }
 
+// Keep in sync with responsive breakpoint media queries in the global styles engine.
+const PREVIEW_WIDTH_BY_VIEWPORT: Record< string, number > = {
+	default: 783,
+	tablet: 600,
+	mobile: 480,
+};
+
 const BlockPreviewPanel = ( {
 	name,
 	variation = '',
+	selectedViewport = 'default',
 	selectedState = 'default',
 	stateStyles,
 }: BlockPreviewPanelProps ) => {
@@ -55,7 +64,17 @@ const BlockPreviewPanel = ( {
 		return generatePreviewStateStyles( stateStyles, name );
 	}, [ selectedState, stateStyles, name ] );
 
-	const viewportWidth = blockExample?.viewportWidth ?? 500;
+	if ( ! blockExample ) {
+		return null;
+	}
+
+	const viewportWidth =
+		PREVIEW_WIDTH_BY_VIEWPORT[ selectedViewport ] ??
+		blockExample.viewportWidth ??
+		500;
+	const normalizedViewportWidth = blockExample.viewportWidth ?? 500;
+	const previewScale = Math.max( viewportWidth / normalizedViewportWidth, 1 );
+	const previewPadding = 24 * previewScale;
 	// Same as height of InserterPreviewPanel.
 	const previewHeight = 144;
 	const sidebarWidth = 235;
@@ -65,10 +84,6 @@ const BlockPreviewPanel = ( {
 			? previewHeight / scale
 			: previewHeight;
 
-	if ( ! blockExample ) {
-		return null;
-	}
-
 	return (
 		<Spacer marginX={ 4 } marginBottom={ 4 }>
 			<div
@@ -85,12 +100,15 @@ const BlockPreviewPanel = ( {
 							{
 								css: `
 								body{
-									padding: 24px;
+									padding: ${ previewPadding }px;
 									min-height:${ Math.round( minHeight ) }px;
 									display:flex;
-									align-items:center;
 								}
-								.is-root-container { width: 100%; }
+								.is-root-container {
+									width: ${ 100 / previewScale }%;
+									transform: scale(${ previewScale });
+									transform-origin: top left;
+								}
 								${ stateCSS }
 							`,
 							},

package/src/font-library/installed-fonts.tsx

@@ -167,7 +167,7 @@ function InstalledFonts() {
 		).length;
 		return sprintf(
 			/* translators: 1: Active font variants, 2: Total font variants. */
-			__( '%1$d/%2$d variants active' ),
+			__( '%1$d of %2$d active' ),
 			variantsActive,
 			variantsInstalled
 		);

package/src/font-library/lib/inflate.js

@@ -28,8 +28,6 @@
  * SOFTWARE.
  */
 
-/* eslint @eslint-community/eslint-comments/no-unlimited-disable: 0 */
-/* eslint-disable */
 /* pako 1.0.10 nodeca/pako */
 export default ( function () {
 	var define, module, exports;
@@ -4092,4 +4090,3 @@ export default ( function () {
 		[]
 	)( '/lib/inflate.js' );
 } )();
-/* eslint-enable */

package/src/font-library/lib/lib-font.browser.js

@@ -28,8 +28,6 @@
  * SOFTWARE.
  */
 
-/* eslint @eslint-community/eslint-comments/no-unlimited-disable: 0 */
-/* eslint-disable */
 // import pako from 'pako';
 import unbrotli from './unbrotli';
 import GzipDecode from './inflate';
@@ -3858,4 +3856,3 @@ class LongVertMetric {
 }
 var vmtx$1 = Object.freeze( { __proto__: null, vmtx: vmtx } );
 export { Font };
-/* eslint-enable */

package/src/font-library/lib/unbrotli.js

@@ -28,8 +28,6 @@
  * SOFTWARE.
  */
 
-/* eslint @eslint-community/eslint-comments/no-unlimited-disable: 0 */
-/* eslint-disable */
 export default ( function () {
 	var define, module, exports;
 	return ( function () {
@@ -2685,4 +2683,3 @@ export default ( function () {
 		[ 12 ]
 	)( 12 );
 } )();
-/* eslint-enable */

package/src/screen-block.tsx

@@ -352,8 +352,9 @@ function ScreenBlock( { name, variation }: ScreenBlockProps ) {
 			<BlockPreviewPanel
 				name={ name }
 				variation={ variation }
+				selectedViewport={ selectedViewport }
 				selectedState={ hasSelectedState ? stateParam : 'default' }
-				stateStyles={ hasSelectedState ? style : undefined }
+				stateStyles={ hasSelectedState ? inheritedStyle : undefined }
 			/>
 			{ hasVariationsPanel && (
 				<div className="global-styles-ui-screen-variations">

package/src/screen-header.tsx

@@ -21,7 +21,7 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import type { StateDefinition } from './utils';
 import { unlock } from './lock-unlock';
 
-const { StateControl } = unlock( blockEditorPrivateApis );
+const { StateControl, StateControlBadges } = unlock( blockEditorPrivateApis );
 
 interface ScreenHeaderProps {
 	title: string;
@@ -67,16 +67,30 @@ export function ScreenHeader( {
 									>
 										{ title }
 									</Heading>
-									<StateControl
-										viewportStates={ viewportStates }
-										pseudoStates={ pseudoStates }
-										viewportValue={ selectedViewport }
-										pseudoStateValue={ selectedPseudoState }
-										onChangeViewport={ onChangeViewport }
-										onChangePseudoState={
-											onChangePseudoState
-										}
-									/>
+									<VStack spacing={ 2 } alignment="right">
+										<StateControl
+											viewportStates={ viewportStates }
+											pseudoStates={ pseudoStates }
+											viewportValue={ selectedViewport }
+											pseudoStateValue={
+												selectedPseudoState
+											}
+											onChangeViewport={
+												onChangeViewport
+											}
+											onChangePseudoState={
+												onChangePseudoState
+											}
+										/>
+										<StateControlBadges
+											viewportStates={ viewportStates }
+											pseudoStates={ pseudoStates }
+											viewportValue={ selectedViewport }
+											pseudoStateValue={
+												selectedPseudoState
+											}
+										/>
+									</VStack>
 								</HStack>
 							</Spacer>
 						</HStack>

package/src/variations/variation.tsx

@@ -6,7 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
-import { Tooltip } from '@wordpress/components';
+import { Tooltip as WCTooltip } from '@wordpress/components';
 import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { _x, sprintf } from '@wordpress/i18n';
@@ -107,7 +107,7 @@ export default function Variation( {
 	return (
 		<GlobalStylesContext.Provider value={ context }>
 			{ showTooltip ? (
-				<Tooltip text={ variation?.title }>{ content }</Tooltip>
+				<WCTooltip text={ variation?.title }>{ content }</WCTooltip>
 			) : (
 				content
 			) }