@wordpress/edit-site 5.4.0 → 5.6.0

package/build-module/components/global-styles/duotone-panel.js

@@ -0,0 +1,67 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalToolsPanel as ToolsPanel, DuotonePicker } from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis, useSetting } from '@wordpress/block-editor';
+import { useMemo } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import { unlock } from '../../private-apis';
+const {
+  useGlobalStyle
+} = unlock(blockEditorPrivateApis);
+const EMPTY_ARRAY = [];
+
+function useMultiOriginPresets(_ref) {
+  let {
+    presetSetting,
+    defaultSetting
+  } = _ref;
+  const disableDefault = !useSetting(defaultSetting);
+  const userPresets = useSetting(`${presetSetting}.custom`) || EMPTY_ARRAY;
+  const themePresets = useSetting(`${presetSetting}.theme`) || EMPTY_ARRAY;
+  const defaultPresets = useSetting(`${presetSetting}.default`) || EMPTY_ARRAY;
+  return useMemo(() => [...userPresets, ...themePresets, ...(disableDefault ? EMPTY_ARRAY : defaultPresets)], [disableDefault, userPresets, themePresets, defaultPresets]);
+}
+
+function DuotonePanel(_ref2) {
+  let {
+    name
+  } = _ref2;
+  const [themeDuotone, setThemeDuotone] = useGlobalStyle('filter.duotone', name);
+  const duotonePalette = useMultiOriginPresets({
+    presetSetting: 'color.duotone',
+    defaultSetting: 'color.defaultDuotone'
+  });
+  const colorPalette = useMultiOriginPresets({
+    presetSetting: 'color.palette',
+    defaultSetting: 'color.defaultPalette'
+  });
+
+  if ((duotonePalette === null || duotonePalette === void 0 ? void 0 : duotonePalette.length) === 0) {
+    return null;
+  }
+
+  return createElement(Fragment, null, createElement(ToolsPanel, {
+    label: __('Duotone')
+  }, createElement("span", {
+    className: "span-columns"
+  }, __('Create a two-tone color effect without losing your original image.')), createElement("div", {
+    className: "span-columns"
+  }, createElement(DuotonePicker, {
+    colorPalette: colorPalette,
+    duotonePalette: duotonePalette,
+    disableCustomColors: true,
+    disableCustomDuotone: true,
+    value: themeDuotone,
+    onChange: setThemeDuotone
+  }))));
+}
+
+export default DuotonePanel;
+//# sourceMappingURL=duotone-panel.js.map

