@wordpress/global-styles-ui 1.1.0

package/build-module/screen-block-list.js

@@ -0,0 +1,150 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { store as blocksStore } from "@wordpress/blocks";
+import { __, sprintf, _n } from "@wordpress/i18n";
+import {
+  FlexItem,
+  SearchControl,
+  __experimentalHStack as HStack,
+  __experimentalText as Text
+} from "@wordpress/components";
+import { useSelect } from "@wordpress/data";
+import {
+  useState,
+  useEffect,
+  useRef,
+  useDeferredValue,
+  memo
+} from "@wordpress/element";
+import {
+  BlockIcon,
+  privateApis as blockEditorPrivateApis
+} from "@wordpress/block-editor";
+import { useDebounce } from "@wordpress/compose";
+import { speak } from "@wordpress/a11y";
+import { useBlockVariations } from "./variations/variations-panel";
+import { ScreenHeader } from "./screen-header";
+import { NavigationButtonAsItem } from "./navigation-button";
+import { useSetting } from "./hooks";
+import { unlock } from "./lock-unlock";
+const {
+  useHasDimensionsPanel,
+  useHasTypographyPanel,
+  useHasBorderPanel,
+  useSettingsForBlockElement,
+  useHasColorPanel
+} = unlock(blockEditorPrivateApis);
+function useSortedBlockTypes() {
+  const blockItems = useSelect(
+    (select) => select(blocksStore).getBlockTypes(),
+    []
+  );
+  const groupByType = (blocks, block) => {
+    const { core, noncore } = blocks;
+    const type = block.name.startsWith("core/") ? core : noncore;
+    type.push(block);
+    return blocks;
+  };
+  const { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(
+    groupByType,
+    { core: [], noncore: [] }
+  );
+  return [...coreItems, ...nonCoreItems];
+}
+function useBlockHasGlobalStyles(blockName) {
+  const [rawSettings] = useSetting("", blockName);
+  const settings = useSettingsForBlockElement(rawSettings, blockName);
+  const hasTypographyPanel = useHasTypographyPanel(settings);
+  const hasColorPanel = useHasColorPanel(settings);
+  const hasBorderPanel = useHasBorderPanel(settings);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
+  const hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;
+  const hasVariationsPanel = !!useBlockVariations(blockName)?.length;
+  const hasGlobalStyles = hasTypographyPanel || hasColorPanel || hasLayoutPanel || hasVariationsPanel;
+  return hasGlobalStyles;
+}
+function BlockMenuItem({ block }) {
+  const hasBlockMenuItem = useBlockHasGlobalStyles(block.name);
+  if (!hasBlockMenuItem) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    NavigationButtonAsItem,
+    {
+      path: "/blocks/" + encodeURIComponent(block.name),
+      children: /* @__PURE__ */ jsxs(HStack, { justify: "flex-start", children: [
+        /* @__PURE__ */ jsx(BlockIcon, { icon: block.icon }),
+        /* @__PURE__ */ jsx(FlexItem, { children: block.title })
+      ] })
+    }
+  );
+}
+function BlockList({ filterValue }) {
+  const sortedBlockTypes = useSortedBlockTypes();
+  const debouncedSpeak = useDebounce(speak, 500);
+  const { isMatchingSearchTerm } = useSelect(blocksStore);
+  const filteredBlockTypes = !filterValue ? sortedBlockTypes : sortedBlockTypes.filter(
+    (blockType) => isMatchingSearchTerm(blockType, filterValue)
+  );
+  const blockTypesListRef = useRef(null);
+  useEffect(() => {
+    if (!filterValue) {
+      return;
+    }
+    const count = blockTypesListRef.current?.childElementCount || 0;
+    const resultsFoundMessage = sprintf(
+      /* translators: %d: number of results. */
+      _n("%d result found.", "%d results found.", count),
+      count
+    );
+    debouncedSpeak(resultsFoundMessage, "polite");
+  }, [filterValue, debouncedSpeak]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: blockTypesListRef,
+      className: "global-styles-ui-block-types-item-list",
+      role: "list",
+      children: filteredBlockTypes.length === 0 ? /* @__PURE__ */ jsx(Text, { align: "center", as: "p", children: __("No blocks found.") }) : filteredBlockTypes.map((block) => /* @__PURE__ */ jsx(
+        BlockMenuItem,
+        {
+          block
+        },
+        "menu-itemblock-" + block.name
+      ))
+    }
+  );
+}
+const MemoizedBlockList = memo(BlockList);
+function ScreenBlockList() {
+  const [filterValue, setFilterValue] = useState("");
+  const deferredFilterValue = useDeferredValue(filterValue);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ScreenHeader,
+      {
+        title: __("Blocks"),
+        description: __(
+          "Customize the appearance of specific blocks and for the whole site."
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SearchControl,
+      {
+        __nextHasNoMarginBottom: true,
+        className: "global-styles-ui-block-types-search",
+        onChange: setFilterValue,
+        value: filterValue,
+        label: __("Search"),
+        placeholder: __("Search")
+      }
+    ),
+    /* @__PURE__ */ jsx(MemoizedBlockList, { filterValue: deferredFilterValue })
+  ] });
+}
+var screen_block_list_default = ScreenBlockList;
+export {
+  screen_block_list_default as default,
+  useBlockHasGlobalStyles
+};
+//# sourceMappingURL=screen-block-list.js.map

