@wordpress/global-styles-ui 1.1.0

package/build/global-styles-ui.js

@@ -0,0 +1,213 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var global_styles_ui_exports = {};
+__export(global_styles_ui_exports, {
+  GlobalStylesUI: () => GlobalStylesUI
+});
+module.exports = __toCommonJS(global_styles_ui_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_blocks = require("@wordpress/blocks");
+var import_data = require("@wordpress/data");
+var import_block_editor = require("@wordpress/block-editor");
+var import_element = require("@wordpress/element");
+var import_compose = require("@wordpress/compose");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+var import_provider = require("./provider");
+var import_screen_root = __toESM(require("./screen-root"));
+var import_screen_block_list = __toESM(require("./screen-block-list"));
+var import_screen_block = __toESM(require("./screen-block"));
+var import_screen_typography = __toESM(require("./screen-typography"));
+var import_screen_typography_element = __toESM(require("./screen-typography-element"));
+var import_screen_colors = __toESM(require("./screen-colors"));
+var import_screen_color_palette = __toESM(require("./screen-color-palette"));
+var import_screen_background = __toESM(require("./screen-background"));
+var import_screen_shadows = require("./screen-shadows");
+var import_screen_layout = __toESM(require("./screen-layout"));
+var import_screen_style_variations = __toESM(require("./screen-style-variations"));
+var import_screen_css = __toESM(require("./screen-css"));
+var import_screen_revisions = __toESM(require("./screen-revisions"));
+var import_font_sizes = __toESM(require("./font-sizes/font-sizes"));
+var import_font_size = __toESM(require("./font-sizes/font-size"));
+function BlockStylesNavigationScreens({
+  parentMenu,
+  blockStyles,
+  blockName
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: blockStyles.map((style, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Navigator.Screen,
+    {
+      path: parentMenu + "/variations/" + style.name,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_block.default, { name: blockName, variation: style.name })
+    },
+    index
+  )) });
+}
+function ContextScreens({ name, parentMenu = "" }) {
+  const blockStyleVariations = (0, import_data.useSelect)(
+    (select) => {
+      if (!name) {
+        return [];
+      }
+      const { getBlockStyles } = select(import_blocks.store);
+      return getBlockStyles(name);
+    },
+    [name]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: parentMenu + "/colors/palette", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_color_palette.default, { name }) }),
+    !!blockStyleVariations?.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      BlockStylesNavigationScreens,
+      {
+        parentMenu,
+        blockStyles: blockStyleVariations,
+        blockName: name || ""
+      }
+    )
+  ] });
+}
+function GlobalStylesUI({
+  value,
+  baseValue,
+  onChange,
+  path,
+  onPathChange,
+  fontLibraryEnabled = false,
+  serverCSS,
+  serverSettings
+}) {
+  const blocks = (0, import_blocks.getBlockTypes)();
+  const mergedValue = (0, import_element.useMemo)(() => {
+    return (0, import_global_styles_engine.mergeGlobalStyles)(baseValue, value);
+  }, [baseValue, value]);
+  const [globalStylesCSS, globalSettings] = (0, import_global_styles_engine.generateGlobalStyles)(mergedValue);
+  const styles = (0, import_element.useMemo)(
+    () => [...serverCSS ?? [], ...globalStylesCSS ?? []],
+    [serverCSS, globalStylesCSS]
+  );
+  const settings = (0, import_element.useMemo)(() => {
+    return {
+      ...serverSettings,
+      __experimentalFeatures: globalSettings,
+      styles
+    };
+  }, [globalSettings, serverSettings, styles]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_provider.GlobalStylesProvider,
+    {
+      value,
+      baseValue,
+      onChange,
+      fontLibraryEnabled,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_editor.BlockEditorProvider, { settings, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        import_components.Navigator,
+        {
+          className: "global-styles-ui-sidebar__navigator-provider",
+          initialPath: path || "/",
+          children: [
+            (path || onPathChange) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              PathSynchronizer,
+              {
+                path,
+                onPathChange
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_root.default, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/colors", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_colors.default, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/typography", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography.default, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/typography/font-sizes", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_font_sizes.default, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/typography/font-sizes/:origin/:slug", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_font_size.default, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/layout", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_layout.default, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/colors/palette", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_color_palette.default, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/variations", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_style_variations.default, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/css", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_css.default, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/revisions/:revisionId?", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_revisions.default, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/shadows", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_shadows.ScreenShadows, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/shadows/edit/:category/:slug", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_shadows.ScreenShadowsEdit, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/background", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_background.default, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/typography/text", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "text" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/typography/link", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "link" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/typography/heading", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "heading" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/typography/caption", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "caption" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/typography/button", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_typography_element.default, { element: "button" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Navigator.Screen, { path: "/blocks", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_block_list.default, {}) }),
+            blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_components.Navigator.Screen,
+              {
+                path: "/blocks/" + encodeURIComponent(block.name),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_block.default, { name: block.name })
+              },
+              "menu-block-" + block.name
+            )),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ContextScreens, {}),
+            blocks.map((block) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ContextScreens,
+              {
+                name: block.name,
+                parentMenu: "/blocks/" + encodeURIComponent(block.name)
+              },
+              "screens-block-" + block.name
+            ))
+          ]
+        }
+      ) })
+    }
+  );
+}
+function PathSynchronizer({
+  path,
+  onPathChange
+}) {
+  const navigator = (0, import_components.useNavigator)();
+  const { path: childPath } = navigator.location;
+  const previousParentPath = (0, import_compose.usePrevious)(path);
+  const previousChildPath = (0, import_compose.usePrevious)(childPath);
+  (0, import_element.useEffect)(() => {
+    if (path && path !== childPath) {
+      if (path !== previousParentPath) {
+        navigator.goTo(path);
+      } else if (childPath !== previousChildPath && onPathChange) {
+        onPathChange(childPath ?? "/");
+      }
+    }
+  }, [
+    onPathChange,
+    path,
+    previousChildPath,
+    previousParentPath,
+    childPath,
+    navigator
+  ]);
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GlobalStylesUI
+});
+//# sourceMappingURL=global-styles-ui.js.map

