@wordpress/edit-site 5.35.0 → 6.0.0

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

@@ -1 +1 @@
-{"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","className","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 className=\"edit-site-global-styles-screen-colors__palette-count\">\n\t\t\t\t\t\t\t{ paletteButtonText }\n\t\t\t\t\t\t</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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","ignoreList":[]}
+{"version":3,"names":["__experimentalItemGroup","ItemGroup","FlexItem","__experimentalHStack","HStack","__experimentalZStack","ZStack","__experimentalVStack","VStack","ColorIndicator","Button","isRTL","__","Icon","shuffle","chevronLeft","chevronRight","useMemo","privateApis","blockEditorPrivateApis","Subtitle","NavigationButtonAsItem","useColorRandomizer","ColorIndicatorWrapper","unlock","jsx","_jsx","jsxs","_jsxs","useGlobalSetting","EMPTY_COLORS","Palette","name","customColors","themeColors","defaultColors","defaultPaletteEnabled","randomizeThemeColors","colors","screenPath","encodeURIComponent","paletteButtonText","length","spacing","children","level","isBordered","isSeparated","path","direction","isLayered","offset","slice","map","color","index","colorValue","icon","window","__experimentalEnableColorRandomizer","variant","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 { isRTL, __ } from '@wordpress/i18n';\nimport { Icon, shuffle, chevronLeft, chevronRight } 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 ? __( 'Edit palette' ) : __( 'Add 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={ paletteButtonText }\n\t\t\t\t>\n\t\t\t\t\t<HStack direction=\"row\">\n\t\t\t\t\t\t{ colors.length <= 0 && (\n\t\t\t\t\t\t\t<FlexItem>{ __( 'Add colors' ) }</FlexItem>\n\t\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<Icon icon={ isRTL() ? chevronLeft : chevronRight } />\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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","ignoreList":[]}

package/build-module/components/global-styles/preset-colors.js

@@ -1,8 +1,8 @@
-import { createElement } from "react";
 /**
  * Internal dependencies
  */
 import { useStylesPreviewColors } from './hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function PresetColors() {
   const {
     paletteColors
@@ -10,13 +10,12 @@ export default function PresetColors() {
   return paletteColors.slice(0, 5).map(({
     slug,
     color
-  }, index) => createElement("div", {
-    key: `${slug}-${index}`,
+  }, index) => /*#__PURE__*/_jsx("div", {
     style: {
       flexGrow: 1,
       height: '100%',
       background: color
     }
-  }));
+  }, `${slug}-${index}`));
 }
 //# sourceMappingURL=preset-colors.js.map

package/build-module/components/global-styles/preset-colors.js.map

