@wordpress/global-styles-ui 1.1.0

package/build-module/preview-styles.js

@@ -0,0 +1,193 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  __experimentalHStack as HStack,
+  __experimentalVStack as VStack,
+  __unstableMotion as motion
+} from "@wordpress/components";
+import { useStyle } from "./hooks";
+import { useStylesPreviewColors } from "./preview-hooks";
+import TypographyExample from "./typography-example";
+import HighlightedColors from "./highlighted-colors";
+import PreviewWrapper from "./preview-wrapper";
+const firstFrameVariants = {
+  start: {
+    scale: 1,
+    opacity: 1
+  },
+  hover: {
+    scale: 0,
+    opacity: 0
+  }
+};
+const midFrameVariants = {
+  hover: {
+    opacity: 1
+  },
+  start: {
+    opacity: 0.5
+  }
+};
+const secondFrameVariants = {
+  hover: {
+    scale: 1,
+    opacity: 1
+  },
+  start: {
+    scale: 0,
+    opacity: 0
+  }
+};
+function PreviewStyles({
+  label,
+  isFocused,
+  withHoverView,
+  variation
+}) {
+  const [fontWeight] = useStyle("typography.fontWeight");
+  const [fontFamily = "serif"] = useStyle(
+    "typography.fontFamily"
+  );
+  const [headingFontFamily = fontFamily] = useStyle(
+    "elements.h1.typography.fontFamily"
+  );
+  const [headingFontWeight = fontWeight] = useStyle(
+    "elements.h1.typography.fontWeight"
+  );
+  const [textColor = "black"] = useStyle("color.text");
+  const [headingColor = textColor] = useStyle(
+    "elements.h1.color.text"
+  );
+  const { paletteColors } = useStylesPreviewColors();
+  return /* @__PURE__ */ jsxs(
+    PreviewWrapper,
+    {
+      label,
+      isFocused,
+      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
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(VStack, { spacing: 4 * ratio, children: /* @__PURE__ */ jsx(
+                    HighlightedColors,
+                    {
+                      normalizedColorSwatchSize: 32,
+                      ratio
+                    }
+                  ) })
+                ]
+              }
+            )
+          },
+          key
+        ),
+        ({ key }) => /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: withHoverView ? midFrameVariants : void 0,
+            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
+        )
+      ]
+    }
+  );
+}
+var preview_styles_default = PreviewStyles;
+export {
+  preview_styles_default as default
+};
+//# sourceMappingURL=preview-styles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-styles.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\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 { useStyle } from './hooks';\nimport { useStylesPreviewColors } from './preview-hooks';\nimport TypographyExample from './typography-example';\nimport HighlightedColors from './highlighted-colors';\nimport PreviewWrapper from './preview-wrapper';\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\ninterface PreviewStylesProps {\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n\tvariation?: any;\n}\n\nfunction PreviewStyles( {\n\tlabel,\n\tisFocused,\n\twithHoverView,\n\tvariation,\n}: PreviewStylesProps ) {\n\tconst [ fontWeight ] = useStyle< string >( 'typography.fontWeight' );\n\tconst [ fontFamily = 'serif' ] = useStyle< string >(\n\t\t'typography.fontFamily'\n\t);\n\tconst [ headingFontFamily = fontFamily ] = useStyle< string >(\n\t\t'elements.h1.typography.fontFamily'\n\t);\n\tconst [ headingFontWeight = fontWeight ] = useStyle< string >(\n\t\t'elements.h1.typography.fontWeight'\n\t);\n\tconst [ textColor = 'black' ] = useStyle< string >( 'color.text' );\n\tconst [ headingColor = textColor ] = useStyle< string >(\n\t\t'elements.h1.color.text'\n\t);\n\n\tconst { paletteColors } = useStylesPreviewColors();\n\n\treturn (\n\t\t<PreviewWrapper\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 : undefined }\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</PreviewWrapper>\n\t);\n}\n\nexport default PreviewStyles;\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/preview-typography.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { __experimentalHStack as HStack } from "@wordpress/components";
+import TypographyExample from "./typography-example";
+import PreviewWrapper from "./preview-wrapper";
+const StylesPreviewTypography = ({
+  variation,
+  isFocused,
+  withHoverView
+}) => {
+  return /* @__PURE__ */ jsx(
+    PreviewWrapper,
+    {
+      label: variation.title,
+      isFocused,
+      withHoverView,
+      children: ({ ratio, key }) => /* @__PURE__ */ jsx(
+        HStack,
+        {
+          spacing: 10 * ratio,
+          justify: "center",
+          style: {
+            height: "100%",
+            overflow: "hidden"
+          },
+          children: /* @__PURE__ */ jsx(
+            TypographyExample,
+            {
+              variation,
+              fontSize: 85 * ratio
+            }
+          )
+        },
+        key
+      )
+    }
+  );
+};
+var preview_typography_default = StylesPreviewTypography;
+export {
+  preview_typography_default as default
+};
+//# sourceMappingURL=preview-typography.js.map

