@wordpress/edit-site 5.4.0 → 5.6.0

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

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _i18n = require("@wordpress/i18n");
+
+var _components = require("@wordpress/components");
+
+var _blockEditor = require("@wordpress/block-editor");
+
+var _privateApis = require("../../private-apis");
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+const {
+  useGlobalStyle
+} = (0, _privateApis.unlock)(_blockEditor.privateApis);
+const EMPTY_ARRAY = [];
+
+function useMultiOriginPresets(_ref) {
+  let {
+    presetSetting,
+    defaultSetting
+  } = _ref;
+  const disableDefault = !(0, _blockEditor.useSetting)(defaultSetting);
+  const userPresets = (0, _blockEditor.useSetting)(`${presetSetting}.custom`) || EMPTY_ARRAY;
+  const themePresets = (0, _blockEditor.useSetting)(`${presetSetting}.theme`) || EMPTY_ARRAY;
+  const defaultPresets = (0, _blockEditor.useSetting)(`${presetSetting}.default`) || EMPTY_ARRAY;
+  return (0, _element.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 (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_components.__experimentalToolsPanel, {
+    label: (0, _i18n.__)('Duotone')
+  }, (0, _element.createElement)("span", {
+    className: "span-columns"
+  }, (0, _i18n.__)('Create a two-tone color effect without losing your original image.')), (0, _element.createElement)("div", {
+    className: "span-columns"
+  }, (0, _element.createElement)(_components.DuotonePicker, {
+    colorPalette: colorPalette,
+    duotonePalette: duotonePalette,
+    disableCustomColors: true,
+    disableCustomDuotone: true,
+    value: themeDuotone,
+    onChange: setThemeDuotone
+  }))));
+}
+
+var _default = DuotonePanel;
+exports.default = _default;
+//# sourceMappingURL=duotone-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/duotone-panel.js"],"names":["useGlobalStyle","blockEditorPrivateApis","EMPTY_ARRAY","useMultiOriginPresets","presetSetting","defaultSetting","disableDefault","userPresets","themePresets","defaultPresets","DuotonePanel","name","themeDuotone","setThemeDuotone","duotonePalette","colorPalette","length"],"mappings":";;;;;;;AAYA;;AATA;;AACA;;AAIA;;AASA;;AAjBA;AACA;AACA;;AAYA;AACA;AACA;AAEA,MAAM;AAAEA,EAAAA;AAAF,IAAqB,yBAAQC,wBAAR,CAA3B;AAEA,MAAMC,WAAW,GAAG,EAApB;;AAEA,SAASC,qBAAT,OAAoE;AAAA,MAApC;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,GAAoC;AACnE,QAAMC,cAAc,GAAG,CAAE,6BAAYD,cAAZ,CAAzB;AACA,QAAME,WAAW,GAChB,6BAAa,GAAGH,aAAe,SAA/B,KAA6CF,WAD9C;AAEA,QAAMM,YAAY,GACjB,6BAAa,GAAGJ,aAAe,QAA/B,KAA4CF,WAD7C;AAEA,QAAMO,cAAc,GACnB,6BAAa,GAAGL,aAAe,UAA/B,KAA8CF,WAD/C;AAEA,SAAO,sBACN,MAAM,CACL,GAAGK,WADE,EAEL,GAAGC,YAFE,EAGL,IAAKF,cAAc,GAAGJ,WAAH,GAAiBO,cAApC,CAHK,CADA,EAMN,CAAEH,cAAF,EAAkBC,WAAlB,EAA+BC,YAA/B,EAA6CC,cAA7C,CANM,CAAP;AAQA;;AAED,SAASC,YAAT,QAAkC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AACjC,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoCb,cAAc,CACvD,gBADuD,EAEvDW,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,qDACC,4BAAC,oCAAD;AAAY,IAAA,KAAK,EAAG,cAAI,SAAJ;AAApB,KACC;AAAM,IAAA,SAAS,EAAC;AAAhB,KACG,cACD,oEADC,CADH,CADD,EAMC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,yBAAD;AACC,IAAA,YAAY,EAAGD,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;;eAEcH,Y","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/components/global-styles/filter-utils.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHasFilterPanel = useHasFilterPanel;
+
+var _hooks = require("./hooks");
+
+/**
+ * Internal dependencies
+ */
+function useHasFilterPanel(name) {
+  const supports = (0, _hooks.useSupportedStyles)(name);
+  return supports.includes('filter');
+}
+//# sourceMappingURL=filter-utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/filter-utils.js"],"names":["useHasFilterPanel","name","supports","includes"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGO,SAASA,iBAAT,CAA4BC,IAA5B,EAAmC;AACzC,QAAMC,QAAQ,GAAG,+BAAoBD,IAApB,CAAjB;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/components/global-styles/hooks.js