package/build-module/screen-block-list.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-block-list.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { __, sprintf, _n } from '@wordpress/i18n';\nimport {\n\tFlexItem,\n\tSearchControl,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n} from '@wordpress/components';\nimport { useSelect } from '@wordpress/data';\nimport {\n\tuseState,\n\tuseEffect,\n\tuseRef,\n\tuseDeferredValue,\n\tmemo,\n} from '@wordpress/element';\nimport {\n\tBlockIcon,\n\tprivateApis as blockEditorPrivateApis,\n\t// @ts-expect-error: Not typed yet.\n} from '@wordpress/block-editor';\nimport { useDebounce } from '@wordpress/compose';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { useBlockVariations } from './variations/variations-panel';\nimport { ScreenHeader } from './screen-header';\nimport { NavigationButtonAsItem } from './navigation-button';\nimport { useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n} = unlock( blockEditorPrivateApis );\n\nfunction useSortedBlockTypes() {\n\tconst blockItems = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\t// Ensure core blocks are prioritized in the returned results,\n\t// because third party blocks can be registered earlier than\n\t// the core blocks (usually by using the `init` action),\n\t// thus affecting the display order.\n\t// We don't sort reusable blocks as they are handled differently.\n\tconst groupByType = ( blocks: any, block: any ) => {\n\t\tconst { core, noncore } = blocks;\n\t\tconst type = block.name.startsWith( 'core/' ) ? core : noncore;\n\t\ttype.push( block );\n\t\treturn blocks;\n\t};\n\tconst { core: coreItems, noncore: nonCoreItems } = blockItems.reduce(\n\t\tgroupByType,\n\t\t{ core: [], noncore: [] }\n\t);\n\treturn [ ...coreItems, ...nonCoreItems ];\n}\n\nexport function useBlockHasGlobalStyles( blockName: string ) {\n\tconst [ rawSettings ] = useSetting( '', blockName );\n\tconst settings = useSettingsForBlockElement( rawSettings, blockName );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasLayoutPanel = hasBorderPanel || hasDimensionsPanel;\n\tconst hasVariationsPanel = !! useBlockVariations( blockName )?.length;\n\tconst hasGlobalStyles =\n\t\thasTypographyPanel ||\n\t\thasColorPanel ||\n\t\thasLayoutPanel ||\n\t\thasVariationsPanel;\n\treturn hasGlobalStyles;\n}\n\ninterface BlockMenuItemProps {\n\tblock: any;\n}\n\nfunction BlockMenuItem( { block }: BlockMenuItemProps ) {\n\tconst hasBlockMenuItem = useBlockHasGlobalStyles( block.name );\n\tif ( ! hasBlockMenuItem ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<NavigationButtonAsItem\n\t\t\tpath={ '/blocks/' + encodeURIComponent( block.name ) }\n\t\t>\n\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t<BlockIcon icon={ block.icon } />\n\t\t\t\t<FlexItem>{ block.title }</FlexItem>\n\t\t\t</HStack>\n\t\t</NavigationButtonAsItem>\n\t);\n}\n\ninterface BlockListProps {\n\tfilterValue: string;\n}\n\nfunction BlockList( { filterValue }: BlockListProps ) {\n\tconst sortedBlockTypes = useSortedBlockTypes();\n\tconst debouncedSpeak = useDebounce( speak, 500 );\n\t// @ts-expect-error - useSelect supports single argument calls\n\tconst { isMatchingSearchTerm } = useSelect( blocksStore );\n\n\tconst filteredBlockTypes = ! filterValue\n\t\t? sortedBlockTypes\n\t\t: sortedBlockTypes.filter( ( blockType ) =>\n\t\t\t\tisMatchingSearchTerm( blockType, filterValue )\n\t\t  );\n\n\tconst blockTypesListRef = useRef< HTMLDivElement >( null );\n\n\t// Announce search results on change\n\tuseEffect( () => {\n\t\tif ( ! filterValue ) {\n\t\t\treturn;\n\t\t}\n\t\t// We extract the results from the wrapper div's `ref` because\n\t\t// filtered items can contain items that will eventually not\n\t\t// render and there is no reliable way to detect when a child\n\t\t// will return `null`.\n\t\t// TODO: We should find a better way of handling this as it's\n\t\t// fragile and depends on the number of rendered elements of `BlockMenuItem`,\n\t\t// which is now one.\n\t\t// @see https://github.com/WordPress/gutenberg/pull/39117#discussion_r816022116\n\t\tconst count = blockTypesListRef.current?.childElementCount || 0;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage, 'polite' );\n\t}, [ filterValue, debouncedSpeak ] );\n\n\treturn (\n\t\t<div\n\t\t\tref={ blockTypesListRef }\n\t\t\tclassName=\"global-styles-ui-block-types-item-list\"\n\t\t\t// By default, BlockMenuItem has a role=listitem so this div must have a list role.\n\t\t\trole=\"list\"\n\t\t>\n\t\t\t{ filteredBlockTypes.length === 0 ? (\n\t\t\t\t<Text align=\"center\" as=\"p\">\n\t\t\t\t\t{ __( 'No blocks found.' ) }\n\t\t\t\t</Text>\n\t\t\t) : (\n\t\t\t\tfilteredBlockTypes.map( ( block ) => (\n\t\t\t\t\t<BlockMenuItem\n\t\t\t\t\t\tblock={ block }\n\t\t\t\t\t\tkey={ 'menu-itemblock-' + block.name }\n\t\t\t\t\t/>\n\t\t\t\t) )\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nconst MemoizedBlockList = memo( BlockList );\n\nfunction ScreenBlockList() {\n\tconst [ filterValue, setFilterValue ] = useState( '' );\n\tconst deferredFilterValue = useDeferredValue( filterValue );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Blocks' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Customize the appearance of specific blocks and for the whole site.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\tclassName=\"global-styles-ui-block-types-search\"\n\t\t\t\tonChange={ setFilterValue }\n\t\t\t\tvalue={ filterValue }\n\t\t\t\tlabel={ __( 'Search' ) }\n\t\t\t\tplaceholder={ __( 'Search' ) }\n\t\t\t/>\n\t\t\t<MemoizedBlockList filterValue={ deferredFilterValue } />\n\t\t</>\n\t);\n}\n\nexport default ScreenBlockList;\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/screen-block.js

@@ -0,0 +1,293 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getBlockType } from "@wordpress/blocks";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { useMemo } from "@wordpress/element";
+import { useSelect } from "@wordpress/data";
+import { store as coreStore } from "@wordpress/core-data";
+import {
+  PanelBody,
+  __experimentalVStack as VStack,
+  __experimentalHasSplitBorders as hasSplitBorders
+} from "@wordpress/components";
+import { __, sprintf } from "@wordpress/i18n";
+import { ScreenHeader } from "./screen-header";
+import BlockPreviewPanel from "./block-preview-panel";
+import { Subtitle } from "./subtitle";
+import {
+  useBlockVariations,
+  VariationsPanel
+} from "./variations/variations-panel";
+import { useStyle, useSetting } from "./hooks";
+import { unlock } from "./lock-unlock";
+const BACKGROUND_BLOCK_DEFAULT_VALUES = {
+  backgroundSize: "cover",
+  backgroundPosition: "50% 50%"
+  // used only when backgroundSize is 'contain'.
+};
+function applyFallbackStyle(border) {
+  if (!border) {
+    return border;
+  }
+  const hasColorOrWidth = border.color || border.width;
+  if (!border.style && hasColorOrWidth) {
+    return { ...border, style: "solid" };
+  }
+  if (border.style && !hasColorOrWidth) {
+    return void 0;
+  }
+  return border;
+}
+function applyAllFallbackStyles(border) {
+  if (!border) {
+    return border;
+  }
+  if (hasSplitBorders(border)) {
+    return {
+      top: applyFallbackStyle(border.top),
+      right: applyFallbackStyle(border.right),
+      bottom: applyFallbackStyle(border.bottom),
+      left: applyFallbackStyle(border.left)
+    };
+  }
+  return applyFallbackStyle(border);
+}
+const {
+  useHasDimensionsPanel,
+  useHasTypographyPanel,
+  useHasBorderPanel,
+  useSettingsForBlockElement,
+  useHasColorPanel,
+  useHasFiltersPanel,
+  useHasImageSettingsPanel,
+  useHasBackgroundPanel,
+  BackgroundPanel: StylesBackgroundPanel,
+  BorderPanel: StylesBorderPanel,
+  ColorPanel: StylesColorPanel,
+  TypographyPanel: StylesTypographyPanel,
+  DimensionsPanel: StylesDimensionsPanel,
+  FiltersPanel: StylesFiltersPanel,
+  ImageSettingsPanel,
+  AdvancedPanel: StylesAdvancedPanel
+} = unlock(blockEditorPrivateApis);
+function ScreenBlock({ name, variation }) {
+  let prefixParts = [];
+  if (variation) {
+    prefixParts = ["variations", variation].concat(prefixParts);
+  }
+  const prefix = prefixParts.join(".");
+  const [style] = useStyle(prefix, name, "user", false);
+  const [inheritedStyle, setStyle] = useStyle(
+    prefix,
+    name,
+    "merged",
+    false
+  );
+  const [userSettings] = useSetting("", name, "user");
+  const [rawSettings, setSettings] = useSetting("", name);
+  const settingsForBlockElement = useSettingsForBlockElement(
+    rawSettings,
+    name
+  );
+  const blockType = getBlockType(name);
+  let disableBlockGap = false;
+  if (settingsForBlockElement?.spacing?.blockGap && blockType?.supports?.spacing?.blockGap && (blockType?.supports?.spacing?.__experimentalSkipSerialization === true || blockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(
+    (spacingType) => spacingType === "blockGap"
+  ))) {
+    disableBlockGap = true;
+  }
+  let disableAspectRatio = false;
+  if (settingsForBlockElement?.dimensions?.aspectRatio && name === "core/group") {
+    disableAspectRatio = true;
+  }
+  const settings = useMemo(() => {
+    const updatedSettings = structuredClone(settingsForBlockElement);
+    if (disableBlockGap) {
+      updatedSettings.spacing.blockGap = false;
+    }
+    if (disableAspectRatio) {
+      updatedSettings.dimensions.aspectRatio = false;
+    }
+    return updatedSettings;
+  }, [settingsForBlockElement, disableBlockGap, disableAspectRatio]);
+  const blockVariations = useBlockVariations(name);
+  const hasBackgroundPanel = useHasBackgroundPanel(settings);
+  const hasTypographyPanel = useHasTypographyPanel(settings);
+  const hasColorPanel = useHasColorPanel(settings);
+  const hasBorderPanel = useHasBorderPanel(settings);
+  const hasDimensionsPanel = useHasDimensionsPanel(settings);
+  const hasFiltersPanel = useHasFiltersPanel(settings);
+  const hasImageSettingsPanel = useHasImageSettingsPanel(
+    name,
+    userSettings,
+    settings
+  );
+  const hasVariationsPanel = !!blockVariations?.length && !variation;
+  const { canEditCSS } = useSelect((select) => {
+    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(coreStore);
+    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+    const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
+    return {
+      canEditCSS: !!globalStyles?._links?.["wp:action-edit-css"]
+    };
+  }, []);
+  const currentBlockStyle = variation ? blockVariations.find((s) => s.name === variation) : null;
+  const inheritedStyleWithLayout = useMemo(() => {
+    return {
+      ...inheritedStyle,
+      layout: settings.layout
+    };
+  }, [inheritedStyle, settings.layout]);
+  const styleWithLayout = useMemo(() => {
+    return {
+      ...style,
+      layout: userSettings.layout
+    };
+  }, [style, userSettings.layout]);
+  const onChangeDimensions = (newStyle) => {
+    const updatedStyle = { ...newStyle };
+    delete updatedStyle.layout;
+    setStyle(updatedStyle);
+    if (newStyle.layout !== userSettings.layout) {
+      setSettings({
+        ...userSettings,
+        layout: newStyle.layout
+      });
+    }
+  };
+  const onChangeLightbox = (newSetting) => {
+    if (newSetting === void 0) {
+      setSettings({
+        ...rawSettings,
+        lightbox: void 0
+      });
+    } else {
+      setSettings({
+        ...rawSettings,
+        lightbox: {
+          ...rawSettings.lightbox,
+          ...newSetting
+        }
+      });
+    }
+  };
+  const onChangeBorders = (newStyle) => {
+    if (!newStyle?.border) {
+      setStyle(newStyle);
+      return;
+    }
+    const { radius, ...newBorder } = newStyle.border;
+    const border = applyAllFallbackStyles(newBorder);
+    const updatedBorder = !hasSplitBorders(border) ? {
+      top: border,
+      right: border,
+      bottom: border,
+      left: border
+    } : {
+      color: null,
+      style: null,
+      width: null,
+      ...border
+    };
+    setStyle({ ...newStyle, border: { ...updatedBorder, radius } });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ScreenHeader,
+      {
+        title: variation ? currentBlockStyle?.label : blockType?.title
+      }
+    ),
+    /* @__PURE__ */ jsx(BlockPreviewPanel, { name, variation }),
+    hasVariationsPanel && /* @__PURE__ */ jsx("div", { className: "global-styles-ui-screen-variations", children: /* @__PURE__ */ jsxs(VStack, { spacing: 3, children: [
+      /* @__PURE__ */ jsx(Subtitle, { children: __("Style Variations") }),
+      /* @__PURE__ */ jsx(VariationsPanel, { name })
+    ] }) }),
+    hasColorPanel && /* @__PURE__ */ jsx(
+      StylesColorPanel,
+      {
+        inheritedValue: inheritedStyle,
+        value: style,
+        onChange: setStyle,
+        settings
+      }
+    ),
+    hasBackgroundPanel && /* @__PURE__ */ jsx(
+      StylesBackgroundPanel,
+      {
+        inheritedValue: inheritedStyle,
+        value: style,
+        onChange: setStyle,
+        settings,
+        defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES
+      }
+    ),
+    hasTypographyPanel && /* @__PURE__ */ jsx(
+      StylesTypographyPanel,
+      {
+        inheritedValue: inheritedStyle,
+        value: style,
+        onChange: setStyle,
+        settings
+      }
+    ),
+    hasDimensionsPanel && /* @__PURE__ */ jsx(
+      StylesDimensionsPanel,
+      {
+        inheritedValue: inheritedStyleWithLayout,
+        value: styleWithLayout,
+        onChange: onChangeDimensions,
+        settings,
+        includeLayoutControls: true
+      }
+    ),
+    hasBorderPanel && /* @__PURE__ */ jsx(
+      StylesBorderPanel,
+      {
+        inheritedValue: inheritedStyle,
+        value: style,
+        onChange: onChangeBorders,
+        settings
+      }
+    ),
+    hasFiltersPanel && /* @__PURE__ */ jsx(
+      StylesFiltersPanel,
+      {
+        inheritedValue: inheritedStyleWithLayout,
+        value: styleWithLayout,
+        onChange: setStyle,
+        settings,
+        includeLayoutControls: true
+      }
+    ),
+    hasImageSettingsPanel && /* @__PURE__ */ jsx(
+      ImageSettingsPanel,
+      {
+        onChange: onChangeLightbox,
+        value: userSettings,
+        inheritedValue: settings
+      }
+    ),
+    canEditCSS && /* @__PURE__ */ jsxs(PanelBody, { title: __("Advanced"), initialOpen: false, children: [
+      /* @__PURE__ */ jsx("p", { children: sprintf(
+        // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+        __(
+          "Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value."
+        ),
+        blockType?.title
+      ) }),
+      /* @__PURE__ */ jsx(
+        StylesAdvancedPanel,
+        {
+          value: style,
+          onChange: setStyle,
+          inheritedValue: inheritedStyle
+        }
+      )
+    ] })
+  ] });
+}
+var screen_block_default = ScreenBlock;
+export {
+  screen_block_default as default
+};
+//# sourceMappingURL=screen-block.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-block.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\n// @ts-expect-error: Not typed yet.\nimport { getBlockType } from '@wordpress/blocks';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport { useMemo } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\nimport {\n\tPanelBody,\n\t__experimentalVStack as VStack,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport type { GlobalStylesConfig } from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport BlockPreviewPanel from './block-preview-panel';\nimport { Subtitle } from './subtitle';\nimport {\n\tuseBlockVariations,\n\tVariationsPanel,\n} from './variations/variations-panel';\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\n// Initial control values.\nconst BACKGROUND_BLOCK_DEFAULT_VALUES = {\n\tbackgroundSize: 'cover',\n\tbackgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.\n};\n\nfunction applyFallbackStyle( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tconst hasColorOrWidth = border.color || border.width;\n\n\tif ( ! border.style && hasColorOrWidth ) {\n\t\treturn { ...border, style: 'solid' };\n\t}\n\n\tif ( border.style && ! hasColorOrWidth ) {\n\t\treturn undefined;\n\t}\n\n\treturn border;\n}\n\nfunction applyAllFallbackStyles( border: any ) {\n\tif ( ! border ) {\n\t\treturn border;\n\t}\n\n\tif ( hasSplitBorders( border ) ) {\n\t\treturn {\n\t\t\ttop: applyFallbackStyle( border.top ),\n\t\t\tright: applyFallbackStyle( border.right ),\n\t\t\tbottom: applyFallbackStyle( border.bottom ),\n\t\t\tleft: applyFallbackStyle( border.left ),\n\t\t};\n\t}\n\n\treturn applyFallbackStyle( border );\n}\n\nconst {\n\tuseHasDimensionsPanel,\n\tuseHasTypographyPanel,\n\tuseHasBorderPanel,\n\tuseSettingsForBlockElement,\n\tuseHasColorPanel,\n\tuseHasFiltersPanel,\n\tuseHasImageSettingsPanel,\n\tuseHasBackgroundPanel,\n\tBackgroundPanel: StylesBackgroundPanel,\n\tBorderPanel: StylesBorderPanel,\n\tColorPanel: StylesColorPanel,\n\tTypographyPanel: StylesTypographyPanel,\n\tDimensionsPanel: StylesDimensionsPanel,\n\tFiltersPanel: StylesFiltersPanel,\n\tImageSettingsPanel,\n\tAdvancedPanel: StylesAdvancedPanel,\n} = unlock( blockEditorPrivateApis );\n\ninterface ScreenBlockProps {\n\tname: string;\n\tvariation?: string;\n}\n\nfunction ScreenBlock( { name, variation }: ScreenBlockProps ) {\n\tlet prefixParts: string[] = [];\n\tif ( variation ) {\n\t\tprefixParts = [ 'variations', variation ].concat( prefixParts );\n\t}\n\tconst prefix = prefixParts.join( '.' );\n\n\tconst [ style ] = useStyle( prefix, name, 'user', false );\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\tprefix,\n\t\tname,\n\t\t'merged',\n\t\tfalse\n\t);\n\tconst [ userSettings ] = useSetting( '', name, 'user' );\n\tconst [ rawSettings, setSettings ] = useSetting( '', name );\n\tconst settingsForBlockElement = useSettingsForBlockElement(\n\t\trawSettings,\n\t\tname\n\t);\n\tconst blockType = getBlockType( name );\n\n\t// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.\n\tlet disableBlockGap = false;\n\tif (\n\t\tsettingsForBlockElement?.spacing?.blockGap &&\n\t\tblockType?.supports?.spacing?.blockGap &&\n\t\t( blockType?.supports?.spacing?.__experimentalSkipSerialization ===\n\t\t\ttrue ||\n\t\t\tblockType?.supports?.spacing?.__experimentalSkipSerialization?.some?.(\n\t\t\t\t( spacingType: string ) => spacingType === 'blockGap'\n\t\t\t) )\n\t) {\n\t\tdisableBlockGap = true;\n\t}\n\n\t// Only allow `aspectRatio` support if the block is not the grouping block.\n\t// The grouping block allows the user to use Group, Row and Stack variations,\n\t// and it is highly likely that the user will not want to set an aspect ratio\n\t// for all three at once. Until there is the ability to set a different aspect\n\t// ratio for each variation, we disable the aspect ratio controls for the\n\t// grouping block in global styles.\n\tlet disableAspectRatio = false;\n\tif (\n\t\tsettingsForBlockElement?.dimensions?.aspectRatio &&\n\t\tname === 'core/group'\n\t) {\n\t\tdisableAspectRatio = true;\n\t}\n\n\tconst settings = useMemo( () => {\n\t\tconst updatedSettings = structuredClone( settingsForBlockElement );\n\t\tif ( disableBlockGap ) {\n\t\t\tupdatedSettings.spacing.blockGap = false;\n\t\t}\n\t\tif ( disableAspectRatio ) {\n\t\t\tupdatedSettings.dimensions.aspectRatio = false;\n\t\t}\n\t\treturn updatedSettings;\n\t}, [ settingsForBlockElement, disableBlockGap, disableAspectRatio ] );\n\n\tconst blockVariations = useBlockVariations( name );\n\tconst hasBackgroundPanel = useHasBackgroundPanel( settings );\n\tconst hasTypographyPanel = useHasTypographyPanel( settings );\n\tconst hasColorPanel = useHasColorPanel( settings );\n\tconst hasBorderPanel = useHasBorderPanel( settings );\n\tconst hasDimensionsPanel = useHasDimensionsPanel( settings );\n\tconst hasFiltersPanel = useHasFiltersPanel( settings );\n\tconst hasImageSettingsPanel = useHasImageSettingsPanel(\n\t\tname,\n\t\tuserSettings,\n\t\tsettings\n\t);\n\tconst hasVariationsPanel = !! blockVariations?.length && ! variation;\n\tconst { canEditCSS } = useSelect( ( select ) => {\n\t\tconst { getEntityRecord, __experimentalGetCurrentGlobalStylesId } =\n\t\t\tselect( coreStore );\n\n\t\tconst globalStylesId = __experimentalGetCurrentGlobalStylesId();\n\t\tconst globalStyles = globalStylesId\n\t\t\t? getEntityRecord( 'root', 'globalStyles', globalStylesId )\n\t\t\t: undefined;\n\n\t\treturn {\n\t\t\tcanEditCSS: !! ( globalStyles as GlobalStylesConfig )?._links?.[\n\t\t\t\t'wp:action-edit-css'\n\t\t\t],\n\t\t};\n\t}, [] );\n\tconst currentBlockStyle = variation\n\t\t? blockVariations.find( ( s: any ) => s.name === variation )\n\t\t: null;\n\n\t// These intermediary objects are needed because the \"layout\" property is stored\n\t// in settings rather than styles.\n\tconst inheritedStyleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...inheritedStyle,\n\t\t\tlayout: settings.layout,\n\t\t};\n\t}, [ inheritedStyle, settings.layout ] );\n\tconst styleWithLayout = useMemo( () => {\n\t\treturn {\n\t\t\t...style,\n\t\t\tlayout: userSettings.layout,\n\t\t};\n\t}, [ style, userSettings.layout ] );\n\tconst onChangeDimensions = ( newStyle: any ) => {\n\t\tconst updatedStyle = { ...newStyle };\n\t\tdelete updatedStyle.layout;\n\t\tsetStyle( updatedStyle );\n\n\t\tif ( newStyle.layout !== userSettings.layout ) {\n\t\t\tsetSettings( {\n\t\t\t\t...userSettings,\n\t\t\t\tlayout: newStyle.layout,\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeLightbox = ( newSetting: any ) => {\n\t\t// If the newSetting is undefined, this means that the user has deselected\n\t\t// (reset) the lightbox setting.\n\t\tif ( newSetting === undefined ) {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: undefined,\n\t\t\t} );\n\n\t\t\t// Otherwise, we simply set the lightbox setting to the new value but\n\t\t\t// taking care of not overriding the other lightbox settings.\n\t\t} else {\n\t\t\tsetSettings( {\n\t\t\t\t...rawSettings,\n\t\t\t\tlightbox: {\n\t\t\t\t\t...rawSettings.lightbox,\n\t\t\t\t\t...newSetting,\n\t\t\t\t},\n\t\t\t} );\n\t\t}\n\t};\n\tconst onChangeBorders = ( newStyle: any ) => {\n\t\tif ( ! newStyle?.border ) {\n\t\t\tsetStyle( newStyle );\n\t\t\treturn;\n\t\t}\n\n\t\t// As Global Styles can't conditionally generate styles based on if\n\t\t// other style properties have been set, we need to force split\n\t\t// border definitions for user set global border styles. Border\n\t\t// radius is derived from the same property i.e. `border.radius` if\n\t\t// it is a string that is used. The longhand border radii styles are\n\t\t// only generated if that property is an object.\n\t\t//\n\t\t// For borders (color, style, and width) those are all properties on\n\t\t// the `border` style property. This means if the theme.json defined\n\t\t// split borders and the user condenses them into a flat border or\n\t\t// vice-versa we'd get both sets of styles which would conflict.\n\t\tconst { radius, ...newBorder } = newStyle.border;\n\t\tconst border = applyAllFallbackStyles( newBorder );\n\t\tconst updatedBorder = ! hasSplitBorders( border )\n\t\t\t? {\n\t\t\t\t\ttop: border,\n\t\t\t\t\tright: border,\n\t\t\t\t\tbottom: border,\n\t\t\t\t\tleft: border,\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tcolor: null,\n\t\t\t\t\tstyle: null,\n\t\t\t\t\twidth: null,\n\t\t\t\t\t...border,\n\t\t\t  };\n\n\t\tsetStyle( { ...newStyle, border: { ...updatedBorder, radius } } );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={\n\t\t\t\t\tvariation ? currentBlockStyle?.label : blockType?.title\n\t\t\t\t}\n\t\t\t/>\n\t\t\t<BlockPreviewPanel name={ name } variation={ variation } />\n\t\t\t{ hasVariationsPanel && (\n\t\t\t\t<div className=\"global-styles-ui-screen-variations\">\n\t\t\t\t\t<VStack spacing={ 3 }>\n\t\t\t\t\t\t<Subtitle>{ __( 'Style Variations' ) }</Subtitle>\n\t\t\t\t\t\t<VariationsPanel name={ name } />\n\t\t\t\t\t</VStack>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ hasColorPanel && (\n\t\t\t\t<StylesColorPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBackgroundPanel && (\n\t\t\t\t<StylesBackgroundPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tdefaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasTypographyPanel && (\n\t\t\t\t<StylesTypographyPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasDimensionsPanel && (\n\t\t\t\t<StylesDimensionsPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ onChangeDimensions }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasBorderPanel && (\n\t\t\t\t<StylesBorderPanel\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ onChangeBorders }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasFiltersPanel && (\n\t\t\t\t<StylesFiltersPanel\n\t\t\t\t\tinheritedValue={ inheritedStyleWithLayout }\n\t\t\t\t\tvalue={ styleWithLayout }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tsettings={ settings }\n\t\t\t\t\tincludeLayoutControls\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ hasImageSettingsPanel && (\n\t\t\t\t<ImageSettingsPanel\n\t\t\t\t\tonChange={ onChangeLightbox }\n\t\t\t\t\tvalue={ userSettings }\n\t\t\t\t\tinheritedValue={ settings }\n\t\t\t\t/>\n\t\t\t) }\n\n\t\t\t{ canEditCSS && (\n\t\t\t\t<PanelBody title={ __( 'Advanced' ) } initialOpen={ false }>\n\t\t\t\t\t<p>\n\t\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t\t// translators: %s: is the name of a block e.g., 'Image' or 'Table'.\n\t\t\t\t\t\t\t__(\n\t\t\t\t\t\t\t\t'Add your own CSS to customize the appearance of the %s block. You do not need to include a CSS selector, just add the property and value.'\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\tblockType?.title\n\t\t\t\t\t\t) }\n\t\t\t\t\t</p>\n\t\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t/>\n\t\t\t\t</PanelBody>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default ScreenBlock;\n"],
+  "mappings": "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",
+  "names": []
+}