package/build-module/preview-typography.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-typography.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalHStack as HStack } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport TypographyExample from './typography-example';\nimport PreviewWrapper from './preview-wrapper';\n\ninterface StylesPreviewTypographyProps {\n\tvariation: any;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nconst StylesPreviewTypography = ( {\n\tvariation,\n\tisFocused,\n\twithHoverView,\n}: StylesPreviewTypographyProps ) => {\n\treturn (\n\t\t<PreviewWrapper\n\t\t\tlabel={ variation.title }\n\t\t\tisFocused={ isFocused }\n\t\t\twithHoverView={ withHoverView }\n\t\t>\n\t\t\t{ ( { ratio, key } ) => (\n\t\t\t\t<HStack\n\t\t\t\t\tkey={ key }\n\t\t\t\t\tspacing={ 10 * ratio }\n\t\t\t\t\tjustify=\"center\"\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<TypographyExample\n\t\t\t\t\t\tvariation={ variation }\n\t\t\t\t\t\tfontSize={ 85 * ratio }\n\t\t\t\t\t/>\n\t\t\t\t</HStack>\n\t\t\t) }\n\t\t</PreviewWrapper>\n\t);\n};\n\nexport default StylesPreviewTypography;\n"],
+  "mappings": "AAsCK;AAnCL,SAAS,wBAAwB,cAAc;AAK/C,OAAO,uBAAuB;AAC9B,OAAO,oBAAoB;AAQ3B,MAAM,0BAA0B,CAAE;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACD,MAAqC;AACpC,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,UAAU;AAAA,MAClB;AAAA,MACA;AAAA,MAEE,WAAE,EAAE,OAAO,IAAI,MAChB;AAAA,QAAC;AAAA;AAAA,UAEA,SAAU,KAAK;AAAA,UACf,SAAQ;AAAA,UACR,OAAQ;AAAA,YACP,QAAQ;AAAA,YACR,UAAU;AAAA,UACX;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,UAAW,KAAK;AAAA;AAAA,UACjB;AAAA;AAAA,QAXM;AAAA,MAYP;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,6BAAQ;",
+  "names": []
+}

package/build-module/preview-wrapper.js

@@ -0,0 +1,86 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __unstableMotion as motion } from "@wordpress/components";
+import {
+  useThrottle,
+  useReducedMotion,
+  useResizeObserver
+} from "@wordpress/compose";
+import { useLayoutEffect, useState } from "@wordpress/element";
+import { useStyle } from "./hooks";
+const normalizedWidth = 248;
+const normalizedHeight = 152;
+const THROTTLE_OPTIONS = {
+  leading: true,
+  trailing: true
+};
+function PreviewWrapper({
+  children,
+  label,
+  isFocused,
+  withHoverView
+}) {
+  const [backgroundColor = "white"] = useStyle("color.background");
+  const [gradientValue] = useStyle("color.gradient");
+  const disableMotion = useReducedMotion();
+  const [isHovered, setIsHovered] = useState(false);
+  const [containerResizeListener, { width }] = useResizeObserver();
+  const [throttledWidth, setThrottledWidthState] = useState(width);
+  const [ratioState, setRatioState] = useState();
+  const setThrottledWidth = useThrottle(
+    setThrottledWidthState,
+    250,
+    THROTTLE_OPTIONS
+  );
+  useLayoutEffect(() => {
+    if (width) {
+      setThrottledWidth(width);
+    }
+  }, [width, setThrottledWidth]);
+  useLayoutEffect(() => {
+    const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
+    const ratioDiff = newRatio - (ratioState || 0);
+    const isRatioDiffBigEnough = Math.abs(ratioDiff) > 0.1;
+    if (isRatioDiffBigEnough || !ratioState) {
+      setRatioState(newRatio);
+    }
+  }, [throttledWidth, ratioState]);
+  const fallbackRatio = width ? width / normalizedWidth : 1;
+  const ratio = ratioState ? ratioState : fallbackRatio;
+  const isReady = !!width;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { style: { position: "relative" }, children: containerResizeListener }),
+    isReady && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "global-styles-ui-preview__wrapper",
+        style: {
+          height: normalizedHeight * ratio
+        },
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        tabIndex: -1,
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            style: {
+              height: normalizedHeight * ratio,
+              width: "100%",
+              background: gradientValue ?? backgroundColor,
+              cursor: withHoverView ? "pointer" : void 0
+            },
+            initial: "start",
+            animate: (isHovered || isFocused) && !disableMotion && label ? "hover" : "start",
+            children: [].concat(children).map(
+              (child, key) => child({ ratio, key })
+            )
+          }
+        )
+      }
+    )
+  ] });
+}
+var preview_wrapper_default = PreviewWrapper;
+export {
+  preview_wrapper_default as default
+};
+//# sourceMappingURL=preview-wrapper.js.map

