@wordpress/edit-site 5.35.0 → 6.0.0

package/build/components/global-styles/shadows-edit-panel.js

@@ -0,0 +1,458 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ShadowsEditPanel;
+var _clsx = _interopRequireDefault(require("clsx"));
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _blockEditor = require("@wordpress/block-editor");
+var _icons = require("@wordpress/icons");
+var _element = require("@wordpress/element");
+var _lockUnlock = require("../../lock-unlock");
+var _subtitle = _interopRequireDefault(require("./subtitle"));
+var _header = _interopRequireDefault(require("./header"));
+var _shadowsPanel = require("./shadows-panel");
+var _shadowUtils = require("./shadow-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * External dependencies
+ */
+
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  useGlobalSetting
+} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+const {
+  DropdownMenuV2: DropdownMenu,
+  DropdownMenuItemV2: DropdownMenuItem,
+  DropdownMenuItemLabelV2: DropdownMenuItemLabel
+} = (0, _lockUnlock.unlock)(_components.privateApis);
+const customShadowMenuItems = [{
+  label: (0, _i18n.__)('Rename'),
+  action: 'rename'
+}, {
+  label: (0, _i18n.__)('Delete'),
+  action: 'delete'
+}];
+const presetShadowMenuItems = [{
+  label: (0, _i18n.__)('Reset'),
+  action: 'reset'
+}];
+function ShadowsEditPanel() {
+  const {
+    params: {
+      category,
+      slug
+    },
+    goTo
+  } = (0, _components.__experimentalUseNavigator)();
+  const [shadows, setShadows] = useGlobalSetting(`shadow.presets.${category}`);
+  const [baseShadows] = useGlobalSetting(`shadow.presets.${category}`, undefined, 'base');
+  const [selectedShadow, setSelectedShadow] = (0, _element.useState)(() => (shadows || []).find(shadow => shadow.slug === slug));
+  const baseSelectedShadow = (0, _element.useMemo)(() => (baseShadows || []).find(b => b.slug === slug), [baseShadows, slug]);
+  const [isConfirmDialogVisible, setIsConfirmDialogVisible] = (0, _element.useState)(false);
+  const [isRenameModalVisible, setIsRenameModalVisible] = (0, _element.useState)(false);
+  const [shadowName, setShadowName] = (0, _element.useState)(selectedShadow.name);
+  const onShadowChange = shadow => {
+    setSelectedShadow({
+      ...selectedShadow,
+      shadow
+    });
+    const updatedShadows = shadows.map(s => s.slug === slug ? {
+      ...selectedShadow,
+      shadow
+    } : s);
+    setShadows(updatedShadows);
+  };
+  const onMenuClick = action => {
+    if (action === 'reset') {
+      const updatedShadows = shadows.map(s => s.slug === slug ? baseSelectedShadow : s);
+      setSelectedShadow(baseSelectedShadow);
+      setShadows(updatedShadows);
+    } else if (action === 'delete') {
+      setIsConfirmDialogVisible(true);
+    } else if (action === 'rename') {
+      setIsRenameModalVisible(true);
+    }
+  };
+  const handleShadowDelete = () => {
+    const updatedShadows = shadows.filter(s => s.slug !== slug);
+    setShadows(updatedShadows);
+    goTo(`/shadows`);
+  };
+  const handleShadowRename = newName => {
+    if (!newName) {
+      return;
+    }
+    const updatedShadows = shadows.map(s => s.slug === slug ? {
+      ...selectedShadow,
+      name: newName
+    } : s);
+    setSelectedShadow({
+      ...selectedShadow,
+      name: newName
+    });
+    setShadows(updatedShadows);
+  };
+  return !selectedShadow ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
+    title: ""
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      justify: "space-between",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
+        title: selectedShadow.name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+          marginTop: 2,
+          marginBottom: 0,
+          paddingX: 4,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenu, {
+            trigger: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              size: "small",
+              icon: _icons.moreVertical,
+              label: (0, _i18n.__)('Menu')
+            }),
+            children: (category === 'custom' ? customShadowMenuItems : presetShadowMenuItems).map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItem, {
+              onClick: () => onMenuClick(item.action),
+              disabled: item.action === 'reset' && selectedShadow.shadow === baseSelectedShadow.shadow,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DropdownMenuItemLabel, {
+                children: item.label
+              })
+            }, item.action))
+          })
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "edit-site-global-styles-screen",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowsPreview, {
+        shadow: selectedShadow.shadow
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowEditor, {
+        shadow: selectedShadow.shadow,
+        onChange: onShadowChange
+      })]
+    }), isConfirmDialogVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalConfirmDialog, {
+      isOpen: true,
+      onConfirm: () => {
+        handleShadowDelete();
+        setIsConfirmDialogVisible(false);
+      },
+      onCancel: () => {
+        setIsConfirmDialogVisible(false);
+      },
+      confirmButtonText: (0, _i18n.__)('Delete'),
+      children: (0, _i18n.sprintf)(
+      // translators: %s: name of the shadow
+      'Are you sure you want to delete "%s"?', selectedShadow.name)
+    }), isRenameModalVisible && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Modal, {
+      title: (0, _i18n.__)('Rename'),
+      onRequestClose: () => setIsRenameModalVisible(false),
+      size: "small",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("form", {
+        onSubmit: event => {
+          event.preventDefault();
+          handleShadowRename(shadowName);
+          setIsRenameModalVisible(false);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalInputControl, {
+          autoComplete: "off",
+          label: (0, _i18n.__)('Name'),
+          placeholder: (0, _i18n.__)('Shadow name'),
+          value: shadowName,
+          onChange: value => setShadowName(value)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+          marginBottom: 6
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.Flex, {
+          className: "block-editor-shadow-edit-modal__actions",
+          justify: "flex-end",
+          expanded: false,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              variant: "tertiary",
+              onClick: () => setIsRenameModalVisible(false),
+              children: (0, _i18n.__)('Cancel')
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+              variant: "primary",
+              type: "submit",
+              children: (0, _i18n.__)('Save')
+            })
+          })]
+        })]
+      })
+    })]
+  });
+}
+function ShadowsPreview({
+  shadow
+}) {
+  const shadowStyle = {
+    boxShadow: shadow
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {
+    marginBottom: 4,
+    marginTop: -2,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHStack, {
+      align: "center",
+      justify: "center",
+      className: "edit-site-global-styles__shadow-preview-panel",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "edit-site-global-styles__shadow-preview-block",
+        style: shadowStyle
+      })
+    })
+  });
+}
+function ShadowEditor({
+  shadow,
+  onChange
+}) {
+  const shadowParts = (0, _element.useMemo)(() => (0, _shadowUtils.getShadowParts)(shadow), [shadow]);
+  const onChangeShadowPart = (index, part) => {
+    shadowParts[index] = part;
+    onChange(shadowParts.join(', '));
+  };
+  const onAddShadowPart = () => {
+    shadowParts.push(_shadowsPanel.defaultShadow);
+    onChange(shadowParts.join(', '));
+  };
+  const onRemoveShadowPart = index => {
+    shadowParts.splice(index, 1);
+    onChange(shadowParts.join(', '));
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalVStack, {
+      spacing: 2,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+        justify: "space-between",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Flex, {
+          align: "center",
+          className: "edit-site-global-styles__shadows-panel__title",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
+            level: 3,
+            children: (0, _i18n.__)('Shadows')
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+          className: "edit-site-global-styles__shadows-panel__options-container",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            size: "small",
+            icon: _icons.plus,
+            label: (0, _i18n.__)('Add shadow'),
+            onClick: () => {
+              onAddShadowPart();
+            }
+          })
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalSpacer, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
+      isBordered: true,
+      isSeparated: true,
+      children: shadowParts.map((part, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowItem, {
+        shadow: part,
+        onChange: value => onChangeShadowPart(index, value),
+        canRemove: shadowParts.length > 1,
+        onRemove: () => onRemoveShadowPart(index)
+      }, index))
+    })]
+  });
+}
+function ShadowItem({
+  shadow,
+  onChange,
+  canRemove,
+  onRemove
+}) {
+  const popoverProps = {
+    placement: 'left-start',
+    offset: 36,
+    shift: true
+  };
+  const shadowObj = (0, _element.useMemo)(() => (0, _shadowUtils.shadowStringToObject)(shadow), [shadow]);
+  const onShadowChange = newShadow => {
+    onChange((0, _shadowUtils.shadowObjectToString)(newShadow));
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Dropdown, {
+    popoverProps: popoverProps,
+    className: "edit-site-global-styles__shadow-editor__dropdown",
+    renderToggle: ({
+      onToggle,
+      isOpen
+    }) => {
+      const toggleProps = {
+        onClick: onToggle,
+        className: (0, _clsx.default)('edit-site-global-styles__shadow-editor__dropdown-toggle', {
+          'is-open': isOpen
+        }),
+        'aria-expanded': isOpen
+      };
+      const removeButtonProps = {
+        onClick: onRemove,
+        className: (0, _clsx.default)('edit-site-global-styles__shadow-editor__remove-button', {
+          'is-open': isOpen
+        }),
+        ariaLabel: (0, _i18n.__)('Remove shadow'),
+        tooltip: (0, _i18n.__)('Remove shadow')
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+        align: "center",
+        justify: "flex-start",
+        spacing: 0,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+          style: {
+            flexGrow: 1
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            icon: _icons.shadow,
+            ...toggleProps,
+            children: shadowObj.inset ? (0, _i18n.__)('Inner shadow') : (0, _i18n.__)('Drop shadow')
+          })
+        }), canRemove && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+            icon: _icons.reset,
+            ...removeButtonProps
+          })
+        })]
+      });
+    },
+    renderContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalDropdownContentWrapper, {
+      paddingSize: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "edit-site-global-styles__shadow-editor__dropdown-content",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowPopover, {
+          shadowObj: shadowObj,
+          onChange: onShadowChange
+        })
+      })
+    })
+  });
+}
+function ShadowPopover({
+  shadowObj,
+  onChange
+}) {
+  const __experimentalIsRenderedInSidebar = true;
+  const enableAlpha = true;
+  const onShadowChange = (key, value) => {
+    const newShadow = {
+      ...shadowObj,
+      [key]: value
+    };
+    onChange(newShadow);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "edit-site-global-styles__shadow-editor-panel",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+      spacing: 2,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalHeading, {
+        level: 5,
+        children: (0, _i18n.__)('Shadow')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "edit-site-global-styles__shadow-editor-color-palette",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.ColorPalette, {
+          clearable: false,
+          enableAlpha: enableAlpha,
+          __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar,
+          value: shadowObj.color,
+          onChange: value => onShadowChange('color', value)
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalToggleGroupControl, {
+        value: shadowObj.inset ? 'inset' : 'outset',
+        isBlock: true,
+        onChange: value => onShadowChange('inset', value === 'inset'),
+        hideLabelFromVision: true,
+        __next40pxDefaultSize: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+          value: "outset",
+          label: (0, _i18n.__)('Outset')
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalToggleGroupControlOption, {
+          value: "inset",
+          label: (0, _i18n.__)('Inset')
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalGrid, {
+        columns: 2,
+        gap: 4,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowInputControl, {
+          label: (0, _i18n.__)('X Position'),
+          value: shadowObj.x,
+          hasNegativeRange: true,
+          onChange: value => onShadowChange('x', value)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowInputControl, {
+          label: (0, _i18n.__)('Y Position'),
+          value: shadowObj.y,
+          hasNegativeRange: true,
+          onChange: value => onShadowChange('y', value)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowInputControl, {
+          label: (0, _i18n.__)('Blur'),
+          value: shadowObj.blur,
+          onChange: value => onShadowChange('blur', value)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowInputControl, {
+          label: (0, _i18n.__)('Spread'),
+          value: shadowObj.spread,
+          hasNegativeRange: true,
+          onChange: value => onShadowChange('spread', value)
+        })]
+      })]
+    })
+  });
+}
+function ShadowInputControl({
+  label,
+  value,
+  onChange,
+  hasNegativeRange
+}) {
+  var _CUSTOM_VALUE_SETTING, _CUSTOM_VALUE_SETTING2, _CUSTOM_VALUE_SETTING3;
+  const [isCustomInput, setIsCustomInput] = (0, _element.useState)(false);
+  const [parsedQuantity, parsedUnit] = (0, _components.__experimentalParseQuantityAndUnitFromRawValue)(value);
+  const sliderOnChange = next => {
+    onChange(next !== undefined ? [next, parsedUnit || 'px'].join('') : '0px');
+  };
+  const onValueChange = next => {
+    const isNumeric = next !== undefined && !isNaN(parseFloat(next));
+    const nextValue = isNumeric ? next : '0px';
+    onChange(nextValue);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    justify: "flex-start",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      justify: "space-between",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+        label: (0, _i18n.__)('Use custom size'),
+        icon: _icons.settings,
+        onClick: () => {
+          setIsCustomInput(!isCustomInput);
+        },
+        isPressed: isCustomInput,
+        size: "small"
+      })]
+    }), isCustomInput ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalUnitControl, {
+      label: label,
+      hideLabelFromVision: true,
+      __next40pxDefaultSize: true,
+      value: value,
+      onChange: onValueChange
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.RangeControl, {
+      value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : 0,
+      onChange: sliderOnChange,
+      withInputField: false,
+      __next40pxDefaultSize: true,
+      __nextHasNoMarginBottom: true,
+      min: hasNegativeRange ? -((_CUSTOM_VALUE_SETTING = _shadowUtils.CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING !== void 0 ? _CUSTOM_VALUE_SETTING : 10) : 0,
+      max: (_CUSTOM_VALUE_SETTING2 = _shadowUtils.CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.max) !== null && _CUSTOM_VALUE_SETTING2 !== void 0 ? _CUSTOM_VALUE_SETTING2 : 10,
+      step: (_CUSTOM_VALUE_SETTING3 = _shadowUtils.CUSTOM_VALUE_SETTINGS[parsedUnit !== null && parsedUnit !== void 0 ? parsedUnit : 'px']?.step) !== null && _CUSTOM_VALUE_SETTING3 !== void 0 ? _CUSTOM_VALUE_SETTING3 : 0.1
+    })]
+  });
+}
+//# sourceMappingURL=shadows-edit-panel.js.map

