@wordpress/global-styles-ui 1.1.0

package/build/screen-block.js

@@ -0,0 +1,316 @@
+"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 screen_block_exports = {};
+__export(screen_block_exports, {
+  default: () => screen_block_default
+});
+module.exports = __toCommonJS(screen_block_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_blocks = require("@wordpress/blocks");
+var import_block_editor = require("@wordpress/block-editor");
+var import_element = require("@wordpress/element");
+var import_data = require("@wordpress/data");
+var import_core_data = require("@wordpress/core-data");
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_screen_header = require("./screen-header");
+var import_block_preview_panel = __toESM(require("./block-preview-panel"));
+var import_subtitle = require("./subtitle");
+var import_variations_panel = require("./variations/variations-panel");
+var import_hooks = require("./hooks");
+var import_lock_unlock = require("./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 ((0, import_components.__experimentalHasSplitBorders)(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
+} = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+function ScreenBlock({ name, variation }) {
+  let prefixParts = [];
+  if (variation) {
+    prefixParts = ["variations", variation].concat(prefixParts);
+  }
+  const prefix = prefixParts.join(".");
+  const [style] = (0, import_hooks.useStyle)(prefix, name, "user", false);
+  const [inheritedStyle, setStyle] = (0, import_hooks.useStyle)(
+    prefix,
+    name,
+    "merged",
+    false
+  );
+  const [userSettings] = (0, import_hooks.useSetting)("", name, "user");
+  const [rawSettings, setSettings] = (0, import_hooks.useSetting)("", name);
+  const settingsForBlockElement = useSettingsForBlockElement(
+    rawSettings,
+    name
+  );
+  const blockType = (0, import_blocks.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 = (0, import_element.useMemo)(() => {
+    const updatedSettings = structuredClone(settingsForBlockElement);
+    if (disableBlockGap) {
+      updatedSettings.spacing.blockGap = false;
+    }
+    if (disableAspectRatio) {
+      updatedSettings.dimensions.aspectRatio = false;
+    }
+    return updatedSettings;
+  }, [settingsForBlockElement, disableBlockGap, disableAspectRatio]);
+  const blockVariations = (0, import_variations_panel.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 } = (0, import_data.useSelect)((select) => {
+    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(import_core_data.store);
+    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 = (0, import_element.useMemo)(() => {
+    return {
+      ...inheritedStyle,
+      layout: settings.layout
+    };
+  }, [inheritedStyle, settings.layout]);
+  const styleWithLayout = (0, import_element.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 = !(0, import_components.__experimentalHasSplitBorders)(border) ? {
+      top: border,
+      right: border,
+      bottom: border,
+      left: border
+    } : {
+      color: null,
+      style: null,
+      width: null,
+      ...border
+    };
+    setStyle({ ...newStyle, border: { ...updatedBorder, radius } });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_screen_header.ScreenHeader,
+      {
+        title: variation ? currentBlockStyle?.label : blockType?.title
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_block_preview_panel.default, { name, variation }),
+    hasVariationsPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "global-styles-ui-screen-variations", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 3, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_subtitle.Subtitle, { children: (0, import_i18n.__)("Style Variations") }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_variations_panel.VariationsPanel, { name })
+    ] }) }),
+    hasColorPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StylesColorPanel,
+      {
+        inheritedValue: inheritedStyle,
+        value: style,
+        onChange: setStyle,
+        settings
+      }
+    ),
+    hasBackgroundPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StylesBackgroundPanel,
+      {
+        inheritedValue: inheritedStyle,
+        value: style,
+        onChange: setStyle,
+        settings,
+        defaultValues: BACKGROUND_BLOCK_DEFAULT_VALUES
+      }
+    ),
+    hasTypographyPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StylesTypographyPanel,
+      {
+        inheritedValue: inheritedStyle,
+        value: style,
+        onChange: setStyle,
+        settings
+      }
+    ),
+    hasDimensionsPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StylesDimensionsPanel,
+      {
+        inheritedValue: inheritedStyleWithLayout,
+        value: styleWithLayout,
+        onChange: onChangeDimensions,
+        settings,
+        includeLayoutControls: true
+      }
+    ),
+    hasBorderPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StylesBorderPanel,
+      {
+        inheritedValue: inheritedStyle,
+        value: style,
+        onChange: onChangeBorders,
+        settings
+      }
+    ),
+    hasFiltersPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      StylesFiltersPanel,
+      {
+        inheritedValue: inheritedStyleWithLayout,
+        value: styleWithLayout,
+        onChange: setStyle,
+        settings,
+        includeLayoutControls: true
+      }
+    ),
+    hasImageSettingsPanel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ImageSettingsPanel,
+      {
+        onChange: onChangeLightbox,
+        value: userSettings,
+        inheritedValue: settings
+      }
+    ),
+    canEditCSS && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.PanelBody, { title: (0, import_i18n.__)("Advanced"), initialOpen: false, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { children: (0, import_i18n.sprintf)(
+        // translators: %s: is the name of a block e.g., 'Image' or 'Table'.
+        (0, import_i18n.__)(
+          "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__ */ (0, import_jsx_runtime.jsx)(
+        StylesAdvancedPanel,
+        {
+          value: style,
+          onChange: setStyle,
+          inheritedValue: inheritedStyle
+        }
+      )
+    ] })
+  ] });
+}
+var screen_block_default = ScreenBlock;
+//# sourceMappingURL=screen-block.js.map

