@wordpress/block-editor 15.9.1-next.6deb34194.0 → 15.9.1-next.738bb1424.0

package/build/components/global-styles/image-settings-panel.cjs

@@ -0,0 +1,85 @@
+"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);
+
+// packages/block-editor/src/components/global-styles/image-settings-panel.js
+var image_settings_panel_exports = {};
+__export(image_settings_panel_exports, {
+  default: () => ImageSettingsPanel,
+  useHasImageSettingsPanel: () => useHasImageSettingsPanel
+});
+module.exports = __toCommonJS(image_settings_panel_exports);
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_utils = require("./utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+function useHasImageSettingsPanel(name, value, inheritedValue) {
+  return name === "core/image" && inheritedValue?.lightbox?.allowEditing || !!value?.lightbox;
+}
+function ImageSettingsPanel({
+  onChange,
+  value,
+  inheritedValue,
+  panelId
+}) {
+  const dropdownMenuProps = (0, import_utils.useToolsPanelDropdownMenuProps)();
+  const resetLightbox = () => {
+    onChange(void 0);
+  };
+  const onChangeLightbox = (newSetting) => {
+    onChange({
+      enabled: newSetting
+    });
+  };
+  let lightboxChecked = false;
+  if (inheritedValue?.lightbox?.enabled) {
+    lightboxChecked = inheritedValue.lightbox.enabled;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.__experimentalToolsPanel,
+    {
+      label: (0, import_i18n._x)("Settings", "Image settings"),
+      resetAll: resetLightbox,
+      panelId,
+      dropdownMenuProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.__experimentalToolsPanelItem,
+        {
+          hasValue: () => !!value?.lightbox,
+          label: (0, import_i18n.__)("Enlarge on click"),
+          onDeselect: resetLightbox,
+          isShownByDefault: true,
+          panelId,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.ToggleControl,
+            {
+              label: (0, import_i18n.__)("Enlarge on click"),
+              checked: lightboxChecked,
+              onChange: onChangeLightbox
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useHasImageSettingsPanel
+});
+//# sourceMappingURL=image-settings-panel.cjs.map

package/build/components/global-styles/image-settings-panel.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/global-styles/image-settings-panel.js"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalToolsPanel as ToolsPanel,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\tToggleControl,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useToolsPanelDropdownMenuProps } from './utils';\n\nexport function useHasImageSettingsPanel( name, value, inheritedValue ) {\n\t// Note: If lightbox `value` exists, that means it was\n\t// defined via the the Global Styles UI and will NOT\n\t// be a boolean value or contain the `allowEditing` property,\n\t// so we should show the settings panel in those cases.\n\treturn (\n\t\t( name === 'core/image' && inheritedValue?.lightbox?.allowEditing ) ||\n\t\t!! value?.lightbox\n\t);\n}\n\nexport default function ImageSettingsPanel( {\n\tonChange,\n\tvalue,\n\tinheritedValue,\n\tpanelId,\n} ) {\n\tconst dropdownMenuProps = useToolsPanelDropdownMenuProps();\n\tconst resetLightbox = () => {\n\t\tonChange( undefined );\n\t};\n\n\tconst onChangeLightbox = ( newSetting ) => {\n\t\tonChange( {\n\t\t\tenabled: newSetting,\n\t\t} );\n\t};\n\n\tlet lightboxChecked = false;\n\n\tif ( inheritedValue?.lightbox?.enabled ) {\n\t\tlightboxChecked = inheritedValue.lightbox.enabled;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t<ToolsPanel\n\t\t\t\tlabel={ _x( 'Settings', 'Image settings' ) }\n\t\t\t\tresetAll={ resetLightbox }\n\t\t\t\tpanelId={ panelId }\n\t\t\t\tdropdownMenuProps={ dropdownMenuProps }\n\t\t\t>\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\t// We use the `userSettings` prop instead of `settings`, because `settings`\n\t\t\t\t\t// contains the core/theme values for the lightbox and we want to show the\n\t\t\t\t\t// \"RESET\" button ONLY when the user has explicitly set a value in the\n\t\t\t\t\t// Global Styles.\n\t\t\t\t\thasValue={ () => !! value?.lightbox }\n\t\t\t\t\tlabel={ __( 'Enlarge on click' ) }\n\t\t\t\t\tonDeselect={ resetLightbox }\n\t\t\t\t\tisShownByDefault\n\t\t\t\t\tpanelId={ panelId }\n\t\t\t\t>\n\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\tlabel={ __( 'Enlarge on click' ) }\n\t\t\t\t\t\tchecked={ lightboxChecked }\n\t\t\t\t\t\tonChange={ onChangeLightbox }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t</ToolsPanel>\n\t\t</>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAIO;AACP,kBAAuB;AAKvB,mBAA+C;AAqC7C;AAnCK,SAAS,yBAA0B,MAAM,OAAO,gBAAiB;AAKvE,SACG,SAAS,gBAAgB,gBAAgB,UAAU,gBACrD,CAAC,CAAE,OAAO;AAEZ;AAEe,SAAR,mBAAqC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,wBAAoB,6CAA+B;AACzD,QAAM,gBAAgB,MAAM;AAC3B,aAAU,MAAU;AAAA,EACrB;AAEA,QAAM,mBAAmB,CAAE,eAAgB;AAC1C,aAAU;AAAA,MACT,SAAS;AAAA,IACV,CAAE;AAAA,EACH;AAEA,MAAI,kBAAkB;AAEtB,MAAK,gBAAgB,UAAU,SAAU;AACxC,sBAAkB,eAAe,SAAS;AAAA,EAC3C;AAEA,SACC,2EACC;AAAA,IAAC,kBAAAA;AAAA,IAAA;AAAA,MACA,WAAQ,gBAAI,YAAY,gBAAiB;AAAA,MACzC,UAAW;AAAA,MACX;AAAA,MACA;AAAA,MAEA;AAAA,QAAC,kBAAAC;AAAA,QAAA;AAAA,UAKA,UAAW,MAAM,CAAC,CAAE,OAAO;AAAA,UAC3B,WAAQ,gBAAI,kBAAmB;AAAA,UAC/B,YAAa;AAAA,UACb,kBAAgB;AAAA,UAChB;AAAA,UAEA;AAAA,YAAC;AAAA;AAAA,cACA,WAAQ,gBAAI,kBAAmB;AAAA,cAC/B,SAAU;AAAA,cACV,UAAW;AAAA;AAAA,UACZ;AAAA;AAAA,MACD;AAAA;AAAA,EACD,GACD;AAEF;",
+  "names": ["ToolsPanel", "ToolsPanelItem"]
+}

package/build/components/global-styles/index.cjs

@@ -0,0 +1,81 @@
+"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);
+
+// packages/block-editor/src/components/global-styles/index.js
+var global_styles_exports = {};
+__export(global_styles_exports, {
+  AdvancedPanel: () => import_advanced_panel.default,
+  BackgroundPanel: () => import_background_panel.default,
+  BorderPanel: () => import_border_panel.default,
+  ColorPanel: () => import_color_panel.default,
+  DimensionsPanel: () => import_dimensions_panel.default,
+  FiltersPanel: () => import_filters_panel.default,
+  ImageSettingsPanel: () => import_image_settings_panel.default,
+  TypographyPanel: () => import_typography_panel.default,
+  useHasBackgroundPanel: () => import_background_panel.useHasBackgroundPanel,
+  useHasBorderPanel: () => import_border_panel.useHasBorderPanel,
+  useHasBorderPanelControls: () => import_border_panel.useHasBorderPanelControls,
+  useHasColorPanel: () => import_color_panel.useHasColorPanel,
+  useHasDimensionsPanel: () => import_dimensions_panel.useHasDimensionsPanel,
+  useHasFiltersPanel: () => import_filters_panel.useHasFiltersPanel,
+  useHasImageSettingsPanel: () => import_image_settings_panel.useHasImageSettingsPanel,
+  useHasTypographyPanel: () => import_typography_panel.useHasTypographyPanel,
+  useSettingsForBlockElement: () => import_hooks.useSettingsForBlockElement
+});
+module.exports = __toCommonJS(global_styles_exports);
+var import_hooks = require("./hooks.cjs");
+var import_typography_panel = __toESM(require("./typography-panel.cjs"), 1);
+var import_dimensions_panel = __toESM(require("./dimensions-panel.cjs"), 1);
+var import_border_panel = __toESM(require("./border-panel.cjs"), 1);
+var import_color_panel = __toESM(require("./color-panel.cjs"), 1);
+var import_filters_panel = __toESM(require("./filters-panel.cjs"), 1);
+var import_image_settings_panel = __toESM(require("./image-settings-panel.cjs"), 1);
+var import_advanced_panel = __toESM(require("./advanced-panel.cjs"), 1);
+var import_background_panel = __toESM(require("./background-panel.cjs"), 1);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AdvancedPanel,
+  BackgroundPanel,
+  BorderPanel,
+  ColorPanel,
+  DimensionsPanel,
+  FiltersPanel,
+  ImageSettingsPanel,
+  TypographyPanel,
+  useHasBackgroundPanel,
+  useHasBorderPanel,
+  useHasBorderPanelControls,
+  useHasColorPanel,
+  useHasDimensionsPanel,
+  useHasFiltersPanel,
+  useHasImageSettingsPanel,
+  useHasTypographyPanel,
+  useSettingsForBlockElement
+});
+//# sourceMappingURL=index.cjs.map