@@ -1 +1 @@
-{"version":3,"names":["useStylesPreviewColors","PresetColors","paletteColors","slice","map","slug","color","index","createElement","key","style","flexGrow","height","background"],"sources":["@wordpress/edit-site/src/components/global-styles/preset-colors.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { useStylesPreviewColors } from './hooks';\n\nexport default function PresetColors() {\n\tconst { paletteColors } = useStylesPreviewColors();\n\treturn paletteColors.slice( 0, 5 ).map( ( { slug, color }, index ) => (\n\t\t<div\n\t\t\tkey={ `${ slug }-${ index }` }\n\t\t\tstyle={ {\n\t\t\t\tflexGrow: 1,\n\t\t\t\theight: '100%',\n\t\t\t\tbackground: color,\n\t\t\t} }\n\t\t/>\n\t) );\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,sBAAsB,QAAQ,SAAS;AAEhD,eAAe,SAASC,YAAYA,CAAA,EAAG;EACtC,MAAM;IAAEC;EAAc,CAAC,GAAGF,sBAAsB,CAAC,CAAC;EAClD,OAAOE,aAAa,CAACC,KAAK,CAAE,CAAC,EAAE,CAAE,CAAC,CAACC,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,EAAEC,KAAK,KAC/DC,aAAA;IACCC,GAAG,EAAI,GAAGJ,IAAM,IAAIE,KAAO,EAAG;IAC9BG,KAAK,EAAG;MACPC,QAAQ,EAAE,CAAC;MACXC,MAAM,EAAE,MAAM;MACdC,UAAU,EAAEP;IACb;EAAG,CACH,CACA,CAAC;AACJ","ignoreList":[]}
+{"version":3,"names":["useStylesPreviewColors","jsx","_jsx","PresetColors","paletteColors","slice","map","slug","color","index","style","flexGrow","height","background"],"sources":["@wordpress/edit-site/src/components/global-styles/preset-colors.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { useStylesPreviewColors } from './hooks';\n\nexport default function PresetColors() {\n\tconst { paletteColors } = useStylesPreviewColors();\n\treturn paletteColors.slice( 0, 5 ).map( ( { slug, color }, index ) => (\n\t\t<div\n\t\t\tkey={ `${ slug }-${ index }` }\n\t\t\tstyle={ {\n\t\t\t\tflexGrow: 1,\n\t\t\t\theight: '100%',\n\t\t\t\tbackground: color,\n\t\t\t} }\n\t\t/>\n\t) );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,sBAAsB,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjD,eAAe,SAASC,YAAYA,CAAA,EAAG;EACtC,MAAM;IAAEC;EAAc,CAAC,GAAGJ,sBAAsB,CAAC,CAAC;EAClD,OAAOI,aAAa,CAACC,KAAK,CAAE,CAAC,EAAE,CAAE,CAAC,CAACC,GAAG,CAAE,CAAE;IAAEC,IAAI;IAAEC;EAAM,CAAC,EAAEC,KAAK,kBAC/DP,IAAA;IAECQ,KAAK,EAAG;MACPC,QAAQ,EAAE,CAAC;MACXC,MAAM,EAAE,MAAM;MACdC,UAAU,EAAEL;IACb;EAAG,GALI,GAAGD,IAAM,IAAIE,KAAO,EAM3B,CACA,CAAC;AACJ","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -9,6 +8,7 @@ import { __experimentalHStack as HStack, __unstableMotion as motion } from '@wor
  */
 import PresetColors from './preset-colors';
 import PreviewIframe from './preview-iframe';
+import { jsx as _jsx } from "react/jsx-runtime";
 const firstFrameVariants = {
   start: {
     scale: 1,
@@ -24,27 +24,29 @@ const StylesPreviewColors = ({
   isFocused,
   withHoverView
 }) => {
-  return createElement(PreviewIframe, {
+  return /*#__PURE__*/_jsx(PreviewIframe, {
     label: label,
     isFocused: isFocused,
-    withHoverView: withHoverView
-  }, ({
-    key
-  }) => createElement(motion.div, {
-    key: key,
-    variants: firstFrameVariants,
-    style: {
-      height: '100%',
-      overflow: 'hidden'
-    }
-  }, createElement(HStack, {
-    spacing: 0,
-    justify: "center",
-    style: {
-      height: '100%',
-      overflow: 'hidden'
-    }
-  }, createElement(PresetColors, null))));
+    withHoverView: withHoverView,
+    children: ({
+      key
+    }) => /*#__PURE__*/_jsx(motion.div, {
+      variants: firstFrameVariants,
+      style: {
+        height: '100%',
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/_jsx(HStack, {
+        spacing: 0,
+        justify: "center",
+        style: {
+          height: '100%',
+          overflow: 'hidden'
+        },
+        children: /*#__PURE__*/_jsx(PresetColors, {})
+      })
+    }, key)
+  });
 };
 export default StylesPreviewColors;
 //# sourceMappingURL=preview-colors.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__experimentalHStack","HStack","__unstableMotion","motion","PresetColors","PreviewIframe","firstFrameVariants","start","scale","opacity","hover","StylesPreviewColors","label","isFocused","withHoverView","createElement","key","div","variants","style","height","overflow","spacing","justify"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport PresetColors from './preset-colors';\nimport PreviewIframe from './preview-iframe';\n\nconst firstFrameVariants = {\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 StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {\n\treturn (\n\t\t<PreviewIframe\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<PresetColors />\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewIframe>\n\t);\n};\n\nexport default StylesPreviewColors;\n"],"mappings":";AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,gBAAgB,IAAIC,MAAM,QACpB,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,aAAa,MAAM,kBAAkB;AAE5C,MAAMC,kBAAkB,GAAG;EAC1BC,KAAK,EAAE;IACNC,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACNF,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACV;AACD,CAAC;AAED,MAAME,mBAAmB,GAAGA,CAAE;EAAEC,KAAK;EAAEC,SAAS;EAAEC;AAAc,CAAC,KAAM;EACtE,OACCC,aAAA,CAACV,aAAa;IACbO,KAAK,EAAGA,KAAO;IACfC,SAAS,EAAGA,SAAW;IACvBC,aAAa,EAAGA;EAAe,GAE7B,CAAE;IAAEE;EAAI,CAAC,KACVD,aAAA,CAACZ,MAAM,CAACc,GAAG;IACVD,GAAG,EAAGA,GAAK;IACXE,QAAQ,EAAGZ,kBAAoB;IAC/Ba,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEHN,aAAA,CAACd,MAAM;IACNqB,OAAO,EAAG,CAAG;IACbC,OAAO,EAAC,QAAQ;IAChBJ,KAAK,EAAG;MACPC,MAAM,EAAE,MAAM;MACdC,QAAQ,EAAE;IACX;EAAG,GAEHN,aAAA,CAACX,YAAY,MAAE,CACR,CACG,CAEC,CAAC;AAElB,CAAC;AAED,eAAeO,mBAAmB","ignoreList":[]}
+{"version":3,"names":["__experimentalHStack","HStack","__unstableMotion","motion","PresetColors","PreviewIframe","jsx","_jsx","firstFrameVariants","start","scale","opacity","hover","StylesPreviewColors","label","isFocused","withHoverView","children","key","div","variants","style","height","overflow","spacing","justify"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-colors.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport PresetColors from './preset-colors';\nimport PreviewIframe from './preview-iframe';\n\nconst firstFrameVariants = {\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 StylesPreviewColors = ( { label, isFocused, withHoverView } ) => {\n\treturn (\n\t\t<PreviewIframe\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<PresetColors />\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewIframe>\n\t);\n};\n\nexport default StylesPreviewColors;\n"],"mappings":"AAAA;AACA;AACA;AACA,SACCA,oBAAoB,IAAIC,MAAM,EAC9BC,gBAAgB,IAAIC,MAAM,QACpB,uBAAuB;;AAE9B;AACA;AACA;AACA,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,aAAa,MAAM,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,MAAMC,kBAAkB,GAAG;EAC1BC,KAAK,EAAE;IACNC,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACV,CAAC;EACDC,KAAK,EAAE;IACNF,KAAK,EAAE,CAAC;IACRC,OAAO,EAAE;EACV;AACD,CAAC;AAED,MAAME,mBAAmB,GAAGA,CAAE;EAAEC,KAAK;EAAEC,SAAS;EAAEC;AAAc,CAAC,KAAM;EACtE,oBACCT,IAAA,CAACF,aAAa;IACbS,KAAK,EAAGA,KAAO;IACfC,SAAS,EAAGA,SAAW;IACvBC,aAAa,EAAGA,aAAe;IAAAC,QAAA,EAE7BA,CAAE;MAAEC;IAAI,CAAC,kBACVX,IAAA,CAACJ,MAAM,CAACgB,GAAG;MAEVC,QAAQ,EAAGZ,kBAAoB;MAC/Ba,KAAK,EAAG;QACPC,MAAM,EAAE,MAAM;QACdC,QAAQ,EAAE;MACX,CAAG;MAAAN,QAAA,eAEHV,IAAA,CAACN,MAAM;QACNuB,OAAO,EAAG,CAAG;QACbC,OAAO,EAAC,QAAQ;QAChBJ,KAAK,EAAG;UACPC,MAAM,EAAE,MAAM;UACdC,QAAQ,EAAE;QACX,CAAG;QAAAN,QAAA,eAEHV,IAAA,CAACH,YAAY,IAAE;MAAC,CACT;IAAC,GAhBHc,GAiBK;EACZ,CACa,CAAC;AAElB,CAAC;AAED,eAAeL,mBAAmB","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement, Fragment } from "react";
 /**
  * WordPress dependencies
  */
@@ -11,6 +10,9 @@ import { useLayoutEffect, useState, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const {
   useGlobalStyle,
   useGlobalStylesOutput
@@ -91,33 +93,38 @@ export default function PreviewIframe({
     return styles;
   }, [styles]);
   const isReady = !!width;
-  return createElement(Fragment, null, createElement("div", {
-    style: {
-      position: 'relative'
-    }
-  }, containerResizeListener), isReady && createElement(Iframe, {
-    className: "edit-site-global-styles-preview__iframe",
-    style: {
-      height: normalizedHeight * ratio
-    },
-    onMouseEnter: () => setIsHovered(true),
-    onMouseLeave: () => setIsHovered(false),
-    tabIndex: -1
-  }, createElement(EditorStyles, {
-    styles: editorStyles
-  }), createElement(motion.div, {
-    style: {
-      height: normalizedHeight * ratio,
-      width: '100%',
-      background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
-      cursor: withHoverView ? 'pointer' : undefined
-    },
-    initial: "start",
-    animate: (isHovered || isFocused) && !disableMotion && label ? 'hover' : 'start'
-  }, [].concat(children) // This makes sure children is always an array.
-  .map((child, key) => child({
-    ratio,
-    key
-  })))));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'relative'
+      },
+      children: containerResizeListener
+    }), isReady && /*#__PURE__*/_jsxs(Iframe, {
+      className: "edit-site-global-styles-preview__iframe",
+      style: {
+        height: normalizedHeight * ratio
+      },
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      tabIndex: -1,
+      children: [/*#__PURE__*/_jsx(EditorStyles, {
+        styles: editorStyles
+      }), /*#__PURE__*/_jsx(motion.div, {
+        style: {
+          height: normalizedHeight * ratio,
+          width: '100%',
+          background: gradientValue !== null && gradientValue !== void 0 ? gradientValue : backgroundColor,
+          cursor: withHoverView ? 'pointer' : undefined
+        },
+        initial: "start",
+        animate: (isHovered || isFocused) && !disableMotion && label ? 'hover' : 'start',
+        children: [].concat(children) // This makes sure children is always an array.
+        .map((child, key) => child({
+          ratio,
+          key
+        }))
+      })]
+    })]
+  });
 }
 //# sourceMappingURL=preview-iframe.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","useThrottle","useReducedMotion","useResizeObserver","useLayoutEffect","useState","useMemo","unlock","useGlobalStyle","useGlobalStylesOutput","normalizedWidth","normalizedHeight","THROTTLE_OPTIONS","leading","trailing","PreviewIframe","children","label","isFocused","withHoverView","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","editorStyles","css","isGlobalStyles","isReady","createElement","Fragment","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","concat","map","child","key"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-iframe.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 { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\nexport default function PreviewIframe( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\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 [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\t/*\n\t * Reset leaked styles from WP common.css and remove main content layout padding and border.\n\t * Add pointer cursor to the body to indicate the iframe is interactive,\n\t * similar to Typography variation previews.\n\t */\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;cursor: pointer;}',\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{ []\n\t\t\t\t\t\t\t.concat( children ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child, key ) => child( { ratio, key } ) ) }\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["__unstableIframe","Iframe","__unstableEditorStyles","EditorStyles","privateApis","blockEditorPrivateApis","__unstableMotion","motion","useThrottle","useReducedMotion","useResizeObserver","useLayoutEffect","useState","useMemo","unlock","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","useGlobalStyle","useGlobalStylesOutput","normalizedWidth","normalizedHeight","THROTTLE_OPTIONS","leading","trailing","PreviewIframe","children","label","isFocused","withHoverView","backgroundColor","gradientValue","styles","disableMotion","isHovered","setIsHovered","containerResizeListener","width","throttledWidth","setThrottledWidthState","ratioState","setRatioState","setThrottledWidth","newRatio","ratioDiff","isRatioDiffBigEnough","Math","abs","fallbackRatio","ratio","editorStyles","css","isGlobalStyles","isReady","style","position","className","height","onMouseEnter","onMouseLeave","tabIndex","div","background","cursor","undefined","initial","animate","concat","map","child","key"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-iframe.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 { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useGlobalStyle, useGlobalStylesOutput } = unlock(\n\tblockEditorPrivateApis\n);\n\nconst normalizedWidth = 248;\nconst normalizedHeight = 152;\n\n// Throttle options for useThrottle. Must be defined outside of the component,\n// so that the object reference is the same on each render.\nconst THROTTLE_OPTIONS = {\n\tleading: true,\n\ttrailing: true,\n};\n\nexport default function PreviewIframe( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n} ) {\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 [ throttledWidth, setThrottledWidthState ] = useState( width );\n\tconst [ ratioState, setRatioState ] = useState();\n\n\tconst setThrottledWidth = useThrottle(\n\t\tsetThrottledWidthState,\n\t\t250,\n\t\tTHROTTLE_OPTIONS\n\t);\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tif ( width ) {\n\t\t\tsetThrottledWidth( width );\n\t\t}\n\t}, [ width, setThrottledWidth ] );\n\n\t// Must use useLayoutEffect to avoid a flash of the iframe at the wrong\n\t// size before the width is set.\n\tuseLayoutEffect( () => {\n\t\tconst newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;\n\t\tconst ratioDiff = newRatio - ( ratioState || 0 );\n\n\t\t// Only update the ratio state if the difference is big enough\n\t\t// or if the ratio state is not yet set. This is to avoid an\n\t\t// endless loop of updates at particular viewport heights when the\n\t\t// presence of a scrollbar causes the width to change slightly.\n\t\tconst isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;\n\n\t\tif ( isRatioDiffBigEnough || ! ratioState ) {\n\t\t\tsetRatioState( newRatio );\n\t\t}\n\t}, [ throttledWidth, ratioState ] );\n\n\t// Set a fallbackRatio to use before the throttled ratio has been set.\n\tconst fallbackRatio = width ? width / normalizedWidth : 1;\n\t/*\n\t * Use the throttled ratio if it has been calculated, otherwise\n\t * use the fallback ratio. The throttled ratio is used to avoid\n\t * an endless loop of updates at particular viewport heights.\n\t * See: https://github.com/WordPress/gutenberg/issues/55112\n\t */\n\tconst ratio = ratioState ? ratioState : fallbackRatio;\n\n\t/*\n\t * Reset leaked styles from WP common.css and remove main content layout padding and border.\n\t * Add pointer cursor to the body to indicate the iframe is interactive,\n\t * similar to Typography variation previews.\n\t */\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;cursor: pointer;}',\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{ []\n\t\t\t\t\t\t\t.concat( children ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child, key ) => child( { ratio, key } ) ) }\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"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * WordPress dependencies
  */
@@ -13,6 +12,8 @@ import { useStylesPreviewColors } from './hooks';
 import TypographyExample from './typography-example';
 import HighlightedColors from './highlighted-colors';
 import PreviewIframe from './preview-iframe';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   useGlobalStyle
 } = unlock(blockEditorPrivateApis);
@@ -59,97 +60,102 @@ const PreviewStyles = ({
   const {
     paletteColors
   } = useStylesPreviewColors();
-  return createElement(PreviewIframe, {
+  return /*#__PURE__*/_jsxs(PreviewIframe, {
     label: label,
     isFocused: isFocused,
-    withHoverView: withHoverView
-  }, ({
-    ratio,
-    key
-  }) => createElement(motion.div, {
-    key: key,
-    variants: firstFrameVariants,
-    style: {
-      height: '100%',
-      overflow: 'hidden'
-    }
-  }, createElement(HStack, {
-    spacing: 10 * ratio,
-    justify: "center",
-    style: {
-      height: '100%',
-      overflow: 'hidden'
-    }
-  }, createElement(TypographyExample, {
-    fontSize: 65 * ratio,
-    variation: variation
-  }), createElement(VStack, {
-    spacing: 4 * ratio
-  }, createElement(HighlightedColors, {
-    normalizedColorSwatchSize: 32,
-    ratio: ratio
-  })))), ({
-    key
-  }) => createElement(motion.div, {
-    key: key,
-    variants: withHoverView && midFrameVariants,
-    style: {
-      height: '100%',
-      width: '100%',
-      position: 'absolute',
-      top: 0,
-      overflow: 'hidden',
-      filter: 'blur(60px)',
-      opacity: 0.1
-    }
-  }, createElement(HStack, {
-    spacing: 0,
-    justify: "flex-start",
-    style: {
-      height: '100%',
-      overflow: 'hidden'
-    }
-  }, paletteColors.slice(0, 4).map(({
-    color
-  }, index) => createElement("div", {
-    key: index,
-    style: {
-      height: '100%',
-      background: color,
-      flexGrow: 1
-    }
-  })))), ({
-    ratio,
-    key
-  }) => createElement(motion.div, {
-    key: key,
-    variants: secondFrameVariants,
-    style: {
-      height: '100%',
-      width: '100%',
-      overflow: 'hidden',
-      position: 'absolute',
-      top: 0
-    }
-  }, createElement(VStack, {
-    spacing: 3 * ratio,
-    justify: "center",
-    style: {
-      height: '100%',
-      overflow: 'hidden',
-      padding: 10 * ratio,
-      boxSizing: 'border-box'
-    }
-  }, label && createElement("div", {
-    style: {
-      fontSize: 40 * ratio,
-      fontFamily: headingFontFamily,
-      color: headingColor,
-      fontWeight: headingFontWeight,
-      lineHeight: '1em',
-      textAlign: 'center'
-    }
-  }, label))));
+    withHoverView: withHoverView,
+    children: [({
+      ratio,
+      key
+    }) => /*#__PURE__*/_jsx(motion.div, {
+      variants: firstFrameVariants,
+      style: {
+        height: '100%',
+        overflow: 'hidden'
+      },
+      children: /*#__PURE__*/_jsxs(HStack, {
+        spacing: 10 * ratio,
+        justify: "center",
+        style: {
+          height: '100%',
+          overflow: 'hidden'
+        },
+        children: [/*#__PURE__*/_jsx(TypographyExample, {
+          fontSize: 65 * ratio,
+          variation: variation
+        }), /*#__PURE__*/_jsx(VStack, {
+          spacing: 4 * ratio,
+          children: /*#__PURE__*/_jsx(HighlightedColors, {
+            normalizedColorSwatchSize: 32,
+            ratio: ratio
+          })
+        })]
+      })
+    }, key), ({
+      key
+    }) => /*#__PURE__*/_jsx(motion.div, {
+      variants: withHoverView && midFrameVariants,
+      style: {
+        height: '100%',
+        width: '100%',
+        position: 'absolute',
+        top: 0,
+        overflow: 'hidden',
+        filter: 'blur(60px)',
+        opacity: 0.1
+      },
+      children: /*#__PURE__*/_jsx(HStack, {
+        spacing: 0,
+        justify: "flex-start",
+        style: {
+          height: '100%',
+          overflow: 'hidden'
+        },
+        children: paletteColors.slice(0, 4).map(({
+          color
+        }, index) => /*#__PURE__*/_jsx("div", {
+          style: {
+            height: '100%',
+            background: color,
+            flexGrow: 1
+          }
+        }, index))
+      })
+    }, key), ({
+      ratio,
+      key
+    }) => /*#__PURE__*/_jsx(motion.div, {
+      variants: secondFrameVariants,
+      style: {
+        height: '100%',
+        width: '100%',
+        overflow: 'hidden',
+        position: 'absolute',
+        top: 0
+      },
+      children: /*#__PURE__*/_jsx(VStack, {
+        spacing: 3 * ratio,
+        justify: "center",
+        style: {
+          height: '100%',
+          overflow: 'hidden',
+          padding: 10 * ratio,
+          boxSizing: 'border-box'
+        },
+        children: label && /*#__PURE__*/_jsx("div", {
+          style: {
+            fontSize: 40 * ratio,
+            fontFamily: headingFontFamily,
+            color: headingColor,
+            fontWeight: headingFontWeight,
+            lineHeight: '1em',
+            textAlign: 'center'
+          },
+          children: label
+        })
+      })
+    }, key)]
+  });
 };
 export default PreviewStyles;
 //# sourceMappingURL=preview-styles.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["privateApis","blockEditorPrivateApis","__experimentalHStack","HStack","__experimentalVStack","VStack","__unstableMotion","motion","unlock","useStylesPreviewColors","TypographyExample","HighlightedColors","PreviewIframe","useGlobalStyle","firstFrameVariants","start","scale","opacity","hover","midFrameVariants","secondFrameVariants","PreviewStyles","label","isFocused","withHoverView","variation","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","paletteColors","createElement","ratio","key","div","variants","style","height","overflow","spacing","justify","fontSize","normalizedColorSwatchSize","width","position","top","filter","slice","map","color","index","background","flexGrow","padding","boxSizing","lineHeight","textAlign"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-styles.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\nimport TypographyExample from './typography-example';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewIframe from './preview-iframe';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst firstFrameVariants = {\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 midFrameVariants = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrameVariants = {\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 PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {\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\n\tconst { paletteColors } = useStylesPreviewColors();\n\n\treturn (\n\t\t<PreviewIframe\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\t\tfontSize={ 65 * ratio }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t<HighlightedColors\n\t\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 32 }\n\t\t\t\t\t\t\t\tratio={ ratio }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ withHoverView && midFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ secondFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewIframe>\n\t);\n};\n\nexport default PreviewStyles;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["privateApis","blockEditorPrivateApis","__experimentalHStack","HStack","__experimentalVStack","VStack","__unstableMotion","motion","unlock","useStylesPreviewColors","TypographyExample","HighlightedColors","PreviewIframe","jsx","_jsx","jsxs","_jsxs","useGlobalStyle","firstFrameVariants","start","scale","opacity","hover","midFrameVariants","secondFrameVariants","PreviewStyles","label","isFocused","withHoverView","variation","fontWeight","fontFamily","headingFontFamily","headingFontWeight","textColor","headingColor","paletteColors","children","ratio","key","div","variants","style","height","overflow","spacing","justify","fontSize","normalizedColorSwatchSize","width","position","top","filter","slice","map","color","index","background","flexGrow","padding","boxSizing","lineHeight","textAlign"],"sources":["@wordpress/edit-site/src/components/global-styles/preview-styles.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport { useStylesPreviewColors } from './hooks';\nimport TypographyExample from './typography-example';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewIframe from './preview-iframe';\n\nconst { useGlobalStyle } = unlock( blockEditorPrivateApis );\n\nconst firstFrameVariants = {\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 midFrameVariants = {\n\thover: {\n\t\topacity: 1,\n\t},\n\tstart: {\n\t\topacity: 0.5,\n\t},\n};\n\nconst secondFrameVariants = {\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 PreviewStyles = ( { label, isFocused, withHoverView, variation } ) => {\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\n\tconst { paletteColors } = useStylesPreviewColors();\n\n\treturn (\n\t\t<PreviewIframe\n\t\t\tlabel={ label }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ firstFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<TypographyExample\n\t\t\t\t\t\t\tfontSize={ 65 * ratio }\n\t\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<VStack spacing={ 4 * ratio }>\n\t\t\t\t\t\t\t<HighlightedColors\n\t\t\t\t\t\t\t\tnormalizedColorSwatchSize={ 32 }\n\t\t\t\t\t\t\t\tratio={ ratio }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</VStack>\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ withHoverView && midFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tfilter: 'blur(60px)',\n\t\t\t\t\t\topacity: 0.1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 0 }\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ paletteColors\n\t\t\t\t\t\t\t.slice( 0, 4 )\n\t\t\t\t\t\t\t.map( ( { color }, index ) => (\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tbackground: color,\n\t\t\t\t\t\t\t\t\t\tflexGrow: 1,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t</HStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tvariants={ secondFrameVariants }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<VStack\n\t\t\t\t\t\tspacing={ 3 * ratio }\n\t\t\t\t\t\tjustify=\"center\"\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\toverflow: 'hidden',\n\t\t\t\t\t\t\tpadding: 10 * ratio,\n\t\t\t\t\t\t\tboxSizing: 'border-box',\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ label && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\tfontSize: 40 * ratio,\n\t\t\t\t\t\t\t\t\tfontFamily: headingFontFamily,\n\t\t\t\t\t\t\t\t\tcolor: headingColor,\n\t\t\t\t\t\t\t\t\tfontWeight: headingFontWeight,\n\t\t\t\t\t\t\t\t\tlineHeight: '1em',\n\t\t\t\t\t\t\t\t\ttextAlign: 'center',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</VStack>\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</PreviewIframe>\n\t);\n};\n\nexport default PreviewStyles;\n"],"mappings":"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","ignoreList":[]}