package/build/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": ["hasSplitBorders", "blockEditorPrivateApis", "coreStore", "BlockPreviewPanel", "VStack"]
+}

package/build/screen-color-palette.js

@@ -0,0 +1,64 @@
+"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 screen_color_palette_exports = {};
+__export(screen_color_palette_exports, {
+  default: () => screen_color_palette_default
+});
+module.exports = __toCommonJS(screen_color_palette_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_screen_header = require("./screen-header");
+var import_color_palette_panel = __toESM(require("./color-palette-panel"));
+var import_gradients_palette_panel = __toESM(require("./gradients-palette-panel"));
+var import_lock_unlock = require("./lock-unlock");
+const { Tabs } = (0, import_lock_unlock.unlock)(import_components.privateApis);
+function ScreenColorPalette({ name }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_screen_header.ScreenHeader,
+      {
+        title: (0, import_i18n.__)("Edit palette"),
+        description: (0, import_i18n.__)(
+          "The combination of colors used across the site and in color pickers."
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Tabs.TabList, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "color", children: (0, import_i18n.__)("Color") }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.Tab, { tabId: "gradient", children: (0, import_i18n.__)("Gradient") })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.TabPanel, { tabId: "color", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_color_palette_panel.default, { name }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs.TabPanel, { tabId: "gradient", focusable: false, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_gradients_palette_panel.default, { name }) })
+    ] })
+  ] });
+}
+var screen_color_palette_default = ScreenColorPalette;
+//# sourceMappingURL=screen-color-palette.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBE;AApBF,kBAAmB;AAEnB,wBAAqD;AAKrD,2BAA6B;AAC7B,iCAA8B;AAC9B,qCAAiC;AAKjC,yBAAuB;AAEvB,MAAM,EAAE,KAAK,QAAI,2BAAQ,kBAAAA,WAAsB;AAE/C,SAAS,mBAAoB,EAAE,KAAK,GAAuB;AAC1D,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAQ,gBAAI,cAAe;AAAA,QAC3B,iBAAc;AAAA,UACb;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,6CAAC,QACA;AAAA,mDAAC,KAAK,SAAL,EACA;AAAA,oDAAC,KAAK,KAAL,EAAS,OAAM,SAAU,8BAAI,OAAQ,GAAG;AAAA,QACzC,4CAAC,KAAK,KAAL,EAAS,OAAM,YAAa,8BAAI,UAAW,GAAG;AAAA,SAChD;AAAA,MACA,4CAAC,KAAK,UAAL,EAAc,OAAM,SAAQ,WAAY,OACxC,sDAAC,2BAAAC,SAAA,EAAkB,MAAc,GAClC;AAAA,MACA,4CAAC,KAAK,UAAL,EAAc,OAAM,YAAW,WAAY,OAC3C,sDAAC,+BAAAC,SAAA,EAAqB,MAAc,GACrC;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,+BAAQ;",
+  "names": ["componentsPrivateApis", "ColorPalettePanel", "GradientPalettePanel"]
+}