package/build-module/components/global-styles/duotone-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/duotone-panel.js"],"names":["__","__experimentalToolsPanel","ToolsPanel","DuotonePicker","privateApis","blockEditorPrivateApis","useSetting","useMemo","unlock","useGlobalStyle","EMPTY_ARRAY","useMultiOriginPresets","presetSetting","defaultSetting","disableDefault","userPresets","themePresets","defaultPresets","DuotonePanel","name","themeDuotone","setThemeDuotone","duotonePalette","colorPalette","length"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SACCC,wBAAwB,IAAIC,UAD7B,EAECC,aAFD,QAGO,uBAHP;AAIA,SACCC,WAAW,IAAIC,sBADhB,EAECC,UAFD,QAGO,yBAHP;AAIA,SAASC,OAAT,QAAwB,oBAAxB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,oBAAvB;AACA,MAAM;AAAEC,EAAAA;AAAF,IAAqBD,MAAM,CAAEH,sBAAF,CAAjC;AAEA,MAAMK,WAAW,GAAG,EAApB;;AAEA,SAASC,qBAAT,OAAoE;AAAA,MAApC;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,GAAoC;AACnE,QAAMC,cAAc,GAAG,CAAER,UAAU,CAAEO,cAAF,CAAnC;AACA,QAAME,WAAW,GAChBT,UAAU,CAAG,GAAGM,aAAe,SAArB,CAAV,IAA6CF,WAD9C;AAEA,QAAMM,YAAY,GACjBV,UAAU,CAAG,GAAGM,aAAe,QAArB,CAAV,IAA4CF,WAD7C;AAEA,QAAMO,cAAc,GACnBX,UAAU,CAAG,GAAGM,aAAe,UAArB,CAAV,IAA8CF,WAD/C;AAEA,SAAOH,OAAO,CACb,MAAM,CACL,GAAGQ,WADE,EAEL,GAAGC,YAFE,EAGL,IAAKF,cAAc,GAAGJ,WAAH,GAAiBO,cAApC,CAHK,CADO,EAMb,CAAEH,cAAF,EAAkBC,WAAlB,EAA+BC,YAA/B,EAA6CC,cAA7C,CANa,CAAd;AAQA;;AAED,SAASC,YAAT,QAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoCZ,cAAc,CACvD,gBADuD,EAEvDU,IAFuD,CAAxD;AAKA,QAAMG,cAAc,GAAGX,qBAAqB,CAAE;AAC7CC,IAAAA,aAAa,EAAE,eAD8B;AAE7CC,IAAAA,cAAc,EAAE;AAF6B,GAAF,CAA5C;AAIA,QAAMU,YAAY,GAAGZ,qBAAqB,CAAE;AAC3CC,IAAAA,aAAa,EAAE,eAD4B;AAE3CC,IAAAA,cAAc,EAAE;AAF2B,GAAF,CAA1C;;AAKA,MAAK,CAAAS,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEE,MAAhB,MAA2B,CAAhC,EAAoC;AACnC,WAAO,IAAP;AACA;;AACD,SACC,8BACC,cAAC,UAAD;AAAY,IAAA,KAAK,EAAGxB,EAAE,CAAE,SAAF;AAAtB,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGA,EAAE,CACH,oEADG,CADL,CADD,EAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,aAAD;AACC,IAAA,YAAY,EAAGuB,YADhB;AAEC,IAAA,cAAc,EAAGD,cAFlB;AAGC,IAAA,mBAAmB,EAAG,IAHvB;AAIC,IAAA,oBAAoB,EAAG,IAJxB;AAKC,IAAA,KAAK,EAAGF,YALT;AAMC,IAAA,QAAQ,EAAGC;AANZ,IADD,CAND,CADD,CADD;AAqBA;;AAED,eAAeH,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport {\n\tprivateApis as blockEditorPrivateApis,\n\tuseSetting,\n} from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst EMPTY_ARRAY = [];\n\nfunction useMultiOriginPresets( { presetSetting, defaultSetting } ) {\n\tconst disableDefault = ! useSetting( defaultSetting );\n\tconst userPresets =\n\t\tuseSetting( `${ presetSetting }.custom` ) || EMPTY_ARRAY;\n\tconst themePresets =\n\t\tuseSetting( `${ presetSetting }.theme` ) || EMPTY_ARRAY;\n\tconst defaultPresets =\n\t\tuseSetting( `${ presetSetting }.default` ) || EMPTY_ARRAY;\n\treturn useMemo(\n\t\t() => [\n\t\t\t...userPresets,\n\t\t\t...themePresets,\n\t\t\t...( disableDefault ? EMPTY_ARRAY : defaultPresets ),\n\t\t],\n\t\t[ disableDefault, userPresets, themePresets, defaultPresets ]\n\t);\n}\n\nfunction DuotonePanel( { name } ) {\n\tconst [ themeDuotone, setThemeDuotone ] = useGlobalStyle(\n\t\t'filter.duotone',\n\t\tname\n\t);\n\n\tconst duotonePalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.duotone',\n\t\tdefaultSetting: 'color.defaultDuotone',\n\t} );\n\tconst colorPalette = useMultiOriginPresets( {\n\t\tpresetSetting: 'color.palette',\n\t\tdefaultSetting: 'color.defaultPalette',\n\t} );\n\n\tif ( duotonePalette?.length === 0 ) {\n\t\treturn null;\n\t}\n\treturn (\n\t\t<>\n\t\t\t<ToolsPanel label={ __( 'Duotone' ) }>\n\t\t\t\t<span className=\"span-columns\">\n\t\t\t\t\t{ __(\n\t\t\t\t\t\t'Create a two-tone color effect without losing your original image.'\n\t\t\t\t\t) }\n\t\t\t\t</span>\n\t\t\t\t<div className=\"span-columns\">\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tcolorPalette={ colorPalette }\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomColors={ true }\n\t\t\t\t\t\tdisableCustomDuotone={ true }\n\t\t\t\t\t\tvalue={ themeDuotone }\n\t\t\t\t\t\tonChange={ setThemeDuotone }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ToolsPanel>\n\t\t</>\n\t);\n}\n\nexport default DuotonePanel;\n"]}

package/build-module/components/global-styles/filter-utils.js

@@ -0,0 +1,9 @@
+/**
+ * Internal dependencies
+ */
+import { useSupportedStyles } from './hooks';
+export function useHasFilterPanel(name) {
+  const supports = useSupportedStyles(name);
+  return supports.includes('filter');
+}
+//# sourceMappingURL=filter-utils.js.map

package/build-module/components/global-styles/filter-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/filter-utils.js"],"names":["useSupportedStyles","useHasFilterPanel","name","supports","includes"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,kBAAT,QAAmC,SAAnC;AAEA,OAAO,SAASC,iBAAT,CAA4BC,IAA5B,EAAmC;AACzC,QAAMC,QAAQ,GAAGH,kBAAkB,CAAEE,IAAF,CAAnC;AACA,SAAOC,QAAQ,CAACC,QAAT,CAAmB,QAAnB,CAAP;AACA","sourcesContent":["/**\n * Internal dependencies\n */\nimport { useSupportedStyles } from './hooks';\n\nexport function useHasFilterPanel( name ) {\n\tconst supports = useSupportedStyles( name );\n\treturn supports.includes( 'filter' );\n}\n"]}

package/build-module/components/global-styles/hooks.js

@@ -18,7 +18,8 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { unlock } from '../../private-apis';
 import { useSelect } from '@wordpress/data';
 const {
-  useGlobalSetting
+  useGlobalSetting,
+  useColorsPerOrigin: useColorsPerOriginFromSettings
 } = unlock(blockEditorPrivateApis); // Enable colord's a11y plugin.
 
 extend([a11yPlugin]);
