@wordpress/block-editor 8.5.0 → 8.6.0

package/build/hooks/border.js

@@ -7,31 +7,44 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BORDER_SUPPORT_KEY = void 0;
 exports.BorderPanel = BorderPanel;
+exports.getBorderClasses = getBorderClasses;
+exports.getMultiOriginColor = void 0;
 exports.hasBorderSupport = hasBorderSupport;
 exports.removeBorderAttribute = removeBorderAttribute;
+exports.withBorderColorPaletteStyles = void 0;
 
 var _element = require("@wordpress/element");
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _blocks = require("@wordpress/blocks");
 
 var _components = require("@wordpress/components");
 
-var _i18n = require("@wordpress/i18n");
+var _compose = require("@wordpress/compose");
 
-var _borderColor = require("./border-color");
+var _hooks = require("@wordpress/hooks");
 
-var _borderRadius = require("./border-radius");
+var _i18n = require("@wordpress/i18n");
 
-var _borderStyle = require("./border-style");
+var _borderRadius = require("./border-radius");
 
-var _borderWidth = require("./border-width");
+var _colors = require("../components/colors");
 
 var _inspectorControls = _interopRequireDefault(require("../components/inspector-controls"));
 
+var _useMultipleOriginColorsAndGradients = _interopRequireDefault(require("../components/colors-gradients/use-multiple-origin-colors-and-gradients"));
+
 var _useSetting = _interopRequireDefault(require("../components/use-setting"));
 
 var _utils = require("./utils");
 
+/**
+ * External dependencies
+ */
+
 /**
  * WordPress dependencies
  */
@@ -41,72 +54,299 @@ var _utils = require("./utils");
  */
 const BORDER_SUPPORT_KEY = '__experimentalBorder';
 exports.BORDER_SUPPORT_KEY = BORDER_SUPPORT_KEY;
+const borderSides = ['top', 'right', 'bottom', 'left'];
+
+const hasBorderValue = props => {
+  const {
+    borderColor,
+    style
+  } = props.attributes;
+  return (0, _components.__experimentalIsDefinedBorder)(style === null || style === void 0 ? void 0 : style.border) || !!borderColor;
+}; // The border color, style, and width are omitted so they get undefined. The
+// border radius is separate and must retain its selection.
+
+
+const resetBorder = _ref => {
+  var _style$border;
+
+  let {
+    attributes = {},
+    setAttributes
+  } = _ref;
+  const {
+    style
+  } = attributes;
+  setAttributes({
+    borderColor: undefined,
+    style: { ...style,
+      border: (0, _utils.cleanEmptyObject)({
+        radius: style === null || style === void 0 ? void 0 : (_style$border = style.border) === null || _style$border === void 0 ? void 0 : _style$border.radius
+      })
+    }
+  });
+};
+
+const resetBorderFilter = newAttributes => {
+  var _newAttributes$style, _newAttributes$style$;
+
+  return { ...newAttributes,
+    borderColor: undefined,
+    style: { ...newAttributes.style,
+      border: {
+        radius: (_newAttributes$style = newAttributes.style) === null || _newAttributes$style === void 0 ? void 0 : (_newAttributes$style$ = _newAttributes$style.border) === null || _newAttributes$style$ === void 0 ? void 0 : _newAttributes$style$.radius
+      }
+    }
+  };
+};
+
+const getColorByProperty = (colors, property, value) => {
+  let matchedColor;
+  colors.some(origin => origin.colors.some(color => {
+    if (color[property] === value) {
+      matchedColor = color;
+      return true;
+    }
+
+    return false;
+  }));
+  return matchedColor;
+};
+
+const getMultiOriginColor = _ref2 => {
+  let {
+    colors,
+    namedColor,
+    customColor
+  } = _ref2;
+
+  // Search each origin (default, theme, or user) for matching color by name.
+  if (namedColor) {
+    const colorObject = getColorByProperty(colors, 'slug', namedColor);
+
+    if (colorObject) {
+      return colorObject;
+    }
+  } // Skip if no custom color or matching named color.
+
+
+  if (!customColor) {
+    return {
+      color: undefined
+    };
+  } // Attempt to find color via custom color value or build new object.
+
+
+  const colorObject = getColorByProperty(colors, 'color', customColor);
+  return colorObject ? colorObject : {
+    color: customColor
+  };
+};
+
+exports.getMultiOriginColor = getMultiOriginColor;
+
+const getBorderObject = (attributes, colors) => {
+  const {
+    borderColor,
+    style
+  } = attributes;
+  const {
+    border: borderStyles
+  } = style || {}; // If we have a named color for a flat border. Fetch that color object and
+  // apply that color's value to the color property within the style object.
+
+  if (borderColor) {
+    const {
+      color
+    } = getMultiOriginColor({
+      colors,
+      namedColor: borderColor
+    });
+    return color ? { ...borderStyles,
+      color
+    } : borderStyles;
+  } // Individual side border color slugs are stored within the border style
+  // object. If we don't have a border styles object we have nothing further
+  // to hydrate.
+
+
+  if (!borderStyles) {
+    return borderStyles;
+  } // If we have named colors for the individual side borders, retrieve their
+  // related color objects and apply the real color values to the split
+  // border objects.
+
+
+  const hydratedBorderStyles = { ...borderStyles
+  };
+  borderSides.forEach(side => {
+    var _hydratedBorderStyles;
+
+    const colorSlug = getColorSlugFromVariable((_hydratedBorderStyles = hydratedBorderStyles[side]) === null || _hydratedBorderStyles === void 0 ? void 0 : _hydratedBorderStyles.color);
+
+    if (colorSlug) {
+      const {
+        color
+      } = getMultiOriginColor({
+        colors,
+        namedColor: colorSlug
+      });
+      hydratedBorderStyles[side] = { ...hydratedBorderStyles[side],
+        color
+      };
+    }
+  });
+  return hydratedBorderStyles;
+};
+
+function getColorSlugFromVariable(value) {
+  const namedColor = /var:preset\|color\|(.+)/.exec(value);
+
+  if (namedColor && namedColor[1]) {
+    return namedColor[1];
+  }
+
+  return null;
+}
 
 function BorderPanel(props) {
   const {
-    clientId
+    attributes,
+    clientId,
+    setAttributes
   } = props;
+  const {
+    style
+  } = attributes;
+  const {
+    colors
+  } = (0, _useMultipleOriginColorsAndGradients.default)();
+  const isSupported = hasBorderSupport(props.name);
   const isColorSupported = (0, _useSetting.default)('border.color') && hasBorderSupport(props.name, 'color');
   const isRadiusSupported = (0, _useSetting.default)('border.radius') && hasBorderSupport(props.name, 'radius');
   const isStyleSupported = (0, _useSetting.default)('border.style') && hasBorderSupport(props.name, 'style');
   const isWidthSupported = (0, _useSetting.default)('border.width') && hasBorderSupport(props.name, 'width');
   const isDisabled = [!isColorSupported, !isRadiusSupported, !isStyleSupported, !isWidthSupported].every(Boolean);
 
-  if (isDisabled) {
+  if (isDisabled || !isSupported) {
     return null;
   }
 
   const defaultBorderControls = (0, _blocks.getBlockSupport)(props.name, [BORDER_SUPPORT_KEY, '__experimentalDefaultControls']);
+  const showBorderByDefault = (defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.color) || (defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.width);
 
-  const createResetAllFilter = function (borderAttribute) {
-    let topLevelAttributes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-    return newAttributes => {
-      var _newAttributes$style;
+  const onBorderChange = newBorder => {
+    var _style$border2;
 
-      return { ...newAttributes,
-        ...topLevelAttributes,
-        style: { ...newAttributes.style,
-          border: { ...((_newAttributes$style = newAttributes.style) === null || _newAttributes$style === void 0 ? void 0 : _newAttributes$style.border),
-            [borderAttribute]: undefined
-          }
+    // Filter out named colors and apply them to appropriate block
+    // attributes so that CSS classes can be used to apply those colors.
+    // e.g. has-primary-border-top-color.
+    let newBorderStyles = { ...newBorder
+    };
+    let newBorderColor;
+
+    if ((0, _components.__experimentalHasSplitBorders)(newBorder)) {
+      // For each side check if the side has a color value set
+      // If so, determine if it belongs to a named color, in which case
+      // we update the color property.
+      //
+      // This deliberately overwrites `newBorderStyles` to avoid mutating
+      // the passed object which causes problems otherwise.
+      newBorderStyles = {
+        top: { ...newBorder.top
+        },
+        right: { ...newBorder.right
+        },
+        bottom: { ...newBorder.bottom
+        },
+        left: { ...newBorder.left
         }
       };
-    };
+      borderSides.forEach(side => {
+        var _newBorder$side;
+
+        if ((_newBorder$side = newBorder[side]) !== null && _newBorder$side !== void 0 && _newBorder$side.color) {
+          var _newBorder$side2;
+
+          const colorObject = getMultiOriginColor({
+            colors,
+            customColor: (_newBorder$side2 = newBorder[side]) === null || _newBorder$side2 === void 0 ? void 0 : _newBorder$side2.color
+          });
+
+          if (colorObject.slug) {
+            newBorderStyles[side].color = `var:preset|color|${colorObject.slug}`;
+          }
+        }
+      });
+    } else if (newBorder !== null && newBorder !== void 0 && newBorder.color) {
+      // We have a flat border configuration. Apply named color slug to
+      // `borderColor` attribute and clear color style property if found.
+      const customColor = newBorder === null || newBorder === void 0 ? void 0 : newBorder.color;
+      const colorObject = getMultiOriginColor({
+        colors,
+        customColor
+      });
+
+      if (colorObject.slug) {
+        newBorderColor = colorObject.slug;
+        newBorderStyles.color = undefined;
+      }
+    } // Ensure previous border radius styles are maintained and clean
+    // overall result for empty objects or properties.
+
+
+    const newStyle = (0, _utils.cleanEmptyObject)({ ...style,
+      border: {
+        radius: style === null || style === void 0 ? void 0 : (_style$border2 = style.border) === null || _style$border2 === void 0 ? void 0 : _style$border2.radius,
+        ...newBorderStyles
+      }
+    });
+    setAttributes({
+      style: newStyle,
+      borderColor: newBorderColor
+    });
   };
 
+  const hydratedBorder = getBorderObject(attributes, colors);
   return (0, _element.createElement)(_inspectorControls.default, {
     __experimentalGroup: "border"
-  }, isWidthSupported && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    className: "single-column",
-    hasValue: () => (0, _borderWidth.hasBorderWidthValue)(props),
-    label: (0, _i18n.__)('Width'),
-    onDeselect: () => (0, _borderWidth.resetBorderWidth)(props),
-    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.width,
-    resetAllFilter: createResetAllFilter('width'),
-    panelId: clientId
-  }, (0, _element.createElement)(_borderWidth.BorderWidthEdit, props)), isStyleSupported && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    className: "single-column",
-    hasValue: () => (0, _borderStyle.hasBorderStyleValue)(props),
-    label: (0, _i18n.__)('Style'),
-    onDeselect: () => (0, _borderStyle.resetBorderStyle)(props),
-    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.style,
-    resetAllFilter: createResetAllFilter('style'),
-    panelId: clientId
-  }, (0, _element.createElement)(_borderStyle.BorderStyleEdit, props)), isColorSupported && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
-    hasValue: () => (0, _borderColor.hasBorderColorValue)(props),
-    label: (0, _i18n.__)('Color'),
-    onDeselect: () => (0, _borderColor.resetBorderColor)(props),
-    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.color,
-    resetAllFilter: createResetAllFilter('color', {
-      borderColor: undefined
-    }),
+  }, (isWidthSupported || isColorSupported) && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+    hasValue: () => hasBorderValue(props),
+    label: (0, _i18n.__)('Border'),
+    onDeselect: () => resetBorder(props),
+    isShownByDefault: showBorderByDefault,
+    resetAllFilter: resetBorderFilter,
     panelId: clientId
-  }, (0, _element.createElement)(_borderColor.BorderColorEdit, props)), isRadiusSupported && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
+  }, (0, _element.createElement)(_components.__experimentalBorderBoxControl, {
+    colors: colors,
+    enableAlpha: true,
+    onChange: onBorderChange,
+    popoverClassNames: {
+      linked: 'block-editor__border-box-control__popover',
+      top: 'block-editor__border-box-control__popover-top',
+      right: 'block-editor__border-box-control__popover-right',
+      bottom: 'block-editor__border-box-control__popover-bottom',
+      left: 'block-editor__border-box-control__popover-left'
+    },
+    showStyle: isStyleSupported,
+    value: hydratedBorder,
+    __experimentalHasMultipleOrigins: true,
+    __experimentalIsRenderedInSidebar: true
+  })), isRadiusSupported && (0, _element.createElement)(_components.__experimentalToolsPanelItem, {
     hasValue: () => (0, _borderRadius.hasBorderRadiusValue)(props),
     label: (0, _i18n.__)('Radius'),
     onDeselect: () => (0, _borderRadius.resetBorderRadius)(props),
     isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.radius,
-    resetAllFilter: createResetAllFilter('radius'),
+    resetAllFilter: newAttributes => {
+      var _newAttributes$style2;
+
+      return { ...newAttributes,
+        style: { ...newAttributes.style,
+          border: { ...((_newAttributes$style2 = newAttributes.style) === null || _newAttributes$style2 === void 0 ? void 0 : _newAttributes$style2.border),
+            radius: undefined
+          }
+        }
+      };
+    },
     panelId: clientId
   }, (0, _element.createElement)(_borderRadius.BorderRadiusEdit, props)));
 }