package/build-module/screen-color-palette.js

@@ -0,0 +1,34 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __ } from "@wordpress/i18n";
+import { privateApis as componentsPrivateApis } from "@wordpress/components";
+import { ScreenHeader } from "./screen-header";
+import ColorPalettePanel from "./color-palette-panel";
+import GradientPalettePanel from "./gradients-palette-panel";
+import { unlock } from "./lock-unlock";
+const { Tabs } = unlock(componentsPrivateApis);
+function ScreenColorPalette({ name }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ScreenHeader,
+      {
+        title: __("Edit palette"),
+        description: __(
+          "The combination of colors used across the site and in color pickers."
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs(Tabs, { children: [
+      /* @__PURE__ */ jsxs(Tabs.TabList, { children: [
+        /* @__PURE__ */ jsx(Tabs.Tab, { tabId: "color", children: __("Color") }),
+        /* @__PURE__ */ jsx(Tabs.Tab, { tabId: "gradient", children: __("Gradient") })
+      ] }),
+      /* @__PURE__ */ jsx(Tabs.TabPanel, { tabId: "color", focusable: false, children: /* @__PURE__ */ jsx(ColorPalettePanel, { name }) }),
+      /* @__PURE__ */ jsx(Tabs.TabPanel, { tabId: "gradient", focusable: false, children: /* @__PURE__ */ jsx(GradientPalettePanel, { name }) })
+    ] })
+  ] });
+}
+var screen_color_palette_default = ScreenColorPalette;
+export {
+  screen_color_palette_default as default
+};
+//# sourceMappingURL=screen-color-palette.js.map

