@wordpress/edit-site 5.16.0 → 5.17.0

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

@@ -1,25 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useColorRandomizer = useColorRandomizer;
+exports.useStylesPreviewColors = useStylesPreviewColors;
 exports.useSupportedStyles = useSupportedStyles;
-
 var _colord = require("colord");
-
 var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
-
 var _blocks = require("@wordpress/blocks");
-
 var _blockEditor = require("@wordpress/block-editor");
-
 var _lockUnlock = require("../../lock-unlock");
-
 var _data = require("@wordpress/data");
-
 /**
  * External dependencies
  */
@@ -31,15 +24,16 @@ var _data = require("@wordpress/data");
 /**
  * Internal dependencies
  */
+
 const {
-  useGlobalSetting
-} = (0, _lockUnlock.unlock)(_blockEditor.privateApis); // Enable colord's a11y plugin.
+  useGlobalSetting,
+  useGlobalStyle
+} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
 
+// Enable colord's a11y plugin.
 (0, _colord.extend)([_a11y.default]);
-
 function useColorRandomizer(name) {
   const [themeColors, setThemeColors] = useGlobalSetting('color.palette.theme', name);
-
   function randomizeColors() {
     /* eslint-disable no-restricted-syntax */
     const randomRotationValue = Math.floor(Math.random() * 225);
@@ -50,16 +44,33 @@ function useColorRandomizer(name) {
         color
       } = colorObject;
       const newColor = (0, _colord.colord)(color).rotate(randomRotationValue).toHex();
-      return { ...colorObject,
+      return {
+        ...colorObject,
         color: newColor
       };
     });
     setThemeColors(newColors);
   }
-
   return window.__experimentalEnableColorRandomizer ? [randomizeColors] : [];
 }