package/build-module/preview-wrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/preview-wrapper.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\nimport {\n\tuseThrottle,\n\tuseReducedMotion,\n\tuseResizeObserver,\n} from '@wordpress/compose';\nimport { useLayoutEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useStyle } from './hooks';\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\ninterface PreviewWrapperProps {\n\tchildren:\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )\n\t\t| ( ( args: { ratio: number; key: number } ) => React.ReactNode )[];\n\tlabel?: string;\n\tisFocused?: boolean;\n\twithHoverView?: boolean;\n}\n\nfunction PreviewWrapper( {\n\tchildren,\n\tlabel,\n\tisFocused,\n\twithHoverView,\n}: PreviewWrapperProps ) {\n\tconst [ backgroundColor = 'white' ] =\n\t\tuseStyle< string >( 'color.background' );\n\tconst [ gradientValue ] = useStyle< string >( 'color.gradient' );\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< number | undefined >();\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 container  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 container 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\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<div\n\t\t\t\t\tclassName=\"global-styles-ui-preview__wrapper\"\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t} }\n\t\t\t\t\tonMouseEnter={ () => setIsHovered( true ) }\n\t\t\t\t\tonMouseLeave={ () => setIsHovered( false ) }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t>\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\theight: normalizedHeight * ratio,\n\t\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\t\tbackground: gradientValue ?? backgroundColor,\n\t\t\t\t\t\t\tcursor: 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 as any ) // This makes sure children is always an array.\n\t\t\t\t\t\t\t.map( ( child: any, key: number ) =>\n\t\t\t\t\t\t\t\tchild( { ratio, key } )\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default PreviewWrapper;\n"],
+  "mappings": "AA8FE,mBACC,KADD;AA3FF,SAAS,oBAAoB,cAAc;AAC3C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB,gBAAgB;AAK1C,SAAS,gBAAgB;AAEzB,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AAIzB,MAAM,mBAAmB;AAAA,EACxB,SAAS;AAAA,EACT,UAAU;AACX;AAWA,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,CAAE,kBAAkB,OAAQ,IACjC,SAAoB,kBAAmB;AACxC,QAAM,CAAE,aAAc,IAAI,SAAoB,gBAAiB;AAC/D,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AACpD,QAAM,CAAE,yBAAyB,EAAE,MAAM,CAAE,IAAI,kBAAkB;AACjE,QAAM,CAAE,gBAAgB,sBAAuB,IAAI,SAAU,KAAM;AACnE,QAAM,CAAE,YAAY,aAAc,IAAI,SAA+B;AAErE,QAAM,oBAAoB;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAIA,kBAAiB,MAAM;AACtB,QAAK,OAAQ;AACZ,wBAAmB,KAAM;AAAA,IAC1B;AAAA,EACD,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAIhC,kBAAiB,MAAM;AACtB,UAAM,WAAW,iBAAiB,iBAAiB,kBAAkB;AACrE,UAAM,YAAY,YAAa,cAAc;AAM7C,UAAM,uBAAuB,KAAK,IAAK,SAAU,IAAI;AAErD,QAAK,wBAAwB,CAAE,YAAa;AAC3C,oBAAe,QAAS;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,gBAAgB,UAAW,CAAE;AAGlC,QAAM,gBAAgB,QAAQ,QAAQ,kBAAkB;AAOxD,QAAM,QAAQ,aAAa,aAAa;AAExC,QAAM,UAAU,CAAC,CAAE;AAEnB,SACC,iCACC;AAAA,wBAAC,SAAI,OAAQ,EAAE,UAAU,WAAW,GACjC,mCACH;AAAA,IACE,WACD;AAAA,MAAC;AAAA;AAAA,QACA,WAAU;AAAA,QACV,OAAQ;AAAA,UACP,QAAQ,mBAAmB;AAAA,QAC5B;AAAA,QACA,cAAe,MAAM,aAAc,IAAK;AAAA,QACxC,cAAe,MAAM,aAAc,KAAM;AAAA,QACzC,UAAW;AAAA,QAEX;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,OAAQ;AAAA,cACP,QAAQ,mBAAmB;AAAA,cAC3B,OAAO;AAAA,cACP,YAAY,iBAAiB;AAAA,cAC7B,QAAQ,gBAAgB,YAAY;AAAA,YACrC;AAAA,YACA,SAAQ;AAAA,YACR,UACG,aAAa,cACf,CAAE,iBACF,QACG,UACA;AAAA,YAGF,WAAC,EACD,OAAQ,QAAgB,EACxB;AAAA,cAAK,CAAE,OAAY,QACnB,MAAO,EAAE,OAAO,IAAI,CAAE;AAAA,YACvB;AAAA;AAAA,QACF;AAAA;AAAA,IACD;AAAA,KAEF;AAEF;AAEA,IAAO,0BAAQ;",
+  "names": []
+}