package/build-module/screen-color-palette.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-color-palette.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n// @ts-ignore - WordPress private APIs\nimport { privateApis as componentsPrivateApis } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport ColorPalettePanel from './color-palette-panel';\nimport GradientPalettePanel from './gradients-palette-panel';\n\n/**\n * External dependencies\n */\nimport { unlock } from './lock-unlock';\n\nconst { Tabs } = unlock( componentsPrivateApis );\n\nfunction ScreenColorPalette( { name }: { name?: string } ) {\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Edit palette' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'The combination of colors used across the site and in color pickers.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<Tabs>\n\t\t\t\t<Tabs.TabList>\n\t\t\t\t\t<Tabs.Tab tabId=\"color\">{ __( 'Color' ) }</Tabs.Tab>\n\t\t\t\t\t<Tabs.Tab tabId=\"gradient\">{ __( 'Gradient' ) }</Tabs.Tab>\n\t\t\t\t</Tabs.TabList>\n\t\t\t\t<Tabs.TabPanel tabId=\"color\" focusable={ false }>\n\t\t\t\t\t<ColorPalettePanel name={ name } />\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t\t<Tabs.TabPanel tabId=\"gradient\" focusable={ false }>\n\t\t\t\t\t<GradientPalettePanel name={ name } />\n\t\t\t\t</Tabs.TabPanel>\n\t\t\t</Tabs>\n\t\t</>\n\t);\n}\n\nexport default ScreenColorPalette;\n"],
+  "mappings": "AAuBE,mBACC,KAOC,YARF;AApBF,SAAS,UAAU;AAEnB,SAAS,eAAe,6BAA6B;AAKrD,SAAS,oBAAoB;AAC7B,OAAO,uBAAuB;AAC9B,OAAO,0BAA0B;AAKjC,SAAS,cAAc;AAEvB,MAAM,EAAE,KAAK,IAAI,OAAQ,qBAAsB;AAE/C,SAAS,mBAAoB,EAAE,KAAK,GAAuB;AAC1D,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,cAAe;AAAA,QAC3B,aAAc;AAAA,UACb;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,qBAAC,QACA;AAAA,2BAAC,KAAK,SAAL,EACA;AAAA,4BAAC,KAAK,KAAL,EAAS,OAAM,SAAU,aAAI,OAAQ,GAAG;AAAA,QACzC,oBAAC,KAAK,KAAL,EAAS,OAAM,YAAa,aAAI,UAAW,GAAG;AAAA,SAChD;AAAA,MACA,oBAAC,KAAK,UAAL,EAAc,OAAM,SAAQ,WAAY,OACxC,8BAAC,qBAAkB,MAAc,GAClC;AAAA,MACA,oBAAC,KAAK,UAAL,EAAc,OAAM,YAAW,WAAY,OAC3C,8BAAC,wBAAqB,MAAc,GACrC;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,+BAAQ;",
+  "names": []
+}