@@ -27,32 +28,16 @@ export function useColorsPerOrigin(name) {
   const [themeColors] = useGlobalSetting('color.palette.theme', name);
   const [defaultColors] = useGlobalSetting('color.palette.default', name);
   const [shouldDisplayDefaultColors] = useGlobalSetting('color.defaultPalette');
-  return useMemo(() => {
-    const result = [];
-
-    if (themeColors && themeColors.length) {
-      result.push({
-        name: _x('Theme', 'Indicates this palette comes from the theme.'),
-        colors: themeColors
-      });
-    }
-
-    if (shouldDisplayDefaultColors && defaultColors && defaultColors.length) {
-      result.push({
-        name: _x('Default', 'Indicates this palette comes from WordPress.'),
-        colors: defaultColors
-      });
+  return useColorsPerOriginFromSettings({
+    color: {
+      palette: {
+        custom: customColors,
+        theme: themeColors,
+        default: defaultColors
+      },
+      defaultPalette: shouldDisplayDefaultColors
     }
-
-    if (customColors && customColors.length) {
-      result.push({
-        name: _x('Custom', 'Indicates this palette is created by the user.'),
-        colors: customColors
-      });
-    }
-
-    return result;
-  }, [customColors, themeColors, defaultColors]);
+  });
 }
 export function useGradientsPerOrigin(name) {
   const [customGradients] = useGlobalSetting('color.gradients.custom', name);

package/build-module/components/global-styles/hooks.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"names":["colord","extend","a11yPlugin","_x","useMemo","store","blocksStore","privateApis","blockEditorPrivateApis","unlock","useSelect","useGlobalSetting","useColorsPerOrigin","name","customColors","themeColors","defaultColors","shouldDisplayDefaultColors","result","length","push","colors","useGradientsPerOrigin","customGradients","themeGradients","defaultGradients","shouldDisplayDefaultGradients","gradients","useColorRandomizer","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useSupportedStyles","element","supportedPanels","select","getSupportedStyles"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { _x } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorsPerOrigin( name ) {\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom', name );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme', name );\n\tconst [ defaultColors ] = useGlobalSetting( 'color.palette.default', name );\n\tconst [ shouldDisplayDefaultColors ] = useGlobalSetting(\n\t\t'color.defaultPalette'\n\t);\n\n\treturn useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeColors && themeColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tcolors: themeColors,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultColors &&\n\t\t\tdefaultColors &&\n\t\t\tdefaultColors.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tcolors: defaultColors,\n\t\t\t} );\n\t\t}\n\t\tif ( customColors && customColors.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tcolors: customColors,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ customColors, themeColors, defaultColors ] );\n}\n\nexport function useGradientsPerOrigin( name ) {\n\tconst [ customGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\tconst [ themeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ defaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ shouldDisplayDefaultGradients ] = useGlobalSetting(\n\t\t'color.defaultGradients'\n\t);\n\n\treturn useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultGradients &&\n\t\t\tdefaultGradients &&\n\t\t\tdefaultGradients.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tgradients: defaultGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( customGradients && customGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ customGradients, themeGradients, defaultGradients ] );\n}\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/* eslint-disable no-restricted-syntax */\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\t\t/* eslint-enable no-restricted-syntax */\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}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"names":["colord","extend","a11yPlugin","_x","useMemo","store","blocksStore","privateApis","blockEditorPrivateApis","unlock","useSelect","useGlobalSetting","useColorsPerOrigin","useColorsPerOriginFromSettings","name","customColors","themeColors","defaultColors","shouldDisplayDefaultColors","color","palette","custom","theme","default","defaultPalette","useGradientsPerOrigin","customGradients","themeGradients","defaultGradients","shouldDisplayDefaultGradients","result","length","push","gradients","useColorRandomizer","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useSupportedStyles","element","supportedPanels","select","getSupportedStyles"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { _x } from '@wordpress/i18n';\nimport { useMemo } from '@wordpress/element';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useColorsPerOrigin: useColorsPerOriginFromSettings } =\n\tunlock( blockEditorPrivateApis );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\n\nexport function useColorsPerOrigin( name ) {\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom', name );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme', name );\n\tconst [ defaultColors ] = useGlobalSetting( 'color.palette.default', name );\n\tconst [ shouldDisplayDefaultColors ] = useGlobalSetting(\n\t\t'color.defaultPalette'\n\t);\n\n\treturn useColorsPerOriginFromSettings( {\n\t\tcolor: {\n\t\t\tpalette: {\n\t\t\t\tcustom: customColors,\n\t\t\t\ttheme: themeColors,\n\t\t\t\tdefault: defaultColors,\n\t\t\t},\n\t\t\tdefaultPalette: shouldDisplayDefaultColors,\n\t\t},\n\t} );\n}\n\nexport function useGradientsPerOrigin( name ) {\n\tconst [ customGradients ] = useGlobalSetting(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\tconst [ themeGradients ] = useGlobalSetting(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ defaultGradients ] = useGlobalSetting(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ shouldDisplayDefaultGradients ] = useGlobalSetting(\n\t\t'color.defaultGradients'\n\t);\n\n\treturn useMemo( () => {\n\t\tconst result = [];\n\t\tif ( themeGradients && themeGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Theme',\n\t\t\t\t\t'Indicates this palette comes from the theme.'\n\t\t\t\t),\n\t\t\t\tgradients: themeGradients,\n\t\t\t} );\n\t\t}\n\t\tif (\n\t\t\tshouldDisplayDefaultGradients &&\n\t\t\tdefaultGradients &&\n\t\t\tdefaultGradients.length\n\t\t) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Default',\n\t\t\t\t\t'Indicates this palette comes from WordPress.'\n\t\t\t\t),\n\t\t\t\tgradients: defaultGradients,\n\t\t\t} );\n\t\t}\n\t\tif ( customGradients && customGradients.length ) {\n\t\t\tresult.push( {\n\t\t\t\tname: _x(\n\t\t\t\t\t'Custom',\n\t\t\t\t\t'Indicates this palette is created by the user.'\n\t\t\t\t),\n\t\t\t\tgradients: customGradients,\n\t\t\t} );\n\t\t}\n\t\treturn result;\n\t}, [ customGradients, themeGradients, defaultGradients ] );\n}\n\nexport function useColorRandomizer( name ) {\n\tconst [ themeColors, setThemeColors ] = useGlobalSetting(\n\t\t'color.palette.theme',\n\t\tname\n\t);\n\n\tfunction randomizeColors() {\n\t\t/* eslint-disable no-restricted-syntax */\n\t\tconst randomRotationValue = Math.floor( Math.random() * 225 );\n\t\t/* eslint-enable no-restricted-syntax */\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}\n\n\treturn window.__experimentalEnableColorRandomizer\n\t\t? [ randomizeColors ]\n\t\t: [];\n}\n\nexport function useSupportedStyles( name, element ) {\n\tconst { supportedPanels } = useSelect(\n\t\t( select ) => {\n\t\t\treturn {\n\t\t\t\tsupportedPanels: unlock(\n\t\t\t\t\tselect( blocksStore )\n\t\t\t\t).getSupportedStyles( name, element ),\n\t\t\t};\n\t\t},\n\t\t[ name, element ]\n\t);\n\n\treturn supportedPanels;\n}\n"]}