-
+function useStylesPreviewColors() {
+  const [textColor = 'black'] = useGlobalStyle('color.text');
+  const [backgroundColor = 'white'] = useGlobalStyle('color.background');
+  const [headingColor = textColor] = useGlobalStyle('elements.h1.color.text');
+  const [coreColors] = useGlobalSetting('color.palette.core');
+  const [themeColors] = useGlobalSetting('color.palette.theme');
+  const [customColors] = useGlobalSetting('color.palette.custom');
+  const paletteColors = (themeColors !== null && themeColors !== void 0 ? themeColors : []).concat(customColors !== null && customColors !== void 0 ? customColors : []).concat(coreColors !== null && coreColors !== void 0 ? coreColors : []);
+  const highlightedColors = paletteColors.filter(
+  // we exclude these two colors because they are already visible in the preview.
+  ({
+    color
+  }) => color !== backgroundColor && color !== headingColor).slice(0, 2);
+  return {
+    paletteColors,
+    highlightedColors
+  };
+}
 function useSupportedStyles(name, element) {
   const {
     supportedPanels

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","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useSupportedStyles","element","supportedPanels","select","blocksStore","getSupportedStyles"],"mappings":";;;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAKA;;AACA;;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAIA,MAAM;AAAEA,EAAAA;AAAF,IAAuB,wBAAQC,wBAAR,CAA7B,C,CAEA;;AACA,oBAAQ,CAAEC,aAAF,CAAR;;AAEO,SAASC,kBAAT,CAA6BC,IAA7B,EAAoC;AAC1C,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkCN,gBAAgB,CACvD,qBADuD,EAEvDI,IAFuD,CAAxD;;AAKA,WAASG,eAAT,GAA2B;AAC1B;AACA,UAAMC,mBAAmB,GAAGC,IAAI,CAACC,KAAL,CAAYD,IAAI,CAACE,MAAL,KAAgB,GAA5B,CAA5B;AACA;;AAEA,UAAMC,SAAS,GAAGP,WAAW,CAACQ,GAAZ,CAAmBC,WAAF,IAAmB;AACrD,YAAM;AAAEC,QAAAA;AAAF,UAAYD,WAAlB;AACA,YAAME,QAAQ,GAAG,oBAAQD,KAAR,EACfE,MADe,CACPT,mBADO,EAEfU,KAFe,EAAjB;AAIA,aAAO,EACN,GAAGJ,WADG;AAENC,QAAAA,KAAK,EAAEC;AAFD,OAAP;AAIA,KAViB,CAAlB;AAYAV,IAAAA,cAAc,CAAEM,SAAF,CAAd;AACA;;AAED,SAAOO,MAAM,CAACC,mCAAP,GACJ,CAAEb,eAAF,CADI,GAEJ,EAFH;AAGA;;AAEM,SAASc,kBAAT,CAA6BjB,IAA7B,EAAmCkB,OAAnC,EAA6C;AACnD,QAAM;AAAEC,IAAAA;AAAF,MAAsB,qBACzBC,MAAF,IAAc;AACb,WAAO;AACND,MAAAA,eAAe,EAAE,wBAChBC,MAAM,CAAEC,aAAF,CADU,EAEfC,kBAFe,CAEKtB,IAFL,EAEWkB,OAFX;AADX,KAAP;AAKA,GAP0B,EAQ3B,CAAElB,IAAF,EAAQkB,OAAR,CAR2B,CAA5B;AAWA,SAAOC,eAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\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,"names":["_colord","require","_a11y","_interopRequireDefault","_blocks","_blockEditor","_lockUnlock","_data","useGlobalSetting","useGlobalStyle","unlock","blockEditorPrivateApis","extend","a11yPlugin","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","colord","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","coreColors","customColors","paletteColors","concat","highlightedColors","filter","slice","useSupportedStyles","element","supportedPanels","useSelect","select","blocksStore","getSupportedStyles"],"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\n\n/**\n * WordPress dependencies\n */\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useSelect } from '@wordpress/data';\n\nconst { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );\n\n// Enable colord's a11y plugin.\nextend( [ a11yPlugin ] );\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 useStylesPreviewColors() {\n\tconst [ textColor = 'black' ] = useGlobalStyle( 'color.text' );\n\tconst [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );\n\tconst [ headingColor = textColor ] = useGlobalStyle(\n\t\t'elements.h1.color.text'\n\t);\n\tconst [ coreColors ] = useGlobalSetting( 'color.palette.core' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\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\treturn {\n\t\tpaletteColors,\n\t\thighlightedColors,\n\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"],"mappings":";;;;;;;;;AAGA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AAKA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,YAAA,GAAAJ,OAAA;AAKA,IAAAK,WAAA,GAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AAIA,MAAM;EAAEO,gBAAgB;EAAEC;AAAe,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;;AAE7E;AACA,IAAAC,cAAM,EAAE,CAAEC,aAAU,CAAG,CAAC;AAEjB,SAASC,kBAAkBA,CAAEC,IAAI,EAAG;EAC1C,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAGT,gBAAgB,CACvD,qBAAqB,EACrBO,IACD,CAAC;EAED,SAASG,eAAeA,CAAA,EAAG;IAC1B;IACA,MAAMC,mBAAmB,GAAGC,IAAI,CAACC,KAAK,CAAED,IAAI,CAACE,MAAM,CAAC,CAAC,GAAG,GAAI,CAAC;IAC7D;;IAEA,MAAMC,SAAS,GAAGP,WAAW,CAACQ,GAAG,CAAIC,WAAW,IAAM;MACrD,MAAM;QAAEC;MAAM,CAAC,GAAGD,WAAW;MAC7B,MAAME,QAAQ,GAAG,IAAAC,cAAM,EAAEF,KAAM,CAAC,CAC9BG,MAAM,CAAEV,mBAAoB,CAAC,CAC7BW,KAAK,CAAC,CAAC;MAET,OAAO;QACN,GAAGL,WAAW;QACdC,KAAK,EAAEC;MACR,CAAC;IACF,CAAE,CAAC;IAEHV,cAAc,CAAEM,SAAU,CAAC;EAC5B;EAEA,OAAOQ,MAAM,CAACC,mCAAmC,GAC9C,CAAEd,eAAe,CAAE,GACnB,EAAE;AACN;AAEO,SAASe,sBAAsBA,CAAA,EAAG;EACxC,MAAM,CAAEC,SAAS,GAAG,OAAO,CAAE,GAAGzB,cAAc,CAAE,YAAa,CAAC;EAC9D,MAAM,CAAE0B,eAAe,GAAG,OAAO,CAAE,GAAG1B,cAAc,CAAE,kBAAmB,CAAC;EAC1E,MAAM,CAAE2B,YAAY,GAAGF,SAAS,CAAE,GAAGzB,cAAc,CAClD,wBACD,CAAC;EACD,MAAM,CAAE4B,UAAU,CAAE,GAAG7B,gBAAgB,CAAE,oBAAqB,CAAC;EAC/D,MAAM,CAAEQ,WAAW,CAAE,GAAGR,gBAAgB,CAAE,qBAAsB,CAAC;EACjE,MAAM,CAAE8B,YAAY,CAAE,GAAG9B,gBAAgB,CAAE,sBAAuB,CAAC;EAEnE,MAAM+B,aAAa,GAAG,CAAEvB,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAI,EAAE,EACvCwB,MAAM,CAAEF,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAI,EAAG,CAAC,CAC5BE,MAAM,CAAEH,UAAU,aAAVA,UAAU,cAAVA,UAAU,GAAI,EAAG,CAAC;EAC5B,MAAMI,iBAAiB,GAAGF,aAAa,CACrCG,MAAM;EACN;EACA,CAAE;IAAEhB;EAAM,CAAC,KAAMA,KAAK,KAAKS,eAAe,IAAIT,KAAK,KAAKU,YACzD,CAAC,CACAO,KAAK,CAAE,CAAC,EAAE,CAAE,CAAC;EAEf,OAAO;IACNJ,aAAa;IACbE;EACD,CAAC;AACF;AAEO,SAASG,kBAAkBA,CAAE7B,IAAI,EAAE8B,OAAO,EAAG;EACnD,MAAM;IAAEC;EAAgB,CAAC,GAAG,IAAAC,eAAS,EAClCC,MAAM,IAAM;IACb,OAAO;MACNF,eAAe,EAAE,IAAApC,kBAAM,EACtBsC,MAAM,CAAEC,aAAY,CACrB,CAAC,CAACC,kBAAkB,CAAEnC,IAAI,EAAE8B,OAAQ;IACrC,CAAC;EACF,CAAC,EACD,CAAE9B,IAAI,EAAE8B,OAAO,CAChB,CAAC;EAED,OAAOC,eAAe;AACvB"}

package/build/components/global-styles/icon-with-current-color.js

@@ -1,18 +1,13 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.IconWithCurrentColor = IconWithCurrentColor;
-
 var _element = require("@wordpress/element");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _components = require("@wordpress/components");
-
 /**
  * External dependencies
  */