@@ -157,4 +397,188 @@ function removeBorderAttribute(style, attribute) {
     }
   });
 }
+/**
+ * Filters registered block settings, extending attributes to include
+ * `borderColor` if needed.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Updated block settings.
+ */
+
+
+function addAttributes(settings) {
+  if (!hasBorderSupport(settings, 'color')) {
+    return settings;
+  } // Allow blocks to specify default value if needed.
+
+
+  if (settings.attributes.borderColor) {
+    return settings;
+  } // Add new borderColor attribute to block settings.
+
+
+  return { ...settings,
+    attributes: { ...settings.attributes,
+      borderColor: {
+        type: 'string'
+      }
+    }
+  };
+}
+/**
+ * Override props assigned to save component to inject border color.
+ *
+ * @param {Object} props      Additional props applied to save element.
+ * @param {Object} blockType  Block type definition.
+ * @param {Object} attributes Block's attributes.
+ *
+ * @return {Object} Filtered props to apply to save element.
+ */
+
+
+function addSaveProps(props, blockType, attributes) {
+  if (!hasBorderSupport(blockType, 'color') || (0, _utils.shouldSkipSerialization)(blockType, BORDER_SUPPORT_KEY, 'color')) {
+    return props;
+  }
+
+  const borderClasses = getBorderClasses(attributes);
+  const newClassName = (0, _classnames.default)(props.className, borderClasses); // If we are clearing the last of the previous classes in `className`
+  // set it to `undefined` to avoid rendering empty DOM attributes.
+
+  props.className = newClassName ? newClassName : undefined;
+  return props;
+}
+/**
+ * Generates a CSS class name consisting of all the applicable border color
+ * classes given the current block attributes.
+ *
+ * @param {Object} attributes Block's attributes.
+ *
+ * @return {string} CSS class name.
+ */
+
+
+function getBorderClasses(attributes) {
+  var _style$border3;
+
+  const {
+    borderColor,
+    style
+  } = attributes;
+  const borderColorClass = (0, _colors.getColorClassName)('border-color', borderColor);
+  return (0, _classnames.default)({
+    'has-border-color': borderColor || (style === null || style === void 0 ? void 0 : (_style$border3 = style.border) === null || _style$border3 === void 0 ? void 0 : _style$border3.color),
+    [borderColorClass]: !!borderColorClass
+  });
+}
+/**
+ * Filters the registered block settings to apply border color styles and
+ * classnames to the block edit wrapper.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+
+
+function addEditProps(settings) {
+  if (!hasBorderSupport(settings, 'color') || (0, _utils.shouldSkipSerialization)(settings, BORDER_SUPPORT_KEY, 'color')) {
+    return settings;
+  }
+
+  const existingGetEditWrapperProps = settings.getEditWrapperProps;
+
+  settings.getEditWrapperProps = attributes => {
+    let props = {};
+
+    if (existingGetEditWrapperProps) {
+      props = existingGetEditWrapperProps(attributes);
+    }
+
+    return addSaveProps(props, settings, attributes);
+  };
+
+  return settings;
+}
+/**
+ * This adds inline styles for color palette colors.
+ * Ideally, this is not needed and themes should load their palettes on the editor.
+ *
+ * @param {Function} BlockListBlock Original component.
+ *
+ * @return {Function} Wrapped component.
+ */
+
+
+const withBorderColorPaletteStyles = (0, _compose.createHigherOrderComponent)(BlockListBlock => props => {
+  var _style$border4, _style$border4$top, _style$border5, _style$border5$right, _style$border6, _style$border6$bottom, _style$border7, _style$border7$left, _props$wrapperProps;
+
+  const {
+    name,
+    attributes
+  } = props;
+  const {
+    borderColor,
+    style
+  } = attributes;
+  const {
+    colors
+  } = (0, _useMultipleOriginColorsAndGradients.default)();
+
+  if (!hasBorderSupport(name, 'color') || (0, _utils.shouldSkipSerialization)(name, BORDER_SUPPORT_KEY, 'color')) {
+    return (0, _element.createElement)(BlockListBlock, props);
+  }
+
+  const {
+    color: borderColorValue
+  } = getMultiOriginColor({
+    colors,
+    namedColor: borderColor
+  });
+  const {
+    color: borderTopColor
+  } = getMultiOriginColor({
+    colors,
+    namedColor: getColorSlugFromVariable(style === null || style === void 0 ? void 0 : (_style$border4 = style.border) === null || _style$border4 === void 0 ? void 0 : (_style$border4$top = _style$border4.top) === null || _style$border4$top === void 0 ? void 0 : _style$border4$top.color)
+  });
+  const {
+    color: borderRightColor
+  } = getMultiOriginColor({
+    colors,
+    namedColor: getColorSlugFromVariable(style === null || style === void 0 ? void 0 : (_style$border5 = style.border) === null || _style$border5 === void 0 ? void 0 : (_style$border5$right = _style$border5.right) === null || _style$border5$right === void 0 ? void 0 : _style$border5$right.color)
+  });
+  const {
+    color: borderBottomColor
+  } = getMultiOriginColor({
+    colors,
+    namedColor: getColorSlugFromVariable(style === null || style === void 0 ? void 0 : (_style$border6 = style.border) === null || _style$border6 === void 0 ? void 0 : (_style$border6$bottom = _style$border6.bottom) === null || _style$border6$bottom === void 0 ? void 0 : _style$border6$bottom.color)
+  });
+  const {
+    color: borderLeftColor
+  } = getMultiOriginColor({
+    colors,
+    namedColor: getColorSlugFromVariable(style === null || style === void 0 ? void 0 : (_style$border7 = style.border) === null || _style$border7 === void 0 ? void 0 : (_style$border7$left = _style$border7.left) === null || _style$border7$left === void 0 ? void 0 : _style$border7$left.color)
+  });
+  const extraStyles = {
+    borderTopColor: borderTopColor || borderColorValue,
+    borderRightColor: borderRightColor || borderColorValue,
+    borderBottomColor: borderBottomColor || borderColorValue,
+    borderLeftColor: borderLeftColor || borderColorValue
+  };
+  let wrapperProps = props.wrapperProps;
+  wrapperProps = { ...props.wrapperProps,
+    style: { ...((_props$wrapperProps = props.wrapperProps) === null || _props$wrapperProps === void 0 ? void 0 : _props$wrapperProps.style),
+      ...extraStyles
+    }
+  };
+  return (0, _element.createElement)(BlockListBlock, (0, _extends2.default)({}, props, {
+    wrapperProps: wrapperProps
+  }));
+});
+exports.withBorderColorPaletteStyles = withBorderColorPaletteStyles;
+(0, _hooks.addFilter)('blocks.registerBlockType', 'core/border/addAttributes', addAttributes);
+(0, _hooks.addFilter)('blocks.getSaveContent.extraProps', 'core/border/addSaveProps', addSaveProps);
+(0, _hooks.addFilter)('blocks.registerBlockType', 'core/border/addEditProps', addEditProps);
+(0, _hooks.addFilter)('editor.BlockListBlock', 'core/border/with-border-color-palette-styles', withBorderColorPaletteStyles);
 //# sourceMappingURL=border.js.map

