@wordpress/edit-site 5.16.0 → 5.17.0

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

@@ -3,26 +3,27 @@
  */
 import { colord, extend } from 'colord';
 import a11yPlugin from 'colord/plugins/a11y';
+
 /**
  * WordPress dependencies
  */
-
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
-
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 const {
-  useGlobalSetting
-} = unlock(blockEditorPrivateApis); // Enable colord's a11y plugin.
+  useGlobalSetting,
+  useGlobalStyle
+} = unlock(blockEditorPrivateApis);
 
+// Enable colord's a11y plugin.
 extend([a11yPlugin]);
 export 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);
@@ -33,15 +34,33 @@ export function useColorRandomizer(name) {
         color
       } = colorObject;
       const newColor = colord(color).rotate(randomRotationValue).toHex();
-      return { ...colorObject,
+      return {
+        ...colorObject,
         color: newColor
       };
     });
     setThemeColors(newColors);
   }
-
   return window.__experimentalEnableColorRandomizer ? [randomizeColors] : [];
 }
+export 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
+  };
+}
 export function useSupportedStyles(name, element) {
   const {
     supportedPanels

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/hooks.js"],"names":["colord","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","unlock","useSelect","useGlobalSetting","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useSupportedStyles","element","supportedPanels","select","getSupportedStyles"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,MAAjB,QAA+B,QAA/B;AACA,OAAOC,UAAP,MAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,WAAlB,QAAqC,mBAArC;AACA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,SAAT,QAA0B,iBAA1B;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAuBF,MAAM,CAAED,sBAAF,CAAnC,C,CAEA;;AACAL,MAAM,CAAE,CAAEC,UAAF,CAAF,CAAN;AAEA,OAAO,SAASQ,kBAAT,CAA6BC,IAA7B,EAAoC;AAC1C,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkCJ,gBAAgB,CACvD,qBADuD,EAEvDE,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,GAAGvB,MAAM,CAAEsB,KAAF,CAAN,CACfE,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;AAED,OAAO,SAASc,kBAAT,CAA6BjB,IAA7B,EAAmCkB,OAAnC,EAA6C;AACnD,QAAM;AAAEC,IAAAA;AAAF,MAAsBtB,SAAS,CAClCuB,MAAF,IAAc;AACb,WAAO;AACND,MAAAA,eAAe,EAAEvB,MAAM,CACtBwB,MAAM,CAAE3B,WAAF,CADgB,CAAN,CAEf4B,kBAFe,CAEKrB,IAFL,EAEWkB,OAFX;AADX,KAAP;AAKA,GAPmC,EAQpC,CAAElB,IAAF,EAAQkB,OAAR,CARoC,CAArC;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","extend","a11yPlugin","store","blocksStore","privateApis","blockEditorPrivateApis","unlock","useSelect","useGlobalSetting","useGlobalStyle","useColorRandomizer","name","themeColors","setThemeColors","randomizeColors","randomRotationValue","Math","floor","random","newColors","map","colorObject","color","newColor","rotate","toHex","window","__experimentalEnableColorRandomizer","useStylesPreviewColors","textColor","backgroundColor","headingColor","coreColors","customColors","paletteColors","concat","highlightedColors","filter","slice","useSupportedStyles","element","supportedPanels","select","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":"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"}

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

@@ -1,13 +1,12 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
 import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
-
 import { Icon } from '@wordpress/components';
 export function IconWithCurrentColor({
   className,

package/build-module/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":["classnames","Icon","IconWithCurrentColor","className","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,QAAqB,uBAArB;AAEA,OAAO,SAASC,oBAAT,CAA+B;AAAEC,EAAAA,SAAF;AAAa,KAAGC;AAAhB,CAA/B,EAAyD;AAC/D,SACC,cAAC,IAAD;AACC,IAAA,SAAS,EAAGJ,UAAU,CACrBG,SADqB,EAErB,iDAFqB,CADvB;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","Icon","IconWithCurrentColor","className","props","createElement"],"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":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,IAAI,QAAQ,uBAAuB;AAE5C,OAAO,SAASC,oBAAoBA,CAAE;EAAEC,SAAS;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC/D,OACCC,aAAA,CAACJ,IAAI;IACJE,SAAS,EAAGH,UAAU,CACrBG,SAAS,EACT,iDACD,CAAG;IAAA,GACEC;EAAK,CACV,CAAC;AAEJ"}

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/index.js"],"names":["default","GlobalStylesUI"],"mappings":"AAAA,SAASA,OAAO,IAAIC,cAApB,QAA0C,MAA1C","sourcesContent":["export { default as GlobalStylesUI } from './ui';\n"]}
+{"version":3,"names":["default","GlobalStylesUI"],"sources":["@wordpress/edit-site/src/components/global-styles/index.js"],"sourcesContent":["export { default as GlobalStylesUI } from './ui';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,cAAc,QAAQ,MAAM"}

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

@@ -1,21 +1,20 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
 import { __experimentalNavigatorButton as NavigatorButton, __experimentalNavigatorToParentButton as NavigatorToParentButton, __experimentalItem as Item, FlexItem, __experimentalHStack as HStack } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
-
 import { IconWithCurrentColor } from './icon-with-current-color';
-
 function GenericNavigationButton({
   icon,
   children,
   ...props
 }) {
-  return createElement(Item, { ...props
+  return createElement(Item, {
+    ...props
   }, icon && createElement(HStack, {
     justify: "flex-start"
   }, createElement(IconWithCurrentColor, {
@@ -23,20 +22,17 @@ function GenericNavigationButton({
     size: 24
   }), createElement(FlexItem, null, children)), !icon && children);
 }
-
 function NavigationButtonAsItem(props) {
   return createElement(NavigatorButton, {
     as: GenericNavigationButton,
     ...props
   });
 }
-
 function NavigationBackButtonAsItem(props) {
   return createElement(NavigatorToParentButton, {
     as: GenericNavigationButton,
     ...props
   });
 }
-
 export { NavigationButtonAsItem, NavigationBackButtonAsItem };
 //# sourceMappingURL=navigation-button.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/navigation-button.js"],"names":["__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorToParentButton","NavigatorToParentButton","__experimentalItem","Item","FlexItem","__experimentalHStack","HStack","IconWithCurrentColor","GenericNavigationButton","icon","children","props","NavigationButtonAsItem","NavigationBackButtonAsItem"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,6BAA6B,IAAIC,eADlC,EAECC,qCAAqC,IAAIC,uBAF1C,EAGCC,kBAAkB,IAAIC,IAHvB,EAICC,QAJD,EAKCC,oBAAoB,IAAIC,MALzB,QAMO,uBANP;AAQA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,2BAArC;;AAEA,SAASC,uBAAT,CAAkC;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,QAAR;AAAkB,KAAGC;AAArB,CAAlC,EAAiE;AAChE,SACC,cAAC,IAAD,OAAWA;AAAX,KACGF,IAAI,IACL,cAAC,MAAD;AAAQ,IAAA,OAAO,EAAC;AAAhB,KACC,cAAC,oBAAD;AAAsB,IAAA,IAAI,EAAGA,IAA7B;AAAoC,IAAA,IAAI,EAAG;AAA3C,IADD,EAEC,cAAC,QAAD,QAAYC,QAAZ,CAFD,CAFF,EAOG,CAAED,IAAF,IAAUC,QAPb,CADD;AAWA;;AAED,SAASE,sBAAT,CAAiCD,KAAjC,EAAyC;AACxC,SAAO,cAAC,eAAD;AAAiB,IAAA,EAAE,EAAGH,uBAAtB;AAAA,OAAqDG;AAArD,IAAP;AACA;;AAED,SAASE,0BAAT,CAAqCF,KAArC,EAA6C;AAC5C,SACC,cAAC,uBAAD;AAAyB,IAAA,EAAE,EAAGH,uBAA9B;AAAA,OAA6DG;AAA7D,IADD;AAGA;;AAED,SAASC,sBAAT,EAAiCC,0BAAjC","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":["__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorToParentButton","NavigatorToParentButton","__experimentalItem","Item","FlexItem","__experimentalHStack","HStack","IconWithCurrentColor","GenericNavigationButton","icon","children","props","createElement","justify","size","NavigationButtonAsItem","as","NavigationBackButtonAsItem"],"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":";AAAA;AACA;AACA;AACA,SACCA,6BAA6B,IAAIC,eAAe,EAChDC,qCAAqC,IAAIC,uBAAuB,EAChEC,kBAAkB,IAAIC,IAAI,EAC1BC,QAAQ,EACRC,oBAAoB,IAAIC,MAAM,QACxB,uBAAuB;;AAE9B;AACA;AACA;AACA,SAASC,oBAAoB,QAAQ,2BAA2B;AAEhE,SAASC,uBAAuBA,CAAE;EAAEC,IAAI;EAAEC,QAAQ;EAAE,GAAGC;AAAM,CAAC,EAAG;EAChE,OACCC,aAAA,CAACT,IAAI;IAAA,GAAMQ;EAAK,GACbF,IAAI,IACLG,aAAA,CAACN,MAAM;IAACO,OAAO,EAAC;EAAY,GAC3BD,aAAA,CAACL,oBAAoB;IAACE,IAAI,EAAGA,IAAM;IAACK,IAAI,EAAG;EAAI,CAAE,CAAC,EAClDF,aAAA,CAACR,QAAQ,QAAGM,QAAoB,CACzB,CACR,EACC,CAAED,IAAI,IAAIC,QACP,CAAC;AAET;AAEA,SAASK,sBAAsBA,CAAEJ,KAAK,EAAG;EACxC,OAAOC,aAAA,CAACb,eAAe;IAACiB,EAAE,EAAGR,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AACvE;AAEA,SAASM,0BAA0BA,CAAEN,KAAK,EAAG;EAC5C,OACCC,aAAA,CAACX,uBAAuB;IAACe,EAAE,EAAGR,uBAAyB;IAAA,GAAMG;EAAK,CAAI,CAAC;AAEzE;AAEA,SAASI,sBAAsB,EAAEE,0BAA0B"}

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

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
@@ -8,10 +7,10 @@ import { __, _n, sprintf } from '@wordpress/i18n';
 import { shuffle } from '@wordpress/icons';
 import { useMemo } from '@wordpress/element';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
-
 import Subtitle from './subtitle';
 import { NavigationButtonAsItem } from './navigation-button';
 import { useColorRandomizer } from './hooks';
@@ -21,7 +20,6 @@ const {
   useGlobalSetting
 } = unlock(blockEditorPrivateApis);
 const EMPTY_COLORS = [];
-
 function Palette({
   name
 }) {
@@ -32,7 +30,8 @@ function Palette({
   const [randomizeThemeColors] = useColorRandomizer();
   const colors = 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 ? sprintf( // Translators: %d: Number of palette colors.
+  const paletteButtonText = colors.length > 0 ? sprintf(
+  // Translators: %d: Number of palette colors.
   _n('%d color', '%d colors', colors.length), colors.length) : __('Add custom colors');
   return createElement(VStack, {
     spacing: 3
@@ -61,6 +60,5 @@ function Palette({
     onClick: randomizeThemeColors
   }, __('Randomize colors')));
 }
-
 export default Palette;
 //# sourceMappingURL=palette.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/palette.js"],"names":["__experimentalItemGroup","ItemGroup","FlexItem","__experimentalHStack","HStack","__experimentalZStack","ZStack","__experimentalVStack","VStack","ColorIndicator","Button","__","_n","sprintf","shuffle","useMemo","privateApis","blockEditorPrivateApis","Subtitle","NavigationButtonAsItem","useColorRandomizer","ColorIndicatorWrapper","unlock","useGlobalSetting","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","randomizeThemeColors","colors","screenPath","encodeURIComponent","paletteButtonText","length","slice","map","color","index","window","__experimentalEnableColorRandomizer"],"mappings":"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","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":["__experimentalItemGroup","ItemGroup","FlexItem","__experimentalHStack","HStack","__experimentalZStack","ZStack","__experimentalVStack","VStack","ColorIndicator","Button","__","_n","sprintf","shuffle","useMemo","privateApis","blockEditorPrivateApis","Subtitle","NavigationButtonAsItem","useColorRandomizer","ColorIndicatorWrapper","unlock","useGlobalSetting","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","randomizeThemeColors","colors","screenPath","encodeURIComponent","paletteButtonText","length","createElement","spacing","level","isBordered","isSeparated","path","direction","isLayered","offset","slice","map","color","index","key","colorValue","window","__experimentalEnableColorRandomizer","variant","icon","onClick"],"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-module/components/global-styles/preview.js

@@ -1,5 +1,4 @@
 import { createElement, Fragment } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
@@ -7,13 +6,13 @@ import { __unstableIframe as Iframe, __unstableEditorStyles as EditorStyles, pri
 import { __unstableMotion as motion, __experimentalHStack as HStack, __experimentalVStack as VStack } from '@wordpress/components';
 import { useReducedMotion, useResizeObserver } from '@wordpress/compose';
 import { useState, useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-
 import { unlock } from '../../lock-unlock';
+import { useStylesPreviewColors } from './hooks';
 const {
-  useGlobalSetting,
   useGlobalStyle,
   useGlobalStylesOutput
 } = unlock(blockEditorPrivateApis);
@@ -48,7 +47,6 @@ const secondFrame = {
 const normalizedWidth = 248;
 const normalizedHeight = 152;
 const normalizedColorSwatchSize = 32;
-
 const StylesPreview = ({
   label,
   isFocused,
@@ -64,20 +62,17 @@ const StylesPreview = ({
   const [gradientValue] = useGlobalStyle('color.gradient');
   const [styles] = useGlobalStylesOutput();
   const disableMotion = useReducedMotion();
-  const [coreColors] = useGlobalSetting('color.palette.core');
-  const [themeColors] = useGlobalSetting('color.palette.theme');
-  const [customColors] = useGlobalSetting('color.palette.custom');
   const [isHovered, setIsHovered] = useState(false);
   const [containerResizeListener, {
     width
   }] = 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
+  } = useStylesPreviewColors();
 
+  // Reset leaked styles from WP common.css and remove main content layout padding and border.
   const editorStyles = useMemo(() => {
     if (styles) {
       return [...styles, {
@@ -85,7 +80,6 @@ const StylesPreview = ({
         isGlobalStyles: true
       }];
     }
-
     return styles;
   }, [styles]);
   const isReady = !!width;
@@ -224,6 +218,5 @@ const StylesPreview = ({
     }
   }, label))))));
 };
-
 export default StylesPreview;
 //# sourceMappingURL=preview.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/preview.js"],"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","unlock","useGlobalSetting","useGlobalStyle","useGlobalStylesOutput","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","coreColors","themeColors","customColors","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","concat","highlightedColors","filter","color","slice","editorStyles","css","isGlobalStyles","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":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","__experimentalHStack","HStack","__experimentalVStack","VStack","useReducedMotion","useResizeObserver","useState","useMemo","unlock","useStylesPreviewColors","useGlobalStyle","useGlobalStylesOutput","firstFrame","start","scale","opacity","hover","midFrame","secondFrame","normalizedWidth","normalizedHeight","normalizedColorSwatchSize","StylesPreview","label","isFocused","withHoverView","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","ratio","paletteColors","highlightedColors","editorStyles","css","isGlobalStyles","isReady","createElement","Fragment","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","variants","overflow","spacing","justify","fontSize","color","transition","delay","type","map","slug","index","key","borderRadius","top","filter","slice","flexGrow","padding","boxSizing","lineHeight","textAlign"],"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-module/components/global-styles/root-menu.js

@@ -1,5 +1,4 @@
 import { createElement, Fragment } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
@@ -7,10 +6,10 @@ import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
 import { typography, color, layout } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
 /**
  * Internal dependencies
  */
-
 import { NavigationButtonAsItem } from './navigation-button';
 import { unlock } from '../../lock-unlock';
 const {
@@ -20,7 +19,6 @@ const {
   useGlobalSetting,
   useSettingsForBlockElement
 } = unlock(blockEditorPrivateApis);
-
 function RootMenu() {
   const [rawSettings] = useGlobalSetting('');
   const settings = useSettingsForBlockElement(rawSettings);
@@ -42,6 +40,5 @@ function RootMenu() {
     "aria-label": __('Layout styles')
   }, __('Layout'))));
 }
-
 export default RootMenu;
 //# sourceMappingURL=root-menu.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/edit-site/src/components/global-styles/root-menu.js"],"names":["__experimentalItemGroup","ItemGroup","typography","color","layout","__","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,uBAAuB,IAAIC,SAApC,QAAqD,uBAArD;AACA,SAASC,UAAT,EAAqBC,KAArB,EAA4BC,MAA5B,QAA0C,kBAA1C;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,WAAW,IAAIC,sBAAxB,QAAsD,yBAAtD;AAEA;AACA;AACA;;AACA,SAASC,sBAAT,QAAuC,qBAAvC;AACA,SAASC,MAAT,QAAuB,mBAAvB;AAEA,MAAM;AACLC,EAAAA,qBADK;AAELC,EAAAA,qBAFK;AAGLC,EAAAA,gBAHK;AAILC,EAAAA,gBAJK;AAKLC,EAAAA;AALK,IAMFL,MAAM,CAAEF,sBAAF,CANV;;AAQA,SAASQ,QAAT,GAAoB;AACnB,QAAM,CAAEC,WAAF,IAAkBH,gBAAgB,CAAE,EAAF,CAAxC;AACA,QAAMI,QAAQ,GAAGH,0BAA0B,CAAEE,WAAF,CAA3C;AACA,QAAME,kBAAkB,GAAGP,qBAAqB,CAAEM,QAAF,CAAhD;AACA,QAAME,aAAa,GAAGP,gBAAgB,CAAEK,QAAF,CAAtC;AACA,QAAMG,kBAAkB,GAAGV,qBAAqB,CAAEO,QAAF,CAAhD;AACA,QAAMI,cAAc,GAAGD,kBAAvB;AAEA,SACC,8BACC,cAAC,SAAD,QACGF,kBAAkB,IACnB,cAAC,sBAAD;AACC,IAAA,IAAI,EAAGhB,UADR;AAEC,IAAA,IAAI,EAAC,aAFN;AAGC,kBAAaG,EAAE,CAAE,mBAAF;AAHhB,KAKGA,EAAE,CAAE,YAAF,CALL,CAFF,EAUGc,aAAa,IACd,cAAC,sBAAD;AACC,IAAA,IAAI,EAAGhB,KADR;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,kBAAaE,EAAE,CAAE,eAAF;AAHhB,KAKGA,EAAE,CAAE,QAAF,CALL,CAXF,EAmBGgB,cAAc,IACf,cAAC,sBAAD;AACC,IAAA,IAAI,EAAGjB,MADR;AAEC,IAAA,IAAI,EAAC,SAFN;AAGC,kBAAaC,EAAE,CAAE,eAAF;AAHhB,KAKGA,EAAE,CAAE,QAAF,CALL,CApBF,CADD,CADD;AAiCA;;AAED,eAAeU,QAAf","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":["__experimentalItemGroup","ItemGroup","typography","color","layout","__","privateApis","blockEditorPrivateApis","NavigationButtonAsItem","unlock","useHasDimensionsPanel","useHasTypographyPanel","useHasColorPanel","useGlobalSetting","useSettingsForBlockElement","RootMenu","rawSettings","settings","hasTypographyPanel","hasColorPanel","hasDimensionsPanel","hasLayoutPanel","createElement","Fragment","icon","path"],"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":";AAAA;AACA;AACA;AACA,SAASA,uBAAuB,IAAIC,SAAS,QAAQ,uBAAuB;AAC5E,SAASC,UAAU,EAAEC,KAAK,EAAEC,MAAM,QAAQ,kBAAkB;AAC5D,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,WAAW,IAAIC,sBAAsB,QAAQ,yBAAyB;;AAE/E;AACA;AACA;AACA,SAASC,sBAAsB,QAAQ,qBAAqB;AAC5D,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,MAAM;EACLC,qBAAqB;EACrBC,qBAAqB;EACrBC,gBAAgB;EAChBC,gBAAgB;EAChBC;AACD,CAAC,GAAGL,MAAM,CAAEF,sBAAuB,CAAC;AAEpC,SAASQ,QAAQA,CAAA,EAAG;EACnB,MAAM,CAAEC,WAAW,CAAE,GAAGH,gBAAgB,CAAE,EAAG,CAAC;EAC9C,MAAMI,QAAQ,GAAGH,0BAA0B,CAAEE,WAAY,CAAC;EAC1D,MAAME,kBAAkB,GAAGP,qBAAqB,CAAEM,QAAS,CAAC;EAC5D,MAAME,aAAa,GAAGP,gBAAgB,CAAEK,QAAS,CAAC;EAClD,MAAMG,kBAAkB,GAAGV,qBAAqB,CAAEO,QAAS,CAAC;EAC5D,MAAMI,cAAc,GAAGD,kBAAkB;EAEzC,OACCE,aAAA,CAAAC,QAAA,QACCD,aAAA,CAACrB,SAAS,QACPiB,kBAAkB,IACnBI,aAAA,CAACd,sBAAsB;IACtBgB,IAAI,EAAGtB,UAAY;IACnBuB,IAAI,EAAC,aAAa;IAClB,cAAapB,EAAE,CAAE,mBAAoB;EAAG,GAEtCA,EAAE,CAAE,YAAa,CACI,CACxB,EACCc,aAAa,IACdG,aAAA,CAACd,sBAAsB;IACtBgB,IAAI,EAAGrB,KAAO;IACdsB,IAAI,EAAC,SAAS;IACd,cAAapB,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CACxB,EACCgB,cAAc,IACfC,aAAA,CAACd,sBAAsB;IACtBgB,IAAI,EAAGpB,MAAQ;IACfqB,IAAI,EAAC,SAAS;IACd,cAAapB,EAAE,CAAE,eAAgB;EAAG,GAElCA,EAAE,CAAE,QAAS,CACQ,CAEf,CACV,CAAC;AAEL;AAEA,eAAeU,QAAQ"}

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

@@ -1,5 +1,4 @@
 import { createElement, Fragment } from "@wordpress/element";
-
 /**
  * WordPress dependencies
  */
@@ -11,10 +10,10 @@ import { useState, useMemo, useEffect, useRef } from '@wordpress/element';
 import { BlockIcon, privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { useDebounce } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
+
 /**
  * Internal dependencies
  */
-
 import { useBlockVariations } from './variations-panel';
 import ScreenHeader from './header';
 import { NavigationButtonAsItem } from './navigation-button';
@@ -27,14 +26,13 @@ const {
   useSettingsForBlockElement,
   useHasColorPanel
 } = unlock(blockEditorPrivateApis);
-
 function useSortedBlockTypes() {
-  const blockItems = useSelect(select => select(blocksStore).getBlockTypes(), []); // Ensure core blocks are prioritized in the returned results,
+  const blockItems = useSelect(select => select(blocksStore).getBlockTypes(), []);
+  // Ensure core blocks are prioritized in the returned results,
   // because third party blocks can be registered earlier than
   // the core blocks (usually by using the `init` action),
   // thus affecting the display order.
   // We don't sort reusable blocks as they are handled differently.
-
   const groupByType = (blocks, block) => {
     const {
       core,
@@ -44,7 +42,6 @@ function useSortedBlockTypes() {
     type.push(block);
     return blocks;
   };
-
   const {
     core: coreItems,
     noncore: nonCoreItems
@@ -54,7 +51,6 @@ function useSortedBlockTypes() {
   });
   return [...coreItems, ...nonCoreItems];
 }
-
 export function useBlockHasGlobalStyles(blockName) {
   const [rawSettings] = useGlobalSetting('', blockName);
   const settings = useSettingsForBlockElement(rawSettings, blockName);
@@ -67,17 +63,15 @@ export function useBlockHasGlobalStyles(blockName) {
   const hasGlobalStyles = hasTypographyPanel || hasColorPanel || hasLayoutPanel || hasVariationsPanel;
   return hasGlobalStyles;
 }
-
 function BlockMenuItem({
   block
 }) {
   const hasBlockMenuItem = useBlockHasGlobalStyles(block.name);
-
   if (!hasBlockMenuItem) {
     return null;
   }
-
-  const navigationButtonLabel = sprintf( // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+  const navigationButtonLabel = sprintf(
+  // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
   __('%s block styles'), block.title);
   return createElement(NavigationButtonAsItem, {
     path: '/blocks/' + encodeURIComponent(block.name),
@@ -88,7 +82,6 @@ function BlockMenuItem({
     icon: block.icon
   }), createElement(FlexItem, null, block.title)));
 }
-
 function ScreenBlockList() {
   const sortedBlockTypes = useSortedBlockTypes();
   const [filterValue, setFilterValue] = useState('');
@@ -98,15 +91,16 @@ function ScreenBlockList() {
     if (!filterValue) {
       return sortedBlockTypes;
     }
-
     return sortedBlockTypes.filter(blockType => isMatchingSearchTerm(blockType, filterValue));
   }, [filterValue, sortedBlockTypes, isMatchingSearchTerm]);
-  const blockTypesListRef = useRef(); // Announce search results on change
+  const blockTypesListRef = useRef();
 
+  // Announce search results on change
   useEffect(() => {
     if (!filterValue) {
       return;
-    } // We extract the results from the wrapper div's `ref` because
+    }
+    // We extract the results from the wrapper div's `ref` because
     // filtered items can contain items that will eventually not
     // render and there is no reliable way to detect when a child
     // will return `null`.
@@ -114,11 +108,8 @@ function ScreenBlockList() {
     // fragile and depends on the number of rendered elements of `BlockMenuItem`,
     // which is now one.
     // @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116
-
-
     const count = blockTypesListRef.current.childElementCount;
-    const resultsFoundMessage = sprintf(
-    /* translators: %d: number of results. */
+    const resultsFoundMessage = sprintf( /* translators: %d: number of results. */
     _n('%d result found.', '%d results found.', count), count);
     debouncedSpeak(resultsFoundMessage, count);
   }, [filterValue, debouncedSpeak]);
@@ -140,6 +131,5 @@ function ScreenBlockList() {
     key: 'menu-itemblock-' + block.name
   }))));
 }
-
 export default ScreenBlockList;
 //# sourceMappingURL=screen-block-list.js.map