package/build/global-styles-ui.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/global-styles-ui.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Navigator, useNavigator } from '@wordpress/components';\n// @ts-expect-error: Not typed yet.\nimport { getBlockTypes, store as blocksStore } from '@wordpress/blocks';\nimport { useSelect } from '@wordpress/data';\n// @ts-expect-error: Not typed yet.\nimport { BlockEditorProvider } from '@wordpress/block-editor';\nimport { useMemo, useEffect } from '@wordpress/element';\nimport { usePrevious } from '@wordpress/compose';\nimport {\n\tgenerateGlobalStyles,\n\tmergeGlobalStyles,\n} from '@wordpress/global-styles-engine';\nimport type {\n\tGlobalStylesConfig,\n\tBlockType,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { GlobalStylesProvider } from './provider';\nimport ScreenRoot from './screen-root';\nimport ScreenBlockList from './screen-block-list';\nimport ScreenBlock from './screen-block';\nimport ScreenTypography from './screen-typography';\nimport ScreenTypographyElement from './screen-typography-element';\nimport ScreenColors from './screen-colors';\nimport ScreenColorPalette from './screen-color-palette';\nimport ScreenBackground from './screen-background';\nimport { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';\nimport ScreenLayout from './screen-layout';\nimport ScreenStyleVariations from './screen-style-variations';\nimport ScreenCSS from './screen-css';\nimport ScreenRevisions from './screen-revisions';\nimport FontSizes from './font-sizes/font-sizes';\nimport FontSize from './font-sizes/font-size';\ninterface BlockStylesNavigationScreensProps {\n\tparentMenu: string;\n\tblockStyles: any[];\n\tblockName: string;\n}\n\nfunction BlockStylesNavigationScreens( {\n\tparentMenu,\n\tblockStyles,\n\tblockName,\n}: BlockStylesNavigationScreensProps ) {\n\treturn (\n\t\t<>\n\t\t\t{ blockStyles.map( ( style, index ) => (\n\t\t\t\t<Navigator.Screen\n\t\t\t\t\tkey={ index }\n\t\t\t\t\tpath={ parentMenu + '/variations/' + style.name }\n\t\t\t\t>\n\t\t\t\t\t<ScreenBlock name={ blockName } variation={ style.name } />\n\t\t\t\t</Navigator.Screen>\n\t\t\t) ) }\n\t\t</>\n\t);\n}\n\ninterface ContextScreensProps {\n\tname?: string;\n\tparentMenu?: string;\n}\n\nfunction ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {\n\tconst blockStyleVariations = useSelect(\n\t\t( select ) => {\n\t\t\tif ( ! name ) {\n\t\t\t\treturn [];\n\t\t\t}\n\t\t\tconst { getBlockStyles } = select( blocksStore );\n\t\t\treturn getBlockStyles( name );\n\t\t},\n\t\t[ name ]\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<Navigator.Screen path={ parentMenu + '/colors/palette' }>\n\t\t\t\t<ScreenColorPalette name={ name } />\n\t\t\t</Navigator.Screen>\n\n\t\t\t{ !! blockStyleVariations?.length && (\n\t\t\t\t<BlockStylesNavigationScreens\n\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\tblockStyles={ blockStyleVariations }\n\t\t\t\t\tblockName={ name || '' }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\ninterface GlobalStylesUIProps {\n\t/** User global styles object (what gets edited) */\n\tvalue: GlobalStylesConfig;\n\t/** Base global styles object (theme default) */\n\tbaseValue: GlobalStylesConfig;\n\t/** Callback when global styles change */\n\tonChange: ( newValue: GlobalStylesConfig ) => void;\n\t/** Current navigation path (optional) */\n\tpath?: string;\n\t/** Callback when navigation path changes (optional) */\n\tonPathChange?: ( path: string ) => void;\n\t/** Whether font library is enabled (optional) */\n\tfontLibraryEnabled?: boolean;\n\t/** Server CSS styles for BlockEditorProvider (optional) */\n\tserverCSS?: { isGlobalStyles?: boolean }[];\n\t/** Server settings for BlockEditorProvider (optional) */\n\tserverSettings?: { __unstableResolvedAssets: Record< string, unknown > };\n}\n\nexport function GlobalStylesUI( {\n\tvalue,\n\tbaseValue,\n\tonChange,\n\tpath,\n\tonPathChange,\n\tfontLibraryEnabled = false,\n\tserverCSS,\n\tserverSettings,\n}: GlobalStylesUIProps ) {\n\tconst blocks = getBlockTypes();\n\n\t// Compute merged value for CSS generation\n\tconst mergedValue = useMemo( () => {\n\t\treturn mergeGlobalStyles( baseValue, value );\n\t}, [ baseValue, value ] );\n\n\tconst [ globalStylesCSS, globalSettings ] =\n\t\tgenerateGlobalStyles( mergedValue );\n\tconst styles = useMemo(\n\t\t() => [ ...( serverCSS ?? [] ), ...( globalStylesCSS ?? [] ) ],\n\t\t[ serverCSS, globalStylesCSS ]\n\t);\n\n\tconst settings = useMemo( () => {\n\t\treturn {\n\t\t\t...serverSettings,\n\t\t\t__experimentalFeatures: globalSettings,\n\t\t\tstyles,\n\t\t};\n\t}, [ globalSettings, serverSettings, styles ] );\n\n\treturn (\n\t\t<GlobalStylesProvider\n\t\t\tvalue={ value }\n\t\t\tbaseValue={ baseValue }\n\t\t\tonChange={ onChange }\n\t\t\tfontLibraryEnabled={ fontLibraryEnabled }\n\t\t>\n\t\t\t<BlockEditorProvider settings={ settings }>\n\t\t\t\t<Navigator\n\t\t\t\t\tclassName=\"global-styles-ui-sidebar__navigator-provider\"\n\t\t\t\t\tinitialPath={ path || '/' }\n\t\t\t\t>\n\t\t\t\t\t{ ( path || onPathChange ) && (\n\t\t\t\t\t\t<PathSynchronizer\n\t\t\t\t\t\t\tpath={ path }\n\t\t\t\t\t\t\tonPathChange={ onPathChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t\t<Navigator.Screen path=\"/\">\n\t\t\t\t\t\t<ScreenRoot />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/colors\">\n\t\t\t\t\t\t<ScreenColors />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography\">\n\t\t\t\t\t\t<ScreenTypography />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/font-sizes\">\n\t\t\t\t\t\t<FontSizes />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/font-sizes/:origin/:slug\">\n\t\t\t\t\t\t<FontSize />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/layout\">\n\t\t\t\t\t\t<ScreenLayout />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/colors/palette\">\n\t\t\t\t\t\t<ScreenColorPalette />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/variations\">\n\t\t\t\t\t\t<ScreenStyleVariations />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/css\">\n\t\t\t\t\t\t<ScreenCSS />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/revisions/:revisionId?\">\n\t\t\t\t\t\t<ScreenRevisions />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/shadows\">\n\t\t\t\t\t\t<ScreenShadows />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/shadows/edit/:category/:slug\">\n\t\t\t\t\t\t<ScreenShadowsEdit />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/background\">\n\t\t\t\t\t\t<ScreenBackground />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/text\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"text\" />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/link\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"link\" />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/heading\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"heading\" />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/caption\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"caption\" />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/typography/button\">\n\t\t\t\t\t\t<ScreenTypographyElement element=\"button\" />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t<Navigator.Screen path=\"/blocks\">\n\t\t\t\t\t\t<ScreenBlockList />\n\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<Navigator.Screen\n\t\t\t\t\t\t\tkey={ 'menu-block-' + block.name }\n\t\t\t\t\t\t\tpath={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ScreenBlock name={ block.name } />\n\t\t\t\t\t\t</Navigator.Screen>\n\t\t\t\t\t) ) }\n\n\t\t\t\t\t<ContextScreens />\n\n\t\t\t\t\t{ blocks.map( ( block: BlockType ) => (\n\t\t\t\t\t\t<ContextScreens\n\t\t\t\t\t\t\tkey={ 'screens-block-' + block.name }\n\t\t\t\t\t\t\tname={ block.name }\n\t\t\t\t\t\t\tparentMenu={\n\t\t\t\t\t\t\t\t'/blocks/' + encodeURIComponent( block.name )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</Navigator>\n\t\t\t</BlockEditorProvider>\n\t\t</GlobalStylesProvider>\n\t);\n}\n\n/*\n * Component that handles path synchronization between external path prop and Navigator's internal path.\n */\nfunction PathSynchronizer( {\n\tpath,\n\tonPathChange,\n}: {\n\tpath?: string;\n\tonPathChange?: ( path: string ) => void;\n} ) {\n\tconst navigator = useNavigator();\n\tconst { path: childPath } = navigator.location;\n\tconst previousParentPath = usePrevious( path );\n\tconst previousChildPath = usePrevious( childPath );\n\n\tuseEffect( () => {\n\t\t// Only sync when parent and child paths are out of sync\n\t\tif ( path && path !== childPath ) {\n\t\t\t// If parent path changed, update the Navigator\n\t\t\tif ( path !== previousParentPath ) {\n\t\t\t\tnavigator.goTo( path );\n\t\t\t}\n\t\t\t// If child path changed, notify parent via onPathChange\n\t\t\telse if ( childPath !== previousChildPath && onPathChange ) {\n\t\t\t\tonPathChange( childPath ?? '/' );\n\t\t\t}\n\t\t}\n\t}, [\n\t\tonPathChange,\n\t\tpath,\n\t\tpreviousChildPath,\n\t\tpreviousParentPath,\n\t\tchildPath,\n\t\tnavigator,\n\t] );\n\n\t// This component only handles synchronization logic. It doesn't render anything.\n\t// We use it to run the effect inside the Navigator context.\n\treturn null;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDE;AAhDF,wBAAwC;AAExC,oBAAoD;AACpD,kBAA0B;AAE1B,0BAAoC;AACpC,qBAAmC;AACnC,qBAA4B;AAC5B,kCAGO;AASP,sBAAqC;AACrC,yBAAuB;AACvB,+BAA4B;AAC5B,0BAAwB;AACxB,+BAA6B;AAC7B,uCAAoC;AACpC,2BAAyB;AACzB,kCAA+B;AAC/B,+BAA6B;AAC7B,4BAAiD;AACjD,2BAAyB;AACzB,qCAAkC;AAClC,wBAAsB;AACtB,8BAA4B;AAC5B,wBAAsB;AACtB,uBAAqB;AAOrB,SAAS,6BAA8B;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AACD,GAAuC;AACtC,SACC,2EACG,sBAAY,IAAK,CAAE,OAAO,UAC3B;AAAA,IAAC,4BAAU;AAAA,IAAV;AAAA,MAEA,MAAO,aAAa,iBAAiB,MAAM;AAAA,MAE3C,sDAAC,oBAAAA,SAAA,EAAY,MAAO,WAAY,WAAY,MAAM,MAAO;AAAA;AAAA,IAHnD;AAAA,EAIP,CACC,GACH;AAEF;AAOA,SAAS,eAAgB,EAAE,MAAM,aAAa,GAAG,GAAyB;AACzE,QAAM,2BAAuB;AAAA,IAC5B,CAAE,WAAY;AACb,UAAK,CAAE,MAAO;AACb,eAAO,CAAC;AAAA,MACT;AACA,YAAM,EAAE,eAAe,IAAI,OAAQ,cAAAC,KAAY;AAC/C,aAAO,eAAgB,IAAK;AAAA,IAC7B;AAAA,IACA,CAAE,IAAK;AAAA,EACR;AAEA,SACC,4EACC;AAAA,gDAAC,4BAAU,QAAV,EAAiB,MAAO,aAAa,mBACrC,sDAAC,4BAAAC,SAAA,EAAmB,MAAc,GACnC;AAAA,IAEE,CAAC,CAAE,sBAAsB,UAC1B;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA,aAAc;AAAA,QACd,WAAY,QAAQ;AAAA;AAAA,IACrB;AAAA,KAEF;AAEF;AAqBO,SAAS,eAAgB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AAAA,EACrB;AAAA,EACA;AACD,GAAyB;AACxB,QAAM,aAAS,6BAAc;AAG7B,QAAM,kBAAc,wBAAS,MAAM;AAClC,eAAO,+CAAmB,WAAW,KAAM;AAAA,EAC5C,GAAG,CAAE,WAAW,KAAM,CAAE;AAExB,QAAM,CAAE,iBAAiB,cAAe,QACvC,kDAAsB,WAAY;AACnC,QAAM,aAAS;AAAA,IACd,MAAM,CAAE,GAAK,aAAa,CAAC,GAAK,GAAK,mBAAmB,CAAC,CAAI;AAAA,IAC7D,CAAE,WAAW,eAAgB;AAAA,EAC9B;AAEA,QAAM,eAAW,wBAAS,MAAM;AAC/B,WAAO;AAAA,MACN,GAAG;AAAA,MACH,wBAAwB;AAAA,MACxB;AAAA,IACD;AAAA,EACD,GAAG,CAAE,gBAAgB,gBAAgB,MAAO,CAAE;AAE9C,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,sDAAC,2CAAoB,UACpB;AAAA,QAAC;AAAA;AAAA,UACA,WAAU;AAAA,UACV,aAAc,QAAQ;AAAA,UAElB;AAAA,qBAAQ,iBACX;AAAA,cAAC;AAAA;AAAA,gBACA;AAAA,gBACA;AAAA;AAAA,YACD;AAAA,YAED,4CAAC,4BAAU,QAAV,EAAiB,MAAK,KACtB,sDAAC,mBAAAC,SAAA,EAAW,GACb;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,WACtB,sDAAC,qBAAAC,SAAA,EAAa,GACf;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,eACtB,sDAAC,yBAAAC,SAAA,EAAiB,GACnB;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,0BACtB,sDAAC,kBAAAC,SAAA,EAAU,GACZ;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,wCACtB,sDAAC,iBAAAC,SAAA,EAAS,GACX;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,WACtB,sDAAC,qBAAAC,SAAA,EAAa,GACf;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,mBACtB,sDAAC,4BAAAN,SAAA,EAAmB,GACrB;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,eACtB,sDAAC,+BAAAO,SAAA,EAAsB,GACxB;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,QACtB,sDAAC,kBAAAC,SAAA,EAAU,GACZ;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,2BACtB,sDAAC,wBAAAC,SAAA,EAAgB,GAClB;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,YACtB,sDAAC,uCAAc,GAChB;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,iCACtB,sDAAC,2CAAkB,GACpB;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,eACtB,sDAAC,yBAAAC,SAAA,EAAiB,GACnB;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,oBACtB,sDAAC,iCAAAC,SAAA,EAAwB,SAAQ,QAAO,GACzC;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,oBACtB,sDAAC,iCAAAA,SAAA,EAAwB,SAAQ,QAAO,GACzC;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,uBACtB,sDAAC,iCAAAA,SAAA,EAAwB,SAAQ,WAAU,GAC5C;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,uBACtB,sDAAC,iCAAAA,SAAA,EAAwB,SAAQ,WAAU,GAC5C;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,sBACtB,sDAAC,iCAAAA,SAAA,EAAwB,SAAQ,UAAS,GAC3C;AAAA,YACA,4CAAC,4BAAU,QAAV,EAAiB,MAAK,WACtB,sDAAC,yBAAAC,SAAA,EAAgB,GAClB;AAAA,YACE,OAAO,IAAK,CAAE,UACf;AAAA,cAAC,4BAAU;AAAA,cAAV;AAAA,gBAEA,MACC,aAAa,mBAAoB,MAAM,IAAK;AAAA,gBAG7C,sDAAC,oBAAAd,SAAA,EAAY,MAAO,MAAM,MAAO;AAAA;AAAA,cAL3B,gBAAgB,MAAM;AAAA,YAM7B,CACC;AAAA,YAEF,4CAAC,kBAAe;AAAA,YAEd,OAAO,IAAK,CAAE,UACf;AAAA,cAAC;AAAA;AAAA,gBAEA,MAAO,MAAM;AAAA,gBACb,YACC,aAAa,mBAAoB,MAAM,IAAK;AAAA;AAAA,cAHvC,mBAAmB,MAAM;AAAA,YAKhC,CACC;AAAA;AAAA;AAAA,MACH,GACD;AAAA;AAAA,EACD;AAEF;AAKA,SAAS,iBAAkB;AAAA,EAC1B;AAAA,EACA;AACD,GAGI;AACH,QAAM,gBAAY,gCAAa;AAC/B,QAAM,EAAE,MAAM,UAAU,IAAI,UAAU;AACtC,QAAM,yBAAqB,4BAAa,IAAK;AAC7C,QAAM,wBAAoB,4BAAa,SAAU;AAEjD,gCAAW,MAAM;AAEhB,QAAK,QAAQ,SAAS,WAAY;AAEjC,UAAK,SAAS,oBAAqB;AAClC,kBAAU,KAAM,IAAK;AAAA,MACtB,WAEU,cAAc,qBAAqB,cAAe;AAC3D,qBAAc,aAAa,GAAI;AAAA,MAChC;AAAA,IACD;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAIF,SAAO;AACR;",
+  "names": ["ScreenBlock", "blocksStore", "ScreenColorPalette", "ScreenRoot", "ScreenColors", "ScreenTypography", "FontSizes", "FontSize", "ScreenLayout", "ScreenStyleVariations", "ScreenCSS", "ScreenRevisions", "ScreenBackground", "ScreenTypographyElement", "ScreenBlockList"]
+}