package/build/hooks/border.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/border.js"],"names":["BORDER_SUPPORT_KEY","BorderPanel","props","clientId","isColorSupported","hasBorderSupport","name","isRadiusSupported","isStyleSupported","isWidthSupported","isDisabled","every","Boolean","defaultBorderControls","createResetAllFilter","borderAttribute","topLevelAttributes","newAttributes","style","border","undefined","width","color","borderColor","radius","blockName","feature","Platform","OS","support","removeBorderAttribute","attribute"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';\nimport { Platform } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBorderColorEdit,\n\thasBorderColorValue,\n\tresetBorderColor,\n} from './border-color';\nimport {\n\tBorderRadiusEdit,\n\thasBorderRadiusValue,\n\tresetBorderRadius,\n} from './border-radius';\nimport {\n\tBorderStyleEdit,\n\thasBorderStyleValue,\n\tresetBorderStyle,\n} from './border-style';\nimport {\n\tBorderWidthEdit,\n\thasBorderWidthValue,\n\tresetBorderWidth,\n} from './border-width';\nimport InspectorControls from '../components/inspector-controls';\nimport useSetting from '../components/use-setting';\nimport { cleanEmptyObject } from './utils';\n\nexport const BORDER_SUPPORT_KEY = '__experimentalBorder';\n\nexport function BorderPanel( props ) {\n\tconst { clientId } = props;\n\n\tconst isColorSupported =\n\t\tuseSetting( 'border.color' ) && hasBorderSupport( props.name, 'color' );\n\n\tconst isRadiusSupported =\n\t\tuseSetting( 'border.radius' ) &&\n\t\thasBorderSupport( props.name, 'radius' );\n\n\tconst isStyleSupported =\n\t\tuseSetting( 'border.style' ) && hasBorderSupport( props.name, 'style' );\n\n\tconst isWidthSupported =\n\t\tuseSetting( 'border.width' ) && hasBorderSupport( props.name, 'width' );\n\n\tconst isDisabled = [\n\t\t! isColorSupported,\n\t\t! isRadiusSupported,\n\t\t! isStyleSupported,\n\t\t! isWidthSupported,\n\t].every( Boolean );\n\n\tif ( isDisabled ) {\n\t\treturn null;\n\t}\n\n\tconst defaultBorderControls = getBlockSupport( props.name, [\n\t\tBORDER_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\tconst createResetAllFilter = (\n\t\tborderAttribute,\n\t\ttopLevelAttributes = {}\n\t) => ( newAttributes ) => ( {\n\t\t...newAttributes,\n\t\t...topLevelAttributes,\n\t\tstyle: {\n\t\t\t...newAttributes.style,\n\t\t\tborder: {\n\t\t\t\t...newAttributes.style?.border,\n\t\t\t\t[ borderAttribute ]: undefined,\n\t\t\t},\n\t\t},\n\t} );\n\n\treturn (\n\t\t<InspectorControls __experimentalGroup=\"border\">\n\t\t\t{ isWidthSupported && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\thasValue={ () => hasBorderWidthValue( props ) }\n\t\t\t\t\tlabel={ __( 'Width' ) }\n\t\t\t\t\tonDeselect={ () => resetBorderWidth( props ) }\n\t\t\t\t\tisShownByDefault={ defaultBorderControls?.width }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'width' ) }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<BorderWidthEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ isStyleSupported && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\tclassName=\"single-column\"\n\t\t\t\t\thasValue={ () => hasBorderStyleValue( props ) }\n\t\t\t\t\tlabel={ __( 'Style' ) }\n\t\t\t\t\tonDeselect={ () => resetBorderStyle( props ) }\n\t\t\t\t\tisShownByDefault={ defaultBorderControls?.style }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'style' ) }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<BorderStyleEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ isColorSupported && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasBorderColorValue( props ) }\n\t\t\t\t\tlabel={ __( 'Color' ) }\n\t\t\t\t\tonDeselect={ () => resetBorderColor( props ) }\n\t\t\t\t\tisShownByDefault={ defaultBorderControls?.color }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'color', {\n\t\t\t\t\t\tborderColor: undefined,\n\t\t\t\t\t} ) }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<BorderColorEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ isRadiusSupported && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasBorderRadiusValue( props ) }\n\t\t\t\t\tlabel={ __( 'Radius' ) }\n\t\t\t\t\tonDeselect={ () => resetBorderRadius( props ) }\n\t\t\t\t\tisShownByDefault={ defaultBorderControls?.radius }\n\t\t\t\t\tresetAllFilter={ createResetAllFilter( 'radius' ) }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<BorderRadiusEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</InspectorControls>\n\t);\n}\n\n/**\n * Determine whether there is block support for border properties.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   Border feature to check support for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBorderSupport( blockName, feature = 'any' ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst support = getBlockSupport( blockName, BORDER_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn !! (\n\t\t\tsupport?.color ||\n\t\t\tsupport?.radius ||\n\t\t\tsupport?.width ||\n\t\t\tsupport?.style\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\n/**\n * Returns a new style object where the specified border attribute has been\n * removed.\n *\n * @param {Object} style     Styles from block attributes.\n * @param {string} attribute The border style attribute to clear.\n *\n * @return {Object} Style object with the specified attribute removed.\n */\nexport function removeBorderAttribute( style, attribute ) {\n\treturn cleanEmptyObject( {\n\t\t...style,\n\t\tborder: {\n\t\t\t...style?.border,\n\t\t\t[ attribute ]: undefined,\n\t\t},\n\t} );\n}\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/border.js"],"names":["BORDER_SUPPORT_KEY","borderSides","hasBorderValue","props","borderColor","style","attributes","border","resetBorder","setAttributes","undefined","radius","resetBorderFilter","newAttributes","getColorByProperty","colors","property","value","matchedColor","some","origin","color","getMultiOriginColor","namedColor","customColor","colorObject","getBorderObject","borderStyles","hydratedBorderStyles","forEach","side","colorSlug","getColorSlugFromVariable","exec","BorderPanel","clientId","isSupported","hasBorderSupport","name","isColorSupported","isRadiusSupported","isStyleSupported","isWidthSupported","isDisabled","every","Boolean","defaultBorderControls","showBorderByDefault","width","onBorderChange","newBorder","newBorderStyles","newBorderColor","top","right","bottom","left","slug","newStyle","hydratedBorder","linked","blockName","feature","Platform","OS","support","removeBorderAttribute","attribute","addAttributes","settings","type","addSaveProps","blockType","borderClasses","getBorderClasses","newClassName","className","borderColorClass","addEditProps","existingGetEditWrapperProps","getEditWrapperProps","withBorderColorPaletteStyles","BlockListBlock","borderColorValue","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","extraStyles","wrapperProps"],"mappings":";;;;;;;;;;;;;;;AAgBA;;;;AAbA;;AAKA;;AACA;;AAMA;;AAEA;;AACA;;AAKA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAhCA;AACA;AACA;;AAGA;AACA;AACA;;AAaA;AACA;AACA;AAYO,MAAMA,kBAAkB,GAAG,sBAA3B;;AAEP,MAAMC,WAAW,GAAG,CAAE,KAAF,EAAS,OAAT,EAAkB,QAAlB,EAA4B,MAA5B,CAApB;;AAEA,MAAMC,cAAc,GAAKC,KAAF,IAAa;AACnC,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAAyBF,KAAK,CAACG,UAArC;AACA,SAAO,+CAAiBD,KAAjB,aAAiBA,KAAjB,uBAAiBA,KAAK,CAAEE,MAAxB,KAAoC,CAAC,CAAEH,WAA9C;AACA,CAHD,C,CAKA;AACA;;;AACA,MAAMI,WAAW,GAAG,QAA0C;AAAA;;AAAA,MAAxC;AAAEF,IAAAA,UAAU,GAAG,EAAf;AAAmBG,IAAAA;AAAnB,GAAwC;AAC7D,QAAM;AAAEJ,IAAAA;AAAF,MAAYC,UAAlB;AACAG,EAAAA,aAAa,CAAE;AACdL,IAAAA,WAAW,EAAEM,SADC;AAEdL,IAAAA,KAAK,EAAE,EACN,GAAGA,KADG;AAENE,MAAAA,MAAM,EAAE,6BAAkB;AACzBI,QAAAA,MAAM,EAAEN,KAAF,aAAEA,KAAF,wCAAEA,KAAK,CAAEE,MAAT,kDAAE,cAAeI;AADE,OAAlB;AAFF;AAFO,GAAF,CAAb;AASA,CAXD;;AAaA,MAAMC,iBAAiB,GAAKC,aAAF;AAAA;;AAAA,SAAuB,EAChD,GAAGA,aAD6C;AAEhDT,IAAAA,WAAW,EAAEM,SAFmC;AAGhDL,IAAAA,KAAK,EAAE,EACN,GAAGQ,aAAa,CAACR,KADX;AAENE,MAAAA,MAAM,EAAE;AACPI,QAAAA,MAAM,0BAAEE,aAAa,CAACR,KAAhB,kFAAE,qBAAqBE,MAAvB,0DAAE,sBAA6BI;AAD9B;AAFF;AAHyC,GAAvB;AAAA,CAA1B;;AAWA,MAAMG,kBAAkB,GAAG,CAAEC,MAAF,EAAUC,QAAV,EAAoBC,KAApB,KAA+B;AACzD,MAAIC,YAAJ;AAEAH,EAAAA,MAAM,CAACI,IAAP,CAAeC,MAAF,IACZA,MAAM,CAACL,MAAP,CAAcI,IAAd,CAAsBE,KAAF,IAAa;AAChC,QAAKA,KAAK,CAAEL,QAAF,CAAL,KAAsBC,KAA3B,EAAmC;AAClCC,MAAAA,YAAY,GAAGG,KAAf;AACA,aAAO,IAAP;AACA;;AAED,WAAO,KAAP;AACA,GAPD,CADD;AAWA,SAAOH,YAAP;AACA,CAfD;;AAiBO,MAAMI,mBAAmB,GAAG,SAA2C;AAAA,MAAzC;AAAEP,IAAAA,MAAF;AAAUQ,IAAAA,UAAV;AAAsBC,IAAAA;AAAtB,GAAyC;;AAC7E;AACA,MAAKD,UAAL,EAAkB;AACjB,UAAME,WAAW,GAAGX,kBAAkB,CAAEC,MAAF,EAAU,MAAV,EAAkBQ,UAAlB,CAAtC;;AACA,QAAKE,WAAL,EAAmB;AAClB,aAAOA,WAAP;AACA;AACD,GAP4E,CAS7E;;;AACA,MAAK,CAAED,WAAP,EAAqB;AACpB,WAAO;AAAEH,MAAAA,KAAK,EAAEX;AAAT,KAAP;AACA,GAZ4E,CAc7E;;;AACA,QAAMe,WAAW,GAAGX,kBAAkB,CAAEC,MAAF,EAAU,OAAV,EAAmBS,WAAnB,CAAtC;AACA,SAAOC,WAAW,GAAGA,WAAH,GAAiB;AAAEJ,IAAAA,KAAK,EAAEG;AAAT,GAAnC;AACA,CAjBM;;;;AAmBP,MAAME,eAAe,GAAG,CAAEpB,UAAF,EAAcS,MAAd,KAA0B;AACjD,QAAM;AAAEX,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAAyBC,UAA/B;AACA,QAAM;AAAEC,IAAAA,MAAM,EAAEoB;AAAV,MAA2BtB,KAAK,IAAI,EAA1C,CAFiD,CAIjD;AACA;;AACA,MAAKD,WAAL,EAAmB;AAClB,UAAM;AAAEiB,MAAAA;AAAF,QAAYC,mBAAmB,CAAE;AACtCP,MAAAA,MADsC;AAEtCQ,MAAAA,UAAU,EAAEnB;AAF0B,KAAF,CAArC;AAKA,WAAOiB,KAAK,GAAG,EAAE,GAAGM,YAAL;AAAmBN,MAAAA;AAAnB,KAAH,GAAgCM,YAA5C;AACA,GAbgD,CAejD;AACA;AACA;;;AACA,MAAK,CAAEA,YAAP,EAAsB;AACrB,WAAOA,YAAP;AACA,GApBgD,CAsBjD;AACA;AACA;;;AACA,QAAMC,oBAAoB,GAAG,EAAE,GAAGD;AAAL,GAA7B;AACA1B,EAAAA,WAAW,CAAC4B,OAAZ,CAAuBC,IAAF,IAAY;AAAA;;AAChC,UAAMC,SAAS,GAAGC,wBAAwB,0BACzCJ,oBAAoB,CAAEE,IAAF,CADqB,0DACzC,sBAA8BT,KADW,CAA1C;;AAGA,QAAKU,SAAL,EAAiB;AAChB,YAAM;AAAEV,QAAAA;AAAF,UAAYC,mBAAmB,CAAE;AACtCP,QAAAA,MADsC;AAEtCQ,QAAAA,UAAU,EAAEQ;AAF0B,OAAF,CAArC;AAIAH,MAAAA,oBAAoB,CAAEE,IAAF,CAApB,GAA+B,EAC9B,GAAGF,oBAAoB,CAAEE,IAAF,CADO;AAE9BT,QAAAA;AAF8B,OAA/B;AAIA;AACD,GAdD;AAgBA,SAAOO,oBAAP;AACA,CA3CD;;AA6CA,SAASI,wBAAT,CAAmCf,KAAnC,EAA2C;AAC1C,QAAMM,UAAU,GAAG,0BAA0BU,IAA1B,CAAgChB,KAAhC,CAAnB;;AACA,MAAKM,UAAU,IAAIA,UAAU,CAAE,CAAF,CAA7B,EAAqC;AACpC,WAAOA,UAAU,CAAE,CAAF,CAAjB;AACA;;AACD,SAAO,IAAP;AACA;;AAEM,SAASW,WAAT,CAAsB/B,KAAtB,EAA8B;AACpC,QAAM;AAAEG,IAAAA,UAAF;AAAc6B,IAAAA,QAAd;AAAwB1B,IAAAA;AAAxB,MAA0CN,KAAhD;AACA,QAAM;AAAEE,IAAAA;AAAF,MAAYC,UAAlB;AACA,QAAM;AAAES,IAAAA;AAAF,MAAa,mDAAnB;AAEA,QAAMqB,WAAW,GAAGC,gBAAgB,CAAElC,KAAK,CAACmC,IAAR,CAApC;AACA,QAAMC,gBAAgB,GACrB,yBAAY,cAAZ,KAAgCF,gBAAgB,CAAElC,KAAK,CAACmC,IAAR,EAAc,OAAd,CADjD;AAEA,QAAME,iBAAiB,GACtB,yBAAY,eAAZ,KACAH,gBAAgB,CAAElC,KAAK,CAACmC,IAAR,EAAc,QAAd,CAFjB;AAGA,QAAMG,gBAAgB,GACrB,yBAAY,cAAZ,KAAgCJ,gBAAgB,CAAElC,KAAK,CAACmC,IAAR,EAAc,OAAd,CADjD;AAEA,QAAMI,gBAAgB,GACrB,yBAAY,cAAZ,KAAgCL,gBAAgB,CAAElC,KAAK,CAACmC,IAAR,EAAc,OAAd,CADjD;AAGA,QAAMK,UAAU,GAAG,CAClB,CAAEJ,gBADgB,EAElB,CAAEC,iBAFgB,EAGlB,CAAEC,gBAHgB,EAIlB,CAAEC,gBAJgB,EAKjBE,KALiB,CAKVC,OALU,CAAnB;;AAOA,MAAKF,UAAU,IAAI,CAAEP,WAArB,EAAmC;AAClC,WAAO,IAAP;AACA;;AAED,QAAMU,qBAAqB,GAAG,6BAAiB3C,KAAK,CAACmC,IAAvB,EAA6B,CAC1DtC,kBAD0D,EAE1D,+BAF0D,CAA7B,CAA9B;AAKA,QAAM+C,mBAAmB,GACxB,CAAAD,qBAAqB,SAArB,IAAAA,qBAAqB,WAArB,YAAAA,qBAAqB,CAAEzB,KAAvB,MAAgCyB,qBAAhC,aAAgCA,qBAAhC,uBAAgCA,qBAAqB,CAAEE,KAAvD,CADD;;AAGA,QAAMC,cAAc,GAAKC,SAAF,IAAiB;AAAA;;AACvC;AACA;AACA;AAEA,QAAIC,eAAe,GAAG,EAAE,GAAGD;AAAL,KAAtB;AACA,QAAIE,cAAJ;;AAEA,QAAK,+CAAiBF,SAAjB,CAAL,EAAoC;AACnC;AACA;AACA;AACA;AACA;AACA;AACAC,MAAAA,eAAe,GAAG;AACjBE,QAAAA,GAAG,EAAE,EAAE,GAAGH,SAAS,CAACG;AAAf,SADY;AAEjBC,QAAAA,KAAK,EAAE,EAAE,GAAGJ,SAAS,CAACI;AAAf,SAFU;AAGjBC,QAAAA,MAAM,EAAE,EAAE,GAAGL,SAAS,CAACK;AAAf,SAHS;AAIjBC,QAAAA,IAAI,EAAE,EAAE,GAAGN,SAAS,CAACM;AAAf;AAJW,OAAlB;AAOAvD,MAAAA,WAAW,CAAC4B,OAAZ,CAAuBC,IAAF,IAAY;AAAA;;AAChC,+BAAKoB,SAAS,CAAEpB,IAAF,CAAd,4CAAK,gBAAmBT,KAAxB,EAAgC;AAAA;;AAC/B,gBAAMI,WAAW,GAAGH,mBAAmB,CAAE;AACxCP,YAAAA,MADwC;AAExCS,YAAAA,WAAW,sBAAE0B,SAAS,CAAEpB,IAAF,CAAX,qDAAE,iBAAmBT;AAFQ,WAAF,CAAvC;;AAKA,cAAKI,WAAW,CAACgC,IAAjB,EAAwB;AACvBN,YAAAA,eAAe,CACdrB,IADc,CAAf,CAEET,KAFF,GAEW,oBAAoBI,WAAW,CAACgC,IAAM,EAFjD;AAGA;AACD;AACD,OAbD;AAcA,KA5BD,MA4BO,IAAKP,SAAL,aAAKA,SAAL,eAAKA,SAAS,CAAE7B,KAAhB,EAAwB;AAC9B;AACA;AACA,YAAMG,WAAW,GAAG0B,SAAH,aAAGA,SAAH,uBAAGA,SAAS,CAAE7B,KAA/B;AACA,YAAMI,WAAW,GAAGH,mBAAmB,CAAE;AAAEP,QAAAA,MAAF;AAAUS,QAAAA;AAAV,OAAF,CAAvC;;AAEA,UAAKC,WAAW,CAACgC,IAAjB,EAAwB;AACvBL,QAAAA,cAAc,GAAG3B,WAAW,CAACgC,IAA7B;AACAN,QAAAA,eAAe,CAAC9B,KAAhB,GAAwBX,SAAxB;AACA;AACD,KA9CsC,CAgDvC;AACA;;;AACA,UAAMgD,QAAQ,GAAG,6BAAkB,EAClC,GAAGrD,KAD+B;AAElCE,MAAAA,MAAM,EAAE;AAAEI,QAAAA,MAAM,EAAEN,KAAF,aAAEA,KAAF,yCAAEA,KAAK,CAAEE,MAAT,mDAAE,eAAeI,MAAzB;AAAiC,WAAGwC;AAApC;AAF0B,KAAlB,CAAjB;AAKA1C,IAAAA,aAAa,CAAE;AACdJ,MAAAA,KAAK,EAAEqD,QADO;AAEdtD,MAAAA,WAAW,EAAEgD;AAFC,KAAF,CAAb;AAIA,GA3DD;;AA6DA,QAAMO,cAAc,GAAGjC,eAAe,CAAEpB,UAAF,EAAcS,MAAd,CAAtC;AAEA,SACC,4BAAC,0BAAD;AAAmB,IAAA,mBAAmB,EAAC;AAAvC,KACG,CAAE2B,gBAAgB,IAAIH,gBAAtB,KACD,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAG,MAAMrC,cAAc,CAAEC,KAAF,CADhC;AAEC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAFT;AAGC,IAAA,UAAU,EAAG,MAAMK,WAAW,CAAEL,KAAF,CAH/B;AAIC,IAAA,gBAAgB,EAAG4C,mBAJpB;AAKC,IAAA,cAAc,EAAGnC,iBALlB;AAMC,IAAA,OAAO,EAAGuB;AANX,KAQC,4BAAC,0CAAD;AACC,IAAA,MAAM,EAAGpB,MADV;AAEC,IAAA,WAAW,EAAG,IAFf;AAGC,IAAA,QAAQ,EAAGkC,cAHZ;AAIC,IAAA,iBAAiB,EAAG;AACnBW,MAAAA,MAAM,EAAE,2CADW;AAEnBP,MAAAA,GAAG,EACF,+CAHkB;AAInBC,MAAAA,KAAK,EACJ,iDALkB;AAMnBC,MAAAA,MAAM,EACL,kDAPkB;AAQnBC,MAAAA,IAAI,EACH;AATkB,KAJrB;AAeC,IAAA,SAAS,EAAGf,gBAfb;AAgBC,IAAA,KAAK,EAAGkB,cAhBT;AAiBC,IAAA,gCAAgC,EAAG,IAjBpC;AAkBC,IAAA,iCAAiC,EAAG;AAlBrC,IARD,CAFF,EAgCGnB,iBAAiB,IAClB,4BAAC,wCAAD;AACC,IAAA,QAAQ,EAAG,MAAM,wCAAsBrC,KAAtB,CADlB;AAEC,IAAA,KAAK,EAAG,cAAI,QAAJ,CAFT;AAGC,IAAA,UAAU,EAAG,MAAM,qCAAmBA,KAAnB,CAHpB;AAIC,IAAA,gBAAgB,EAAG2C,qBAAH,aAAGA,qBAAH,uBAAGA,qBAAqB,CAAEnC,MAJ3C;AAKC,IAAA,cAAc,EAAKE,aAAF;AAAA;;AAAA,aAAuB,EACvC,GAAGA,aADoC;AAEvCR,QAAAA,KAAK,EAAE,EACN,GAAGQ,aAAa,CAACR,KADX;AAENE,UAAAA,MAAM,EAAE,EACP,6BAAGM,aAAa,CAACR,KAAjB,0DAAG,sBAAqBE,MAAxB,CADO;AAEPI,YAAAA,MAAM,EAAED;AAFD;AAFF;AAFgC,OAAvB;AAAA,KALlB;AAeC,IAAA,OAAO,EAAGyB;AAfX,KAiBC,4BAAC,8BAAD,EAAuBhC,KAAvB,CAjBD,CAjCF,CADD;AAwDA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASkC,gBAAT,CAA2BwB,SAA3B,EAAwD;AAAA,MAAlBC,OAAkB,uEAAR,KAAQ;;AAC9D,MAAKC,kBAASC,EAAT,KAAgB,KAArB,EAA6B;AAC5B,WAAO,KAAP;AACA;;AAED,QAAMC,OAAO,GAAG,6BAAiBJ,SAAjB,EAA4B7D,kBAA5B,CAAhB;;AAEA,MAAKiE,OAAO,KAAK,IAAjB,EAAwB;AACvB,WAAO,IAAP;AACA;;AAED,MAAKH,OAAO,KAAK,KAAjB,EAAyB;AACxB,WAAO,CAAC,EACPG,OAAO,SAAP,IAAAA,OAAO,WAAP,IAAAA,OAAO,CAAE5C,KAAT,IACA4C,OADA,aACAA,OADA,eACAA,OAAO,CAAEtD,MADT,IAEAsD,OAFA,aAEAA,OAFA,eAEAA,OAAO,CAAEjB,KAFT,IAGAiB,OAHA,aAGAA,OAHA,eAGAA,OAAO,CAAE5D,KAJF,CAAR;AAMA;;AAED,SAAO,CAAC,EAAE4D,OAAF,aAAEA,OAAF,eAAEA,OAAO,CAAIH,OAAJ,CAAT,CAAR;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASI,qBAAT,CAAgC7D,KAAhC,EAAuC8D,SAAvC,EAAmD;AACzD,SAAO,6BAAkB,EACxB,GAAG9D,KADqB;AAExBE,IAAAA,MAAM,EAAE,EACP,IAAGF,KAAH,aAAGA,KAAH,uBAAGA,KAAK,CAAEE,MAAV,CADO;AAEP,OAAE4D,SAAF,GAAezD;AAFR;AAFgB,GAAlB,CAAP;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAAS0D,aAAT,CAAwBC,QAAxB,EAAmC;AAClC,MAAK,CAAEhC,gBAAgB,CAAEgC,QAAF,EAAY,OAAZ,CAAvB,EAA+C;AAC9C,WAAOA,QAAP;AACA,GAHiC,CAKlC;;;AACA,MAAKA,QAAQ,CAAC/D,UAAT,CAAoBF,WAAzB,EAAuC;AACtC,WAAOiE,QAAP;AACA,GARiC,CAUlC;;;AACA,SAAO,EACN,GAAGA,QADG;AAEN/D,IAAAA,UAAU,EAAE,EACX,GAAG+D,QAAQ,CAAC/D,UADD;AAEXF,MAAAA,WAAW,EAAE;AACZkE,QAAAA,IAAI,EAAE;AADM;AAFF;AAFN,GAAP;AASA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,YAAT,CAAuBpE,KAAvB,EAA8BqE,SAA9B,EAAyClE,UAAzC,EAAsD;AACrD,MACC,CAAE+B,gBAAgB,CAAEmC,SAAF,EAAa,OAAb,CAAlB,IACA,oCAAyBA,SAAzB,EAAoCxE,kBAApC,EAAwD,OAAxD,CAFD,EAGE;AACD,WAAOG,KAAP;AACA;;AAED,QAAMsE,aAAa,GAAGC,gBAAgB,CAAEpE,UAAF,CAAtC;AACA,QAAMqE,YAAY,GAAG,yBAAYxE,KAAK,CAACyE,SAAlB,EAA6BH,aAA7B,CAArB,CATqD,CAWrD;AACA;;AACAtE,EAAAA,KAAK,CAACyE,SAAN,GAAkBD,YAAY,GAAGA,YAAH,GAAkBjE,SAAhD;AAEA,SAAOP,KAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASuE,gBAAT,CAA2BpE,UAA3B,EAAwC;AAAA;;AAC9C,QAAM;AAAEF,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAAyBC,UAA/B;AACA,QAAMuE,gBAAgB,GAAG,+BAAmB,cAAnB,EAAmCzE,WAAnC,CAAzB;AAEA,SAAO,yBAAY;AAClB,wBAAoBA,WAAW,KAAIC,KAAJ,aAAIA,KAAJ,yCAAIA,KAAK,CAAEE,MAAX,mDAAI,eAAec,KAAnB,CADb;AAElB,KAAEwD,gBAAF,GAAsB,CAAC,CAAEA;AAFP,GAAZ,CAAP;AAIA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,SAASC,YAAT,CAAuBT,QAAvB,EAAkC;AACjC,MACC,CAAEhC,gBAAgB,CAAEgC,QAAF,EAAY,OAAZ,CAAlB,IACA,oCAAyBA,QAAzB,EAAmCrE,kBAAnC,EAAuD,OAAvD,CAFD,EAGE;AACD,WAAOqE,QAAP;AACA;;AAED,QAAMU,2BAA2B,GAAGV,QAAQ,CAACW,mBAA7C;;AACAX,EAAAA,QAAQ,CAACW,mBAAT,GAAiC1E,UAAF,IAAkB;AAChD,QAAIH,KAAK,GAAG,EAAZ;;AAEA,QAAK4E,2BAAL,EAAmC;AAClC5E,MAAAA,KAAK,GAAG4E,2BAA2B,CAAEzE,UAAF,CAAnC;AACA;;AAED,WAAOiE,YAAY,CAAEpE,KAAF,EAASkE,QAAT,EAAmB/D,UAAnB,CAAnB;AACA,GARD;;AAUA,SAAO+D,QAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,MAAMY,4BAA4B,GAAG,yCACzCC,cAAF,IAAwB/E,KAAF,IAAa;AAAA;;AAClC,QAAM;AAAEmC,IAAAA,IAAF;AAAQhC,IAAAA;AAAR,MAAuBH,KAA7B;AACA,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA;AAAf,MAAyBC,UAA/B;AACA,QAAM;AAAES,IAAAA;AAAF,MAAa,mDAAnB;;AAEA,MACC,CAAEsB,gBAAgB,CAAEC,IAAF,EAAQ,OAAR,CAAlB,IACA,oCAAyBA,IAAzB,EAA+BtC,kBAA/B,EAAmD,OAAnD,CAFD,EAGE;AACD,WAAO,4BAAC,cAAD,EAAqBG,KAArB,CAAP;AACA;;AAED,QAAM;AAAEkB,IAAAA,KAAK,EAAE8D;AAAT,MAA8B7D,mBAAmB,CAAE;AACxDP,IAAAA,MADwD;AAExDQ,IAAAA,UAAU,EAAEnB;AAF4C,GAAF,CAAvD;AAIA,QAAM;AAAEiB,IAAAA,KAAK,EAAE+D;AAAT,MAA4B9D,mBAAmB,CAAE;AACtDP,IAAAA,MADsD;AAEtDQ,IAAAA,UAAU,EAAES,wBAAwB,CAAE3B,KAAF,aAAEA,KAAF,yCAAEA,KAAK,CAAEE,MAAT,yEAAE,eAAe8C,GAAjB,uDAAE,mBAAoBhC,KAAtB;AAFkB,GAAF,CAArD;AAIA,QAAM;AAAEA,IAAAA,KAAK,EAAEgE;AAAT,MAA8B/D,mBAAmB,CAAE;AACxDP,IAAAA,MADwD;AAExDQ,IAAAA,UAAU,EAAES,wBAAwB,CAAE3B,KAAF,aAAEA,KAAF,yCAAEA,KAAK,CAAEE,MAAT,2EAAE,eAAe+C,KAAjB,yDAAE,qBAAsBjC,KAAxB;AAFoB,GAAF,CAAvD;AAKA,QAAM;AAAEA,IAAAA,KAAK,EAAEiE;AAAT,MAA+BhE,mBAAmB,CAAE;AACzDP,IAAAA,MADyD;AAEzDQ,IAAAA,UAAU,EAAES,wBAAwB,CACnC3B,KADmC,aACnCA,KADmC,yCACnCA,KAAK,CAAEE,MAD4B,4EACnC,eAAegD,MADoB,0DACnC,sBAAuBlC,KADY;AAFqB,GAAF,CAAxD;AAMA,QAAM;AAAEA,IAAAA,KAAK,EAAEkE;AAAT,MAA6BjE,mBAAmB,CAAE;AACvDP,IAAAA,MADuD;AAEvDQ,IAAAA,UAAU,EAAES,wBAAwB,CAAE3B,KAAF,aAAEA,KAAF,yCAAEA,KAAK,CAAEE,MAAT,0EAAE,eAAeiD,IAAjB,wDAAE,oBAAqBnC,KAAvB;AAFmB,GAAF,CAAtD;AAKA,QAAMmE,WAAW,GAAG;AACnBJ,IAAAA,cAAc,EAAEA,cAAc,IAAID,gBADf;AAEnBE,IAAAA,gBAAgB,EAAEA,gBAAgB,IAAIF,gBAFnB;AAGnBG,IAAAA,iBAAiB,EAAEA,iBAAiB,IAAIH,gBAHrB;AAInBI,IAAAA,eAAe,EAAEA,eAAe,IAAIJ;AAJjB,GAApB;AAOA,MAAIM,YAAY,GAAGtF,KAAK,CAACsF,YAAzB;AACAA,EAAAA,YAAY,GAAG,EACd,GAAGtF,KAAK,CAACsF,YADK;AAEdpF,IAAAA,KAAK,EAAE,EACN,2BAAGF,KAAK,CAACsF,YAAT,wDAAG,oBAAoBpF,KAAvB,CADM;AAEN,SAAGmF;AAFG;AAFO,GAAf;AAQA,SAAO,4BAAC,cAAD,6BAAqBrF,KAArB;AAA6B,IAAA,YAAY,EAAGsF;AAA5C,KAAP;AACA,CAtD0C,CAArC;;AAyDP,sBACC,0BADD,EAEC,2BAFD,EAGCrB,aAHD;AAMA,sBACC,kCADD,EAEC,0BAFD,EAGCG,YAHD;AAMA,sBACC,0BADD,EAEC,0BAFD,EAGCO,YAHD;AAMA,sBACC,uBADD,EAEC,8CAFD,EAGCG,4BAHD","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { getBlockSupport } from '@wordpress/blocks';\nimport {\n\t__experimentalBorderBoxControl as BorderBoxControl,\n\t__experimentalHasSplitBorders as hasSplitBorders,\n\t__experimentalIsDefinedBorder as isDefinedBorder,\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n} from '@wordpress/components';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { Platform } from '@wordpress/element';\nimport { addFilter } from '@wordpress/hooks';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tBorderRadiusEdit,\n\thasBorderRadiusValue,\n\tresetBorderRadius,\n} from './border-radius';\nimport { getColorClassName } from '../components/colors';\nimport InspectorControls from '../components/inspector-controls';\nimport useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';\nimport useSetting from '../components/use-setting';\nimport { cleanEmptyObject, shouldSkipSerialization } from './utils';\n\nexport const BORDER_SUPPORT_KEY = '__experimentalBorder';\n\nconst borderSides = [ 'top', 'right', 'bottom', 'left' ];\n\nconst hasBorderValue = ( props ) => {\n\tconst { borderColor, style } = props.attributes;\n\treturn isDefinedBorder( style?.border ) || !! borderColor;\n};\n\n// The border color, style, and width are omitted so they get undefined. The\n// border radius is separate and must retain its selection.\nconst resetBorder = ( { attributes = {}, setAttributes } ) => {\n\tconst { style } = attributes;\n\tsetAttributes( {\n\t\tborderColor: undefined,\n\t\tstyle: {\n\t\t\t...style,\n\t\t\tborder: cleanEmptyObject( {\n\t\t\t\tradius: style?.border?.radius,\n\t\t\t} ),\n\t\t},\n\t} );\n};\n\nconst resetBorderFilter = ( newAttributes ) => ( {\n\t...newAttributes,\n\tborderColor: undefined,\n\tstyle: {\n\t\t...newAttributes.style,\n\t\tborder: {\n\t\t\tradius: newAttributes.style?.border?.radius,\n\t\t},\n\t},\n} );\n\nconst getColorByProperty = ( colors, property, value ) => {\n\tlet matchedColor;\n\n\tcolors.some( ( origin ) =>\n\t\torigin.colors.some( ( color ) => {\n\t\t\tif ( color[ property ] === value ) {\n\t\t\t\tmatchedColor = color;\n\t\t\t\treturn true;\n\t\t\t}\n\n\t\t\treturn false;\n\t\t} )\n\t);\n\n\treturn matchedColor;\n};\n\nexport const getMultiOriginColor = ( { colors, namedColor, customColor } ) => {\n\t// Search each origin (default, theme, or user) for matching color by name.\n\tif ( namedColor ) {\n\t\tconst colorObject = getColorByProperty( colors, 'slug', namedColor );\n\t\tif ( colorObject ) {\n\t\t\treturn colorObject;\n\t\t}\n\t}\n\n\t// Skip if no custom color or matching named color.\n\tif ( ! customColor ) {\n\t\treturn { color: undefined };\n\t}\n\n\t// Attempt to find color via custom color value or build new object.\n\tconst colorObject = getColorByProperty( colors, 'color', customColor );\n\treturn colorObject ? colorObject : { color: customColor };\n};\n\nconst getBorderObject = ( attributes, colors ) => {\n\tconst { borderColor, style } = attributes;\n\tconst { border: borderStyles } = style || {};\n\n\t// If we have a named color for a flat border. Fetch that color object and\n\t// apply that color's value to the color property within the style object.\n\tif ( borderColor ) {\n\t\tconst { color } = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: borderColor,\n\t\t} );\n\n\t\treturn color ? { ...borderStyles, color } : borderStyles;\n\t}\n\n\t// Individual side border color slugs are stored within the border style\n\t// object. If we don't have a border styles object we have nothing further\n\t// to hydrate.\n\tif ( ! borderStyles ) {\n\t\treturn borderStyles;\n\t}\n\n\t// If we have named colors for the individual side borders, retrieve their\n\t// related color objects and apply the real color values to the split\n\t// border objects.\n\tconst hydratedBorderStyles = { ...borderStyles };\n\tborderSides.forEach( ( side ) => {\n\t\tconst colorSlug = getColorSlugFromVariable(\n\t\t\thydratedBorderStyles[ side ]?.color\n\t\t);\n\t\tif ( colorSlug ) {\n\t\t\tconst { color } = getMultiOriginColor( {\n\t\t\t\tcolors,\n\t\t\t\tnamedColor: colorSlug,\n\t\t\t} );\n\t\t\thydratedBorderStyles[ side ] = {\n\t\t\t\t...hydratedBorderStyles[ side ],\n\t\t\t\tcolor,\n\t\t\t};\n\t\t}\n\t} );\n\n\treturn hydratedBorderStyles;\n};\n\nfunction getColorSlugFromVariable( value ) {\n\tconst namedColor = /var:preset\\|color\\|(.+)/.exec( value );\n\tif ( namedColor && namedColor[ 1 ] ) {\n\t\treturn namedColor[ 1 ];\n\t}\n\treturn null;\n}\n\nexport function BorderPanel( props ) {\n\tconst { attributes, clientId, setAttributes } = props;\n\tconst { style } = attributes;\n\tconst { colors } = useMultipleOriginColorsAndGradients();\n\n\tconst isSupported = hasBorderSupport( props.name );\n\tconst isColorSupported =\n\t\tuseSetting( 'border.color' ) && hasBorderSupport( props.name, 'color' );\n\tconst isRadiusSupported =\n\t\tuseSetting( 'border.radius' ) &&\n\t\thasBorderSupport( props.name, 'radius' );\n\tconst isStyleSupported =\n\t\tuseSetting( 'border.style' ) && hasBorderSupport( props.name, 'style' );\n\tconst isWidthSupported =\n\t\tuseSetting( 'border.width' ) && hasBorderSupport( props.name, 'width' );\n\n\tconst isDisabled = [\n\t\t! isColorSupported,\n\t\t! isRadiusSupported,\n\t\t! isStyleSupported,\n\t\t! isWidthSupported,\n\t].every( Boolean );\n\n\tif ( isDisabled || ! isSupported ) {\n\t\treturn null;\n\t}\n\n\tconst defaultBorderControls = getBlockSupport( props.name, [\n\t\tBORDER_SUPPORT_KEY,\n\t\t'__experimentalDefaultControls',\n\t] );\n\n\tconst showBorderByDefault =\n\t\tdefaultBorderControls?.color || defaultBorderControls?.width;\n\n\tconst onBorderChange = ( newBorder ) => {\n\t\t// Filter out named colors and apply them to appropriate block\n\t\t// attributes so that CSS classes can be used to apply those colors.\n\t\t// e.g. has-primary-border-top-color.\n\n\t\tlet newBorderStyles = { ...newBorder };\n\t\tlet newBorderColor;\n\n\t\tif ( hasSplitBorders( newBorder ) ) {\n\t\t\t// For each side check if the side has a color value set\n\t\t\t// If so, determine if it belongs to a named color, in which case\n\t\t\t// we update the color property.\n\t\t\t//\n\t\t\t// This deliberately overwrites `newBorderStyles` to avoid mutating\n\t\t\t// the passed object which causes problems otherwise.\n\t\t\tnewBorderStyles = {\n\t\t\t\ttop: { ...newBorder.top },\n\t\t\t\tright: { ...newBorder.right },\n\t\t\t\tbottom: { ...newBorder.bottom },\n\t\t\t\tleft: { ...newBorder.left },\n\t\t\t};\n\n\t\t\tborderSides.forEach( ( side ) => {\n\t\t\t\tif ( newBorder[ side ]?.color ) {\n\t\t\t\t\tconst colorObject = getMultiOriginColor( {\n\t\t\t\t\t\tcolors,\n\t\t\t\t\t\tcustomColor: newBorder[ side ]?.color,\n\t\t\t\t\t} );\n\n\t\t\t\t\tif ( colorObject.slug ) {\n\t\t\t\t\t\tnewBorderStyles[\n\t\t\t\t\t\t\tside\n\t\t\t\t\t\t].color = `var:preset|color|${ colorObject.slug }`;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t} );\n\t\t} else if ( newBorder?.color ) {\n\t\t\t// We have a flat border configuration. Apply named color slug to\n\t\t\t// `borderColor` attribute and clear color style property if found.\n\t\t\tconst customColor = newBorder?.color;\n\t\t\tconst colorObject = getMultiOriginColor( { colors, customColor } );\n\n\t\t\tif ( colorObject.slug ) {\n\t\t\t\tnewBorderColor = colorObject.slug;\n\t\t\t\tnewBorderStyles.color = undefined;\n\t\t\t}\n\t\t}\n\n\t\t// Ensure previous border radius styles are maintained and clean\n\t\t// overall result for empty objects or properties.\n\t\tconst newStyle = cleanEmptyObject( {\n\t\t\t...style,\n\t\t\tborder: { radius: style?.border?.radius, ...newBorderStyles },\n\t\t} );\n\n\t\tsetAttributes( {\n\t\t\tstyle: newStyle,\n\t\t\tborderColor: newBorderColor,\n\t\t} );\n\t};\n\n\tconst hydratedBorder = getBorderObject( attributes, colors );\n\n\treturn (\n\t\t<InspectorControls __experimentalGroup=\"border\">\n\t\t\t{ ( isWidthSupported || isColorSupported ) && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasBorderValue( props ) }\n\t\t\t\t\tlabel={ __( 'Border' ) }\n\t\t\t\t\tonDeselect={ () => resetBorder( props ) }\n\t\t\t\t\tisShownByDefault={ showBorderByDefault }\n\t\t\t\t\tresetAllFilter={ resetBorderFilter }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<BorderBoxControl\n\t\t\t\t\t\tcolors={ colors }\n\t\t\t\t\t\tenableAlpha={ true }\n\t\t\t\t\t\tonChange={ onBorderChange }\n\t\t\t\t\t\tpopoverClassNames={ {\n\t\t\t\t\t\t\tlinked: 'block-editor__border-box-control__popover',\n\t\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\t\t'block-editor__border-box-control__popover-top',\n\t\t\t\t\t\t\tright:\n\t\t\t\t\t\t\t\t'block-editor__border-box-control__popover-right',\n\t\t\t\t\t\t\tbottom:\n\t\t\t\t\t\t\t\t'block-editor__border-box-control__popover-bottom',\n\t\t\t\t\t\t\tleft:\n\t\t\t\t\t\t\t\t'block-editor__border-box-control__popover-left',\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tshowStyle={ isStyleSupported }\n\t\t\t\t\t\tvalue={ hydratedBorder }\n\t\t\t\t\t\t__experimentalHasMultipleOrigins={ true }\n\t\t\t\t\t\t__experimentalIsRenderedInSidebar={ true }\n\t\t\t\t\t/>\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t\t{ isRadiusSupported && (\n\t\t\t\t<ToolsPanelItem\n\t\t\t\t\thasValue={ () => hasBorderRadiusValue( props ) }\n\t\t\t\t\tlabel={ __( 'Radius' ) }\n\t\t\t\t\tonDeselect={ () => resetBorderRadius( props ) }\n\t\t\t\t\tisShownByDefault={ defaultBorderControls?.radius }\n\t\t\t\t\tresetAllFilter={ ( newAttributes ) => ( {\n\t\t\t\t\t\t...newAttributes,\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t...newAttributes.style,\n\t\t\t\t\t\t\tborder: {\n\t\t\t\t\t\t\t\t...newAttributes.style?.border,\n\t\t\t\t\t\t\t\tradius: undefined,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t},\n\t\t\t\t\t} ) }\n\t\t\t\t\tpanelId={ clientId }\n\t\t\t\t>\n\t\t\t\t\t<BorderRadiusEdit { ...props } />\n\t\t\t\t</ToolsPanelItem>\n\t\t\t) }\n\t\t</InspectorControls>\n\t);\n}\n\n/**\n * Determine whether there is block support for border properties.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   Border feature to check support for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBorderSupport( blockName, feature = 'any' ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst support = getBlockSupport( blockName, BORDER_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn !! (\n\t\t\tsupport?.color ||\n\t\t\tsupport?.radius ||\n\t\t\tsupport?.width ||\n\t\t\tsupport?.style\n\t\t);\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\n/**\n * Returns a new style object where the specified border attribute has been\n * removed.\n *\n * @param {Object} style     Styles from block attributes.\n * @param {string} attribute The border style attribute to clear.\n *\n * @return {Object} Style object with the specified attribute removed.\n */\nexport function removeBorderAttribute( style, attribute ) {\n\treturn cleanEmptyObject( {\n\t\t...style,\n\t\tborder: {\n\t\t\t...style?.border,\n\t\t\t[ attribute ]: undefined,\n\t\t},\n\t} );\n}\n\n/**\n * Filters registered block settings, extending attributes to include\n * `borderColor` if needed.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Updated block settings.\n */\nfunction addAttributes( settings ) {\n\tif ( ! hasBorderSupport( settings, 'color' ) ) {\n\t\treturn settings;\n\t}\n\n\t// Allow blocks to specify default value if needed.\n\tif ( settings.attributes.borderColor ) {\n\t\treturn settings;\n\t}\n\n\t// Add new borderColor attribute to block settings.\n\treturn {\n\t\t...settings,\n\t\tattributes: {\n\t\t\t...settings.attributes,\n\t\t\tborderColor: {\n\t\t\t\ttype: 'string',\n\t\t\t},\n\t\t},\n\t};\n}\n\n/**\n * Override props assigned to save component to inject border color.\n *\n * @param {Object} props      Additional props applied to save element.\n * @param {Object} blockType  Block type definition.\n * @param {Object} attributes Block's attributes.\n *\n * @return {Object} Filtered props to apply to save element.\n */\nfunction addSaveProps( props, blockType, attributes ) {\n\tif (\n\t\t! hasBorderSupport( blockType, 'color' ) ||\n\t\tshouldSkipSerialization( blockType, BORDER_SUPPORT_KEY, 'color' )\n\t) {\n\t\treturn props;\n\t}\n\n\tconst borderClasses = getBorderClasses( attributes );\n\tconst newClassName = classnames( props.className, borderClasses );\n\n\t// If we are clearing the last of the previous classes in `className`\n\t// set it to `undefined` to avoid rendering empty DOM attributes.\n\tprops.className = newClassName ? newClassName : undefined;\n\n\treturn props;\n}\n\n/**\n * Generates a CSS class name consisting of all the applicable border color\n * classes given the current block attributes.\n *\n * @param {Object} attributes Block's attributes.\n *\n * @return {string} CSS class name.\n */\nexport function getBorderClasses( attributes ) {\n\tconst { borderColor, style } = attributes;\n\tconst borderColorClass = getColorClassName( 'border-color', borderColor );\n\n\treturn classnames( {\n\t\t'has-border-color': borderColor || style?.border?.color,\n\t\t[ borderColorClass ]: !! borderColorClass,\n\t} );\n}\n\n/**\n * Filters the registered block settings to apply border color styles and\n * classnames to the block edit wrapper.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nfunction addEditProps( settings ) {\n\tif (\n\t\t! hasBorderSupport( settings, 'color' ) ||\n\t\tshouldSkipSerialization( settings, BORDER_SUPPORT_KEY, 'color' )\n\t) {\n\t\treturn settings;\n\t}\n\n\tconst existingGetEditWrapperProps = settings.getEditWrapperProps;\n\tsettings.getEditWrapperProps = ( attributes ) => {\n\t\tlet props = {};\n\n\t\tif ( existingGetEditWrapperProps ) {\n\t\t\tprops = existingGetEditWrapperProps( attributes );\n\t\t}\n\n\t\treturn addSaveProps( props, settings, attributes );\n\t};\n\n\treturn settings;\n}\n\n/**\n * This adds inline styles for color palette colors.\n * Ideally, this is not needed and themes should load their palettes on the editor.\n *\n * @param {Function} BlockListBlock Original component.\n *\n * @return {Function} Wrapped component.\n */\nexport const withBorderColorPaletteStyles = createHigherOrderComponent(\n\t( BlockListBlock ) => ( props ) => {\n\t\tconst { name, attributes } = props;\n\t\tconst { borderColor, style } = attributes;\n\t\tconst { colors } = useMultipleOriginColorsAndGradients();\n\n\t\tif (\n\t\t\t! hasBorderSupport( name, 'color' ) ||\n\t\t\tshouldSkipSerialization( name, BORDER_SUPPORT_KEY, 'color' )\n\t\t) {\n\t\t\treturn <BlockListBlock { ...props } />;\n\t\t}\n\n\t\tconst { color: borderColorValue } = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: borderColor,\n\t\t} );\n\t\tconst { color: borderTopColor } = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: getColorSlugFromVariable( style?.border?.top?.color ),\n\t\t} );\n\t\tconst { color: borderRightColor } = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: getColorSlugFromVariable( style?.border?.right?.color ),\n\t\t} );\n\n\t\tconst { color: borderBottomColor } = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: getColorSlugFromVariable(\n\t\t\t\tstyle?.border?.bottom?.color\n\t\t\t),\n\t\t} );\n\t\tconst { color: borderLeftColor } = getMultiOriginColor( {\n\t\t\tcolors,\n\t\t\tnamedColor: getColorSlugFromVariable( style?.border?.left?.color ),\n\t\t} );\n\n\t\tconst extraStyles = {\n\t\t\tborderTopColor: borderTopColor || borderColorValue,\n\t\t\tborderRightColor: borderRightColor || borderColorValue,\n\t\t\tborderBottomColor: borderBottomColor || borderColorValue,\n\t\t\tborderLeftColor: borderLeftColor || borderColorValue,\n\t\t};\n\n\t\tlet wrapperProps = props.wrapperProps;\n\t\twrapperProps = {\n\t\t\t...props.wrapperProps,\n\t\t\tstyle: {\n\t\t\t\t...props.wrapperProps?.style,\n\t\t\t\t...extraStyles,\n\t\t\t},\n\t\t};\n\n\t\treturn <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;\n\t}\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/border/addAttributes',\n\taddAttributes\n);\n\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/border/addSaveProps',\n\taddSaveProps\n);\n\naddFilter(\n\t'blocks.registerBlockType',\n\t'core/border/addEditProps',\n\taddEditProps\n);\n\naddFilter(\n\t'editor.BlockListBlock',\n\t'core/border/with-border-color-palette-styles',\n\twithBorderColorPaletteStyles\n);\n"]}