package/build-module/components/global-styles/preview.js

@@ -1,4 +1,4 @@
-import { createElement } from "@wordpress/element";
+import { createElement, Fragment } from "@wordpress/element";
 
 /**
  * WordPress dependencies
@@ -92,19 +92,23 @@ const StylesPreview = _ref => {
 
     return styles;
   }, [styles]);
-  return createElement(Iframe, {
+  const isReady = !!width;
+  return createElement(Fragment, null, createElement("div", {
+    style: {
+      position: 'relative'
+    }
+  }, containerResizeListener), isReady && createElement(Iframe, {
     className: "edit-site-global-styles-preview__iframe",
     head: createElement(EditorStyles, {
       styles: editorStyles
     }),
     style: {
-      height: normalizedHeight * ratio,
-      visibility: !width ? 'hidden' : 'visible'
+      height: normalizedHeight * ratio
     },
     onMouseEnter: () => setIsHovered(true),
     onMouseLeave: () => setIsHovered(false),
     tabIndex: -1
-  }, containerResizeListener, createElement(motion.div, {
+  }, createElement(motion.div, {
     style: {
       height: normalizedHeight * ratio,
       width: '100%',
@@ -229,7 +233,7 @@ const StylesPreview = _ref => {
       lineHeight: '1em',
       textAlign: 'center'
     }
-  }, label)))));
+  }, label))))));
 };
 
 export default StylesPreview;

package/build-module/components/global-styles/preview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","unlock","useGlobalSetting","useGlobalStyle","useGlobalStylesOutput","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","editorStyles","css","isGlobalStyles","height","visibility","background","cursor","overflow","fontSize","delay","type","map","index","slug","borderRadius","position","top","flexGrow","padding","boxSizing","lineHeight","textAlign"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst firstFrame = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrame = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused, withHoverView } ) => {\n\tconst [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\n\treturn (\n\t\t<Iframe\n\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\tstyle={ {\n\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\tvisibility: ! width ? 'hidden' : 'visible',\n\t\t\t} }\n\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\ttabIndex={ -1 }\n\t\t>\n\t\t\t{ containerResizeListener }\n\t\t\t<motion.div\n\t\t\t\tstyle={ {\n\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t} }\n\t\t\t\tinitial=\"start\"\n\t\t\t\tanimate={\n\t\t\t\t\t( isHovered || isFocused ) && ! disableMotion && label\n\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t: 'start'\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\ttransition={ { delay: 0.3, type: 'tween' } }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t{ highlightedColors.map(\n\t\t\t\t\t\t\t\t( { slug, color }, index ) => (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t\t2,\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\tdelay: index === 1 ? 0.2 : 0.1,\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) }\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ withHoverView && midFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\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) ) }\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t\t<motion.div\n\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\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\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t</motion.div>\n\t\t</Iframe>\n\t);\n};\n\nexport default StylesPreview;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","unlock","useGlobalSetting","useGlobalStyle","useGlobalStylesOutput","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","editorStyles","css","isGlobalStyles","isReady","position","height","background","cursor","overflow","fontSize","delay","type","map","index","slug","borderRadius","top","flexGrow","padding","boxSizing","lineHeight","textAlign"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__unstableIframe as Iframe,\n\t__unstableEditorStyles as EditorStyles,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport {\n\t__unstableMotion as motion,\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n} from '@wordpress/components';\nimport { useReducedMotion, useResizeObserver } from '@wordpress/compose';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../private-apis';\n\nconst { useGlobalSetting, useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst firstFrame = {\n\tstart: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\thover: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst midFrame = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrame = {\n\thover: {\n\t\tscale: 1,\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\tscale: 0,\n\t\topacity: 0,\n\t},\n};\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\nconst normalizedColorSwatchSize = 32;\n\nconst StylesPreview = ( { label, isFocused, withHoverView } ) => {\n\tconst [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );\n\tconst [ headingFontFamily = fontFamily ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useGlobalStyle(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ gradientValue ] = useGlobalStyle( 'color.gradient' );\n\tconst [ styles ] = useGlobalStylesOutput();\n\tconst disableMotion = useReducedMotion();\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\tconst [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst paletteColors = ( themeColors ?? [] )\n\t\t.concat( customColors ?? [] )\n\t\t.concat( coreColors ?? [] );\n\tconst highlightedColors = paletteColors\n\t\t.filter(\n\t\t\t// we exclude these two colors because they are already visible in the preview.\n\t\t\t( { color } ) => color !== backgroundColor && color !== headingColor\n\t\t)\n\t\t.slice( 0, 2 );\n\n\t// Reset leaked styles from WP common.css and remove main content layout padding and border.\n\tconst editorStyles = useMemo( () => {\n\t\tif ( styles ) {\n\t\t\treturn [\n\t\t\t\t...styles,\n\t\t\t\t{\n\t\t\t\t\tcss: 'html{overflow:hidden}body{min-width: 0;padding: 0;border: none;}',\n\t\t\t\t\tisGlobalStyles: true,\n\t\t\t\t},\n\t\t\t];\n\t\t}\n\n\t\treturn styles;\n\t}, [ styles ] );\n\tconst isReady = !! width;\n\n\treturn (\n\t\t<>\n\t\t\t<div style={ { position: 'relative' } }>\n\t\t\t\t{ containerResizeListener }\n\t\t\t</div>\n\t\t\t{ isReady && (\n\t\t\t\t<Iframe\n\t\t\t\t\tclassName=\"edit-site-global-styles-preview__iframe\"\n\t\t\t\t\thead={ <EditorStyles styles={ editorStyles } /> }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tinitial=\"start\"\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t( isHovered || isFocused ) &&\n\t\t\t\t\t\t\t! disableMotion &&\n\t\t\t\t\t\t\tlabel\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'start'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ firstFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\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\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\tfontSize: 65 * ratio,\n\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tanimate={ { scale: 1, opacity: 1 } }\n\t\t\t\t\t\t\t\t\tinitial={ { scale: 0.1, opacity: 0 } }\n\t\t\t\t\t\t\t\t\ttransition={ { delay: 0.3, type: 'tween' } }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\tAa\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t\t\t{ highlightedColors.map(\n\t\t\t\t\t\t\t\t\t\t( { slug, color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ slug }\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\theight:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\twidth:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tnormalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio,\n\t\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\t\tborderRadius:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t( normalizedColorSwatchSize *\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tratio ) /\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t2,\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\tanimate={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 1,\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\tinitial={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tscale: 0.1,\n\t\t\t\t\t\t\t\t\t\t\t\t\topacity: 0,\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\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\t\tdelay:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tindex === 1 ? 0.2 : 0.1,\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)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ withHoverView && midFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<HStack\n\t\t\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\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\t{ paletteColors\n\t\t\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\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</HStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tvariants={ secondFrame }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<VStack\n\t\t\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\t\t\tboxSizing: 'border-box',\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\t{ label && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</VStack>\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t</Iframe>\n\t\t\t) }\n\t\t</>\n\t);\n};\n\nexport default StylesPreview;\n"]}

package/build-module/components/global-styles/screen-block-list.js

@@ -15,18 +15,17 @@ import { speak } from '@wordpress/a11y';
  * Internal dependencies
  */
 