package/build-module/provider.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "@wordpress/element";
+import { mergeGlobalStyles } from "@wordpress/global-styles-engine";
+import { GlobalStylesContext } from "./context";
+function GlobalStylesProvider({
+  children,
+  value,
+  baseValue,
+  onChange,
+  fontLibraryEnabled
+}) {
+  const merged = useMemo(() => {
+    return mergeGlobalStyles(baseValue, value);
+  }, [baseValue, value]);
+  const contextValue = useMemo(
+    () => ({
+      user: value,
+      base: baseValue,
+      merged,
+      onChange,
+      fontLibraryEnabled
+    }),
+    [value, baseValue, merged, onChange, fontLibraryEnabled]
+  );
+  return /* @__PURE__ */ jsx(GlobalStylesContext.Provider, { value: contextValue, children });
+}
+export {
+  GlobalStylesProvider
+};
+//# sourceMappingURL=provider.js.map

package/build-module/provider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/provider.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\nimport { mergeGlobalStyles } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesContext } from './context';\n\ninterface GlobalStylesProviderProps {\n\tchildren: ReactNode;\n\tvalue: GlobalStylesConfig;\n\tbaseValue: GlobalStylesConfig;\n\tonChange: ( newValue: GlobalStylesConfig ) => void;\n\tfontLibraryEnabled?: boolean;\n}\n\nexport function GlobalStylesProvider( {\n\tchildren,\n\tvalue,\n\tbaseValue,\n\tonChange,\n\tfontLibraryEnabled,\n}: GlobalStylesProviderProps ) {\n\t// Compute merged with memoization since merging can be expensive\n\tconst merged = useMemo( () => {\n\t\treturn mergeGlobalStyles( baseValue, value );\n\t}, [ baseValue, value ] );\n\n\tconst contextValue = useMemo(\n\t\t() => ( {\n\t\t\tuser: value,\n\t\t\tbase: baseValue,\n\t\t\tmerged,\n\t\t\tonChange,\n\t\t\tfontLibraryEnabled,\n\t\t} ),\n\t\t[ value, baseValue, merged, onChange, fontLibraryEnabled ]\n\t);\n\n\treturn (\n\t\t<GlobalStylesContext.Provider value={ contextValue }>\n\t\t\t{ children }\n\t\t</GlobalStylesContext.Provider>\n\t);\n}\n"],
+  "mappings": "AAiDE;AAzCF,SAAS,eAAe;AAExB,SAAS,yBAAyB;AAKlC,SAAS,2BAA2B;AAU7B,SAAS,qBAAsB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAA+B;AAE9B,QAAM,SAAS,QAAS,MAAM;AAC7B,WAAO,kBAAmB,WAAW,KAAM;AAAA,EAC5C,GAAG,CAAE,WAAW,KAAM,CAAE;AAExB,QAAM,eAAe;AAAA,IACpB,OAAQ;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,IACD;AAAA,IACA,CAAE,OAAO,WAAW,QAAQ,UAAU,kBAAmB;AAAA,EAC1D;AAEA,SACC,oBAAC,oBAAoB,UAApB,EAA6B,OAAQ,cACnC,UACH;AAEF;",
+  "names": []
+}