@@ -20,6 +15,7 @@ var _components = require("@wordpress/components");
 /**
  * WordPress dependencies
  */
+
 function IconWithCurrentColor({
   className,
   ...props

package/build/components/global-styles/icon-with-current-color.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/icon-with-current-color.js"],"names":["IconWithCurrentColor","className","props"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;AAGO,SAASA,oBAAT,CAA+B;AAAEC,EAAAA,SAAF;AAAa,KAAGC;AAAhB,CAA/B,EAAyD;AAC/D,SACC,4BAAC,gBAAD;AACC,IAAA,SAAS,EAAG,yBACXD,SADW,EAEX,iDAFW,CADb;AAAA,OAKMC;AALN,IADD;AASA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\n\nexport function IconWithCurrentColor( { className, ...props } ) {\n\treturn (\n\t\t<Icon\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'edit-site-global-styles-icon-with-current-color'\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"]}
+{"version":3,"names":["_classnames","_interopRequireDefault","require","_components","IconWithCurrentColor","className","props","_element","createElement","Icon","classnames"],"sources":["@wordpress/edit-site/src/components/global-styles/icon-with-current-color.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon } from '@wordpress/components';\n\nexport function IconWithCurrentColor( { className, ...props } ) {\n\treturn (\n\t\t<Icon\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'edit-site-global-styles-icon-with-current-color'\n\t\t\t) }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGO,SAASE,oBAAoBA,CAAE;EAAEC,SAAS;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC/D,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACL,WAAA,CAAAM,IAAI;IACJJ,SAAS,EAAG,IAAAK,mBAAU,EACrBL,SAAS,EACT,iDACD,CAAG;IAAA,GACEC;EAAK,CACV,CAAC;AAEJ"}

package/build/components/global-styles/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,6 +10,5 @@ Object.defineProperty(exports, "GlobalStylesUI", {
     return _ui.default;
   }
 });
