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

package/build/font-library/font-collection.cjs

@@ -193,27 +193,7 @@ function FontCollection({ slug }) {
   if (renderConfirmDialog) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_google_fonts_confirm_dialog.default, {});
   }
-  const ActionsComponent = () => {
-    if (slug !== "google-fonts" || renderConfirmDialog || selectedFont) {
-      return null;
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_components.DropdownMenu,
-      {
-        icon: import_icons.moreVertical,
-        label: (0, import_i18n.__)("Actions"),
-        popoverProps: {
-          position: "bottom left"
-        },
-        controls: [
-          {
-            title: (0, import_i18n.__)("Revoke access to Google Fonts"),
-            onClick: revokeAccess
-          }
-        ]
-      }
-    );
-  };
+  const showActions = slug === "google-fonts" && !renderConfirmDialog && !selectedFont;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "font-library__tabpanel-layout", children: [
     isLoading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-library__loading", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.ProgressBar, {}) }),
     !isLoading && selectedCollection && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
@@ -229,7 +209,24 @@ function FontCollection({ slug }) {
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { level: 2, size: 13, children: selectedCollection.name }),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalText, { children: selectedCollection.description })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsComponent, {})
+                showActions && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_components.DropdownMenu,
+                  {
+                    icon: import_icons.moreVertical,
+                    label: (0, import_i18n.__)("Actions"),
+                    popoverProps: {
+                      position: "bottom left"
+                    },
+                    controls: [
+                      {
+                        title: (0, import_i18n.__)(
+                          "Revoke access to Google Fonts"
+                        ),
+                        onClick: revokeAccess
+                      }
+                    ]
+                  }
+                )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { margin: 4 }),
               /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { spacing: 4, justify: "space-between", children: [

package/build/font-library/font-collection.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/font-library/font-collection.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseState,\n\tuseMemo,\n\tcreateInterpolateElement,\n} from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as WCText,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tNavigator,\n\t__experimentalHeading as Heading,\n\tNotice,\n\tSelectControl,\n\tFlex,\n\tButton,\n\tDropdownMenu,\n\tSearchControl,\n\tProgressBar,\n\tCheckboxControl,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { sprintf, __, _x, isRTL } from '@wordpress/i18n';\nimport {\n\tmoreVertical,\n\tnext,\n\tprevious,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\nimport { useEntityRecord } from '@wordpress/core-data';\nimport type {\n\tFontCollection as FontCollectionType,\n\tFontFace,\n\tFontFamily,\n\tCollectionFontFamily,\n} from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport { toggleFont } from './utils/toggleFont';\nimport {\n\tgetFontsOutline,\n\tisFontFontFaceInOutline,\n} from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\nimport { downloadFontFaceAssets } from './utils';\nimport { sortFontFaces } from './utils/sort-font-faces';\nimport CollectionFontVariant from './collection-font-variant';\nimport type { FontFamilyToUpload } from './types';\n\nconst DEFAULT_CATEGORY = {\n\tslug: 'all',\n\tname: _x( 'All', 'font categories' ),\n};\n\nconst LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';\nconst MIN_WINDOW_HEIGHT = 500;\n\nfunction FontCollection( { slug }: { slug: string } ) {\n\tconst requiresPermission = slug === 'google-fonts';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn window.localStorage.getItem( LOCAL_STORAGE_ITEM ) === 'true';\n\t};\n\n\tconst [ selectedFont, setSelectedFont ] = useState< FontFamily | null >(\n\t\tnull\n\t);\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error' | 'info';\n\t\tmessage: string;\n\t} | null >( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState< FontFamily[] >(\n\t\t[]\n\t);\n\tconst [ page, setPage ] = useState( 1 );\n\tconst [ filters, setFilters ] = useState< {\n\t\tcategory?: string;\n\t\tsearch?: string;\n\t} >( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { installFonts, isInstalling } = useContext( FontLibraryContext );\n\tconst { record: selectedCollection, isResolving: isLoading } =\n\t\tuseEntityRecord< FontCollectionType >( 'root', 'fontCollection', slug );\n\n\tuseEffect( () => {\n\t\tconst handleStorage = () => {\n\t\t\tsetRenderConfirmDialog(\n\t\t\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t\t\t);\n\t\t};\n\t\thandleStorage();\n\t\twindow.addEventListener( 'storage', handleStorage );\n\t\treturn () => window.removeEventListener( 'storage', handleStorage );\n\t}, [ slug, requiresPermission ] );\n\n\tconst revokeAccess = () => {\n\t\twindow.localStorage.setItem( LOCAL_STORAGE_ITEM, 'false' );\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t}, [ slug ] );\n\n\tuseEffect( () => {\n\t\t// If the selected fonts change, reset the selected fonts to install\n\t\tsetFontsToInstall( [] );\n\t}, [ selectedFont ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() =>\n\t\t\t( selectedCollection?.font_families as\n\t\t\t\t| CollectionFontFamily[]\n\t\t\t\t| undefined ) ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.categories ?? [];\n\n\tconst categories = [ DEFAULT_CATEGORY, ...collectionCategories ];\n\n\tconst fonts = useMemo(\n\t\t() => filterFonts( collectionFonts, filters ),\n\t\t[ collectionFonts, filters ]\n\t);\n\n\t// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px\n\t// The height of each font family item is 61px.\n\tconst windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT );\n\tconst pageSize = Math.floor( ( windowHeight - 417 ) / 61 );\n\tconst totalPages = Math.ceil( fonts.length / pageSize );\n\tconst itemsStart = ( page - 1 ) * pageSize;\n\tconst itemsLimit = page * pageSize;\n\tconst items = fonts.slice( itemsStart, itemsLimit );\n\n\tconst handleCategoryFilter = ( category: string ) => {\n\t\tsetFilters( { ...filters, category } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUpdateSearchInput = ( value: string ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t\tsetPage( 1 );\n\t};\n\n\t// @ts-expect-error\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst handleToggleVariant = ( font: FontFamily, face?: FontFace ) => {\n\t\tconst newFontsToInstall = toggleFont( font, face, fontsToInstall );\n\t\tsetFontsToInstall( newFontsToInstall );\n\t};\n\n\tconst fontToInstallOutline = getFontsOutline( fontsToInstall );\n\n\tconst resetFontsToInstall = () => {\n\t\tsetFontsToInstall( [] );\n\t};\n\n\tconst selectFontCount =\n\t\tfontsToInstall.length > 0\n\t\t\t? fontsToInstall[ 0 ]?.fontFace?.length ?? 0\n\t\t\t: 0;\n\n\t// Check if any fonts are selected.\n\tconst isIndeterminate =\n\t\tselectFontCount > 0 &&\n\t\tselectFontCount !== selectedFont?.fontFace?.length;\n\n\t// Check if all fonts are selected.\n\tconst isSelectAllChecked =\n\t\tselectFontCount === selectedFont?.fontFace?.length;\n\n\t// Toggle select all fonts.\n\tconst toggleSelectAll = () => {\n\t\tconst newFonts: FontFamily[] = [];\n\t\tif ( ! isSelectAllChecked && selectedFont ) {\n\t\t\tnewFonts.push( selectedFont );\n\t\t}\n\n\t\tsetFontsToInstall( newFonts );\n\t};\n\n\tconst handleInstall = async () => {\n\t\tsetNotice( null );\n\n\t\tconst fontFamily: FontFamilyToUpload = fontsToInstall[ 0 ];\n\n\t\ttry {\n\t\t\tif ( fontFamily?.fontFace ) {\n\t\t\t\tawait Promise.all(\n\t\t\t\t\tfontFamily.fontFace.map( async ( fontFace ) => {\n\t\t\t\t\t\tif ( fontFace.src ) {\n\t\t\t\t\t\t\tfontFace.file = await downloadFontFaceAssets(\n\t\t\t\t\t\t\t\tfontFace.src\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t}\n\t\t} catch {\n\t\t\t// If any of the fonts fail to download,\n\t\t\t// show an error notice and stop the request from being sent.\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: __(\n\t\t\t\t\t'Error installing the fonts, could not be downloaded.'\n\t\t\t\t),\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait installFonts( [ fontFamily ] );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: ( error as Error ).message,\n\t\t\t} );\n\t\t}\n\t\tresetFontsToInstall();\n\t};\n\n\tconst getSortedFontFaces = ( fontFamily: FontFamily ) => {\n\t\tif ( ! fontFamily ) {\n\t\t\treturn [];\n\t\t}\n\t\tif ( ! fontFamily.fontFace || ! fontFamily.fontFace.length ) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tfontFamily: fontFamily.fontFamily,\n\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\tfontWeight: '400',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\t\treturn sortFontFaces( fontFamily.fontFace );\n\t};\n\n\tif ( renderConfirmDialog ) {\n\t\treturn <GoogleFontsConfirmDialog />;\n\t}\n\n\tconst ActionsComponent = () => {\n\t\tif ( slug !== 'google-fonts' || renderConfirmDialog || selectedFont ) {\n\t\t\treturn null;\n\t\t}\n\t\treturn (\n\t\t\t<DropdownMenu\n\t\t\t\ticon={ moreVertical }\n\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\tpopoverProps={ {\n\t\t\t\t\tposition: 'bottom left',\n\t\t\t\t} }\n\t\t\t\tcontrols={ [\n\t\t\t\t\t{\n\t\t\t\t\t\ttitle: __( 'Revoke access to Google Fonts' ),\n\t\t\t\t\t\tonClick: revokeAccess,\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t/>\n\t\t);\n\t};\n\n\treturn (\n\t\t<div className=\"font-library__tabpanel-layout\">\n\t\t\t{ isLoading && (\n\t\t\t\t<div className=\"font-library__loading\">\n\t\t\t\t\t<ProgressBar />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! isLoading && selectedCollection && (\n\t\t\t\t<>\n\t\t\t\t\t<Navigator\n\t\t\t\t\t\tinitialPath=\"/\"\n\t\t\t\t\t\tclassName=\"font-library__tabpanel-layout\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t\t\t\t\t{ selectedCollection.name }\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t\t\t{ selectedCollection.description }\n\t\t\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t<ActionsComponent />\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<HStack spacing={ 4 } justify=\"space-between\">\n\t\t\t\t\t\t\t\t<SearchControl\n\t\t\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Font name\u2026' ) }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\t\t\thideLabelFromVision={ false }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t\t\t</HStack>\n\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t\t\t\t\t{ !! selectedCollection?.font_families?.length &&\n\t\t\t\t\t\t\t\t! fonts.length && (\n\t\t\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t'No fonts found. Try with a different search term.'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t<div className=\"font-library__fonts-grid__main\">\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ items.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings.slug\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\tfont={\n\t\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedFont(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Navigator.Screen>\n\n\t\t\t\t\t\t<Navigator.Screen path=\"/fontFamily\">\n\t\t\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronRight : chevronLeft\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tsetSelectedFont( null );\n\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ selectedFont?.name }\n\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t{ __( 'Select font variants to install.' ) }\n\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\tclassName=\"font-library__select-all\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Select all' ) }\n\t\t\t\t\t\t\t\tchecked={ isSelectAllChecked }\n\t\t\t\t\t\t\t\tonChange={ toggleSelectAll }\n\t\t\t\t\t\t\t\tindeterminate={ isIndeterminate }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ selectedFont &&\n\t\t\t\t\t\t\t\t\t\tgetSortedFontFaces( selectedFont ).map(\n\t\t\t\t\t\t\t\t\t\t\t( face, i ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<CollectionFontVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleToggleVariant={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleToggleVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselected={ isFontFontFaceInOutline(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedFont.slug,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedFont.fontFace\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? face\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null, // If the font has no fontFace, we want to check if the font is in the outline\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfontToInstallOutline\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\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</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t<Spacer margin={ 16 } />\n\t\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t</Navigator>\n\n\t\t\t\t\t{ selectedFont && (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tclassName=\"font-library__footer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\t\t\tisBusy={ isInstalling }\n\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\tfontsToInstall.length === 0 || isInstalling\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Install' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! selectedFont && (\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"font-library__footer\"\n\t\t\t\t\t\t\tjustify=\"end\"\n\t\t\t\t\t\t\tspacing={ 6 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t\t\tclassName=\"font-library__page-selection\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: 1: Current page number, 2: Total number of pages.\n\t\t\t\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t\t\t\t'<div>Page</div>%1$s<div>of %2$d</div>',\n\t\t\t\t\t\t\t\t\t\t\t'paging'\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t'<CurrentPage />',\n\t\t\t\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tdiv: <div aria-hidden />,\n\t\t\t\t\t\t\t\t\t\t// @ts-expect-error \u2014 Tag injected via sprintf argument, not visible in format string.\n\t\t\t\t\t\t\t\t\t\tCurrentPage: (\n\t\t\t\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Current page'\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={ page.toString() }\n\t\t\t\t\t\t\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t\t\t\t\t\t\t...Array( totalPages ),\n\t\t\t\t\t\t\t\t\t\t\t\t].map( ( e, i ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={ ( newPage ) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetPage(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparseInt( newPage )\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"minimal\"\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}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ () => setPage( page - 1 ) }\n\t\t\t\t\t\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ () => setPage( page + 1 ) }\n\t\t\t\t\t\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontCollection;\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tuseContext,\n\tuseEffect,\n\tuseState,\n\tuseMemo,\n\tcreateInterpolateElement,\n} from '@wordpress/element';\nimport {\n\t__experimentalSpacer as Spacer,\n\t__experimentalText as WCText,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\tNavigator,\n\t__experimentalHeading as Heading,\n\tNotice,\n\tSelectControl,\n\tFlex,\n\tButton,\n\tDropdownMenu,\n\tSearchControl,\n\tProgressBar,\n\tCheckboxControl,\n} from '@wordpress/components';\nimport { debounce } from '@wordpress/compose';\nimport { sprintf, __, _x, isRTL } from '@wordpress/i18n';\nimport {\n\tmoreVertical,\n\tnext,\n\tprevious,\n\tchevronLeft,\n\tchevronRight,\n} from '@wordpress/icons';\nimport { useEntityRecord } from '@wordpress/core-data';\nimport type {\n\tFontCollection as FontCollectionType,\n\tFontFace,\n\tFontFamily,\n\tCollectionFontFamily,\n} from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { FontLibraryContext } from './context';\nimport FontCard from './font-card';\nimport filterFonts from './utils/filter-fonts';\nimport { toggleFont } from './utils/toggleFont';\nimport {\n\tgetFontsOutline,\n\tisFontFontFaceInOutline,\n} from './utils/fonts-outline';\nimport GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';\nimport { downloadFontFaceAssets } from './utils';\nimport { sortFontFaces } from './utils/sort-font-faces';\nimport CollectionFontVariant from './collection-font-variant';\nimport type { FontFamilyToUpload } from './types';\n\nconst DEFAULT_CATEGORY = {\n\tslug: 'all',\n\tname: _x( 'All', 'font categories' ),\n};\n\nconst LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';\nconst MIN_WINDOW_HEIGHT = 500;\n\nfunction FontCollection( { slug }: { slug: string } ) {\n\tconst requiresPermission = slug === 'google-fonts';\n\n\tconst getGoogleFontsPermissionFromStorage = () => {\n\t\treturn window.localStorage.getItem( LOCAL_STORAGE_ITEM ) === 'true';\n\t};\n\n\tconst [ selectedFont, setSelectedFont ] = useState< FontFamily | null >(\n\t\tnull\n\t);\n\tconst [ notice, setNotice ] = useState< {\n\t\ttype: 'success' | 'error' | 'info';\n\t\tmessage: string;\n\t} | null >( null );\n\tconst [ fontsToInstall, setFontsToInstall ] = useState< FontFamily[] >(\n\t\t[]\n\t);\n\tconst [ page, setPage ] = useState( 1 );\n\tconst [ filters, setFilters ] = useState< {\n\t\tcategory?: string;\n\t\tsearch?: string;\n\t} >( {} );\n\tconst [ renderConfirmDialog, setRenderConfirmDialog ] = useState(\n\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t);\n\tconst { installFonts, isInstalling } = useContext( FontLibraryContext );\n\tconst { record: selectedCollection, isResolving: isLoading } =\n\t\tuseEntityRecord< FontCollectionType >( 'root', 'fontCollection', slug );\n\n\tuseEffect( () => {\n\t\tconst handleStorage = () => {\n\t\t\tsetRenderConfirmDialog(\n\t\t\t\trequiresPermission && ! getGoogleFontsPermissionFromStorage()\n\t\t\t);\n\t\t};\n\t\thandleStorage();\n\t\twindow.addEventListener( 'storage', handleStorage );\n\t\treturn () => window.removeEventListener( 'storage', handleStorage );\n\t}, [ slug, requiresPermission ] );\n\n\tconst revokeAccess = () => {\n\t\twindow.localStorage.setItem( LOCAL_STORAGE_ITEM, 'false' );\n\t\twindow.dispatchEvent( new Event( 'storage' ) );\n\t};\n\n\tuseEffect( () => {\n\t\tsetSelectedFont( null );\n\t}, [ slug ] );\n\n\tuseEffect( () => {\n\t\t// If the selected fonts change, reset the selected fonts to install\n\t\tsetFontsToInstall( [] );\n\t}, [ selectedFont ] );\n\n\tconst collectionFonts = useMemo(\n\t\t() =>\n\t\t\t( selectedCollection?.font_families as\n\t\t\t\t| CollectionFontFamily[]\n\t\t\t\t| undefined ) ?? [],\n\t\t[ selectedCollection ]\n\t);\n\tconst collectionCategories = selectedCollection?.categories ?? [];\n\n\tconst categories = [ DEFAULT_CATEGORY, ...collectionCategories ];\n\n\tconst fonts = useMemo(\n\t\t() => filterFonts( collectionFonts, filters ),\n\t\t[ collectionFonts, filters ]\n\t);\n\n\t// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px\n\t// The height of each font family item is 61px.\n\tconst windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT );\n\tconst pageSize = Math.floor( ( windowHeight - 417 ) / 61 );\n\tconst totalPages = Math.ceil( fonts.length / pageSize );\n\tconst itemsStart = ( page - 1 ) * pageSize;\n\tconst itemsLimit = page * pageSize;\n\tconst items = fonts.slice( itemsStart, itemsLimit );\n\n\tconst handleCategoryFilter = ( category: string ) => {\n\t\tsetFilters( { ...filters, category } );\n\t\tsetPage( 1 );\n\t};\n\n\tconst handleUpdateSearchInput = ( value: string ) => {\n\t\tsetFilters( { ...filters, search: value } );\n\t\tsetPage( 1 );\n\t};\n\n\t// @ts-expect-error\n\tconst debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );\n\n\tconst handleToggleVariant = ( font: FontFamily, face?: FontFace ) => {\n\t\tconst newFontsToInstall = toggleFont( font, face, fontsToInstall );\n\t\tsetFontsToInstall( newFontsToInstall );\n\t};\n\n\tconst fontToInstallOutline = getFontsOutline( fontsToInstall );\n\n\tconst resetFontsToInstall = () => {\n\t\tsetFontsToInstall( [] );\n\t};\n\n\tconst selectFontCount =\n\t\tfontsToInstall.length > 0\n\t\t\t? fontsToInstall[ 0 ]?.fontFace?.length ?? 0\n\t\t\t: 0;\n\n\t// Check if any fonts are selected.\n\tconst isIndeterminate =\n\t\tselectFontCount > 0 &&\n\t\tselectFontCount !== selectedFont?.fontFace?.length;\n\n\t// Check if all fonts are selected.\n\tconst isSelectAllChecked =\n\t\tselectFontCount === selectedFont?.fontFace?.length;\n\n\t// Toggle select all fonts.\n\tconst toggleSelectAll = () => {\n\t\tconst newFonts: FontFamily[] = [];\n\t\tif ( ! isSelectAllChecked && selectedFont ) {\n\t\t\tnewFonts.push( selectedFont );\n\t\t}\n\n\t\tsetFontsToInstall( newFonts );\n\t};\n\n\tconst handleInstall = async () => {\n\t\tsetNotice( null );\n\n\t\tconst fontFamily: FontFamilyToUpload = fontsToInstall[ 0 ];\n\n\t\ttry {\n\t\t\tif ( fontFamily?.fontFace ) {\n\t\t\t\tawait Promise.all(\n\t\t\t\t\tfontFamily.fontFace.map( async ( fontFace ) => {\n\t\t\t\t\t\tif ( fontFace.src ) {\n\t\t\t\t\t\t\tfontFace.file = await downloadFontFaceAssets(\n\t\t\t\t\t\t\t\tfontFace.src\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t} )\n\t\t\t\t);\n\t\t\t}\n\t\t} catch {\n\t\t\t// If any of the fonts fail to download,\n\t\t\t// show an error notice and stop the request from being sent.\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: __(\n\t\t\t\t\t'Error installing the fonts, could not be downloaded.'\n\t\t\t\t),\n\t\t\t} );\n\t\t\treturn;\n\t\t}\n\n\t\ttry {\n\t\t\tawait installFonts( [ fontFamily ] );\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'success',\n\t\t\t\tmessage: __( 'Fonts were installed successfully.' ),\n\t\t\t} );\n\t\t} catch ( error ) {\n\t\t\tsetNotice( {\n\t\t\t\ttype: 'error',\n\t\t\t\tmessage: ( error as Error ).message,\n\t\t\t} );\n\t\t}\n\t\tresetFontsToInstall();\n\t};\n\n\tconst getSortedFontFaces = ( fontFamily: FontFamily ) => {\n\t\tif ( ! fontFamily ) {\n\t\t\treturn [];\n\t\t}\n\t\tif ( ! fontFamily.fontFace || ! fontFamily.fontFace.length ) {\n\t\t\treturn [\n\t\t\t\t{\n\t\t\t\t\tfontFamily: fontFamily.fontFamily,\n\t\t\t\t\tfontStyle: 'normal',\n\t\t\t\t\tfontWeight: '400',\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\t\treturn sortFontFaces( fontFamily.fontFace );\n\t};\n\n\tif ( renderConfirmDialog ) {\n\t\treturn <GoogleFontsConfirmDialog />;\n\t}\n\n\tconst showActions =\n\t\tslug === 'google-fonts' && ! renderConfirmDialog && ! selectedFont;\n\n\treturn (\n\t\t<div className=\"font-library__tabpanel-layout\">\n\t\t\t{ isLoading && (\n\t\t\t\t<div className=\"font-library__loading\">\n\t\t\t\t\t<ProgressBar />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ ! isLoading && selectedCollection && (\n\t\t\t\t<>\n\t\t\t\t\t<Navigator\n\t\t\t\t\t\tinitialPath=\"/\"\n\t\t\t\t\t\tclassName=\"font-library__tabpanel-layout\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t<VStack>\n\t\t\t\t\t\t\t\t\t<Heading level={ 2 } size={ 13 }>\n\t\t\t\t\t\t\t\t\t\t{ selectedCollection.name }\n\t\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t\t\t{ selectedCollection.description }\n\t\t\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t\t{ showActions && (\n\t\t\t\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Actions' ) }\n\t\t\t\t\t\t\t\t\t\tpopoverProps={ {\n\t\t\t\t\t\t\t\t\t\t\tposition: 'bottom left',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tcontrols={ [\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\ttitle: __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Revoke access to Google Fonts'\n\t\t\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t\t\tonClick: revokeAccess,\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/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<HStack spacing={ 4 } justify=\"space-between\">\n\t\t\t\t\t\t\t\t<SearchControl\n\t\t\t\t\t\t\t\t\tvalue={ filters.search }\n\t\t\t\t\t\t\t\t\tplaceholder={ __( 'Font name\u2026' ) }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\t\t\t\t\t\tonChange={ debouncedUpdateSearchInput }\n\t\t\t\t\t\t\t\t\thideLabelFromVision={ false }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Category' ) }\n\t\t\t\t\t\t\t\t\tvalue={ filters.category }\n\t\t\t\t\t\t\t\t\tonChange={ handleCategoryFilter }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ categories &&\n\t\t\t\t\t\t\t\t\t\tcategories.map( ( category ) => (\n\t\t\t\t\t\t\t\t\t\t\t<option\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ category.slug }\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{ category.name }\n\t\t\t\t\t\t\t\t\t\t\t</option>\n\t\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</SelectControl>\n\t\t\t\t\t\t\t</HStack>\n\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\n\t\t\t\t\t\t\t{ !! selectedCollection?.font_families?.length &&\n\t\t\t\t\t\t\t\t! fonts.length && (\n\t\t\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t\t\t{ __(\n\t\t\t\t\t\t\t\t\t\t\t'No fonts found. Try with a different search term.'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t<div className=\"font-library__fonts-grid__main\">\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ items.map( ( font ) => (\n\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings.slug\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<FontCard\n\t\t\t\t\t\t\t\t\t\t\t\tfont={\n\t\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tnavigatorPath=\"/fontFamily\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSelectedFont(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont.font_family_settings\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Navigator.Screen>\n\n\t\t\t\t\t\t<Navigator.Screen path=\"/fontFamily\">\n\t\t\t\t\t\t\t<Flex justify=\"flex-start\">\n\t\t\t\t\t\t\t\t<Navigator.BackButton\n\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\tisRTL() ? chevronRight : chevronLeft\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\t\t\tsetSelectedFont( null );\n\t\t\t\t\t\t\t\t\t\tsetNotice( null );\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\t\t\tlevel={ 2 }\n\t\t\t\t\t\t\t\t\tsize={ 13 }\n\t\t\t\t\t\t\t\t\tclassName=\"global-styles-ui-header\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ selectedFont?.name }\n\t\t\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t\t</Flex>\n\t\t\t\t\t\t\t{ notice && (\n\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t\t<Notice\n\t\t\t\t\t\t\t\t\t\tstatus={ notice.type }\n\t\t\t\t\t\t\t\t\t\tonRemove={ () => setNotice( null ) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ notice.message }\n\t\t\t\t\t\t\t\t\t</Notice>\n\t\t\t\t\t\t\t\t\t<Spacer margin={ 1 } />\n\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<WCText>\n\t\t\t\t\t\t\t\t{ __( 'Select font variants to install.' ) }\n\t\t\t\t\t\t\t</WCText>\n\t\t\t\t\t\t\t<Spacer margin={ 4 } />\n\t\t\t\t\t\t\t<CheckboxControl\n\t\t\t\t\t\t\t\tclassName=\"font-library__select-all\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Select all' ) }\n\t\t\t\t\t\t\t\tchecked={ isSelectAllChecked }\n\t\t\t\t\t\t\t\tonChange={ toggleSelectAll }\n\t\t\t\t\t\t\t\tindeterminate={ isIndeterminate }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<VStack spacing={ 0 }>\n\t\t\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t\t\t\t\t */\n\t\t\t\t\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t\t<ul\n\t\t\t\t\t\t\t\t\trole=\"list\"\n\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ selectedFont &&\n\t\t\t\t\t\t\t\t\t\tgetSortedFontFaces( selectedFont ).map(\n\t\t\t\t\t\t\t\t\t\t\t( face, i ) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={ `face${ i }` }\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"font-library__fonts-list-item\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<CollectionFontVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfont={ selectedFont }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tface={ face }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleToggleVariant={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\thandleToggleVariant\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tselected={ isFontFontFaceInOutline(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedFont.slug,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tselectedFont.fontFace\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? face\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: null, // If the font has no fontFace, we want to check if the font is in the outline\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tfontToInstallOutline\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</li>\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</ul>\n\t\t\t\t\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t<Spacer margin={ 16 } />\n\t\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t</Navigator>\n\n\t\t\t\t\t{ selectedFont && (\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\tclassName=\"font-library__footer\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\t\tvariant=\"primary\"\n\t\t\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\t\t\tisBusy={ isInstalling }\n\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\tfontsToInstall.length === 0 || isInstalling\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ __( 'Install' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ ! selectedFont && (\n\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\tclassName=\"font-library__footer\"\n\t\t\t\t\t\t\tjustify=\"end\"\n\t\t\t\t\t\t\tspacing={ 6 }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t\t\tspacing={ 1 }\n\t\t\t\t\t\t\t\tclassName=\"font-library__page-selection\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ createInterpolateElement(\n\t\t\t\t\t\t\t\t\tsprintf(\n\t\t\t\t\t\t\t\t\t\t// translators: 1: Current page number, 2: Total number of pages.\n\t\t\t\t\t\t\t\t\t\t_x(\n\t\t\t\t\t\t\t\t\t\t\t'<div>Page</div>%1$s<div>of %2$d</div>',\n\t\t\t\t\t\t\t\t\t\t\t'paging'\n\t\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t\t'<CurrentPage />',\n\t\t\t\t\t\t\t\t\t\ttotalPages\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\tdiv: <div aria-hidden />,\n\t\t\t\t\t\t\t\t\t\t// @ts-expect-error \u2014 Tag injected via sprintf argument, not visible in format string.\n\t\t\t\t\t\t\t\t\t\tCurrentPage: (\n\t\t\t\t\t\t\t\t\t\t\t<SelectControl\n\t\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Current page'\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={ page.toString() }\n\t\t\t\t\t\t\t\t\t\t\t\toptions={ [\n\t\t\t\t\t\t\t\t\t\t\t\t\t...Array( totalPages ),\n\t\t\t\t\t\t\t\t\t\t\t\t].map( ( e, i ) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tvalue: (\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ti + 1\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t).toString(),\n\t\t\t\t\t\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={ ( newPage ) =>\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetPage(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tparseInt( newPage )\n\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"minimal\"\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}\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t<HStack expanded={ false } spacing={ 1 }>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ () => setPage( page - 1 ) }\n\t\t\t\t\t\t\t\t\tdisabled={ page === 1 }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Previous page' ) }\n\t\t\t\t\t\t\t\t\ticon={ isRTL() ? next : previous }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tonClick={ () => setPage( page + 1 ) }\n\t\t\t\t\t\t\t\t\tdisabled={ page === totalPages }\n\t\t\t\t\t\t\t\t\taccessibleWhenDisabled\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Next page' ) }\n\t\t\t\t\t\t\t\t\ticon={ isRTL() ? previous : next }\n\t\t\t\t\t\t\t\t\tshowTooltip\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\ttooltipPosition=\"top\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</HStack>\n\t\t\t\t\t) }\n\t\t\t\t</>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default FontCollection;\n"],
+  "mappings": "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",
   "names": ["filterFonts", "GoogleFontsConfirmDialog", "HStack", "VStack", "Heading", "WCText", "Spacer", "FontCard", "CollectionFontVariant"]
 }

package/build/hooks.cjs

@@ -49,6 +49,12 @@ var import_utils = require("./utils.cjs");
 (0, import_colord.extend)([import_a11y.default]);
 function useStyle(path, blockName, readFrom = "merged", shouldDecodeEncode = true, state) {
   const { user, base, merged, onChange } = (0, import_element.useContext)(import_context.GlobalStylesContext);
+  const statePathParts = state?.split(".").filter(Boolean) ?? [];
+  const pseudoSelectorState = statePathParts.find(
+    (value) => value.startsWith(":")
+  );
+  const statePathWithoutPseudo = statePathParts.filter((value) => !value.startsWith(":")).join(".");
+  const stylePath = [path, statePathWithoutPseudo].filter(Boolean).join(".");
   let sourceValue = merged;
   if (readFrom === "base") {
     sourceValue = base;
@@ -58,39 +64,45 @@ function useStyle(path, blockName, readFrom = "merged", shouldDecodeEncode = tru
   const styleValue = (0, import_element.useMemo)(() => {
     const rawValue = (0, import_global_styles_engine.getStyle)(
       sourceValue,
-      path,
+      stylePath,
       blockName,
       shouldDecodeEncode
     );
-    if (state) {
-      return rawValue?.[state] ?? {};
+    if (pseudoSelectorState) {
+      return rawValue?.[pseudoSelectorState] ?? {};
     }
     return rawValue;
-  }, [sourceValue, path, blockName, shouldDecodeEncode, state]);
+  }, [
+    sourceValue,
+    stylePath,
+    blockName,
+    shouldDecodeEncode,
+    pseudoSelectorState
+  ]);
   const setStyleValue = (0, import_element.useCallback)(
     (newValue) => {
       let valueToSet = newValue;
-      if (state) {
+      if (pseudoSelectorState) {
         const fullCurrentValue = (0, import_global_styles_engine.getStyle)(
           user,
-          path,
+          stylePath,
           blockName,
           false
         );
         valueToSet = {
           ...fullCurrentValue,
-          [state]: newValue
+          [pseudoSelectorState]: newValue
         };
       }
       const newGlobalStyles = (0, import_global_styles_engine.setStyle)(
         user,
-        path,
+        stylePath,
         valueToSet,
         blockName
       );
       onChange(newGlobalStyles);
     },
-    [user, onChange, path, blockName, state]
+    [user, onChange, stylePath, blockName, pseudoSelectorState]
   );
   return [styleValue, setStyleValue];
 }

package/build/hooks.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/hooks.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useContext, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tgetStyle,\n\tsetStyle,\n\tgetSetting,\n\tsetSetting,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\nimport type { StyleVariation, Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\nimport { removePropertiesFromObject, isVariationWithProperties } from './utils';\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\n/**\n * Hook to get and set style values with memoization.\n *\n * @param path               The path to the style value.\n * @param blockName          The name of the block, if applicable.\n * @param readFrom           Which source to read from: \"base\" (theme), \"user\" (customizations), or \"merged\" (final result).\n * @param shouldDecodeEncode Whether to decode and encode the style value.\n * @param state              Optional pseudo-selector state (e.g. `:hover`, `:focus`). When provided,\n *                           reads from and writes to the state sub-object automatically.\n * @return An array containing the style value and a function to set the style\n * value.\n *\n * @example\n * const [ color, setColor ] = useStyle<string>( 'color.text', 'core/button', 'merged' );\n * const [ hoverColor, setHoverColor ] = useStyle<string>( 'color.text', 'core/button', 'user', true, ':hover' );\n */\nexport function useStyle< T = any >(\n\tpath: string,\n\tblockName?: string,\n\treadFrom: 'base' | 'user' | 'merged' = 'merged',\n\tshouldDecodeEncode: boolean = true,\n\tstate?: string\n) {\n\tconst { user, base, merged, onChange } = useContext( GlobalStylesContext );\n\n\tlet sourceValue = merged;\n\tif ( readFrom === 'base' ) {\n\t\tsourceValue = base;\n\t} else if ( readFrom === 'user' ) {\n\t\tsourceValue = user;\n\t}\n\n\tconst styleValue = useMemo( () => {\n\t\tconst rawValue = getStyle< T >(\n\t\t\tsourceValue,\n\t\t\tpath,\n\t\t\tblockName,\n\t\t\tshouldDecodeEncode\n\t\t);\n\t\tif ( state ) {\n\t\t\treturn ( rawValue as any )?.[ state ] ?? {};\n\t\t}\n\t\treturn rawValue;\n\t}, [ sourceValue, path, blockName, shouldDecodeEncode, state ] );\n\n\tconst setStyleValue = useCallback(\n\t\t( newValue: T | undefined ) => {\n\t\t\tlet valueToSet: any = newValue;\n\t\t\tif ( state ) {\n\t\t\t\tconst fullCurrentValue = getStyle(\n\t\t\t\t\tuser,\n\t\t\t\t\tpath,\n\t\t\t\t\tblockName,\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t\tvalueToSet = {\n\t\t\t\t\t...( fullCurrentValue as object ),\n\t\t\t\t\t[ state ]: newValue,\n\t\t\t\t};\n\t\t\t}\n\t\t\tconst newGlobalStyles = setStyle< any >(\n\t\t\t\tuser,\n\t\t\t\tpath,\n\t\t\t\tvalueToSet,\n\t\t\t\tblockName\n\t\t\t);\n\t\t\tonChange( newGlobalStyles );\n\t\t},\n\t\t[ user, onChange, path, blockName, state ]\n\t);\n\n\treturn [ styleValue, setStyleValue ] as const;\n}\n\n/**\n * Hook to get and set setting values with memoization.\n *\n * @param path      The path to the setting value.\n * @param blockName The name of the block, if applicable.\n * @param readFrom  Which source to read from: \"base\" (theme), \"user\" (customizations), or \"merged\" (final result).\n * @return An array containing the setting value and a function to set the\n * setting value.\n *\n * @example\n * const [ fontSize, setFontSize ] = useSetting<string>( 'fontSize', 'core/button', 'merged' );\n */\nexport function useSetting< T = any >(\n\tpath: string,\n\tblockName?: string,\n\treadFrom: 'base' | 'user' | 'merged' = 'merged'\n) {\n\tconst { user, base, merged, onChange } = useContext( GlobalStylesContext );\n\n\tlet sourceValue = merged;\n\tif ( readFrom === 'base' ) {\n\t\tsourceValue = base;\n\t} else if ( readFrom === 'user' ) {\n\t\tsourceValue = user;\n\t}\n\tconst settingValue = useMemo(\n\t\t() => getSetting< T >( sourceValue, path, blockName ),\n\t\t[ sourceValue, path, blockName ]\n\t);\n\n\tconst setSettingValue = useCallback(\n\t\t( newValue: T | undefined ) => {\n\t\t\tconst newGlobalStyles = setSetting< T >(\n\t\t\t\tuser,\n\t\t\t\tpath,\n\t\t\t\tnewValue,\n\t\t\t\tblockName\n\t\t\t);\n\t\t\tonChange( newGlobalStyles );\n\t\t},\n\t\t[ user, onChange, path, blockName ]\n\t);\n\n\treturn [ settingValue, setSettingValue ] as const;\n}\n\nconst EMPTY_ARRAY: StyleVariation[] = [];\n\n/**\n * Checks whether a style variation is empty.\n * @param root0\n * @param root0.title\n * @param root0.settings\n * @param root0.styles\n */\nfunction hasThemeVariation( {\n\ttitle,\n\tsettings,\n\tstyles,\n}: StyleVariation ): boolean {\n\treturn (\n\t\ttitle === __( 'Default' ) ||\n\t\tObject.keys( settings || {} ).length > 0 ||\n\t\tObject.keys( styles || {} ).length > 0\n\t);\n}\n\n/**\n * Fetches the current theme style variations that contain only the specified properties\n * and merges them with the user config.\n * @param properties\n */\nexport function useCurrentMergeThemeStyleVariationsWithUserConfig(\n\tproperties: string[] = []\n): StyleVariation[] {\n\tconst { variationsFromTheme } = useSelect( ( select ) => {\n\t\tconst _variationsFromTheme =\n\t\t\tselect(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations?.();\n\n\t\treturn {\n\t\t\tvariationsFromTheme: _variationsFromTheme || EMPTY_ARRAY,\n\t\t};\n\t}, [] );\n\n\tconst { user: userVariation } = useContext( GlobalStylesContext );\n\n\treturn useMemo( () => {\n\t\t// Create default variation from base, not user - this fixes the \"Default adapts\" issue\n\t\tconst clonedUserVariation = structuredClone( userVariation );\n\t\t// Get user variation and remove the settings for the given property.\n\t\tconst userVariationWithoutProperties = removePropertiesFromObject(\n\t\t\tclonedUserVariation,\n\t\t\tproperties\n\t\t);\n\t\tuserVariationWithoutProperties.title = __( 'Default' );\n\n\t\tconst variationsWithPropertiesAndBase = (\n\t\t\tvariationsFromTheme as StyleVariation[]\n\t\t )\n\t\t\t.filter( ( variation: StyleVariation ) => {\n\t\t\t\treturn isVariationWithProperties( variation, properties );\n\t\t\t} )\n\t\t\t.map( ( variation: StyleVariation ) => {\n\t\t\t\treturn mergeGlobalStyles(\n\t\t\t\t\tuserVariationWithoutProperties,\n\t\t\t\t\tvariation\n\t\t\t\t);\n\t\t\t} );\n\n\t\tconst variationsByProperties = [\n\t\t\tuserVariationWithoutProperties,\n\t\t\t...variationsWithPropertiesAndBase,\n\t\t];\n\n\t\treturn variationsByProperties?.length\n\t\t\t? variationsByProperties.filter( hasThemeVariation )\n\t\t\t: [];\n\t}, [ properties, userVariation, variationsFromTheme ] );\n}\n\nconst propertiesToFilter = [ 'color' ];\n\n/**\n * Hook to get color variations using the full Gutenberg implementation.\n */\nexport function useColorVariations(): StyleVariation[] {\n\treturn useCurrentMergeThemeStyleVariationsWithUserConfig(\n\t\tpropertiesToFilter\n\t);\n}\n\n/**\n * Hook to randomize theme colors using color rotation.\n *\n * @param blockName The name of the block, if applicable.\n * @return Array containing the randomize function if feature is enabled, empty array otherwise.\n */\nexport function useColorRandomizer( blockName?: string ): [ () => void ] | [] {\n\tconst [ themeColors, setThemeColors ] = useSetting< Color[] >(\n\t\t'color.palette.theme',\n\t\tblockName\n\t);\n\n\tconst randomizeColors = useCallback( () => {\n\t\tif ( ! themeColors || ! themeColors.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}, [ themeColors, setThemeColors ] );\n\n\treturn ( window as any ).__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,oBAA+B;AAC/B,kBAAuB;AAKvB,qBAAiD;AACjD,kBAA0B;AAC1B,uBAAmC;AACnC,kBAAmB;AACnB,kCAMO;AAMP,qBAAoC;AACpC,mBAAsE;AAAA,IAGtE,sBAAQ,CAAE,YAAAA,OAAW,CAAE;AAkBhB,SAAS,SACf,MACA,WACA,WAAuC,UACvC,qBAA8B,MAC9B,OACC;AACD,QAAM,EAAE,MAAM,MAAM,QAAQ,SAAS,QAAI,2BAAY,kCAAoB;AAEzE,MAAI,cAAc;AAClB,MAAK,aAAa,QAAS;AAC1B,kBAAc;AAAA,EACf,WAAY,aAAa,QAAS;AACjC,kBAAc;AAAA,EACf;AAEA,QAAM,iBAAa,wBAAS,MAAM;AACjC,UAAM,eAAW;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACD;AACA,QAAK,OAAQ;AACZ,aAAS,WAAqB,KAAM,KAAK,CAAC;AAAA,IAC3C;AACA,WAAO;AAAA,EACR,GAAG,CAAE,aAAa,MAAM,WAAW,oBAAoB,KAAM,CAAE;AAE/D,QAAM,oBAAgB;AAAA,IACrB,CAAE,aAA6B;AAC9B,UAAI,aAAkB;AACtB,UAAK,OAAQ;AACZ,cAAM,uBAAmB;AAAA,UACxB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACD;AACA,qBAAa;AAAA,UACZ,GAAK;AAAA,UACL,CAAE,KAAM,GAAG;AAAA,QACZ;AAAA,MACD;AACA,YAAM,sBAAkB;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AACA,eAAU,eAAgB;AAAA,IAC3B;AAAA,IACA,CAAE,MAAM,UAAU,MAAM,WAAW,KAAM;AAAA,EAC1C;AAEA,SAAO,CAAE,YAAY,aAAc;AACpC;AAcO,SAAS,WACf,MACA,WACA,WAAuC,UACtC;AACD,QAAM,EAAE,MAAM,MAAM,QAAQ,SAAS,QAAI,2BAAY,kCAAoB;AAEzE,MAAI,cAAc;AAClB,MAAK,aAAa,QAAS;AAC1B,kBAAc;AAAA,EACf,WAAY,aAAa,QAAS;AACjC,kBAAc;AAAA,EACf;AACA,QAAM,mBAAe;AAAA,IACpB,UAAM,wCAAiB,aAAa,MAAM,SAAU;AAAA,IACpD,CAAE,aAAa,MAAM,SAAU;AAAA,EAChC;AAEA,QAAM,sBAAkB;AAAA,IACvB,CAAE,aAA6B;AAC9B,YAAM,sBAAkB;AAAA,QACvB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACD;AACA,eAAU,eAAgB;AAAA,IAC3B;AAAA,IACA,CAAE,MAAM,UAAU,MAAM,SAAU;AAAA,EACnC;AAEA,SAAO,CAAE,cAAc,eAAgB;AACxC;AAEA,IAAM,cAAgC,CAAC;AASvC,SAAS,kBAAmB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACD,GAA6B;AAC5B,SACC,cAAU,gBAAI,SAAU,KACxB,OAAO,KAAM,YAAY,CAAC,CAAE,EAAE,SAAS,KACvC,OAAO,KAAM,UAAU,CAAC,CAAE,EAAE,SAAS;AAEvC;AAOO,SAAS,kDACf,aAAuB,CAAC,GACL;AACnB,QAAM,EAAE,oBAAoB,QAAI,uBAAW,CAAE,WAAY;AACxD,UAAM,uBACL;AAAA,MACC,iBAAAC;AAAA,IACD,EAAE,sDAAsD;AAEzD,WAAO;AAAA,MACN,qBAAqB,wBAAwB;AAAA,IAC9C;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,EAAE,MAAM,cAAc,QAAI,2BAAY,kCAAoB;AAEhE,aAAO,wBAAS,MAAM;AAErB,UAAM,sBAAsB,gBAAiB,aAAc;AAE3D,UAAM,qCAAiC;AAAA,MACtC;AAAA,MACA;AAAA,IACD;AACA,mCAA+B,YAAQ,gBAAI,SAAU;AAErD,UAAM,kCACL,oBAEC,OAAQ,CAAE,cAA+B;AACzC,iBAAO,wCAA2B,WAAW,UAAW;AAAA,IACzD,CAAE,EACD,IAAK,CAAE,cAA+B;AACtC,iBAAO;AAAA,QACN;AAAA,QACA;AAAA,MACD;AAAA,IACD,CAAE;AAEH,UAAM,yBAAyB;AAAA,MAC9B;AAAA,MACA,GAAG;AAAA,IACJ;AAEA,WAAO,wBAAwB,SAC5B,uBAAuB,OAAQ,iBAAkB,IACjD,CAAC;AAAA,EACL,GAAG,CAAE,YAAY,eAAe,mBAAoB,CAAE;AACvD;AAEA,IAAM,qBAAqB,CAAE,OAAQ;AAK9B,SAAS,qBAAuC;AACtD,SAAO;AAAA,IACN;AAAA,EACD;AACD;AAQO,SAAS,mBAAoB,WAA0C;AAC7E,QAAM,CAAE,aAAa,cAAe,IAAI;AAAA,IACvC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,sBAAkB,4BAAa,MAAM;AAC1C,QAAK,CAAE,eAAe,CAAE,YAAY,QAAS;AAC5C;AAAA,IACD;AAEA,UAAM,sBAAsB,KAAK,MAAO,KAAK,OAAO,IAAI,GAAI;AAE5D,UAAM,YAAY,YAAY,IAAK,CAAE,gBAAiB;AACrD,YAAM,EAAE,MAAM,IAAI;AAClB,YAAM,eAAW,sBAAQ,KAAM,EAC7B,OAAQ,mBAAoB,EAC5B,MAAM;AAER,aAAO;AAAA,QACN,GAAG;AAAA,QACH,OAAO;AAAA,MACR;AAAA,IACD,CAAE;AAEF,mBAAgB,SAAU;AAAA,EAC3B,GAAG,CAAE,aAAa,cAAe,CAAE;AAEnC,SAAS,OAAgB,sCACtB,CAAE,eAAgB,IAClB,CAAC;AACL;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useContext, useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport { __ } from '@wordpress/i18n';\nimport {\n\tgetStyle,\n\tsetStyle,\n\tgetSetting,\n\tsetSetting,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\nimport type { StyleVariation, Color } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\nimport { removePropertiesFromObject, isVariationWithProperties } from './utils';\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\n/**\n * Hook to get and set style values with memoization.\n *\n * @param path               The path to the style value.\n * @param blockName          The name of the block, if applicable.\n * @param readFrom           Which source to read from: \"base\" (theme), \"user\" (customizations), or \"merged\" (final result).\n * @param shouldDecodeEncode Whether to decode and encode the style value.\n * @param state              Optional style state path. Supports viewport states (e.g. `mobile`),\n *                           pseudo-selector states (e.g. `:hover`) or both (e.g. `mobile.:hover`).\n *                           Pseudo selectors are always read/written as nested keys.\n * @return An array containing the style value and a function to set the style\n * value.\n *\n * @example\n * const [ color, setColor ] = useStyle<string>( 'color.text', 'core/button', 'merged' );\n * const [ hoverColor, setHoverColor ] = useStyle<string>( 'color.text', 'core/button', 'user', true, ':hover' );\n */\nexport function useStyle< T = any >(\n\tpath: string,\n\tblockName?: string,\n\treadFrom: 'base' | 'user' | 'merged' = 'merged',\n\tshouldDecodeEncode: boolean = true,\n\tstate?: string\n) {\n\tconst { user, base, merged, onChange } = useContext( GlobalStylesContext );\n\tconst statePathParts = state?.split( '.' ).filter( Boolean ) ?? [];\n\tconst pseudoSelectorState = statePathParts.find( ( value ) =>\n\t\tvalue.startsWith( ':' )\n\t);\n\tconst statePathWithoutPseudo = statePathParts\n\t\t.filter( ( value ) => ! value.startsWith( ':' ) )\n\t\t.join( '.' );\n\tconst stylePath = [ path, statePathWithoutPseudo ]\n\t\t.filter( Boolean )\n\t\t.join( '.' );\n\n\tlet sourceValue = merged;\n\tif ( readFrom === 'base' ) {\n\t\tsourceValue = base;\n\t} else if ( readFrom === 'user' ) {\n\t\tsourceValue = user;\n\t}\n\n\tconst styleValue = useMemo< T | undefined >( () => {\n\t\tconst rawValue = getStyle< T >(\n\t\t\tsourceValue,\n\t\t\tstylePath,\n\t\t\tblockName,\n\t\t\tshouldDecodeEncode\n\t\t);\n\t\tif ( pseudoSelectorState ) {\n\t\t\treturn (\n\t\t\t\t( rawValue as Record< string, T | undefined > )?.[\n\t\t\t\t\tpseudoSelectorState\n\t\t\t\t] ?? ( {} as T )\n\t\t\t);\n\t\t}\n\t\treturn rawValue;\n\t}, [\n\t\tsourceValue,\n\t\tstylePath,\n\t\tblockName,\n\t\tshouldDecodeEncode,\n\t\tpseudoSelectorState,\n\t] );\n\n\tconst setStyleValue = useCallback(\n\t\t( newValue: T | undefined ) => {\n\t\t\tlet valueToSet: any = newValue;\n\t\t\tif ( pseudoSelectorState ) {\n\t\t\t\tconst fullCurrentValue = getStyle(\n\t\t\t\t\tuser,\n\t\t\t\t\tstylePath,\n\t\t\t\t\tblockName,\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t\tvalueToSet = {\n\t\t\t\t\t...( fullCurrentValue as object ),\n\t\t\t\t\t[ pseudoSelectorState ]: newValue,\n\t\t\t\t};\n\t\t\t}\n\t\t\tconst newGlobalStyles = setStyle< any >(\n\t\t\t\tuser,\n\t\t\t\tstylePath,\n\t\t\t\tvalueToSet,\n\t\t\t\tblockName\n\t\t\t);\n\t\t\tonChange( newGlobalStyles );\n\t\t},\n\t\t[ user, onChange, stylePath, blockName, pseudoSelectorState ]\n\t);\n\n\treturn [ styleValue, setStyleValue ] as const;\n}\n\n/**\n * Hook to get and set setting values with memoization.\n *\n * @param path      The path to the setting value.\n * @param blockName The name of the block, if applicable.\n * @param readFrom  Which source to read from: \"base\" (theme), \"user\" (customizations), or \"merged\" (final result).\n * @return An array containing the setting value and a function to set the\n * setting value.\n *\n * @example\n * const [ fontSize, setFontSize ] = useSetting<string>( 'fontSize', 'core/button', 'merged' );\n */\nexport function useSetting< T = any >(\n\tpath: string,\n\tblockName?: string,\n\treadFrom: 'base' | 'user' | 'merged' = 'merged'\n) {\n\tconst { user, base, merged, onChange } = useContext( GlobalStylesContext );\n\n\tlet sourceValue = merged;\n\tif ( readFrom === 'base' ) {\n\t\tsourceValue = base;\n\t} else if ( readFrom === 'user' ) {\n\t\tsourceValue = user;\n\t}\n\tconst settingValue = useMemo(\n\t\t() => getSetting< T >( sourceValue, path, blockName ),\n\t\t[ sourceValue, path, blockName ]\n\t);\n\n\tconst setSettingValue = useCallback(\n\t\t( newValue: T | undefined ) => {\n\t\t\tconst newGlobalStyles = setSetting< T >(\n\t\t\t\tuser,\n\t\t\t\tpath,\n\t\t\t\tnewValue,\n\t\t\t\tblockName\n\t\t\t);\n\t\t\tonChange( newGlobalStyles );\n\t\t},\n\t\t[ user, onChange, path, blockName ]\n\t);\n\n\treturn [ settingValue, setSettingValue ] as const;\n}\n\nconst EMPTY_ARRAY: StyleVariation[] = [];\n\n/**\n * Checks whether a style variation is empty.\n * @param root0\n * @param root0.title\n * @param root0.settings\n * @param root0.styles\n */\nfunction hasThemeVariation( {\n\ttitle,\n\tsettings,\n\tstyles,\n}: StyleVariation ): boolean {\n\treturn (\n\t\ttitle === __( 'Default' ) ||\n\t\tObject.keys( settings || {} ).length > 0 ||\n\t\tObject.keys( styles || {} ).length > 0\n\t);\n}\n\n/**\n * Fetches the current theme style variations that contain only the specified properties\n * and merges them with the user config.\n * @param properties\n */\nexport function useCurrentMergeThemeStyleVariationsWithUserConfig(\n\tproperties: string[] = []\n): StyleVariation[] {\n\tconst { variationsFromTheme } = useSelect( ( select ) => {\n\t\tconst _variationsFromTheme =\n\t\t\tselect(\n\t\t\t\tcoreStore\n\t\t\t).__experimentalGetCurrentThemeGlobalStylesVariations?.();\n\n\t\treturn {\n\t\t\tvariationsFromTheme: _variationsFromTheme || EMPTY_ARRAY,\n\t\t};\n\t}, [] );\n\n\tconst { user: userVariation } = useContext( GlobalStylesContext );\n\n\treturn useMemo( () => {\n\t\t// Create default variation from base, not user - this fixes the \"Default adapts\" issue\n\t\tconst clonedUserVariation = structuredClone( userVariation );\n\t\t// Get user variation and remove the settings for the given property.\n\t\tconst userVariationWithoutProperties = removePropertiesFromObject(\n\t\t\tclonedUserVariation,\n\t\t\tproperties\n\t\t);\n\t\tuserVariationWithoutProperties.title = __( 'Default' );\n\n\t\tconst variationsWithPropertiesAndBase = (\n\t\t\tvariationsFromTheme as StyleVariation[]\n\t\t )\n\t\t\t.filter( ( variation: StyleVariation ) => {\n\t\t\t\treturn isVariationWithProperties( variation, properties );\n\t\t\t} )\n\t\t\t.map( ( variation: StyleVariation ) => {\n\t\t\t\treturn mergeGlobalStyles(\n\t\t\t\t\tuserVariationWithoutProperties,\n\t\t\t\t\tvariation\n\t\t\t\t);\n\t\t\t} );\n\n\t\tconst variationsByProperties = [\n\t\t\tuserVariationWithoutProperties,\n\t\t\t...variationsWithPropertiesAndBase,\n\t\t];\n\n\t\treturn variationsByProperties?.length\n\t\t\t? variationsByProperties.filter( hasThemeVariation )\n\t\t\t: [];\n\t}, [ properties, userVariation, variationsFromTheme ] );\n}\n\nconst propertiesToFilter = [ 'color' ];\n\n/**\n * Hook to get color variations using the full Gutenberg implementation.\n */\nexport function useColorVariations(): StyleVariation[] {\n\treturn useCurrentMergeThemeStyleVariationsWithUserConfig(\n\t\tpropertiesToFilter\n\t);\n}\n\n/**\n * Hook to randomize theme colors using color rotation.\n *\n * @param blockName The name of the block, if applicable.\n * @return Array containing the randomize function if feature is enabled, empty array otherwise.\n */\nexport function useColorRandomizer( blockName?: string ): [ () => void ] | [] {\n\tconst [ themeColors, setThemeColors ] = useSetting< Color[] >(\n\t\t'color.palette.theme',\n\t\tblockName\n\t);\n\n\tconst randomizeColors = useCallback( () => {\n\t\tif ( ! themeColors || ! themeColors.length ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\n\t\tconst newColors = themeColors.map( ( colorObject ) => {\n\t\t\tconst { color } = colorObject;\n\t\t\tconst newColor = colord( color )\n\t\t\t\t.rotate( randomRotationValue )\n\t\t\t\t.toHex();\n\n\t\t\treturn {\n\t\t\t\t...colorObject,\n\t\t\t\tcolor: newColor,\n\t\t\t};\n\t\t} );\n\n\t\tsetThemeColors( newColors );\n\t}, [ themeColors, setThemeColors ] );\n\n\treturn ( window as any ).__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n"],
+  "mappings": "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",
   "names": ["a11yPlugin", "coreStore"]
 }

package/build/screen-block.cjs

@@ -107,22 +107,28 @@ function ScreenBlock({ name, variation }) {
     prefixParts = ["variations", variation].concat(prefixParts);
   }
   const prefix = prefixParts.join(".");
-  const [selectedState, setSelectedState] = (0, import_element.useState)("default");
-  const validStates = (0, import_element.useMemo)(() => (0, import_utils.getValidStates)(name), [name]);
-  const stateParam = selectedState !== "default" ? selectedState : void 0;
+  const [selectedViewport, setSelectedViewport] = (0, import_element.useState)("default");
+  const [selectedPseudoState, setSelectedPseudoState] = (0, import_element.useState)("default");
+  const validViewportStates = (0, import_element.useMemo)(() => (0, import_utils.getValidViewportStates)(), []);
+  const validPseudoStates = (0, import_element.useMemo)(
+    () => (0, import_utils.getValidPseudoStates)(name),
+    [name]
+  );
+  const stateParam = [selectedViewport, selectedPseudoState].filter((value) => value !== "default").join(".");
+  const hasSelectedState = stateParam.length > 0;
   const [style, setStyle] = (0, import_hooks.useStyle)(
     prefix,
     name,
     "user",
     false,
-    stateParam
+    hasSelectedState ? stateParam : void 0
   );
   const [inheritedStyle] = (0, import_hooks.useStyle)(
     prefix,
     name,
     "merged",
     false,
-    stateParam
+    hasSelectedState ? stateParam : void 0
   );
   const [userSettings] = (0, import_hooks.useSetting)("", name, "user");
   const [rawSettings, setSettings] = (0, import_hooks.useSetting)("", name);
@@ -158,6 +164,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,
@@ -215,9 +222,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 = (0, import_global_styles_engine.setStyle)(
         userConfig,
-        prefix,
+        stylePathForState,
         styleWithoutSettings,
         name
       );
@@ -260,9 +268,12 @@ function ScreenBlock({ name, variation }) {
       import_screen_header.ScreenHeader,
       {
         title: variation ? currentBlockStyle?.label : blockType?.title,
-        states: validStates,
-        selectedState,
-        onChangeState: setSelectedState
+        viewportStates: validViewportStates,
+        pseudoStates: validPseudoStates,
+        selectedViewport,
+        selectedPseudoState,
+        onChangeViewport: setSelectedViewport,
+        onChangePseudoState: setSelectedPseudoState
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -270,8 +281,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__ */ (0, import_jsx_runtime.jsx)("div", { className: "global-styles-ui-screen-variations", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 3, children: [
@@ -304,7 +315,7 @@ function ScreenBlock({ name, variation }) {
         value: style,
         onChange: onChangeTypography,
         settings,
-        isGlobalStyles: true
+        isGlobalStyles: !hasSelectedState
       }
     ),
     hasDimensionsPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -326,7 +337,7 @@ function ScreenBlock({ name, variation }) {
         settings
       }
     ),
-    hasFiltersPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    shouldShowFiltersPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       StylesFiltersPanel,
       {
         inheritedValue: inheritedStyleWithLayout,
@@ -336,7 +347,7 @@ function ScreenBlock({ name, variation }) {
         includeLayoutControls: true
       }
     ),
-    hasImageSettingsPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    hasImageSettingsPanel && !hasSelectedState && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ImageSettingsPanel,
       {
         onChange: onChangeLightbox,

package/build/screen-block.cjs.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": ["hasSplitBorders", "blockEditorPrivateApis", "coreStore", "setStyleHelper", "setSettingHelper", "BlockPreviewPanel", "VStack"]
 }