package/build-module/root-menu.js

@@ -0,0 +1,58 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __experimentalItemGroup as ItemGroup } from "@wordpress/components";
+import {
+  background,
+  typography,
+  color,
+  layout,
+  shadow as shadowIcon
+} from "@wordpress/icons";
+import { __ } from "@wordpress/i18n";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { NavigationButtonAsItem } from "./navigation-button";
+import { useSetting } from "./hooks";
+import { unlock } from "./lock-unlock";
+const {
+  useHasDimensionsPanel,
+  useHasTypographyPanel,
+  useHasColorPanel,
+  useSettingsForBlockElement,
+  useHasBackgroundPanel
+} = unlock(blockEditorPrivateApis);
+function RootMenu() {
+  const [rawSettings] = useSetting("");
+  const settings = useSettingsForBlockElement(rawSettings);
+  const hasBackgroundPanel = useHasBackgroundPanel(rawSettings);
+  const hasTypographyPanel = useHasTypographyPanel(settings);
+  const hasColorPanel = useHasColorPanel(settings);
+  const hasShadowPanel = true;
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
+  const hasLayoutPanel = hasDimensionsPanel;
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(ItemGroup, { children: [
+    hasTypographyPanel && /* @__PURE__ */ jsx(
+      NavigationButtonAsItem,
+      {
+        icon: typography,
+        path: "/typography",
+        children: __("Typography")
+      }
+    ),
+    hasColorPanel && /* @__PURE__ */ jsx(NavigationButtonAsItem, { icon: color, path: "/colors", children: __("Colors") }),
+    hasBackgroundPanel && /* @__PURE__ */ jsx(
+      NavigationButtonAsItem,
+      {
+        icon: background,
+        path: "/background",
+        "aria-label": __("Background styles"),
+        children: __("Background")
+      }
+    ),
+    hasShadowPanel && /* @__PURE__ */ jsx(NavigationButtonAsItem, { icon: shadowIcon, path: "/shadows", children: __("Shadows") }),
+    hasLayoutPanel && /* @__PURE__ */ jsx(NavigationButtonAsItem, { icon: layout, path: "/layout", children: __("Layout") })
+  ] }) });
+}
+var root_menu_default = RootMenu;
+export {
+  root_menu_default as default
+};
+//# sourceMappingURL=root-menu.js.map

package/build-module/root-menu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/root-menu.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __experimentalItemGroup as ItemGroup } from '@wordpress/components';\nimport {\n\tbackground,\n\ttypography,\n\tcolor,\n\tlayout,\n\tshadow as shadowIcon,\n} from '@wordpress/icons';\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport type { GlobalStylesSettings } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasColorPanel,\n\tuseSettingsForBlockElement,\n\tuseHasBackgroundPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction RootMenu() {\n\t// Get the raw settings from our custom hook\n\tconst [ rawSettings ] = useSetting< GlobalStylesSettings >( '' );\n\n\t// Process settings the same way as Gutenberg\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\t// Use the same panel detection logic as Gutenberg\n\tconst hasBackgroundPanel = useHasBackgroundPanel( rawSettings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasShadowPanel = true; // Same as Gutenberg\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>\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 icon={ color } path=\"/colors\">\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{ hasBackgroundPanel && (\n\t\t\t\t\t<NavigationButtonAsItem\n\t\t\t\t\t\ticon={ background }\n\t\t\t\t\t\tpath=\"/background\"\n\t\t\t\t\t\taria-label={ __( 'Background styles' ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Background' ) }\n\t\t\t\t\t</NavigationButtonAsItem>\n\t\t\t\t) }\n\t\t\t\t{ hasShadowPanel && (\n\t\t\t\t\t<NavigationButtonAsItem icon={ shadowIcon } path=\"/shadows\">\n\t\t\t\t\t\t{ __( 'Shadows' ) }\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 icon={ layout } path=\"/layout\">\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": "AA+CE,mBAGG,KAFF,YADD;AA5CF,SAAS,2BAA2B,iBAAiB;AACrD;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,OACJ;AACP,SAAS,UAAU;AAEnB,SAAS,eAAe,8BAA8B;AAMtD,SAAS,8BAA8B;AACvC,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,MAAM;AAAA,EACL;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,IAAI,OAAQ,sBAAuB;AAEnC,SAAS,WAAW;AAEnB,QAAM,CAAE,WAAY,IAAI,WAAoC,EAAG;AAG/D,QAAM,WAAW,2BAA4B,WAAY;AAGzD,QAAM,qBAAqB,sBAAuB,WAAY;AAC9D,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,QAAM,gBAAgB,iBAAkB,QAAS;AACjD,QAAM,iBAAiB;AACvB,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,QAAM,iBAAiB;AAEvB,SACC,gCACC,+BAAC,aACE;AAAA,0BACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,MAAK;AAAA,QAEH,aAAI,YAAa;AAAA;AAAA,IACpB;AAAA,IAEC,iBACD,oBAAC,0BAAuB,MAAO,OAAQ,MAAK,WACzC,aAAI,QAAS,GAChB;AAAA,IAEC,sBACD;AAAA,MAAC;AAAA;AAAA,QACA,MAAO;AAAA,QACP,MAAK;AAAA,QACL,cAAa,GAAI,mBAAoB;AAAA,QAEnC,aAAI,YAAa;AAAA;AAAA,IACpB;AAAA,IAEC,kBACD,oBAAC,0BAAuB,MAAO,YAAa,MAAK,YAC9C,aAAI,SAAU,GACjB;AAAA,IAEC,kBACD,oBAAC,0BAAuB,MAAO,QAAS,MAAK,WAC1C,aAAI,QAAS,GAChB;AAAA,KAEF,GACD;AAEF;AAEA,IAAO,oBAAQ;",
+  "names": []
+}