package/build-module/screen-colors.js

@@ -0,0 +1,55 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { __ } from "@wordpress/i18n";
+import { __experimentalVStack as VStack } from "@wordpress/components";
+import { privateApis as blockEditorPrivateApis } from "@wordpress/block-editor";
+import { ScreenHeader } from "./screen-header";
+import Palette from "./palette";
+import { useStyle, useSetting } from "./hooks";
+import { unlock } from "./lock-unlock";
+const { useSettingsForBlockElement, ColorPanel: StylesColorPanel } = unlock(
+  blockEditorPrivateApis
+);
+function ScreenColors() {
+  const [style, setStyle] = useStyle(
+    "",
+    void 0,
+    "user",
+    false
+  );
+  const [inheritedStyle] = useStyle(
+    "",
+    void 0,
+    "merged",
+    false
+  );
+  const [rawSettings] = useSetting("");
+  const settings = useSettingsForBlockElement(rawSettings);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      ScreenHeader,
+      {
+        title: __("Colors"),
+        description: __(
+          "Palette colors and the application of those colors on site elements."
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "global-styles-ui-screen", children: /* @__PURE__ */ jsxs(VStack, { spacing: 7, children: [
+      /* @__PURE__ */ jsx(Palette, {}),
+      /* @__PURE__ */ jsx(
+        StylesColorPanel,
+        {
+          inheritedValue: inheritedStyle,
+          value: style,
+          onChange: setStyle,
+          settings
+        }
+      )
+    ] }) })
+  ] });
+}
+var screen_colors_default = ScreenColors;
+export {
+  screen_colors_default as default
+};
+//# sourceMappingURL=screen-colors.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-colors.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { __experimentalVStack as VStack } from '@wordpress/components';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport type {\n\tGlobalStylesStyles,\n\tGlobalStylesSettings,\n} from '@wordpress/global-styles-engine';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport Palette from './palette';\nimport { useStyle, useSetting } from './hooks';\nimport { unlock } from './lock-unlock';\n\nconst { useSettingsForBlockElement, ColorPanel: StylesColorPanel } = unlock(\n\tblockEditorPrivateApis\n);\n\nfunction ScreenColors() {\n\t// Get user styles for editing\n\tconst [ style, setStyle ] = useStyle< GlobalStylesStyles >(\n\t\t'',\n\t\tundefined,\n\t\t'user',\n\t\tfalse\n\t);\n\t// Get inherited styles for display\n\tconst [ inheritedStyle ] = useStyle< GlobalStylesStyles >(\n\t\t'',\n\t\tundefined,\n\t\t'merged',\n\t\tfalse\n\t);\n\t// Get settings for the color panel\n\tconst [ rawSettings ] = useSetting< GlobalStylesSettings >( '' );\n\tconst settings = useSettingsForBlockElement( rawSettings );\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader\n\t\t\t\ttitle={ __( 'Colors' ) }\n\t\t\t\tdescription={ __(\n\t\t\t\t\t'Palette colors and the application of those colors on site elements.'\n\t\t\t\t) }\n\t\t\t/>\n\t\t\t<div className=\"global-styles-ui-screen\">\n\t\t\t\t<VStack spacing={ 7 }>\n\t\t\t\t\t<Palette />\n\t\t\t\t\t<StylesColorPanel\n\t\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t\t\tvalue={ style }\n\t\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\t\tsettings={ settings }\n\t\t\t\t\t/>\n\t\t\t\t</VStack>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenColors;\n"],
+  "mappings": "AA4CE,mBACC,KAOC,YARF;AAzCF,SAAS,UAAU;AACnB,SAAS,wBAAwB,cAAc;AAE/C,SAAS,eAAe,8BAA8B;AAStD,SAAS,oBAAoB;AAC7B,OAAO,aAAa;AACpB,SAAS,UAAU,kBAAkB;AACrC,SAAS,cAAc;AAEvB,MAAM,EAAE,4BAA4B,YAAY,iBAAiB,IAAI;AAAA,EACpE;AACD;AAEA,SAAS,eAAe;AAEvB,QAAM,CAAE,OAAO,QAAS,IAAI;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,CAAE,cAAe,IAAI;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,CAAE,WAAY,IAAI,WAAoC,EAAG;AAC/D,QAAM,WAAW,2BAA4B,WAAY;AAEzD,SACC,iCACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ,GAAI,QAAS;AAAA,QACrB,aAAc;AAAA,UACb;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,oBAAC,SAAI,WAAU,2BACd,+BAAC,UAAO,SAAU,GACjB;AAAA,0BAAC,WAAQ;AAAA,MACT;AAAA,QAAC;AAAA;AAAA,UACA,gBAAiB;AAAA,UACjB,OAAQ;AAAA,UACR,UAAW;AAAA,UACX;AAAA;AAAA,MACD;AAAA,OACD,GACD;AAAA,KACD;AAEF;AAEA,IAAO,wBAAQ;",
+  "names": []
+}