package/build/components/global-styles/shadows-edit-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_components","_i18n","_blockEditor","_icons","_element","_lockUnlock","_subtitle","_header","_shadowsPanel","_shadowUtils","_jsxRuntime","useGlobalSetting","unlock","blockEditorPrivateApis","DropdownMenuV2","DropdownMenu","DropdownMenuItemV2","DropdownMenuItem","DropdownMenuItemLabelV2","DropdownMenuItemLabel","componentsPrivateApis","customShadowMenuItems","label","__","action","presetShadowMenuItems","ShadowsEditPanel","params","category","slug","goTo","useNavigator","shadows","setShadows","baseShadows","undefined","selectedShadow","setSelectedShadow","useState","find","shadow","baseSelectedShadow","useMemo","b","isConfirmDialogVisible","setIsConfirmDialogVisible","isRenameModalVisible","setIsRenameModalVisible","shadowName","setShadowName","name","onShadowChange","updatedShadows","map","s","onMenuClick","handleShadowDelete","filter","handleShadowRename","newName","jsx","default","title","jsxs","Fragment","children","__experimentalHStack","justify","FlexItem","__experimentalSpacer","marginTop","marginBottom","paddingX","trigger","Button","size","icon","moreVertical","item","onClick","disabled","className","ShadowsPreview","ShadowEditor","onChange","__experimentalConfirmDialog","isOpen","onConfirm","onCancel","confirmButtonText","sprintf","Modal","onRequestClose","onSubmit","event","preventDefault","__experimentalInputControl","autoComplete","placeholder","value","Flex","expanded","variant","type","shadowStyle","boxShadow","align","style","shadowParts","getShadowParts","onChangeShadowPart","index","part","join","onAddShadowPart","push","defaultShadow","onRemoveShadowPart","splice","__experimentalVStack","spacing","level","plus","__experimentalItemGroup","isBordered","isSeparated","ShadowItem","canRemove","length","onRemove","popoverProps","placement","offset","shift","shadowObj","shadowStringToObject","newShadow","shadowObjectToString","Dropdown","renderToggle","onToggle","toggleProps","clsx","removeButtonProps","ariaLabel","tooltip","flexGrow","shadowIcon","inset","reset","renderContent","__experimentalDropdownContentWrapper","paddingSize","ShadowPopover","__experimentalIsRenderedInSidebar","enableAlpha","key","__experimentalHeading","ColorPalette","clearable","color","__experimentalToggleGroupControl","isBlock","hideLabelFromVision","__next40pxDefaultSize","__experimentalToggleGroupControlOption","__experimentalGrid","columns","gap","ShadowInputControl","x","hasNegativeRange","y","blur","spread","_CUSTOM_VALUE_SETTING","_CUSTOM_VALUE_SETTING2","_CUSTOM_VALUE_SETTING3","isCustomInput","setIsCustomInput","parsedQuantity","parsedUnit","parseQuantityAndUnitFromRawValue","sliderOnChange","next","onValueChange","isNumeric","isNaN","parseFloat","nextValue","settings","isPressed","__experimentalUnitControl","RangeControl","withInputField","__nextHasNoMarginBottom","min","CUSTOM_VALUE_SETTINGS","max","step"],"sources":["@wordpress/edit-site/src/components/global-styles/shadows-edit-panel.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHStack as HStack,\n\t__experimentalVStack as VStack,\n\t__experimentalSpacer as Spacer,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHeading as Heading,\n\t__experimentalInputControl as InputControl,\n\t__experimentalUnitControl as UnitControl,\n\t__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,\n\t__experimentalGrid as Grid,\n\t__experimentalDropdownContentWrapper as DropdownContentWrapper,\n\t__experimentalUseNavigator as useNavigator,\n\t__experimentalToggleGroupControl as ToggleGroupControl,\n\t__experimentalToggleGroupControlOption as ToggleGroupControlOption,\n\t__experimentalConfirmDialog as ConfirmDialog,\n\tDropdown,\n\tRangeControl,\n\tButton,\n\tFlex,\n\tFlexItem,\n\tColorPalette,\n\tModal,\n\tprivateApis as componentsPrivateApis,\n} from '@wordpress/components';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';\nimport {\n\tplus,\n\tshadow as shadowIcon,\n\treset,\n\tsettings,\n\tmoreVertical,\n} from '@wordpress/icons';\nimport { useState, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\nimport Subtitle from './subtitle';\nimport ScreenHeader from './header';\nimport { defaultShadow } from './shadows-panel';\nimport {\n\tgetShadowParts,\n\tshadowStringToObject,\n\tshadowObjectToString,\n\tCUSTOM_VALUE_SETTINGS,\n} from './shadow-utils';\n\nconst { useGlobalSetting } = unlock( blockEditorPrivateApis );\nconst {\n\tDropdownMenuV2: DropdownMenu,\n\tDropdownMenuItemV2: DropdownMenuItem,\n\tDropdownMenuItemLabelV2: DropdownMenuItemLabel,\n} = unlock( componentsPrivateApis );\n\nconst customShadowMenuItems = [\n\t{\n\t\tlabel: __( 'Rename' ),\n\t\taction: 'rename',\n\t},\n\t{\n\t\tlabel: __( 'Delete' ),\n\t\taction: 'delete',\n\t},\n];\n\nconst presetShadowMenuItems = [\n\t{\n\t\tlabel: __( 'Reset' ),\n\t\taction: 'reset',\n\t},\n];\n\nexport default function ShadowsEditPanel() {\n\tconst {\n\t\tparams: { category, slug },\n\t\tgoTo,\n\t} = useNavigator();\n\tconst [ shadows, setShadows ] = useGlobalSetting(\n\t\t`shadow.presets.${ category }`\n\t);\n\tconst [ baseShadows ] = useGlobalSetting(\n\t\t`shadow.presets.${ category }`,\n\t\tundefined,\n\t\t'base'\n\t);\n\tconst [ selectedShadow, setSelectedShadow ] = useState( () =>\n\t\t( shadows || [] ).find( ( shadow ) => shadow.slug === slug )\n\t);\n\tconst baseSelectedShadow = useMemo(\n\t\t() => ( baseShadows || [] ).find( ( b ) => b.slug === slug ),\n\t\t[ baseShadows, slug ]\n\t);\n\tconst [ isConfirmDialogVisible, setIsConfirmDialogVisible ] =\n\t\tuseState( false );\n\tconst [ isRenameModalVisible, setIsRenameModalVisible ] = useState( false );\n\tconst [ shadowName, setShadowName ] = useState( selectedShadow.name );\n\n\tconst onShadowChange = ( shadow ) => {\n\t\tsetSelectedShadow( { ...selectedShadow, shadow } );\n\t\tconst updatedShadows = shadows.map( ( s ) =>\n\t\t\ts.slug === slug ? { ...selectedShadow, shadow } : s\n\t\t);\n\t\tsetShadows( updatedShadows );\n\t};\n\n\tconst onMenuClick = ( action ) => {\n\t\tif ( action === 'reset' ) {\n\t\t\tconst updatedShadows = shadows.map( ( s ) =>\n\t\t\t\ts.slug === slug ? baseSelectedShadow : s\n\t\t\t);\n\t\t\tsetSelectedShadow( baseSelectedShadow );\n\t\t\tsetShadows( updatedShadows );\n\t\t} else if ( action === 'delete' ) {\n\t\t\tsetIsConfirmDialogVisible( true );\n\t\t} else if ( action === 'rename' ) {\n\t\t\tsetIsRenameModalVisible( true );\n\t\t}\n\t};\n\n\tconst handleShadowDelete = () => {\n\t\tconst updatedShadows = shadows.filter( ( s ) => s.slug !== slug );\n\t\tsetShadows( updatedShadows );\n\t\tgoTo( `/shadows` );\n\t};\n\n\tconst handleShadowRename = ( newName ) => {\n\t\tif ( ! newName ) {\n\t\t\treturn;\n\t\t}\n\t\tconst updatedShadows = shadows.map( ( s ) =>\n\t\t\ts.slug === slug ? { ...selectedShadow, name: newName } : s\n\t\t);\n\t\tsetSelectedShadow( { ...selectedShadow, name: newName } );\n\t\tsetShadows( updatedShadows );\n\t};\n\n\treturn ! selectedShadow ? (\n\t\t<ScreenHeader title=\"\" />\n\t) : (\n\t\t<>\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<ScreenHeader title={ selectedShadow.name } />\n\t\t\t\t<FlexItem>\n\t\t\t\t\t<Spacer marginTop={ 2 } marginBottom={ 0 } paddingX={ 4 }>\n\t\t\t\t\t\t<DropdownMenu\n\t\t\t\t\t\t\ttrigger={\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\ticon={ moreVertical }\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Menu' ) }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ ( category === 'custom'\n\t\t\t\t\t\t\t\t? customShadowMenuItems\n\t\t\t\t\t\t\t\t: presetShadowMenuItems\n\t\t\t\t\t\t\t).map( ( item ) => (\n\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\tkey={ item.action }\n\t\t\t\t\t\t\t\t\tonClick={ () => onMenuClick( item.action ) }\n\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\titem.action === 'reset' &&\n\t\t\t\t\t\t\t\t\t\tselectedShadow.shadow ===\n\t\t\t\t\t\t\t\t\t\t\tbaseSelectedShadow.shadow\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t\t</DropdownMenuItemLabel>\n\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</DropdownMenu>\n\t\t\t\t\t</Spacer>\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t\t<div className=\"edit-site-global-styles-screen\">\n\t\t\t\t<ShadowsPreview shadow={ selectedShadow.shadow } />\n\t\t\t\t<ShadowEditor\n\t\t\t\t\tshadow={ selectedShadow.shadow }\n\t\t\t\t\tonChange={ onShadowChange }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t\t{ isConfirmDialogVisible && (\n\t\t\t\t<ConfirmDialog\n\t\t\t\t\tisOpen\n\t\t\t\t\tonConfirm={ () => {\n\t\t\t\t\t\thandleShadowDelete();\n\t\t\t\t\t\tsetIsConfirmDialogVisible( false );\n\t\t\t\t\t} }\n\t\t\t\t\tonCancel={ () => {\n\t\t\t\t\t\tsetIsConfirmDialogVisible( false );\n\t\t\t\t\t} }\n\t\t\t\t\tconfirmButtonText={ __( 'Delete' ) }\n\t\t\t\t>\n\t\t\t\t\t{ sprintf(\n\t\t\t\t\t\t// translators: %s: name of the shadow\n\t\t\t\t\t\t'Are you sure you want to delete \"%s\"?',\n\t\t\t\t\t\tselectedShadow.name\n\t\t\t\t\t) }\n\t\t\t\t</ConfirmDialog>\n\t\t\t) }\n\t\t\t{ isRenameModalVisible && (\n\t\t\t\t<Modal\n\t\t\t\t\ttitle={ __( 'Rename' ) }\n\t\t\t\t\tonRequestClose={ () => setIsRenameModalVisible( false ) }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t>\n\t\t\t\t\t<form\n\t\t\t\t\t\tonSubmit={ ( event ) => {\n\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\thandleShadowRename( shadowName );\n\t\t\t\t\t\t\tsetIsRenameModalVisible( false );\n\t\t\t\t\t\t} }\n\t\t\t\t\t>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t\t\tlabel={ __( 'Name' ) }\n\t\t\t\t\t\t\tplaceholder={ __( 'Shadow name' ) }\n\t\t\t\t\t\t\tvalue={ shadowName }\n\t\t\t\t\t\t\tonChange={ ( value ) => setShadowName( value ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Spacer marginBottom={ 6 } />\n\t\t\t\t\t\t<Flex\n\t\t\t\t\t\t\tclassName=\"block-editor-shadow-edit-modal__actions\"\n\t\t\t\t\t\t\tjustify=\"flex-end\"\n\t\t\t\t\t\t\texpanded={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tsetIsRenameModalVisible( false )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button variant=\"primary\" type=\"submit\">\n\t\t\t\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t</Flex>\n\t\t\t\t\t</form>\n\t\t\t\t</Modal>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nfunction ShadowsPreview( { shadow } ) {\n\tconst shadowStyle = {\n\t\tboxShadow: shadow,\n\t};\n\n\treturn (\n\t\t<Spacer marginBottom={ 4 } marginTop={ -2 }>\n\t\t\t<HStack\n\t\t\t\talign=\"center\"\n\t\t\t\tjustify=\"center\"\n\t\t\t\tclassName=\"edit-site-global-styles__shadow-preview-panel\"\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"edit-site-global-styles__shadow-preview-block\"\n\t\t\t\t\tstyle={ shadowStyle }\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t</Spacer>\n\t);\n}\n\nfunction ShadowEditor( { shadow, onChange } ) {\n\tconst shadowParts = useMemo( () => getShadowParts( shadow ), [ shadow ] );\n\n\tconst onChangeShadowPart = ( index, part ) => {\n\t\tshadowParts[ index ] = part;\n\t\tonChange( shadowParts.join( ', ' ) );\n\t};\n\n\tconst onAddShadowPart = () => {\n\t\tshadowParts.push( defaultShadow );\n\t\tonChange( shadowParts.join( ', ' ) );\n\t};\n\n\tconst onRemoveShadowPart = ( index ) => {\n\t\tshadowParts.splice( index, 1 );\n\t\tonChange( shadowParts.join( ', ' ) );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t<Flex\n\t\t\t\t\t\talign=\"center\"\n\t\t\t\t\t\tclassName=\"edit-site-global-styles__shadows-panel__title\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Subtitle level={ 3 }>{ __( 'Shadows' ) }</Subtitle>\n\t\t\t\t\t</Flex>\n\t\t\t\t\t<FlexItem className=\"edit-site-global-styles__shadows-panel__options-container\">\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ticon={ plus }\n\t\t\t\t\t\t\tlabel={ __( 'Add shadow' ) }\n\t\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\t\tonAddShadowPart();\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</FlexItem>\n\t\t\t\t</HStack>\n\t\t\t</VStack>\n\t\t\t<Spacer />\n\t\t\t<ItemGroup isBordered isSeparated>\n\t\t\t\t{ shadowParts.map( ( part, index ) => (\n\t\t\t\t\t<ShadowItem\n\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\tshadow={ part }\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tonChangeShadowPart( index, value )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcanRemove={ shadowParts.length > 1 }\n\t\t\t\t\t\tonRemove={ () => onRemoveShadowPart( index ) }\n\t\t\t\t\t/>\n\t\t\t\t) ) }\n\t\t\t</ItemGroup>\n\t\t</>\n\t);\n}\n\nfunction ShadowItem( { shadow, onChange, canRemove, onRemove } ) {\n\tconst popoverProps = {\n\t\tplacement: 'left-start',\n\t\toffset: 36,\n\t\tshift: true,\n\t};\n\tconst shadowObj = useMemo(\n\t\t() => shadowStringToObject( shadow ),\n\t\t[ shadow ]\n\t);\n\tconst onShadowChange = ( newShadow ) => {\n\t\tonChange( shadowObjectToString( newShadow ) );\n\t};\n\n\treturn (\n\t\t<Dropdown\n\t\t\tpopoverProps={ popoverProps }\n\t\t\tclassName=\"edit-site-global-styles__shadow-editor__dropdown\"\n\t\t\trenderToggle={ ( { onToggle, isOpen } ) => {\n\t\t\t\tconst toggleProps = {\n\t\t\t\t\tonClick: onToggle,\n\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t'edit-site-global-styles__shadow-editor__dropdown-toggle',\n\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t),\n\t\t\t\t\t'aria-expanded': isOpen,\n\t\t\t\t};\n\t\t\t\tconst removeButtonProps = {\n\t\t\t\t\tonClick: onRemove,\n\t\t\t\t\tclassName: clsx(\n\t\t\t\t\t\t'edit-site-global-styles__shadow-editor__remove-button',\n\t\t\t\t\t\t{ 'is-open': isOpen }\n\t\t\t\t\t),\n\t\t\t\t\tariaLabel: __( 'Remove shadow' ),\n\t\t\t\t\ttooltip: __( 'Remove shadow' ),\n\t\t\t\t};\n\n\t\t\t\treturn (\n\t\t\t\t\t<HStack align=\"center\" justify=\"flex-start\" spacing={ 0 }>\n\t\t\t\t\t\t<FlexItem style={ { flexGrow: 1 } }>\n\t\t\t\t\t\t\t<Button icon={ shadowIcon } { ...toggleProps }>\n\t\t\t\t\t\t\t\t{ shadowObj.inset\n\t\t\t\t\t\t\t\t\t? __( 'Inner shadow' )\n\t\t\t\t\t\t\t\t\t: __( 'Drop shadow' ) }\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t{ canRemove && (\n\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ticon={ reset }\n\t\t\t\t\t\t\t\t\t{ ...removeButtonProps }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trenderContent={ () => (\n\t\t\t\t<DropdownContentWrapper paddingSize=\"none\">\n\t\t\t\t\t<div className=\"edit-site-global-styles__shadow-editor__dropdown-content\">\n\t\t\t\t\t\t<ShadowPopover\n\t\t\t\t\t\t\tshadowObj={ shadowObj }\n\t\t\t\t\t\t\tonChange={ onShadowChange }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</DropdownContentWrapper>\n\t\t\t) }\n\t\t/>\n\t);\n}\n\nfunction ShadowPopover( { shadowObj, onChange } ) {\n\tconst __experimentalIsRenderedInSidebar = true;\n\tconst enableAlpha = true;\n\n\tconst onShadowChange = ( key, value ) => {\n\t\tconst newShadow = {\n\t\t\t...shadowObj,\n\t\t\t[ key ]: value,\n\t\t};\n\t\tonChange( newShadow );\n\t};\n\n\treturn (\n\t\t<div className=\"edit-site-global-styles__shadow-editor-panel\">\n\t\t\t<VStack spacing={ 2 }>\n\t\t\t\t<Heading level={ 5 }>{ __( 'Shadow' ) }</Heading>\n\t\t\t\t<div className=\"edit-site-global-styles__shadow-editor-color-palette\">\n\t\t\t\t\t<ColorPalette\n\t\t\t\t\t\tclearable={ false }\n\t\t\t\t\t\tenableAlpha={ enableAlpha }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={\n\t\t\t\t\t\t\t__experimentalIsRenderedInSidebar\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalue={ shadowObj.color }\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tonShadowChange( 'color', value )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<ToggleGroupControl\n\t\t\t\t\tvalue={ shadowObj.inset ? 'inset' : 'outset' }\n\t\t\t\t\tisBlock\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tonShadowChange( 'inset', value === 'inset' )\n\t\t\t\t\t}\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t>\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tvalue=\"outset\"\n\t\t\t\t\t\tlabel={ __( 'Outset' ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<ToggleGroupControlOption\n\t\t\t\t\t\tvalue=\"inset\"\n\t\t\t\t\t\tlabel={ __( 'Inset' ) }\n\t\t\t\t\t/>\n\t\t\t\t</ToggleGroupControl>\n\t\t\t\t<Grid columns={ 2 } gap={ 4 }>\n\t\t\t\t\t<ShadowInputControl\n\t\t\t\t\t\tlabel={ __( 'X Position' ) }\n\t\t\t\t\t\tvalue={ shadowObj.x }\n\t\t\t\t\t\thasNegativeRange\n\t\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'x', value ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<ShadowInputControl\n\t\t\t\t\t\tlabel={ __( 'Y Position' ) }\n\t\t\t\t\t\tvalue={ shadowObj.y }\n\t\t\t\t\t\thasNegativeRange\n\t\t\t\t\t\tonChange={ ( value ) => onShadowChange( 'y', value ) }\n\t\t\t\t\t/>\n\t\t\t\t\t<ShadowInputControl\n\t\t\t\t\t\tlabel={ __( 'Blur' ) }\n\t\t\t\t\t\tvalue={ shadowObj.blur }\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tonShadowChange( 'blur', value )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t\t<ShadowInputControl\n\t\t\t\t\t\tlabel={ __( 'Spread' ) }\n\t\t\t\t\t\tvalue={ shadowObj.spread }\n\t\t\t\t\t\thasNegativeRange\n\t\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\t\tonShadowChange( 'spread', value )\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\t\t\t\t</Grid>\n\t\t\t</VStack>\n\t\t</div>\n\t);\n}\n\nfunction ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {\n\tconst [ isCustomInput, setIsCustomInput ] = useState( false );\n\tconst [ parsedQuantity, parsedUnit ] =\n\t\tparseQuantityAndUnitFromRawValue( value );\n\n\tconst sliderOnChange = ( next ) => {\n\t\tonChange(\n\t\t\tnext !== undefined ? [ next, parsedUnit || 'px' ].join( '' ) : '0px'\n\t\t);\n\t};\n\tconst onValueChange = ( next ) => {\n\t\tconst isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );\n\t\tconst nextValue = isNumeric ? next : '0px';\n\t\tonChange( nextValue );\n\t};\n\n\treturn (\n\t\t<VStack justify=\"flex-start\">\n\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t<Subtitle>{ label }</Subtitle>\n\t\t\t\t<Button\n\t\t\t\t\tlabel={ __( 'Use custom size' ) }\n\t\t\t\t\ticon={ settings }\n\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\tsetIsCustomInput( ! isCustomInput );\n\t\t\t\t\t} }\n\t\t\t\t\tisPressed={ isCustomInput }\n\t\t\t\t\tsize=\"small\"\n\t\t\t\t/>\n\t\t\t</HStack>\n\t\t\t{ isCustomInput ? (\n\t\t\t\t<UnitControl\n\t\t\t\t\tlabel={ label }\n\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvalue={ value }\n\t\t\t\t\tonChange={ onValueChange }\n\t\t\t\t/>\n\t\t\t) : (\n\t\t\t\t<RangeControl\n\t\t\t\t\tvalue={ parsedQuantity ?? 0 }\n\t\t\t\t\tonChange={ sliderOnChange }\n\t\t\t\t\twithInputField={ false }\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\t\tmin={\n\t\t\t\t\t\thasNegativeRange\n\t\t\t\t\t\t\t? -(\n\t\t\t\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]\n\t\t\t\t\t\t\t\t\t\t?.max ?? 10\n\t\t\t\t\t\t\t  )\n\t\t\t\t\t\t\t: 0\n\t\t\t\t\t}\n\t\t\t\t\tmax={\n\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10\n\t\t\t\t\t}\n\t\t\t\t\tstep={\n\t\t\t\t\t\tCUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t) }\n\t\t</VStack>\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/components/global-styles/shadows-panel.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ShadowsPanel;
+exports.defaultShadow = void 0;
+var _components = require("@wordpress/components");
+var _i18n = require("@wordpress/i18n");
+var _blockEditor = require("@wordpress/block-editor");
+var _icons = require("@wordpress/icons");
+var _lockUnlock = require("../../lock-unlock");
+var _subtitle = _interopRequireDefault(require("./subtitle"));
+var _navigationButton = require("./navigation-button");
+var _header = _interopRequireDefault(require("./header"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Internal dependencies
+ */
+
+const {
+  useGlobalSetting
+} = (0, _lockUnlock.unlock)(_blockEditor.privateApis);
+const defaultShadow = exports.defaultShadow = '6px 6px 9px rgba(0, 0, 0, 0.2)';
+function ShadowsPanel() {
+  const [defaultShadows] = useGlobalSetting('shadow.presets.default');
+  const [defaultShadowsEnabled] = useGlobalSetting('shadow.defaultPresets');
+  const [themeShadows] = useGlobalSetting('shadow.presets.theme');
+  const [customShadows, setCustomShadows] = useGlobalSetting('shadow.presets.custom');
+  const onCreateShadow = shadow => {
+    setCustomShadows([...(customShadows || []), shadow]);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_header.default, {
+      title: (0, _i18n.__)('Shadows'),
+      description: (0, _i18n.__)('Manage and create shadow styles for use across the site.')
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "edit-site-global-styles-screen",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+        className: "edit-site-global-styles__shadows-panel",
+        spacing: 7,
+        children: [defaultShadowsEnabled && /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowList, {
+          label: (0, _i18n.__)('Default'),
+          shadows: defaultShadows || [],
+          category: "default"
+        }), themeShadows && themeShadows.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowList, {
+          label: (0, _i18n.__)('Theme'),
+          shadows: themeShadows || [],
+          category: "theme"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowList, {
+          label: (0, _i18n.__)('Custom'),
+          shadows: customShadows || [],
+          category: "custom",
+          canCreate: true,
+          onCreate: onCreateShadow
+        })]
+      })
+    })]
+  });
+}
+function ShadowList({
+  label,
+  shadows,
+  category,
+  canCreate,
+  onCreate
+}) {
+  const handleAddShadow = () => {
+    const newIndex = (0, _utils.getNewIndexFromPresets)(shadows, 'shadow-');
+    onCreate({
+      name: (0, _i18n.sprintf)( /* translators: %s: is an index for a preset */
+      (0, _i18n.__)('Shadow %s'), newIndex),
+      shadow: defaultShadow,
+      slug: `shadow-${newIndex}`
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+    spacing: 2,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      justify: "space-between",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Flex, {
+        align: "center",
+        className: "edit-site-global-styles__shadows-panel__title",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_subtitle.default, {
+          level: 3,
+          children: label
+        })
+      }), canCreate && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.FlexItem, {
+        className: "edit-site-global-styles__shadows-panel__options-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
+          size: "small",
+          icon: _icons.plus,
+          label: (0, _i18n.__)('Add shadow'),
+          onClick: () => {
+            handleAddShadow();
+          }
+        })
+      })]
+    }), shadows.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalItemGroup, {
+      isBordered: true,
+      isSeparated: true,
+      children: shadows.map(shadow => /*#__PURE__*/(0, _jsxRuntime.jsx)(ShadowItem, {
+        shadow: shadow,
+        category: category
+      }, shadow.slug))
+    })]
+  });
+}
+function ShadowItem({
+  shadow,
+  category
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationButton.NavigationButtonAsItem, {
+    path: `/shadows/edit/${category}/${shadow.slug}`,
+    "aria-label":
+    // translators: %s: name of the shadow
+    (0, _i18n.sprintf)('Edit shadow %s', shadow.name),
+    icon: _icons.shadow,
+    children: shadow.name
+  });
+}
+//# sourceMappingURL=shadows-panel.js.map