package/build-module/screen-background.js

@@ -0,0 +1,28 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __ } from "@wordpress/i18n";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { __experimentalText as Text } from "@wordpress/components";
+import BackgroundPanel from "./background-panel";
+import { ScreenHeader } from "./screen-header";
+import { useSetting } from "./hooks";
+import { unlock } from "./lock-unlock";
+const { useHasBackgroundPanel } = unlock(blockEditorPrivateApis);
+function ScreenBackground() {
+  const [settings] = useSetting("");
+  const hasBackgroundPanel = useHasBackgroundPanel(settings);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ScreenHeader,
+      {
+        title: __("Background"),
+        description: /* @__PURE__ */ jsx(Text, { children: __("Set styles for the site's background.") })
+      }
+    ),
+    hasBackgroundPanel && /* @__PURE__ */ jsx(BackgroundPanel, {})
+  ] });
+}
+var screen_background_default = ScreenBackground;
+export {
+  screen_background_default as default
+};
+//# sourceMappingURL=screen-background.js.map

package/build-module/screen-background.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-background.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { __experimentalText as Text } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport BackgroundPanel from './background-panel';\nimport { ScreenHeader } from './screen-header';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useHasBackgroundPanel } = unlock( blockEditorPrivateApis );\n\nfunction ScreenBackground() {\n\tconst [ settings ] = useSetting( '' );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Background' ) }\n\t\t\t\tdescription={\n\t\t\t\t\t<Text>\n\t\t\t\t\t\t{ __( \"Set styles for the site's background.\" ) }\n\t\t\t\t\t</Text>\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ hasBackgroundPanel && <BackgroundPanel /> }\n\t\t</>\n\t);\n}\n\nexport default ScreenBackground;\n"],
+  "mappings": "AAsBE,mBAIG,KAJH;AAnBF,SAAS,UAAU;AAEnB,SAAS,eAAe,8BAA8B;AACtD,SAAS,sBAAsB,YAAY;AAK3C,OAAO,qBAAqB;AAC5B,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAC3B,SAAS,cAAc;AAEvB,MAAM,EAAE,sBAAsB,IAAI,OAAQ,sBAAuB;AAEjE,SAAS,mBAAmB;AAC3B,QAAM,CAAE,QAAS,IAAI,WAAY,EAAG;AACpC,QAAM,qBAAqB,sBAAuB,QAAS;AAC3D,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,YAAa;AAAA,QACzB,aACC,oBAAC,QACE,aAAI,uCAAwC,GAC/C;AAAA;AAAA,IAEF;AAAA,IACE,sBAAsB,oBAAC,mBAAgB;AAAA,KAC1C;AAEF;AAEA,IAAO,4BAAQ;",
+  "names": []
+}