package/build/components/global-styles/shadow-panel-components.cjs

@@ -0,0 +1,229 @@
+"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);
+
+// packages/block-editor/src/components/global-styles/shadow-panel-components.js
+var shadow_panel_components_exports = {};
+__export(shadow_panel_components_exports, {
+  ShadowIndicator: () => ShadowIndicator,
+  ShadowPopover: () => ShadowPopover,
+  ShadowPopoverContainer: () => ShadowPopoverContainer,
+  ShadowPresets: () => ShadowPresets,
+  useShadowPresets: () => useShadowPresets
+});
+module.exports = __toCommonJS(shadow_panel_components_exports);
+var import_i18n = require("@wordpress/i18n");
+var import_components = require("@wordpress/components");
+var import_element = require("@wordpress/element");
+var import_icons = require("@wordpress/icons");
+var import_clsx = __toESM(require("clsx"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var EMPTY_ARRAY = [];
+function ShadowPopoverContainer({ shadow, onShadowChange, settings }) {
+  const shadows = useShadowPresets(settings);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-global-styles__shadow-popover-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalVStack, { spacing: 4, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalHeading, { level: 5, children: (0, import_i18n.__)("Drop shadow") }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      ShadowPresets,
+      {
+        presets: shadows,
+        activeShadow: shadow,
+        onSelect: onShadowChange
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "block-editor-global-styles__clear-shadow", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_components.Button,
+      {
+        __next40pxDefaultSize: true,
+        variant: "tertiary",
+        onClick: () => onShadowChange(void 0),
+        disabled: !shadow,
+        accessibleWhenDisabled: true,
+        children: (0, import_i18n.__)("Clear")
+      }
+    ) })
+  ] }) });
+}
+function ShadowPresets({ presets, activeShadow, onSelect }) {
+  return !presets ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Composite,
+    {
+      role: "listbox",
+      className: "block-editor-global-styles__shadow__list",
+      "aria-label": (0, import_i18n.__)("Drop shadows"),
+      children: presets.map(({ name, slug, shadow }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ShadowIndicator,
+        {
+          label: name,
+          isActive: shadow === activeShadow,
+          type: slug === "unset" ? "unset" : "preset",
+          onSelect: () => onSelect(shadow === activeShadow ? void 0 : shadow),
+          shadow
+        },
+        slug
+      ))
+    }
+  );
+}
+function ShadowIndicator({ type, label, isActive, onSelect, shadow }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Tooltip, { text: label, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Composite.Item,
+    {
+      role: "option",
+      "aria-label": label,
+      "aria-selected": isActive,
+      className: (0, import_clsx.default)("block-editor-global-styles__shadow__item", {
+        "is-active": isActive
+      }),
+      render: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          className: (0, import_clsx.default)(
+            "block-editor-global-styles__shadow-indicator",
+            {
+              unset: type === "unset"
+            }
+          ),
+          onClick: onSelect,
+          style: { boxShadow: shadow },
+          "aria-label": label,
+          children: isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.Icon, { icon: import_icons.check })
+        }
+      )
+    }
+  ) });
+}
+function ShadowPopover({ shadow, onShadowChange, settings }) {
+  const popoverProps = {
+    placement: "left-start",
+    offset: 36,
+    shift: true
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.Dropdown,
+    {
+      popoverProps,
+      className: "block-editor-global-styles__shadow-dropdown",
+      renderToggle: renderShadowToggle(shadow, onShadowChange),
+      renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__experimentalDropdownContentWrapper, { paddingSize: "medium", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        ShadowPopoverContainer,
+        {
+          shadow,
+          onShadowChange,
+          settings
+        }
+      ) })
+    }
+  );
+}
+function renderShadowToggle(shadow, onShadowChange) {
+  return ({ onToggle, isOpen }) => {
+    const shadowButtonRef = (0, import_element.useRef)(void 0);
+    const toggleProps = {
+      onClick: onToggle,
+      className: (0, import_clsx.default)(
+        "block-editor-global-styles__shadow-dropdown-toggle",
+        { "is-open": isOpen }
+      ),
+      "aria-expanded": isOpen,
+      ref: shadowButtonRef
+    };
+    const removeButtonProps = {
+      onClick: () => {
+        if (isOpen) {
+          onToggle();
+        }
+        onShadowChange(void 0);
+        shadowButtonRef.current?.focus();
+      },
+      className: (0, import_clsx.default)(
+        "block-editor-global-styles__shadow-editor__remove-button",
+        { "is-open": isOpen }
+      ),
+      label: (0, import_i18n.__)("Remove")
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Button, { __next40pxDefaultSize: true, ...toggleProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.__experimentalHStack, { justify: "flex-start", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_icons.Icon,
+          {
+            className: "block-editor-global-styles__toggle-icon",
+            icon: import_icons.shadow,
+            size: 24
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: (0, import_i18n.__)("Drop shadow") })
+      ] }) }),
+      !!shadow && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_components.Button,
+        {
+          __next40pxDefaultSize: true,
+          size: "small",
+          icon: import_icons.reset,
+          ...removeButtonProps
+        }
+      )
+    ] });
+  };
+}
+function useShadowPresets(settings) {
+  return (0, import_element.useMemo)(() => {
+    if (!settings?.shadow) {
+      return EMPTY_ARRAY;
+    }
+    const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
+    const {
+      default: defaultShadows,
+      theme: themeShadows,
+      custom: customShadows
+    } = settings?.shadow?.presets ?? {};
+    const unsetShadow = {
+      name: (0, import_i18n.__)("Unset"),
+      slug: "unset",
+      shadow: "none"
+    };
+    const shadowPresets = [
+      ...defaultPresetsEnabled && defaultShadows || EMPTY_ARRAY,
+      ...themeShadows || EMPTY_ARRAY,
+      ...customShadows || EMPTY_ARRAY
+    ];
+    if (shadowPresets.length) {
+      shadowPresets.unshift(unsetShadow);
+    }
+    return shadowPresets;
+  }, [settings]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ShadowIndicator,
+  ShadowPopover,
+  ShadowPopoverContainer,
+  ShadowPresets,
+  useShadowPresets
+});
+//# sourceMappingURL=shadow-panel-components.cjs.map