-import { useHasBorderPanel } from './border-panel';
 import { useHasColorPanel } from './color-utils';
-import { useHasDimensionsPanel } from './dimensions-panel';
 import { useHasVariationsPanel } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
 import { unlock } from '../../private-apis';
-import { useSupportedStyles } from './hooks';
 const {
+  useHasDimensionsPanel,
   useHasTypographyPanel,
+  useHasBorderPanel,
   useGlobalSetting,
-  overrideSettingsWithSupports
+  useSettingsForBlockElement
 } = unlock(blockEditorPrivateApis);
 
 function useSortedBlockTypes() {
@@ -61,12 +60,11 @@ function BlockMenuItem(_ref) {
     block
   } = _ref;
   const [rawSettings] = useGlobalSetting('', block.name);
-  const supports = useSupportedStyles(block.name);
-  const settings = useMemo(() => overrideSettingsWithSupports(rawSettings, supports), [rawSettings, supports]);
+  const settings = useSettingsForBlockElement(rawSettings, block.name);
   const hasTypographyPanel = useHasTypographyPanel(settings);
   const hasColorPanel = useHasColorPanel(block.name);
-  const hasBorderPanel = useHasBorderPanel(block.name);
-  const hasDimensionsPanel = useHasDimensionsPanel(block.name);
+  const hasBorderPanel = useHasBorderPanel(settings);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
   const hasVariationsPanel = useHasVariationsPanel(block.name);
   const hasBlockMenuItem = hasTypographyPanel || hasColorPanel || hasLayoutPanel || hasVariationsPanel;

package/build-module/components/global-styles/screen-block-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["store","blocksStore","__","sprintf","_n","FlexItem","SearchControl","__experimentalHStack","HStack","useSelect","useState","useMemo","useEffect","useRef","BlockIcon","privateApis","blockEditorPrivateApis","useDebounce","speak","useHasBorderPanel","useHasColorPanel","useHasDimensionsPanel","useHasVariationsPanel","ScreenHeader","NavigationButtonAsItem","unlock","useSupportedStyles","useHasTypographyPanel","useGlobalSetting","overrideSettingsWithSupports","useSortedBlockTypes","blockItems","select","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","rawSettings","supports","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","hasBlockMenuItem","navigationButtonLabel","title","encodeURIComponent","icon","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useHasBorderPanel } from './border-panel';\nimport { useHasColorPanel } from './color-utils';\nimport { useHasDimensionsPanel } from './dimensions-panel';\nimport { useHasVariationsPanel } from './variations-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\nimport { useSupportedStyles } from './hooks';\n\nconst {\n\tuseHasTypographyPanel,\n\tuseGlobalSetting,\n\toverrideSettingsWithSupports,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', block.name );\n\tconst supports = useSupportedStyles( block.name );\n\tconst settings = useMemo(\n\t\t() => overrideSettingsWithSupports( rawSettings, supports ),\n\t\t[ rawSettings, supports ]\n\t);\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( block.name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( block.name );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( block.name );\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-block-list.js"],"names":["store","blocksStore","__","sprintf","_n","FlexItem","SearchControl","__experimentalHStack","HStack","useSelect","useState","useMemo","useEffect","useRef","BlockIcon","privateApis","blockEditorPrivateApis","useDebounce","speak","useHasColorPanel","useHasVariationsPanel","ScreenHeader","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","useSortedBlockTypes","blockItems","select","getBlockTypes","groupByType","blocks","block","core","noncore","type","name","startsWith","push","coreItems","nonCoreItems","reduce","BlockMenuItem","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasBorderPanel","hasDimensionsPanel","hasLayoutPanel","hasVariationsPanel","hasBlockMenuItem","navigationButtonLabel","title","encodeURIComponent","icon","ScreenBlockList","sortedBlockTypes","filterValue","setFilterValue","debouncedSpeak","isMatchingSearchTerm","filteredBlockTypes","filter","blockType","blockTypesListRef","count","current","childElementCount","resultsFoundMessage","map"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport { useState, useMemo, useEffect, useRef } from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useHasColorPanel } from './color-utils';\nimport { useHasVariationsPanel } from './variations-panel';\nimport ScreenHeader from './header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../private-apis';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks, block ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nfunction BlockMenuItem( { block } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', block.name );\n\tconst settings = useSettingsForBlockElement( rawSettings, block.name );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( block.name );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = useHasVariationsPanel( block.name );\n\tconst hasBlockMenuItem =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\tconst navigationButtonLabel = sprintf(\n\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t__( '%s block styles' ),\n\t\tblock.title\n\t);\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t\taria-label={ navigationButtonLabel }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\nfunction ScreenBlockList() {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\tconst isMatchingSearchTerm = useSelect(\n\t\t( select ) => select( blocksStore ).isMatchingSearchTerm,\n\t\t[]\n\t);\n\tconst filteredBlockTypes = useMemo( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn sortedBlockTypes;\n\t\t}\n\t\treturn sortedBlockTypes.filter( ( blockType ) =>\n\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t);\n\t}, [ filterValue, sortedBlockTypes, isMatchingSearchTerm ] );\n\n\tconst blockTypesListRef = useRef();\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current.childElementCount;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, count );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"edit-site-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search for blocks' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tref={ blockTypesListRef }\n\t\t\t\tclassName=\"edit-site-block-types-item-list\"\n\t\t\t>\n\t\t\t\t{ filteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"]}