package/build/screen-colors.js

@@ -0,0 +1,85 @@
+"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 screen_colors_exports = {};
+__export(screen_colors_exports, {
+  default: () => screen_colors_default
+});
+module.exports = __toCommonJS(screen_colors_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_block_editor = require("@wordpress/block-editor");
+var import_screen_header = require("./screen-header");
+var import_palette = __toESM(require("./palette"));
+var import_hooks = require("./hooks");
+var import_lock_unlock = require("./lock-unlock");
+const { useSettingsForBlockElement, ColorPanel: StylesColorPanel } = (0, import_lock_unlock.unlock)(
+  import_block_editor.privateApis
+);
+function ScreenColors() {
+  const [style, setStyle] = (0, import_hooks.useStyle)(
+    "",
+    void 0,
+    "user",
+    false
+  );
+  const [inheritedStyle] = (0, import_hooks.useStyle)(
+    "",
+    void 0,
+    "merged",
+    false
+  );
+  const [rawSettings] = (0, import_hooks.useSetting)("");
+  const settings = useSettingsForBlockElement(rawSettings);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_screen_header.ScreenHeader,
+      {
+        title: (0, import_i18n.__)("Colors"),
+        description: (0, import_i18n.__)(
+          "Palette colors and the application of those colors on site elements."
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "global-styles-ui-screen", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 7, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_palette.default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StylesColorPanel,
+        {
+          inheritedValue: inheritedStyle,
+          value: style,
+          onChange: setStyle,
+          settings
+        }
+      )
+    ] }) })
+  ] });
+}
+var screen_colors_default = ScreenColors;
+//# sourceMappingURL=screen-colors.js.map

package/build/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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA4CE;AAzCF,kBAAmB;AACnB,wBAA+C;AAE/C,0BAAsD;AAStD,2BAA6B;AAC7B,qBAAoB;AACpB,mBAAqC;AACrC,yBAAuB;AAEvB,MAAM,EAAE,4BAA4B,YAAY,iBAAiB,QAAI;AAAA,EACpE,oBAAAA;AACD;AAEA,SAAS,eAAe;AAEvB,QAAM,CAAE,OAAO,QAAS,QAAI;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,CAAE,cAAe,QAAI;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,QAAM,CAAE,WAAY,QAAI,yBAAoC,EAAG;AAC/D,QAAM,WAAW,2BAA4B,WAAY;AAEzD,SACC,4EACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACA,WAAQ,gBAAI,QAAS;AAAA,QACrB,iBAAc;AAAA,UACb;AAAA,QACD;AAAA;AAAA,IACD;AAAA,IACA,4CAAC,SAAI,WAAU,2BACd,uDAAC,kBAAAC,sBAAA,EAAO,SAAU,GACjB;AAAA,kDAAC,eAAAC,SAAA,EAAQ;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": ["blockEditorPrivateApis", "VStack", "Palette"]
+}

package/build/screen-css.js

@@ -0,0 +1,68 @@
+"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 screen_css_exports = {};
+__export(screen_css_exports, {
+  default: () => screen_css_default
+});
+module.exports = __toCommonJS(screen_css_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_block_editor = require("@wordpress/block-editor");
+var import_screen_header = require("./screen-header");
+var import_hooks = require("./hooks");
+var import_lock_unlock = require("./lock-unlock");
+const { AdvancedPanel: StylesAdvancedPanel } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+function ScreenCSS() {
+  const description = (0, import_i18n.__)(
+    "Add your own CSS to customize the appearance and layout of your site."
+  );
+  const [style] = (0, import_hooks.useStyle)("", void 0, "user", false);
+  const [inheritedStyle, setStyle] = (0, import_hooks.useStyle)(
+    "",
+    void 0,
+    "merged",
+    false
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_screen_header.ScreenHeader, { title: (0, import_i18n.__)("CSS"), description }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "global-styles-ui-screen-css", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.ExternalLink,
+        {
+          href: (0, import_i18n.__)(
+            "https://developer.wordpress.org/advanced-administration/wordpress/css/"
+          ),
+          className: "global-styles-ui-screen-css-help-link",
+          children: (0, import_i18n.__)("Learn more about CSS")
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        StylesAdvancedPanel,
+        {
+          value: style,
+          onChange: setStyle,
+          inheritedValue: inheritedStyle
+        }
+      )
+    ] })
+  ] });
+}
+var screen_css_default = ScreenCSS;
+//# sourceMappingURL=screen-css.js.map