package/build/gradients-palette-panel.js

@@ -0,0 +1,133 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var gradients_palette_panel_exports = {};
+__export(gradients_palette_panel_exports, {
+  default: () => GradientPalettePanel
+});
+module.exports = __toCommonJS(gradients_palette_panel_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_compose = require("@wordpress/compose");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_subtitle = require("./subtitle");
+var import_hooks = require("./hooks");
+const mobilePopoverProps = { placement: "bottom-start", offset: 8 };
+const noop = () => {
+};
+function GradientPalettePanel({
+  name
+}) {
+  const [themeGradients, setThemeGradients] = (0, import_hooks.useSetting)(
+    "color.gradients.theme",
+    name
+  );
+  const [baseThemeGradients] = (0, import_hooks.useSetting)(
+    "color.gradients.theme",
+    name,
+    "base"
+  );
+  const [defaultGradients, setDefaultGradients] = (0, import_hooks.useSetting)(
+    "color.gradients.default",
+    name
+  );
+  const [baseDefaultGradients] = (0, import_hooks.useSetting)(
+    "color.gradients.default",
+    name,
+    "base"
+  );
+  const [customGradients, setCustomGradients] = (0, import_hooks.useSetting)(
+    "color.gradients.custom",
+    name
+  );
+  const [defaultPaletteEnabled] = (0, import_hooks.useSetting)(
+    "color.defaultGradients",
+    name
+  );
+  const [customDuotone] = (0, import_hooks.useSetting)("color.duotone.custom") || [];
+  const [defaultDuotone] = (0, import_hooks.useSetting)("color.duotone.default") || [];
+  const [themeDuotone] = (0, import_hooks.useSetting)("color.duotone.theme") || [];
+  const [defaultDuotoneEnabled] = (0, import_hooks.useSetting)("color.defaultDuotone");
+  const duotonePalette = [
+    ...customDuotone || [],
+    ...themeDuotone || [],
+    ...defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : []
+  ];
+  const isMobileViewport = (0, import_compose.useViewportMatch)("small", "<");
+  const popoverProps = isMobileViewport ? mobilePopoverProps : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_components.__experimentalVStack,
+    {
+      className: "global-styles-ui-gradient-palette-panel",
+      spacing: 8,
+      children: [
+        !!themeGradients && !!themeGradients.length && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalPaletteEdit,
+          {
+            canReset: themeGradients !== baseThemeGradients,
+            canOnlyChangeValues: true,
+            gradients: themeGradients,
+            onChange: setThemeGradients,
+            paletteLabel: (0, import_i18n.__)("Theme"),
+            paletteLabelHeadingLevel: 3,
+            popoverProps
+          }
+        ),
+        !!defaultGradients && !!defaultGradients.length && !!defaultPaletteEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalPaletteEdit,
+          {
+            canReset: defaultGradients !== baseDefaultGradients,
+            canOnlyChangeValues: true,
+            gradients: defaultGradients,
+            onChange: setDefaultGradients,
+            paletteLabel: (0, import_i18n.__)("Default"),
+            paletteLabelHeadingLevel: 3,
+            popoverProps
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.__experimentalPaletteEdit,
+          {
+            gradients: customGradients,
+            onChange: setCustomGradients,
+            paletteLabel: (0, import_i18n.__)("Custom"),
+            paletteLabelHeadingLevel: 3,
+            slugPrefix: "custom-",
+            popoverProps
+          }
+        ),
+        !!duotonePalette && !!duotonePalette.length && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_subtitle.Subtitle, { level: 3, children: (0, import_i18n.__)("Duotone") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalSpacer, { margin: 3 }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.DuotonePicker,
+            {
+              duotonePalette,
+              disableCustomDuotone: true,
+              disableCustomColors: true,
+              clearable: false,
+              onChange: noop,
+              colorPalette: []
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+//# sourceMappingURL=gradients-palette-panel.js.map

package/build/gradients-palette-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/gradients-palette-panel.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalVStack as VStack,\n\t__experimentalPaletteEdit as PaletteEdit,\n\t__experimentalSpacer as Spacer,\n\tDuotonePicker,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport type { Gradient } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { Subtitle } from './subtitle';\nimport { useSetting } from './hooks';\n\nconst mobilePopoverProps = { placement: 'bottom-start' as const, offset: 8 };\n\nconst noop = () => {};\n\ninterface GradientPalettePanelProps {\n\tname?: string;\n}\n\nexport default function GradientPalettePanel( {\n\tname,\n}: GradientPalettePanelProps ) {\n\tconst [ themeGradients, setThemeGradients ] = useSetting< Gradient[] >(\n\t\t'color.gradients.theme',\n\t\tname\n\t);\n\tconst [ baseThemeGradients ] = useSetting< Gradient[] >(\n\t\t'color.gradients.theme',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ defaultGradients, setDefaultGradients ] = useSetting< Gradient[] >(\n\t\t'color.gradients.default',\n\t\tname\n\t);\n\tconst [ baseDefaultGradients ] = useSetting< Gradient[] >(\n\t\t'color.gradients.default',\n\t\tname,\n\t\t'base'\n\t);\n\tconst [ customGradients, setCustomGradients ] = useSetting< Gradient[] >(\n\t\t'color.gradients.custom',\n\t\tname\n\t);\n\n\tconst [ defaultPaletteEnabled ] = useSetting< boolean >(\n\t\t'color.defaultGradients',\n\t\tname\n\t);\n\n\tconst [ customDuotone ] = useSetting( 'color.duotone.custom' ) || [];\n\tconst [ defaultDuotone ] = useSetting( 'color.duotone.default' ) || [];\n\tconst [ themeDuotone ] = useSetting( 'color.duotone.theme' ) || [];\n\tconst [ defaultDuotoneEnabled ] = useSetting( 'color.defaultDuotone' );\n\n\tconst duotonePalette = [\n\t\t...( customDuotone || [] ),\n\t\t...( themeDuotone || [] ),\n\t\t...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),\n\t];\n\n\tconst isMobileViewport = useViewportMatch( 'small', '<' );\n\tconst popoverProps = isMobileViewport ? mobilePopoverProps : undefined;\n\n\treturn (\n\t\t<VStack\n\t\t\tclassName=\"global-styles-ui-gradient-palette-panel\"\n\t\t\tspacing={ 8 }\n\t\t>\n\t\t\t{ !! themeGradients && !! themeGradients.length && (\n\t\t\t\t<PaletteEdit\n\t\t\t\t\tcanReset={ themeGradients !== baseThemeGradients }\n\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\tgradients={ themeGradients }\n\t\t\t\t\tonChange={ setThemeGradients }\n\t\t\t\t\tpaletteLabel={ __( 'Theme' ) }\n\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ !! defaultGradients &&\n\t\t\t\t!! defaultGradients.length &&\n\t\t\t\t!! defaultPaletteEnabled && (\n\t\t\t\t\t<PaletteEdit\n\t\t\t\t\t\tcanReset={ defaultGradients !== baseDefaultGradients }\n\t\t\t\t\t\tcanOnlyChangeValues\n\t\t\t\t\t\tgradients={ defaultGradients }\n\t\t\t\t\t\tonChange={ setDefaultGradients }\n\t\t\t\t\t\tpaletteLabel={ __( 'Default' ) }\n\t\t\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t<PaletteEdit\n\t\t\t\tgradients={ customGradients }\n\t\t\t\tonChange={ setCustomGradients }\n\t\t\t\tpaletteLabel={ __( 'Custom' ) }\n\t\t\t\tpaletteLabelHeadingLevel={ 3 }\n\t\t\t\tslugPrefix=\"custom-\"\n\t\t\t\tpopoverProps={ popoverProps }\n\t\t\t/>\n\t\t\t{ !! duotonePalette && !! duotonePalette.length && (\n\t\t\t\t<div>\n\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>\n\t\t\t\t\t<Spacer margin={ 3 } />\n\t\t\t\t\t<DuotonePicker\n\t\t\t\t\t\tduotonePalette={ duotonePalette }\n\t\t\t\t\t\tdisableCustomDuotone\n\t\t\t\t\t\tdisableCustomColors\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tonChange={ noop }\n\t\t\t\t\t\tcolorPalette={ [] }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8EI;AA3EJ,qBAAiC;AACjC,wBAKO;AACP,kBAAmB;AAMnB,sBAAyB;AACzB,mBAA2B;AAE3B,MAAM,qBAAqB,EAAE,WAAW,gBAAyB,QAAQ,EAAE;AAE3E,MAAM,OAAO,MAAM;AAAC;AAML,SAAR,qBAAuC;AAAA,EAC7C;AACD,GAA+B;AAC9B,QAAM,CAAE,gBAAgB,iBAAkB,QAAI;AAAA,IAC7C;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,kBAAmB,QAAI;AAAA,IAC9B;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,kBAAkB,mBAAoB,QAAI;AAAA,IACjD;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,oBAAqB,QAAI;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM,CAAE,iBAAiB,kBAAmB,QAAI;AAAA,IAC/C;AAAA,IACA;AAAA,EACD;AAEA,QAAM,CAAE,qBAAsB,QAAI;AAAA,IACjC;AAAA,IACA;AAAA,EACD;AAEA,QAAM,CAAE,aAAc,QAAI,yBAAY,sBAAuB,KAAK,CAAC;AACnE,QAAM,CAAE,cAAe,QAAI,yBAAY,uBAAwB,KAAK,CAAC;AACrE,QAAM,CAAE,YAAa,QAAI,yBAAY,qBAAsB,KAAK,CAAC;AACjE,QAAM,CAAE,qBAAsB,QAAI,yBAAY,sBAAuB;AAErE,QAAM,iBAAiB;AAAA,IACtB,GAAK,iBAAiB,CAAC;AAAA,IACvB,GAAK,gBAAgB,CAAC;AAAA,IACtB,GAAK,kBAAkB,wBAAwB,iBAAiB,CAAC;AAAA,EAClE;AAEA,QAAM,uBAAmB,iCAAkB,SAAS,GAAI;AACxD,QAAM,eAAe,mBAAmB,qBAAqB;AAE7D,SACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,SAAU;AAAA,MAER;AAAA,SAAC,CAAE,kBAAkB,CAAC,CAAE,eAAe,UACxC;AAAA,UAAC,kBAAAC;AAAA,UAAA;AAAA,YACA,UAAW,mBAAmB;AAAA,YAC9B,qBAAmB;AAAA,YACnB,WAAY;AAAA,YACZ,UAAW;AAAA,YACX,kBAAe,gBAAI,OAAQ;AAAA,YAC3B,0BAA2B;AAAA,YAC3B;AAAA;AAAA,QACD;AAAA,QAEC,CAAC,CAAE,oBACJ,CAAC,CAAE,iBAAiB,UACpB,CAAC,CAAE,yBACF;AAAA,UAAC,kBAAAA;AAAA,UAAA;AAAA,YACA,UAAW,qBAAqB;AAAA,YAChC,qBAAmB;AAAA,YACnB,WAAY;AAAA,YACZ,UAAW;AAAA,YACX,kBAAe,gBAAI,SAAU;AAAA,YAC7B,0BAA2B;AAAA,YAC3B;AAAA;AAAA,QACD;AAAA,QAEF;AAAA,UAAC,kBAAAA;AAAA,UAAA;AAAA,YACA,WAAY;AAAA,YACZ,UAAW;AAAA,YACX,kBAAe,gBAAI,QAAS;AAAA,YAC5B,0BAA2B;AAAA,YAC3B,YAAW;AAAA,YACX;AAAA;AAAA,QACD;AAAA,QACE,CAAC,CAAE,kBAAkB,CAAC,CAAE,eAAe,UACxC,6CAAC,SACA;AAAA,sDAAC,4BAAS,OAAQ,GAAM,8BAAI,SAAU,GAAG;AAAA,UACzC,4CAAC,kBAAAC,sBAAA,EAAO,QAAS,GAAI;AAAA,UACrB;AAAA,YAAC;AAAA;AAAA,cACA;AAAA,cACA,sBAAoB;AAAA,cACpB,qBAAmB;AAAA,cACnB,WAAY;AAAA,cACZ,UAAW;AAAA,cACX,cAAe,CAAC;AAAA;AAAA,UACjB;AAAA,WACD;AAAA;AAAA;AAAA,EAEF;AAEF;",
+  "names": ["VStack", "PaletteEdit", "Spacer"]
+}

package/build/highlighted-colors.js

@@ -0,0 +1,57 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var highlighted_colors_exports = {};
+__export(highlighted_colors_exports, {
+  default: () => HighlightedColors
+});
+module.exports = __toCommonJS(highlighted_colors_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_components = require("@wordpress/components");
+var import_preview_hooks = require("./preview-hooks");
+function HighlightedColors({
+  normalizedColorSwatchSize,
+  ratio
+}) {
+  const { highlightedColors } = (0, import_preview_hooks.useStylesPreviewColors)();
+  const scaledSwatchSize = normalizedColorSwatchSize * ratio;
+  return highlightedColors.map(({ slug, color }, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__unstableMotion.div,
+    {
+      style: {
+        height: scaledSwatchSize,
+        width: scaledSwatchSize,
+        background: color,
+        borderRadius: scaledSwatchSize / 2
+      },
+      animate: {
+        scale: 1,
+        opacity: 1
+      },
+      initial: {
+        scale: 0.1,
+        opacity: 0
+      },
+      transition: {
+        delay: index === 1 ? 0.2 : 0.1
+      }
+    },
+    `${slug}-${index}`
+  ));
+}
+//# sourceMappingURL=highlighted-colors.js.map

package/build/highlighted-colors.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/highlighted-colors.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __unstableMotion as motion } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { useStylesPreviewColors } from './preview-hooks';\n\ninterface HighlightedColorsProps {\n\tnormalizedColorSwatchSize: number;\n\tratio: number;\n}\n\nexport default function HighlightedColors( {\n\tnormalizedColorSwatchSize,\n\tratio,\n}: HighlightedColorsProps ) {\n\tconst { highlightedColors } = useStylesPreviewColors();\n\tconst scaledSwatchSize = normalizedColorSwatchSize * ratio;\n\treturn highlightedColors.map( ( { slug, color }, index ) => (\n\t\t<motion.div\n\t\t\tkey={ `${ slug }-${ index }` }\n\t\t\tstyle={ {\n\t\t\t\theight: scaledSwatchSize,\n\t\t\t\twidth: scaledSwatchSize,\n\t\t\t\tbackground: color,\n\t\t\t\tborderRadius: scaledSwatchSize / 2,\n\t\t\t} }\n\t\t\tanimate={ {\n\t\t\t\tscale: 1,\n\t\t\t\topacity: 1,\n\t\t\t} }\n\t\t\tinitial={ {\n\t\t\t\tscale: 0.1,\n\t\t\t\topacity: 0,\n\t\t\t} }\n\t\t\ttransition={ {\n\t\t\t\tdelay: index === 1 ? 0.2 : 0.1,\n\t\t\t} }\n\t\t/>\n\t) );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBE;AAnBF,wBAA2C;AAK3C,2BAAuC;AAOxB,SAAR,kBAAoC;AAAA,EAC1C;AAAA,EACA;AACD,GAA4B;AAC3B,QAAM,EAAE,kBAAkB,QAAI,6CAAuB;AACrD,QAAM,mBAAmB,4BAA4B;AACrD,SAAO,kBAAkB,IAAK,CAAE,EAAE,MAAM,MAAM,GAAG,UAChD;AAAA,IAAC,kBAAAA,iBAAO;AAAA,IAAP;AAAA,MAEA,OAAQ;AAAA,QACP,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,cAAc,mBAAmB;AAAA,MAClC;AAAA,MACA,SAAU;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MACV;AAAA,MACA,SAAU;AAAA,QACT,OAAO;AAAA,QACP,SAAS;AAAA,MACV;AAAA,MACA,YAAa;AAAA,QACZ,OAAO,UAAU,IAAI,MAAM;AAAA,MAC5B;AAAA;AAAA,IAjBM,GAAI,IAAK,IAAK,KAAM;AAAA,EAkB3B,CACC;AACH;",
+  "names": ["motion"]
+}

package/build/hooks.js

@@ -0,0 +1,176 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hooks_exports = {};
+__export(hooks_exports, {
+  useColorRandomizer: () => useColorRandomizer,
+  useColorVariations: () => useColorVariations,
+  useCurrentMergeThemeStyleVariationsWithUserConfig: () => useCurrentMergeThemeStyleVariationsWithUserConfig,
+  useSetting: () => useSetting,
+  useStyle: () => useStyle
+});
+module.exports = __toCommonJS(hooks_exports);
+var import_colord = require("colord");
+var import_a11y = __toESM(require("colord/plugins/a11y"));
+var import_element = require("@wordpress/element");
+var import_data = require("@wordpress/data");
+var import_core_data = require("@wordpress/core-data");
+var import_i18n = require("@wordpress/i18n");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+var import_context = require("./context");
+var import_utils = require("./utils");
+(0, import_colord.extend)([import_a11y.default]);
+function useStyle(path, blockName, readFrom = "merged", shouldDecodeEncode = true) {
+  const { user, base, merged, onChange } = (0, import_element.useContext)(import_context.GlobalStylesContext);
+  let sourceValue = merged;
+  if (readFrom === "base") {
+    sourceValue = base;
+  } else if (readFrom === "user") {
+    sourceValue = user;
+  }
+  const styleValue = (0, import_element.useMemo)(
+    () => (0, import_global_styles_engine.getStyle)(sourceValue, path, blockName, shouldDecodeEncode),
+    [sourceValue, path, blockName, shouldDecodeEncode]
+  );
+  const setStyleValue = (0, import_element.useCallback)(
+    (newValue) => {
+      const newGlobalStyles = (0, import_global_styles_engine.setStyle)(
+        user,
+        path,
+        newValue,
+        blockName
+      );
+      onChange(newGlobalStyles);
+    },
+    [user, onChange, path, blockName]
+  );
+  return [styleValue, setStyleValue];
+}
+function useSetting(path, blockName, readFrom = "merged") {
+  const { user, base, merged, onChange } = (0, import_element.useContext)(import_context.GlobalStylesContext);
+  let sourceValue = merged;
+  if (readFrom === "base") {
+    sourceValue = base;
+  } else if (readFrom === "user") {
+    sourceValue = user;
+  }
+  const settingValue = (0, import_element.useMemo)(
+    () => (0, import_global_styles_engine.getSetting)(sourceValue, path, blockName),
+    [sourceValue, path, blockName]
+  );
+  const setSettingValue = (0, import_element.useCallback)(
+    (newValue) => {
+      const newGlobalStyles = (0, import_global_styles_engine.setSetting)(
+        user,
+        path,
+        newValue,
+        blockName
+      );
+      onChange(newGlobalStyles);
+    },
+    [user, onChange, path, blockName]
+  );
+  return [settingValue, setSettingValue];
+}
+const EMPTY_ARRAY = [];
+function hasThemeVariation({
+  title,
+  settings,
+  styles
+}) {
+  return title === (0, import_i18n.__)("Default") || Object.keys(settings || {}).length > 0 || Object.keys(styles || {}).length > 0;
+}
+function useCurrentMergeThemeStyleVariationsWithUserConfig(properties = []) {
+  const { variationsFromTheme } = (0, import_data.useSelect)((select) => {
+    const _variationsFromTheme = select(
+      import_core_data.store
+    ).__experimentalGetCurrentThemeGlobalStylesVariations?.();
+    return {
+      variationsFromTheme: _variationsFromTheme || EMPTY_ARRAY
+    };
+  }, []);
+  const { user: userVariation } = (0, import_element.useContext)(import_context.GlobalStylesContext);
+  return (0, import_element.useMemo)(() => {
+    const clonedUserVariation = structuredClone(userVariation);
+    const userVariationWithoutProperties = (0, import_utils.removePropertiesFromObject)(
+      clonedUserVariation,
+      properties
+    );
+    userVariationWithoutProperties.title = (0, import_i18n.__)("Default");
+    const variationsWithPropertiesAndBase = variationsFromTheme.filter((variation) => {
+      return (0, import_utils.isVariationWithProperties)(variation, properties);
+    }).map((variation) => {
+      return (0, import_global_styles_engine.mergeGlobalStyles)(
+        userVariationWithoutProperties,
+        variation
+      );
+    });
+    const variationsByProperties = [
+      userVariationWithoutProperties,
+      ...variationsWithPropertiesAndBase
+    ];
+    return variationsByProperties?.length ? variationsByProperties.filter(hasThemeVariation) : [];
+  }, [properties, userVariation, variationsFromTheme]);
+}
+const propertiesToFilter = ["color"];
+function useColorVariations() {
+  return useCurrentMergeThemeStyleVariationsWithUserConfig(
+    propertiesToFilter
+  );
+}
+function useColorRandomizer(blockName) {
+  const [themeColors, setThemeColors] = useSetting(
+    "color.palette.theme",
+    blockName
+  );
+  const randomizeColors = (0, import_element.useCallback)(() => {
+    if (!themeColors || !themeColors.length) {
+      return;
+    }
+    const randomRotationValue = Math.floor(Math.random() * 225);
+    const newColors = themeColors.map((colorObject) => {
+      const { color } = colorObject;
+      const newColor = (0, import_colord.colord)(color).rotate(randomRotationValue).toHex();
+      return {
+        ...colorObject,
+        color: newColor
+      };
+    });
+    setThemeColors(newColors);
+  }, [themeColors, setThemeColors]);
+  return window.__experimentalEnableColorRandomizer ? [randomizeColors] : [];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useColorRandomizer,
+  useColorVariations,
+  useCurrentMergeThemeStyleVariationsWithUserConfig,
+  useSetting,
+  useStyle
+});
+//# sourceMappingURL=hooks.js.map