package/build-module/components/global-styles/screen-border.js

@@ -4,24 +4,33 @@ import { createElement, Fragment } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
 
 import ScreenHeader from './header';
-import BorderPanel, { useHasBorderPanel } from './border-panel';
+import BorderPanel from './border-panel';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
+import { unlock } from '../../private-apis';
+const {
+  useHasBorderPanel,
+  useGlobalSetting,
+  useSettingsForBlockElement
+} = unlock(blockEditorPrivateApis);
 
 function ScreenBorder(_ref) {
   let {
     name,
     variation = ''
   } = _ref;
-  const hasBorderPanel = useHasBorderPanel(name);
+  const [rawSettings] = useGlobalSetting('', name);
+  const settings = useSettingsForBlockElement(rawSettings, name);
+  const hasBorderPanel = useHasBorderPanel(settings);
   const variationClassName = getVariationClassName(variation);
   return createElement(Fragment, null, createElement(ScreenHeader, {
-    title: __('Border & Shadow')
+    title: __('Border')
   }), createElement(BlockPreviewPanel, {
     name: name,
     variation: variationClassName

package/build-module/components/global-styles/screen-border.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-border.js"],"names":["__","ScreenHeader","BorderPanel","useHasBorderPanel","BlockPreviewPanel","getVariationClassName","ScreenBorder","name","variation","hasBorderPanel","variationClassName"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,WAAP,IAAsBC,iBAAtB,QAA+C,gBAA/C;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,SAASC,qBAAT,QAAsC,SAAtC;;AAEA,SAASC,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAMC,cAAc,GAAGN,iBAAiB,CAAEI,IAAF,CAAxC;AACA,QAAMG,kBAAkB,GAAGL,qBAAqB,CAAEG,SAAF,CAAhD;AACA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGR,EAAE,CAAE,iBAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGO,IAA1B;AAAiC,IAAA,SAAS,EAAGG;AAA7C,IAFD,EAGGD,cAAc,IACf,cAAC,WAAD;AAAa,IAAA,IAAI,EAAGF,IAApB;AAA2B,IAAA,SAAS,EAAGC;AAAvC,IAJF,CADD;AASA;;AAED,eAAeF,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport BorderPanel, { useHasBorderPanel } from './border-panel';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\n\nfunction ScreenBorder( { name, variation = '' } ) {\n\tconst hasBorderPanel = useHasBorderPanel( name );\n\tconst variationClassName = getVariationClassName( variation );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Border & Shadow' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<BorderPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBorder;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-border.js"],"names":["__","privateApis","blockEditorPrivateApis","ScreenHeader","BorderPanel","BlockPreviewPanel","getVariationClassName","unlock","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","ScreenBorder","name","variation","rawSettings","settings","hasBorderPanel","variationClassName"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,WAAP,MAAwB,gBAAxB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,SAASC,qBAAT,QAAsC,SAAtC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AAAEC,EAAAA,iBAAF;AAAqBC,EAAAA,gBAArB;AAAuCC,EAAAA;AAAvC,IACLH,MAAM,CAAEL,sBAAF,CADP;;AAGA,SAASS,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAM,CAAEC,WAAF,IAAkBL,gBAAgB,CAAE,EAAF,EAAMG,IAAN,CAAxC;AACA,QAAMG,QAAQ,GAAGL,0BAA0B,CAAEI,WAAF,EAAeF,IAAf,CAA3C;AACA,QAAMI,cAAc,GAAGR,iBAAiB,CAAEO,QAAF,CAAxC;AACA,QAAME,kBAAkB,GAAGX,qBAAqB,CAAEO,SAAF,CAAhD;AACA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGb,EAAE,CAAE,QAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGY,IAA1B;AAAiC,IAAA,SAAS,EAAGK;AAA7C,IAFD,EAGGD,cAAc,IACf,cAAC,WAAD;AAAa,IAAA,IAAI,EAAGJ,IAApB;AAA2B,IAAA,SAAS,EAAGC;AAAvC,IAJF,CADD;AASA;;AAED,eAAeF,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\nimport BorderPanel from './border-panel';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../private-apis';\n\nconst { useHasBorderPanel, useGlobalSetting, useSettingsForBlockElement } =\n\tunlock( blockEditorPrivateApis );\n\nfunction ScreenBorder( { name, variation = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst variationClassName = getVariationClassName( variation );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Border' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<BorderPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBorder;\n"]}

package/build-module/components/global-styles/screen-filters.js

@@ -0,0 +1,33 @@
+import { createElement, Fragment } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+
+import DuotonePanel from './duotone-panel';
+import BlockPreviewPanel from './block-preview-panel';
+/**
+ * Internal dependencies
+ */
+
+import ScreenHeader from './header';
+
+function ScreenFilters(_ref) {
+  let {
+    name
+  } = _ref;
+  return createElement(Fragment, null, createElement(ScreenHeader, {
+    title: __('Filters')
+  }), createElement(BlockPreviewPanel, {
+    name: name
+  }), createElement(DuotonePanel, {
+    name: name
+  }));
+}
+
+export default ScreenFilters;
+//# sourceMappingURL=screen-filters.js.map

package/build-module/components/global-styles/screen-filters.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-filters.js"],"names":["__","DuotonePanel","BlockPreviewPanel","ScreenHeader","ScreenFilters","name"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,iBAAzB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AAEA;AACA;AACA;;AACA,OAAOC,YAAP,MAAyB,UAAzB;;AAEA,SAASC,aAAT,OAAmC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAClC,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGL,EAAE,CAAE,SAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGK;AAA1B,IAFD,EAGC,cAAC,YAAD;AAAc,IAAA,IAAI,EAAGA;AAArB,IAHD,CADD;AAOA;;AAED,eAAeD,aAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DuotonePanel from './duotone-panel';\nimport BlockPreviewPanel from './block-preview-panel';\n\n/**\n * Internal dependencies\n */\nimport ScreenHeader from './header';\n\nfunction ScreenFilters( { name } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Filters' ) } />\n\t\t\t<BlockPreviewPanel name={ name } />\n\t\t\t<DuotonePanel name={ name } />\n\t\t</>\n\t);\n}\n\nexport default ScreenFilters;\n"]}

package/build-module/components/global-styles/screen-layout.js

@@ -4,21 +4,30 @@ import { createElement, Fragment } from "@wordpress/element";
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 /**
  * Internal dependencies
  */
 
-import DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';
+import DimensionsPanel from './dimensions-panel';
 import ScreenHeader from './header';
 import BlockPreviewPanel from './block-preview-panel';
 import { getVariationClassName } from './utils';
+import { unlock } from '../../private-apis';
+const {
+  useHasDimensionsPanel,
+  useGlobalSetting,
+  useSettingsForBlockElement
+} = unlock(blockEditorPrivateApis);
 
 function ScreenLayout(_ref) {
   let {
     name,
     variation = ''
   } = _ref;
-  const hasDimensionsPanel = useHasDimensionsPanel(name);
+  const [rawSettings] = useGlobalSetting('', name);
+  const settings = useSettingsForBlockElement(rawSettings, name);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const variationClassName = getVariationClassName(variation);
   return createElement(Fragment, null, createElement(ScreenHeader, {
     title: __('Layout')

package/build-module/components/global-styles/screen-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["__","DimensionsPanel","useHasDimensionsPanel","ScreenHeader","BlockPreviewPanel","getVariationClassName","ScreenLayout","name","variation","hasDimensionsPanel","variationClassName"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,IAA0BC,qBAA1B,QAAuD,oBAAvD;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,SAASC,qBAAT,QAAsC,SAAtC;;AAEA,SAASC,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAMC,kBAAkB,GAAGP,qBAAqB,CAAEK,IAAF,CAAhD;AACA,QAAMG,kBAAkB,GAAGL,qBAAqB,CAAEG,SAAF,CAAhD;AACA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGR,EAAE,CAAE,QAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGO,IAA1B;AAAiC,IAAA,SAAS,EAAGG;AAA7C,IAFD,EAGGD,kBAAkB,IACnB,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGF,IAAxB;AAA+B,IAAA,SAAS,EAAGC;AAA3C,IAJF,CADD;AASA;;AAED,eAAeF,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport DimensionsPanel, { useHasDimensionsPanel } from './dimensions-panel';\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\n\nfunction ScreenLayout( { name, variation = '' } ) {\n\tconst hasDimensionsPanel = useHasDimensionsPanel( name );\n\tconst variationClassName = getVariationClassName( variation );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<DimensionsPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"]}
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["__","privateApis","blockEditorPrivateApis","DimensionsPanel","ScreenHeader","BlockPreviewPanel","getVariationClassName","unlock","useHasDimensionsPanel","useGlobalSetting","useSettingsForBlockElement","ScreenLayout","name","variation","rawSettings","settings","hasDimensionsPanel","variationClassName"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,OAAOC,eAAP,MAA4B,oBAA5B;AACA,OAAOC,YAAP,MAAyB,UAAzB;AACA,OAAOC,iBAAP,MAA8B,uBAA9B;AACA,SAASC,qBAAT,QAAsC,SAAtC;AACA,SAASC,MAAT,QAAuB,oBAAvB;AAEA,MAAM;AAAEC,EAAAA,qBAAF;AAAyBC,EAAAA,gBAAzB;AAA2CC,EAAAA;AAA3C,IACLH,MAAM,CAAEL,sBAAF,CADP;;AAGA,SAASS,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAM,CAAEC,WAAF,IAAkBL,gBAAgB,CAAE,EAAF,EAAMG,IAAN,CAAxC;AACA,QAAMG,QAAQ,GAAGL,0BAA0B,CAAEI,WAAF,EAAeF,IAAf,CAA3C;AACA,QAAMI,kBAAkB,GAAGR,qBAAqB,CAAEO,QAAF,CAAhD;AACA,QAAME,kBAAkB,GAAGX,qBAAqB,CAAEO,SAAF,CAAhD;AACA,SACC,8BACC,cAAC,YAAD;AAAc,IAAA,KAAK,EAAGb,EAAE,CAAE,QAAF;AAAxB,IADD,EAEC,cAAC,iBAAD;AAAmB,IAAA,IAAI,EAAGY,IAA1B;AAAiC,IAAA,SAAS,EAAGK;AAA7C,IAFD,EAGGD,kBAAkB,IACnB,cAAC,eAAD;AAAiB,IAAA,IAAI,EAAGJ,IAAxB;AAA+B,IAAA,SAAS,EAAGC;AAA3C,IAJF,CADD;AASA;;AAED,eAAeF,YAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport DimensionsPanel from './dimensions-panel';\nimport ScreenHeader from './header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { getVariationClassName } from './utils';\nimport { unlock } from '../../private-apis';\n\nconst { useHasDimensionsPanel, useGlobalSetting, useSettingsForBlockElement } =\n\tunlock( blockEditorPrivateApis );\n\nfunction ScreenLayout( { name, variation = '' } ) {\n\tconst [ rawSettings ] = useGlobalSetting( '', name );\n\tconst settings = useSettingsForBlockElement( rawSettings, name );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst variationClassName = getVariationClassName( variation );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'Layout' ) } />\n\t\t\t<BlockPreviewPanel name={ name } variation={ variationClassName } />\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<DimensionsPanel name={ name } variation={ variation } />\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenLayout;\n"]}

package/build-module/components/global-styles/screen-root.js

@@ -45,7 +45,8 @@ function ScreenRoot() {
     };
   }, []);
   return createElement(Card, {
-    size: "small"
+    size: "small",
+    className: "edit-site-global-styles-screen-root"
   }, createElement(CardBody, null, createElement(VStack, {
     spacing: 4
   }, createElement(Card, null, createElement(CardMedia, null, createElement(StylesPreview, null))), !!(variations !== null && variations !== void 0 && variations.length) && createElement(ItemGroup, null, createElement(NavigationButtonAsItem, {