package/build/screen-css.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/screen-css.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { ExternalLink } from '@wordpress/components';\n// @ts-expect-error: Not typed yet.\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\n\n/**\n * Internal dependencies\n */\nimport { ScreenHeader } from './screen-header';\nimport { useStyle } from './hooks';\nimport { unlock } from './lock-unlock';\n\n// Access AdvancedPanel from block-editor private APIs\nconst { AdvancedPanel: StylesAdvancedPanel } = unlock( blockEditorPrivateApis );\n\nfunction ScreenCSS() {\n\tconst description = __(\n\t\t'Add your own CSS to customize the appearance and layout of your site.'\n\t);\n\n\t// Get user-only styles (should not decode/encode to preserve raw CSS)\n\tconst [ style ] = useStyle( '', undefined, 'user', false );\n\t// Get all styles (inherited + user) for context\n\tconst [ inheritedStyle, setStyle ] = useStyle(\n\t\t'',\n\t\tundefined,\n\t\t'merged',\n\t\tfalse\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<ScreenHeader title={ __( 'CSS' ) } description={ description } />\n\t\t\t<div className=\"global-styles-ui-screen-css\">\n\t\t\t\t<ExternalLink\n\t\t\t\t\thref={ __(\n\t\t\t\t\t\t'https://developer.wordpress.org/advanced-administration/wordpress/css/'\n\t\t\t\t\t) }\n\t\t\t\t\tclassName=\"global-styles-ui-screen-css-help-link\"\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Learn more about CSS' ) }\n\t\t\t\t</ExternalLink>\n\t\t\t\t<StylesAdvancedPanel\n\t\t\t\t\tvalue={ style }\n\t\t\t\t\tonChange={ setStyle }\n\t\t\t\t\tinheritedValue={ inheritedStyle }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</>\n\t);\n}\n\nexport default ScreenCSS;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCE;AA/BF,kBAAmB;AACnB,wBAA6B;AAE7B,0BAAsD;AAKtD,2BAA6B;AAC7B,mBAAyB;AACzB,yBAAuB;AAGvB,MAAM,EAAE,eAAe,oBAAoB,QAAI,2BAAQ,oBAAAA,WAAuB;AAE9E,SAAS,YAAY;AACpB,QAAM,kBAAc;AAAA,IACnB;AAAA,EACD;AAGA,QAAM,CAAE,KAAM,QAAI,uBAAU,IAAI,QAAW,QAAQ,KAAM;AAEzD,QAAM,CAAE,gBAAgB,QAAS,QAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,SACC,4EACC;AAAA,gDAAC,qCAAa,WAAQ,gBAAI,KAAM,GAAI,aAA4B;AAAA,IAChE,6CAAC,SAAI,WAAU,+BACd;AAAA;AAAA,QAAC;AAAA;AAAA,UACA,UAAO;AAAA,YACN;AAAA,UACD;AAAA,UACA,WAAU;AAAA,UAER,8BAAI,sBAAuB;AAAA;AAAA,MAC9B;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACA,OAAQ;AAAA,UACR,UAAW;AAAA,UACX,gBAAiB;AAAA;AAAA,MAClB;AAAA,OACD;AAAA,KACD;AAEF;AAEA,IAAO,qBAAQ;",
+  "names": ["blockEditorPrivateApis"]
+}