-
 var _ui = _interopRequireDefault(require("./ui"));
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["export { default as GlobalStylesUI } from './ui';\n"]}
+{"version":3,"names":["_ui","_interopRequireDefault","require"],"sources":["@wordpress/edit-site/src/components/global-styles/index.js"],"sourcesContent":["export { default as GlobalStylesUI } from './ui';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,GAAA,GAAAC,sBAAA,CAAAC,OAAA"}

package/build/components/global-styles/navigation-button.js

@@ -5,13 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationBackButtonAsItem = NavigationBackButtonAsItem;
 exports.NavigationButtonAsItem = NavigationButtonAsItem;
-
 var _element = require("@wordpress/element");
-
 var _components = require("@wordpress/components");
-
 var _iconWithCurrentColor = require("./icon-with-current-color");
-
 /**
  * WordPress dependencies
  */
@@ -19,12 +15,14 @@ var _iconWithCurrentColor = require("./icon-with-current-color");
 /**
  * Internal dependencies
  */
+
 function GenericNavigationButton({
   icon,
   children,
   ...props
 }) {
-  return (0, _element.createElement)(_components.__experimentalItem, { ...props
+  return (0, _element.createElement)(_components.__experimentalItem, {
+    ...props
   }, icon && (0, _element.createElement)(_components.__experimentalHStack, {
     justify: "flex-start"
   }, (0, _element.createElement)(_iconWithCurrentColor.IconWithCurrentColor, {
@@ -32,14 +30,12 @@ function GenericNavigationButton({
     size: 24
   }), (0, _element.createElement)(_components.FlexItem, null, children)), !icon && children);
 }
-
 function NavigationButtonAsItem(props) {
   return (0, _element.createElement)(_components.__experimentalNavigatorButton, {
     as: GenericNavigationButton,
     ...props
   });
 }
-
 function NavigationBackButtonAsItem(props) {
   return (0, _element.createElement)(_components.__experimentalNavigatorToParentButton, {
     as: GenericNavigationButton,

package/build/components/global-styles/navigation-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"names":["GenericNavigationButton","icon","children","props","NavigationButtonAsItem","NavigationBackButtonAsItem"],"mappings":";;;;;;;;;;AAGA;;AAWA;;AAdA;AACA;AACA;;AASA;AACA;AACA;AAGA,SAASA,uBAAT,CAAkC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,QAAR;AAAkB,KAAGC;AAArB,CAAlC,EAAiE;AAChE,SACC,4BAAC,8BAAD,OAAWA;AAAX,KACGF,IAAI,IACL,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,4BAAC,0CAAD;AAAsB,IAAA,IAAI,EAAGA,IAA7B;AAAoC,IAAA,IAAI,EAAG;AAA3C,IADD,EAEC,4BAAC,oBAAD,QAAYC,QAAZ,CAFD,CAFF,EAOG,CAAED,IAAF,IAAUC,QAPb,CADD;AAWA;;AAED,SAASE,sBAAT,CAAiCD,KAAjC,EAAyC;AACxC,SAAO,4BAAC,yCAAD;AAAiB,IAAA,EAAE,EAAGH,uBAAtB;AAAA,OAAqDG;AAArD,IAAP;AACA;;AAED,SAASE,0BAAT,CAAqCF,KAArC,EAA6C;AAC5C,SACC,4BAAC,iDAAD;AAAyB,IAAA,EAAE,EAAGH,uBAA9B;AAAA,OAA6DG;AAA7D,IADD;AAGA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalItem as Item,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\n\nfunction GenericNavigationButton( { icon, children, ...props } ) {\n\treturn (\n\t\t<Item { ...props }>\n\t\t\t{ icon && (\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<IconWithCurrentColor icon={ icon } size={ 24 } />\n\t\t\t\t\t<FlexItem>{ children }</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ ! icon && children }\n\t\t</Item>\n\t);\n}\n\nfunction NavigationButtonAsItem( props ) {\n\treturn <NavigatorButton as={ GenericNavigationButton } { ...props } />;\n}\n\nfunction NavigationBackButtonAsItem( props ) {\n\treturn (\n\t\t<NavigatorToParentButton as={ GenericNavigationButton } { ...props } />\n\t);\n}\n\nexport { NavigationButtonAsItem, NavigationBackButtonAsItem };\n"]}
+{"version":3,"names":["_components","require","_iconWithCurrentColor","GenericNavigationButton","icon","children","props","_element","createElement","__experimentalItem","__experimentalHStack","justify","IconWithCurrentColor","size","FlexItem","NavigationButtonAsItem","__experimentalNavigatorButton","as","NavigationBackButtonAsItem","__experimentalNavigatorToParentButton"],"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorToParentButton as NavigatorToParentButton,\n\t__experimentalItem as Item,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { IconWithCurrentColor } from './icon-with-current-color';\n\nfunction GenericNavigationButton( { icon, children, ...props } ) {\n\treturn (\n\t\t<Item { ...props }>\n\t\t\t{ icon && (\n\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t<IconWithCurrentColor icon={ icon } size={ 24 } />\n\t\t\t\t\t<FlexItem>{ children }</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t\t{ ! icon && children }\n\t\t</Item>\n\t);\n}\n\nfunction NavigationButtonAsItem( props ) {\n\treturn <NavigatorButton as={ GenericNavigationButton } { ...props } />;\n}\n\nfunction NavigationBackButtonAsItem( props ) {\n\treturn (\n\t\t<NavigatorToParentButton as={ GenericNavigationButton } { ...props } />\n\t);\n}\n\nexport { NavigationButtonAsItem, NavigationBackButtonAsItem };\n"],"mappings":";;;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AAWA,IAAAC,qBAAA,GAAAD,OAAA;AAdA;AACA;AACA;;AASA;AACA;AACA;;AAGA,SAASE,uBAAuBA,CAAE;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAG;EAChE,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACR,WAAA,CAAAS,kBAAI;IAAA,GAAMH;EAAK,GACbF,IAAI,IACL,IAAAG,QAAA,CAAAC,aAAA,EAACR,WAAA,CAAAU,oBAAM;IAACC,OAAO,EAAC;EAAY,GAC3B,IAAAJ,QAAA,CAAAC,aAAA,EAACN,qBAAA,CAAAU,oBAAoB;IAACR,IAAI,EAAGA,IAAM;IAACS,IAAI,EAAG;EAAI,CAAE,CAAC,EAClD,IAAAN,QAAA,CAAAC,aAAA,EAACR,WAAA,CAAAc,QAAQ,QAAGT,QAAoB,CACzB,CACR,EACC,CAAED,IAAI,IAAIC,QACP,CAAC;AAET;AAEA,SAASU,sBAAsBA,CAAET,KAAK,EAAG;EACxC,OAAO,IAAAC,QAAA,CAAAC,aAAA,EAACR,WAAA,CAAAgB,6BAAe;IAACC,EAAE,EAAGd,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AACvE;AAEA,SAASY,0BAA0BA,CAAEZ,KAAK,EAAG;EAC5C,OACC,IAAAC,QAAA,CAAAC,aAAA,EAACR,WAAA,CAAAmB,qCAAuB;IAACF,EAAE,EAAGd,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AAEzE"}

package/build/components/global-styles/palette.js

@@ -1,32 +1,20 @@
 "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 _components = require("@wordpress/components");
-
 var _i18n = require("@wordpress/i18n");
-
 var _icons = require("@wordpress/icons");
-
 var _blockEditor = require("@wordpress/block-editor");
-
 var _subtitle = _interopRequireDefault(require("./subtitle"));
-
 var _navigationButton = require("./navigation-button");
-
 var _hooks = require("./hooks");
-
 var _colorIndicatorWrapper = _interopRequireDefault(require("./color-indicator-wrapper"));
-
 var _lockUnlock = require("../../lock-unlock");
-
 /**
  * WordPress dependencies
  */
@@ -34,11 +22,11 @@ var _lockUnlock = require("../../lock-unlock");
 /**
  * Internal dependencies
  */
+
 const {
   useGlobalSetting
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
 const EMPTY_COLORS = [];
-
 function Palette({
   name
 }) {
@@ -49,7 +37,8 @@ function Palette({
   const [randomizeThemeColors] = (0, _hooks.useColorRandomizer)();
   const colors = (0, _element.useMemo)(() => [...(customColors || EMPTY_COLORS), ...(themeColors || EMPTY_COLORS), ...(defaultColors && defaultPaletteEnabled ? defaultColors : EMPTY_COLORS)], [customColors, themeColors, defaultColors, defaultPaletteEnabled]);
   const screenPath = !name ? '/colors/palette' : '/blocks/' + encodeURIComponent(name) + '/colors/palette';
-  const paletteButtonText = colors.length > 0 ? (0, _i18n.sprintf)( // Translators: %d: Number of palette colors.
+  const paletteButtonText = colors.length > 0 ? (0, _i18n.sprintf)(
+  // Translators: %d: Number of palette colors.
   (0, _i18n._n)('%d color', '%d colors', colors.length), colors.length) : (0, _i18n.__)('Add custom colors');
   return (0, _element.createElement)(_components.__experimentalVStack, {
     spacing: 3
@@ -78,7 +67,6 @@ function Palette({
     onClick: randomizeThemeColors
   }, (0, _i18n.__)('Randomize colors')));
 }
-
 var _default = Palette;
 exports.default = _default;
 //# sourceMappingURL=palette.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"names":["useGlobalSetting","blockEditorPrivateApis","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","randomizeThemeColors","colors","screenPath","encodeURIComponent","paletteButtonText","length","slice","map","color","index","window","__experimentalEnableColorRandomizer","shuffle"],"mappings":";;;;;;;;;AAcA;;AAXA;;AASA;;AACA;;AAEA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAxBA;AACA;AACA;;AAeA;AACA;AACA;AAOA,MAAM;AAAEA,EAAAA;AAAF,IAAuB,wBAAQC,wBAAR,CAA7B;AAEA,MAAMC,YAAY,GAAG,EAArB;;AAEA,SAASC,OAAT,CAAkB;AAAEC,EAAAA;AAAF,CAAlB,EAA6B;AAC5B,QAAM,CAAEC,YAAF,IAAmBL,gBAAgB,CAAE,sBAAF,CAAzC;AACA,QAAM,CAAEM,WAAF,IAAkBN,gBAAgB,CAAE,qBAAF,CAAxC;AACA,QAAM,CAAEO,aAAF,IAAoBP,gBAAgB,CAAE,uBAAF,CAA1C;AAEA,QAAM,CAAEQ,qBAAF,IAA4BR,gBAAgB,CACjD,sBADiD,EAEjDI,IAFiD,CAAlD;AAKA,QAAM,CAAEK,oBAAF,IAA2B,gCAAjC;AAEA,QAAMC,MAAM,GAAG,sBACd,MAAM,CACL,IAAKL,YAAY,IAAIH,YAArB,CADK,EAEL,IAAKI,WAAW,IAAIJ,YAApB,CAFK,EAGL,IAAKK,aAAa,IAAIC,qBAAjB,GACFD,aADE,GAEFL,YAFH,CAHK,CADQ,EAQd,CAAEG,YAAF,EAAgBC,WAAhB,EAA6BC,aAA7B,EAA4CC,qBAA5C,CARc,CAAf;AAWA,QAAMG,UAAU,GAAG,CAAEP,IAAF,GAChB,iBADgB,GAEhB,aAAaQ,kBAAkB,CAAER,IAAF,CAA/B,GAA0C,iBAF7C;AAGA,QAAMS,iBAAiB,GACtBH,MAAM,CAACI,MAAP,GAAgB,CAAhB,GACG,oBACA;AACA,gBAAI,UAAJ,EAAgB,WAAhB,EAA6BJ,MAAM,CAACI,MAApC,CAFA,EAGAJ,MAAM,CAACI,MAHP,CADH,GAMG,cAAI,mBAAJ,CAPJ;AASA,SACC,4BAAC,gCAAD;AAAQ,IAAA,OAAO,EAAG;AAAlB,KACC,4BAAC,iBAAD;AAAU,IAAA,KAAK,EAAG;AAAlB,KAAwB,cAAI,SAAJ,CAAxB,CADD,EAEC,4BAAC,mCAAD;AAAW,IAAA,UAAU,MAArB;AAAsB,IAAA,WAAW;AAAjC,KACC,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGH,UADR;AAEC,kBAAa,cAAI,gBAAJ;AAFd,KAIC,4BAAC,gCAAD;AACC,IAAA,SAAS,EACRD,MAAM,CAACI,MAAP,KAAkB,CAAlB,GAAsB,aAAtB,GAAsC;AAFxC,KAKC,4BAAC,gCAAD;AAAQ,IAAA,SAAS,EAAG,KAApB;AAA4B,IAAA,MAAM,EAAG,CAAC;AAAtC,KACGJ,MAAM,CACNK,KADA,CACO,CADP,EACU,CADV,EAEAC,GAFA,CAEK,CAAE;AAAEC,IAAAA;AAAF,GAAF,EAAaC,KAAb,KACL,4BAAC,8BAAD;AACC,IAAA,GAAG,EAAI,GAAGD,KAAO,IAAIC,KAAO;AAD7B,KAGC,4BAAC,0BAAD;AAAgB,IAAA,UAAU,EAAGD;AAA7B,IAHD,CAHA,CADH,CALD,EAgBC,4BAAC,oBAAD,QAAYJ,iBAAZ,CAhBD,CAJD,CADD,CAFD,EA2BGM,MAAM,CAACC,mCAAP,IACDd,WAAW,EAAEQ,MAAb,GAAsB,CADrB,IAEA,4BAAC,kBAAD;AACC,IAAA,OAAO,EAAC,WADT;AAEC,IAAA,IAAI,EAAGO,cAFR;AAGC,IAAA,OAAO,EAAGZ;AAHX,KAKG,cAAI,kBAAJ,CALH,CA7BH,CADD;AAwCA;;eAEcN,O","sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n\tButton,\n} from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { shuffle } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useColorRandomizer } from './hooks';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useGlobalSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst [ randomizeThemeColors ] = useColorRandomizer();\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors || EMPTY_COLORS ),\n\t\t\t...( themeColors || EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t  )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\tpath={ screenPath }\n\t\t\t\t\taria-label={ __( 'Color palettes' ) }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\tcolors.length === 0 ? 'row-reverse' : 'row'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t<FlexItem>{ paletteButtonText }</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t\t{ window.__experimentalEnableColorRandomizer &&\n\t\t\t\tthemeColors?.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\ticon={ shuffle }\n\t\t\t\t\t\tonClick={ randomizeThemeColors }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Randomize colors' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"]}
+{"version":3,"names":["_element","require","_components","_i18n","_icons","_blockEditor","_subtitle","_interopRequireDefault","_navigationButton","_hooks","_colorIndicatorWrapper","_lockUnlock","useGlobalSetting","unlock","blockEditorPrivateApis","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","randomizeThemeColors","useColorRandomizer","colors","useMemo","screenPath","encodeURIComponent","paletteButtonText","length","sprintf","_n","__","createElement","__experimentalVStack","spacing","default","level","__experimentalItemGroup","isBordered","isSeparated","NavigationButtonAsItem","path","__experimentalHStack","direction","__experimentalZStack","isLayered","offset","slice","map","color","index","key","ColorIndicator","colorValue","FlexItem","window","__experimentalEnableColorRandomizer","Button","variant","icon","shuffle","onClick","_default","exports"],"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalItemGroup as ItemGroup,\n\tFlexItem,\n\t__experimentalHStack as HStack,\n\t__experimentalZStack as ZStack,\n\t__experimentalVStack as VStack,\n\tColorIndicator,\n\tButton,\n} from '@wordpress/components';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { shuffle } from '@wordpress/icons';\nimport { useMemo } from '@wordpress/element';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport Subtitle from './subtitle';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useColorRandomizer } from './hooks';\nimport ColorIndicatorWrapper from './color-indicator-wrapper';\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\n\nconst EMPTY_COLORS = [];\n\nfunction Palette( { name } ) {\n\tconst [ customColors ] = useGlobalSetting( 'color.palette.custom' );\n\tconst [ themeColors ] = useGlobalSetting( 'color.palette.theme' );\n\tconst [ defaultColors ] = useGlobalSetting( 'color.palette.default' );\n\n\tconst [ defaultPaletteEnabled ] = useGlobalSetting(\n\t\t'color.defaultPalette',\n\t\tname\n\t);\n\n\tconst [ randomizeThemeColors ] = useColorRandomizer();\n\n\tconst colors = useMemo(\n\t\t() => [\n\t\t\t...( customColors || EMPTY_COLORS ),\n\t\t\t...( themeColors || EMPTY_COLORS ),\n\t\t\t...( defaultColors && defaultPaletteEnabled\n\t\t\t\t? defaultColors\n\t\t\t\t: EMPTY_COLORS ),\n\t\t],\n\t\t[ customColors, themeColors, defaultColors, defaultPaletteEnabled ]\n\t);\n\n\tconst screenPath = ! name\n\t\t? '/colors/palette'\n\t\t: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';\n\tconst paletteButtonText =\n\t\tcolors.length > 0\n\t\t\t? sprintf(\n\t\t\t\t\t// Translators: %d: Number of palette colors.\n\t\t\t\t\t_n( '%d color', '%d colors', colors.length ),\n\t\t\t\t\tcolors.length\n\t\t\t  )\n\t\t\t: __( 'Add custom colors' );\n\n\treturn (\n\t\t<VStack spacing={ 3 }>\n\t\t\t<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\tpath={ screenPath }\n\t\t\t\t\taria-label={ __( 'Color palettes' ) }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tdirection={\n\t\t\t\t\t\t\tcolors.length === 0 ? 'row-reverse' : 'row'\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ZStack isLayered={ false } offset={ -8 }>\n\t\t\t\t\t\t\t{ colors\n\t\t\t\t\t\t\t\t.slice( 0, 5 )\n\t\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t\t<ColorIndicatorWrapper\n\t\t\t\t\t\t\t\t\t\tkey={ `${ color }-${ index }` }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<ColorIndicator colorValue={ color } />\n\t\t\t\t\t\t\t\t\t</ColorIndicatorWrapper>\n\t\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</ZStack>\n\t\t\t\t\t\t<FlexItem>{ paletteButtonText }</FlexItem>\n\t\t\t\t\t</HStack>\n\t\t\t\t</NavigationButtonAsItem>\n\t\t\t</ItemGroup>\n\t\t\t{ window.__experimentalEnableColorRandomizer &&\n\t\t\t\tthemeColors?.length > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\ticon={ shuffle }\n\t\t\t\t\t\tonClick={ randomizeThemeColors }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Randomize colors' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t) }\n\t\t</VStack>\n\t);\n}\n\nexport default Palette;\n"],"mappings":"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"}

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

@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _blockEditor = require("@wordpress/block-editor");
-
 var _components = require("@wordpress/components");
-
 var _compose = require("@wordpress/compose");
-
 var _lockUnlock = require("../../lock-unlock");
-
+var _hooks = require("./hooks");
 /**
  * WordPress dependencies
  */
@@ -22,8 +17,8 @@ var _lockUnlock = require("../../lock-unlock");
 /**
  * Internal dependencies
  */
+
 const {
-  useGlobalSetting,
   useGlobalStyle,
   useGlobalStylesOutput
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
@@ -58,7 +53,6 @@ const secondFrame = {
 const normalizedWidth = 248;
 const normalizedHeight = 152;
 const normalizedColorSwatchSize = 32;
-
 const StylesPreview = ({
   label,
   isFocused,
@@ -74,20 +68,17 @@ const StylesPreview = ({
   const [gradientValue] = useGlobalStyle('color.gradient');
   const [styles] = useGlobalStylesOutput();
   const disableMotion = (0, _compose.useReducedMotion)();
-  const [coreColors] = useGlobalSetting('color.palette.core');
-  const [themeColors] = useGlobalSetting('color.palette.theme');
-  const [customColors] = useGlobalSetting('color.palette.custom');
   const [isHovered, setIsHovered] = (0, _element.useState)(false);
   const [containerResizeListener, {
     width
   }] = (0, _compose.useResizeObserver)();
   const ratio = width ? width / normalizedWidth : 1;
-  const paletteColors = (themeColors !== null && themeColors !== void 0 ? themeColors : []).concat(customColors !== null && customColors !== void 0 ? customColors : []).concat(coreColors !== null && coreColors !== void 0 ? coreColors : []);
-  const highlightedColors = paletteColors.filter( // we exclude these two colors because they are already visible in the preview.
-  ({
-    color
-  }) => color !== backgroundColor && color !== headingColor).slice(0, 2); // Reset leaked styles from WP common.css and remove main content layout padding and border.
+  const {
+    paletteColors,
+    highlightedColors
+  } = (0, _hooks.useStylesPreviewColors)();
 
+  // Reset leaked styles from WP common.css and remove main content layout padding and border.
   const editorStyles = (0, _element.useMemo)(() => {
     if (styles) {
       return [...styles, {
@@ -95,7 +86,6 @@ const StylesPreview = ({
         isGlobalStyles: true
       }];
     }
-
     return styles;
   }, [styles]);
   const isReady = !!width;
@@ -234,7 +224,6 @@ const StylesPreview = ({
     }
   }, label))))));
 };
-
 var _default = StylesPreview;
 exports.default = _default;
 //# sourceMappingURL=preview.js.map

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","isReady","position","height","background","cursor","undefined","overflow","fontSize","delay","type","map","slug","index","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 '../../lock-unlock';\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\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<EditorStyles styles={ editorStyles } />\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: withHoverView ? 'pointer' : undefined,\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"]}
+{"version":3,"names":["_element","require","_blockEditor","_components","_compose","_lockUnlock","_hooks","useGlobalStyle","useGlobalStylesOutput","unlock","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","useReducedMotion","isHovered","setIsHovered","useState","containerResizeListener","width","useResizeObserver","ratio","paletteColors","highlightedColors","useStylesPreviewColors","editorStyles","useMemo","css","isGlobalStyles","isReady","createElement","Fragment","style","position","__unstableIframe","className","height","onMouseEnter","onMouseLeave","tabIndex","__unstableEditorStyles","__unstableMotion","div","background","cursor","undefined","initial","animate","variants","overflow","__experimentalHStack","spacing","justify","fontSize","color","transition","delay","type","__experimentalVStack","map","slug","index","key","borderRadius","top","filter","slice","flexGrow","padding","boxSizing","lineHeight","textAlign","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"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 '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\n\nconst { 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 [ isHovered, setIsHovered ] = useState( false );\n\tconst [ containerResizeListener, { width } ] = useResizeObserver();\n\tconst ratio = width ? width / normalizedWidth : 1;\n\n\tconst { paletteColors, highlightedColors } = useStylesPreviewColors();\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\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<EditorStyles styles={ editorStyles } />\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: withHoverView ? 'pointer' : undefined,\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"],"mappings":"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"}

package/build/components/global-styles/root-menu.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _element = require("@wordpress/element");
-
 var _components = require("@wordpress/components");
-
 var _icons = require("@wordpress/icons");
-
 var _i18n = require("@wordpress/i18n");
-
 var _blockEditor = require("@wordpress/block-editor");
-
 var _navigationButton = require("./navigation-button");
-
 var _lockUnlock = require("../../lock-unlock");
-
 /**
  * WordPress dependencies
  */
@@ -26,6 +18,7 @@ var _lockUnlock = require("../../lock-unlock");
 /**
  * Internal dependencies
  */
+
 const {
   useHasDimensionsPanel,
   useHasTypographyPanel,
@@ -33,7 +26,6 @@ const {
   useGlobalSetting,
   useSettingsForBlockElement
 } = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
-
 function RootMenu() {
   const [rawSettings] = useGlobalSetting('');
   const settings = useSettingsForBlockElement(rawSettings);
@@ -55,7 +47,6 @@ function RootMenu() {
     "aria-label": (0, _i18n.__)('Layout styles')
   }, (0, _i18n.__)('Layout'))));
 }
-
 var _default = RootMenu;
 exports.default = _default;
 //# sourceMappingURL=root-menu.js.map

package/build/components/global-styles/root-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/root-menu.js"],"names":["useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","blockEditorPrivateApis","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","typography","color","layout"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAZA;AACA;AACA;;AAMA;AACA;AACA;AAIA,MAAM;AACLA,EAAAA,qBADK;AAELC,EAAAA,qBAFK;AAGLC,EAAAA,gBAHK;AAILC,EAAAA,gBAJK;AAKLC,EAAAA;AALK,IAMF,wBAAQC,wBAAR,CANJ;;AAQA,SAASC,QAAT,GAAoB;AACnB,QAAM,CAAEC,WAAF,IAAkBJ,gBAAgB,CAAE,EAAF,CAAxC;AACA,QAAMK,QAAQ,GAAGJ,0BAA0B,CAAEG,WAAF,CAA3C;AACA,QAAME,kBAAkB,GAAGR,qBAAqB,CAAEO,QAAF,CAAhD;AACA,QAAME,aAAa,GAAGR,gBAAgB,CAAEM,QAAF,CAAtC;AACA,QAAMG,kBAAkB,GAAGX,qBAAqB,CAAEQ,QAAF,CAAhD;AACA,QAAMI,cAAc,GAAGD,kBAAvB;AAEA,SACC,qDACC,4BAAC,mCAAD,QACGF,kBAAkB,IACnB,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGI,iBADR;AAEC,IAAA,IAAI,EAAC,aAFN;AAGC,kBAAa,cAAI,mBAAJ;AAHd,KAKG,cAAI,YAAJ,CALH,CAFF,EAUGH,aAAa,IACd,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGI,YADR;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,kBAAa,cAAI,eAAJ;AAHd,KAKG,cAAI,QAAJ,CALH,CAXF,EAmBGF,cAAc,IACf,4BAAC,wCAAD;AACC,IAAA,IAAI,EAAGG,aADR;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,kBAAa,cAAI,eAAJ;AAHd,KAKG,cAAI,QAAJ,CALH,CApBF,CADD,CADD;AAiCA;;eAEcT,Q","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath=\"/typography\"\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath=\"/colors\"\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath=\"/layout\"\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default RootMenu;\n"]}
+{"version":3,"names":["_components","require","_icons","_i18n","_blockEditor","_navigationButton","_lockUnlock","useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","unlock","blockEditorPrivateApis","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","_element","createElement","Fragment","__experimentalItemGroup","NavigationButtonAsItem","icon","typography","path","__","color","layout","_default","exports","default"],"sources":["@wordpress/edit-site/src/components/global-styles/root-menu.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport { typography, color, layout } from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { unlock } from '../../lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseGlobalSetting,\n\tuseSettingsForBlockElement,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\tconst [ rawSettings ] = useGlobalSetting( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasDimensionsPanel;\n\n\treturn (\n\t\t<>\n\t\t\t<ItemGroup>\n\t\t\t\t{ hasTypographyPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ typography }\n\t\t\t\t\t\tpath=\"/typography\"\n\t\t\t\t\t\taria-label={ __( 'Typography styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Typography' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasColorPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ color }\n\t\t\t\t\t\tpath=\"/colors\"\n\t\t\t\t\t\taria-label={ __( 'Colors styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Colors' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasLayoutPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ layout }\n\t\t\t\t\t\tpath=\"/layout\"\n\t\t\t\t\t\taria-label={ __( 'Layout styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Layout' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nexport default RootMenu;\n"],"mappings":";;;;;;;AAGA,IAAAA,WAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAKA,IAAAI,iBAAA,GAAAJ,OAAA;AACA,IAAAK,WAAA,GAAAL,OAAA;AAZA;AACA;AACA;;AAMA;AACA;AACA;;AAIA,MAAM;EACLM,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC,gBAAgB;EAChBC;AACD,CAAC,GAAG,IAAAC,kBAAM,EAAEC,wBAAuB,CAAC;AAEpC,SAASC,QAAQA,CAAA,EAAG;EACnB,MAAM,CAAEC,WAAW,CAAE,GAAGL,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMM,QAAQ,GAAGL,0BAA0B,CAAEI,WAAY,CAAC;EAC1D,MAAME,kBAAkB,GAAGT,qBAAqB,CAAEQ,QAAS,CAAC;EAC5D,MAAME,aAAa,GAAGT,gBAAgB,CAAEO,QAAS,CAAC;EAClD,MAAMG,kBAAkB,GAAGZ,qBAAqB,CAAES,QAAS,CAAC;EAC5D,MAAMI,cAAc,GAAGD,kBAAkB;EAEzC,OACC,IAAAE,QAAA,CAAAC,aAAA,EAAAD,QAAA,CAAAE,QAAA,QACC,IAAAF,QAAA,CAAAC,aAAA,EAACtB,WAAA,CAAAwB,uBAAS,QACPP,kBAAkB,IACnB,IAAAI,QAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAoB,sBAAsB;IACtBC,IAAI,EAAGC,iBAAY;IACnBC,IAAI,EAAC,aAAa;IAClB,cAAa,IAAAC,QAAE,EAAE,mBAAoB;EAAG,GAEtC,IAAAA,QAAE,EAAE,YAAa,CACI,CACxB,EACCX,aAAa,IACd,IAAAG,QAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAoB,sBAAsB;IACtBC,IAAI,EAAGI,YAAO;IACdF,IAAI,EAAC,SAAS;IACd,cAAa,IAAAC,QAAE,EAAE,eAAgB;EAAG,GAElC,IAAAA,QAAE,EAAE,QAAS,CACQ,CACxB,EACCT,cAAc,IACf,IAAAC,QAAA,CAAAC,aAAA,EAACjB,iBAAA,CAAAoB,sBAAsB;IACtBC,IAAI,EAAGK,aAAQ;IACfH,IAAI,EAAC,SAAS;IACd,cAAa,IAAAC,QAAE,EAAE,eAAgB;EAAG,GAElC,IAAAA,QAAE,EAAE,QAAS,CACQ,CAEf,CACV,CAAC;AAEL;AAAC,IAAAG,QAAA,GAEclB,QAAQ;AAAAmB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}