@@ -38,7 +38,8 @@ var _data = require("@wordpress/data");
  * Internal dependencies
  */
 const {
-  useGlobalSetting
+  useGlobalSetting,
+  useColorsPerOrigin: useColorsPerOriginFromSettings
 } = (0, _privateApis.unlock)(_blockEditor.privateApis); // Enable colord's a11y plugin.
 
 (0, _colord.extend)([_a11y.default]);
@@ -48,32 +49,16 @@ function useColorsPerOrigin(name) {
   const [themeColors] = useGlobalSetting('color.palette.theme', name);
   const [defaultColors] = useGlobalSetting('color.palette.default', name);
   const [shouldDisplayDefaultColors] = useGlobalSetting('color.defaultPalette');
-  return (0, _element.useMemo)(() => {
-    const result = [];
-
-    if (themeColors && themeColors.length) {
-      result.push({
-        name: (0, _i18n._x)('Theme', 'Indicates this palette comes from the theme.'),
-        colors: themeColors
-      });
-    }
-
-    if (shouldDisplayDefaultColors && defaultColors && defaultColors.length) {
-      result.push({
-        name: (0, _i18n._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: (0, _i18n._x)('Custom', 'Indicates this palette is created by the user.'),
-        colors: customColors
-      });
-    }
-
-    return result;
-  }, [customColors, themeColors, defaultColors]);
+  });
 }
 
 function useGradientsPerOrigin(name) {

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"names":["useGlobalSetting","blockEditorPrivateApis","a11yPlugin","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","blocksStore","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":["useGlobalSetting","useColorsPerOrigin","useColorsPerOriginFromSettings","blockEditorPrivateApis","a11yPlugin","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","blocksStore","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/components/global-styles/preview.js

@@ -102,19 +102,23 @@ const StylesPreview = _ref => {
 
     return styles;
   }, [styles]);
-  return (0, _element.createElement)(_blockEditor.__unstableIframe, {
+  const isReady = !!width;
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)("div", {
+    style: {
+      position: 'relative'
+    }
+  }, containerResizeListener), isReady && (0, _element.createElement)(_blockEditor.__unstableIframe, {
     className: "edit-site-global-styles-preview__iframe",
     head: (0, _element.createElement)(_blockEditor.__unstableEditorStyles, {
       styles: editorStyles
     }),
     style: {
-      height: normalizedHeight * ratio,
-      visibility: !width ? 'hidden' : 'visible'
+      height: normalizedHeight * ratio
     },
     onMouseEnter: () => setIsHovered(true),
     onMouseLeave: () => setIsHovered(false),
     tabIndex: -1
-  }, containerResizeListener, (0, _element.createElement)(_components.__unstableMotion.div, {
+  }, (0, _element.createElement)(_components.__unstableMotion.div, {
     style: {
       height: normalizedHeight * ratio,
       width: '100%',
@@ -239,7 +243,7 @@ const StylesPreview = _ref => {
       lineHeight: '1em',
       textAlign: 'center'
     }
-  }, label)))));
+  }, label))))));
 };
 
 var _default = StylesPreview;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["useGlobalSetting","useGlobalStyle","useGlobalStylesOutput","blockEditorPrivateApis","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":["useGlobalSetting","useGlobalStyle","useGlobalStylesOutput","blockEditorPrivateApis","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/components/global-styles/screen-block-list.js

@@ -23,12 +23,8 @@ var _compose = require("@wordpress/compose");
 
 var _a11y = require("@wordpress/a11y");
 
-var _borderPanel = require("./border-panel");
-
 var _colorUtils = require("./color-utils");
 
-var _dimensionsPanel = require("./dimensions-panel");
-
 var _variationsPanel = require("./variations-panel");
 
 var _header = _interopRequireDefault(require("./header"));
@@ -37,8 +33,6 @@ var _navigationButton = require("./navigation-button");
 
 var _privateApis = require("../../private-apis");
 
-var _hooks = require("./hooks");
-
 /**
  * WordPress dependencies
  */
@@ -47,9 +41,11 @@ var _hooks = require("./hooks");
  * Internal dependencies
  */
 const {
+  useHasDimensionsPanel,
   useHasTypographyPanel,
+  useHasBorderPanel,
   useGlobalSetting,
-  overrideSettingsWithSupports
+  useSettingsForBlockElement
 } = (0, _privateApis.unlock)(_blockEditor.privateApis);
 
 function useSortedBlockTypes() {
@@ -84,12 +80,11 @@ function BlockMenuItem(_ref) {
     block
   } = _ref;
   const [rawSettings] = useGlobalSetting('', block.name);
-  const supports = (0, _hooks.useSupportedStyles)(block.name);
-  const settings = (0, _element.useMemo)(() => overrideSettingsWithSupports(rawSettings, supports), [rawSettings, supports]);
+  const settings = useSettingsForBlockElement(rawSettings, block.name);
   const hasTypographyPanel = useHasTypographyPanel(settings);
   const hasColorPanel = (0, _colorUtils.useHasColorPanel)(block.name);
-  const hasBorderPanel = (0, _borderPanel.useHasBorderPanel)(block.name);
-  const hasDimensionsPanel = (0, _dimensionsPanel.useHasDimensionsPanel)(block.name);
+  const hasBorderPanel = useHasBorderPanel(settings);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
   const hasVariationsPanel = (0, _variationsPanel.useHasVariationsPanel)(block.name);
   const hasBlockMenuItem = hasTypographyPanel || hasColorPanel || hasLayoutPanel || hasVariationsPanel;

package/build/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":["useHasTypographyPanel","useGlobalSetting","overrideSettingsWithSupports","blockEditorPrivateApis","useSortedBlockTypes","blockItems","select","blocksStore","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","speak","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":["useHasDimensionsPanel","useHasTypographyPanel","useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","useSortedBlockTypes","blockItems","select","blocksStore","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","speak","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/components/global-styles/screen-border.js

@@ -11,17 +11,17 @@ var _element = require("@wordpress/element");
 
 var _i18n = require("@wordpress/i18n");
 
+var _blockEditor = require("@wordpress/block-editor");
+
 var _header = _interopRequireDefault(require("./header"));
 
-var _borderPanel = _interopRequireWildcard(require("./border-panel"));
+var _borderPanel = _interopRequireDefault(require("./border-panel"));
 
 var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
 
 var _utils = require("./utils");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _privateApis = require("../../private-apis");
 
 /**
  * WordPress dependencies
@@ -30,15 +30,23 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Internal dependencies
  */
+const {
+  useHasBorderPanel,
+  useGlobalSetting,
+  useSettingsForBlockElement
+} = (0, _privateApis.unlock)(_blockEditor.privateApis);
+
 function ScreenBorder(_ref) {
   let {
     name,
     variation = ''
   } = _ref;
-  const hasBorderPanel = (0, _borderPanel.useHasBorderPanel)(name);
+  const [rawSettings] = useGlobalSetting('', name);
+  const settings = useSettingsForBlockElement(rawSettings, name);
+  const hasBorderPanel = useHasBorderPanel(settings);
   const variationClassName = (0, _utils.getVariationClassName)(variation);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
-    title: (0, _i18n.__)('Border & Shadow')
+    title: (0, _i18n.__)('Border')
   }), (0, _element.createElement)(_blockPreviewPanel.default, {
     name: name,
     variation: variationClassName

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-border.js"],"names":["ScreenBorder","name","variation","hasBorderPanel","variationClassName"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;;;;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAMC,cAAc,GAAG,oCAAmBF,IAAnB,CAAvB;AACA,QAAMG,kBAAkB,GAAG,kCAAuBF,SAAvB,CAA3B;AACA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,iBAAJ;AAAtB,IADD,EAEC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGD,IAA1B;AAAiC,IAAA,SAAS,EAAGG;AAA7C,IAFD,EAGGD,cAAc,IACf,4BAAC,oBAAD;AAAa,IAAA,IAAI,EAAGF,IAApB;AAA2B,IAAA,SAAS,EAAGC;AAAvC,IAJF,CADD;AASA;;eAEcF,Y","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":["useHasBorderPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","ScreenBorder","name","variation","rawSettings","settings","hasBorderPanel","variationClassName"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AAOA,MAAM;AAAEA,EAAAA,iBAAF;AAAqBC,EAAAA,gBAArB;AAAuCC,EAAAA;AAAvC,IACL,yBAAQC,wBAAR,CADD;;AAGA,SAASC,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAM,CAAEC,WAAF,IAAkBN,gBAAgB,CAAE,EAAF,EAAMI,IAAN,CAAxC;AACA,QAAMG,QAAQ,GAAGN,0BAA0B,CAAEK,WAAF,EAAeF,IAAf,CAA3C;AACA,QAAMI,cAAc,GAAGT,iBAAiB,CAAEQ,QAAF,CAAxC;AACA,QAAME,kBAAkB,GAAG,kCAAuBJ,SAAvB,CAA3B;AACA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,QAAJ;AAAtB,IADD,EAEC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGD,IAA1B;AAAiC,IAAA,SAAS,EAAGK;AAA7C,IAFD,EAGGD,cAAc,IACf,4BAAC,oBAAD;AAAa,IAAA,IAAI,EAAGJ,IAApB;AAA2B,IAAA,SAAS,EAAGC;AAAvC,IAJF,CADD;AASA;;eAEcF,Y","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/components/global-styles/screen-filters.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _element = require("@wordpress/element");
+
+var _i18n = require("@wordpress/i18n");
+
+var _duotonePanel = _interopRequireDefault(require("./duotone-panel"));
+
+var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel"));
+
+var _header = _interopRequireDefault(require("./header"));
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+function ScreenFilters(_ref) {
+  let {
+    name
+  } = _ref;
+  return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
+    title: (0, _i18n.__)('Filters')
+  }), (0, _element.createElement)(_blockPreviewPanel.default, {
+    name: name
+  }), (0, _element.createElement)(_duotonePanel.default, {
+    name: name
+  }));
+}
+
+var _default = ScreenFilters;
+exports.default = _default;
+//# sourceMappingURL=screen-filters.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-filters.js"],"names":["ScreenFilters","name"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AAdA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAGA,SAASA,aAAT,OAAmC;AAAA,MAAX;AAAEC,IAAAA;AAAF,GAAW;AAClC,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,SAAJ;AAAtB,IADD,EAEC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGA;AAA1B,IAFD,EAGC,4BAAC,qBAAD;AAAc,IAAA,IAAI,EAAGA;AAArB,IAHD,CADD;AAOA;;eAEcD,a","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/components/global-styles/screen-layout.js

@@ -11,7 +11,9 @@ var _element = require("@wordpress/element");
 
 var _i18n = require("@wordpress/i18n");
 
-var _dimensionsPanel = _interopRequireWildcard(require("./dimensions-panel"));
+var _blockEditor = require("@wordpress/block-editor");
+
+var _dimensionsPanel = _interopRequireDefault(require("./dimensions-panel"));
 
 var _header = _interopRequireDefault(require("./header"));
 
@@ -19,9 +21,7 @@ var _blockPreviewPanel = _interopRequireDefault(require("./block-preview-panel")
 
 var _utils = require("./utils");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _privateApis = require("../../private-apis");
 
 /**
  * WordPress dependencies
@@ -30,12 +30,20 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /**
  * Internal dependencies
  */
+const {
+  useHasDimensionsPanel,
+  useGlobalSetting,
+  useSettingsForBlockElement
+} = (0, _privateApis.unlock)(_blockEditor.privateApis);
+
 function ScreenLayout(_ref) {
   let {
     name,
     variation = ''
   } = _ref;
-  const hasDimensionsPanel = (0, _dimensionsPanel.useHasDimensionsPanel)(name);
+  const [rawSettings] = useGlobalSetting('', name);
+  const settings = useSettingsForBlockElement(rawSettings, name);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
   const variationClassName = (0, _utils.getVariationClassName)(variation);
   return (0, _element.createElement)(_element.Fragment, null, (0, _element.createElement)(_header.default, {
     title: (0, _i18n.__)('Layout')

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/screen-layout.js"],"names":["ScreenLayout","name","variation","hasDimensionsPanel","variationClassName"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AACA;;;;;;AAXA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAMC,kBAAkB,GAAG,4CAAuBF,IAAvB,CAA3B;AACA,QAAMG,kBAAkB,GAAG,kCAAuBF,SAAvB,CAA3B;AACA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,QAAJ;AAAtB,IADD,EAEC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGD,IAA1B;AAAiC,IAAA,SAAS,EAAGG;AAA7C,IAFD,EAGGD,kBAAkB,IACnB,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGF,IAAxB;AAA+B,IAAA,SAAS,EAAGC;AAA3C,IAJF,CADD;AASA;;eAEcF,Y","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":["useHasDimensionsPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","ScreenLayout","name","variation","rawSettings","settings","hasDimensionsPanel","variationClassName"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AAOA,MAAM;AAAEA,EAAAA,qBAAF;AAAyBC,EAAAA,gBAAzB;AAA2CC,EAAAA;AAA3C,IACL,yBAAQC,wBAAR,CADD;;AAGA,SAASC,YAAT,OAAkD;AAAA,MAA3B;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,SAAS,GAAG;AAApB,GAA2B;AACjD,QAAM,CAAEC,WAAF,IAAkBN,gBAAgB,CAAE,EAAF,EAAMI,IAAN,CAAxC;AACA,QAAMG,QAAQ,GAAGN,0BAA0B,CAAEK,WAAF,EAAeF,IAAf,CAA3C;AACA,QAAMI,kBAAkB,GAAGT,qBAAqB,CAAEQ,QAAF,CAAhD;AACA,QAAME,kBAAkB,GAAG,kCAAuBJ,SAAvB,CAA3B;AACA,SACC,qDACC,4BAAC,eAAD;AAAc,IAAA,KAAK,EAAG,cAAI,QAAJ;AAAtB,IADD,EAEC,4BAAC,0BAAD;AAAmB,IAAA,IAAI,EAAGD,IAA1B;AAAiC,IAAA,SAAS,EAAGK;AAA7C,IAFD,EAGGD,kBAAkB,IACnB,4BAAC,wBAAD;AAAiB,IAAA,IAAI,EAAGJ,IAAxB;AAA+B,IAAA,SAAS,EAAGC;AAA3C,IAJF,CADD;AASA;;eAEcF,Y","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/components/global-styles/screen-root.js

@@ -64,7 +64,8 @@ function ScreenRoot() {
     };
   }, []);
   return (0, _element.createElement)(_components.Card, {
-    size: "small"
+    size: "small",
+    className: "edit-site-global-styles-screen-root"
   }, (0, _element.createElement)(_components.CardBody, null, (0, _element.createElement)(_components.__experimentalVStack, {
     spacing: 4
   }, (0, _element.createElement)(_components.Card, null, (0, _element.createElement)(_components.CardMedia, null, (0, _element.createElement)(_preview.default, null))), !!(variations !== null && variations !== void 0 && variations.length) && (0, _element.createElement)(_components.__experimentalItemGroup, null, (0, _element.createElement)(_navigationButton.NavigationButtonAsItem, {