@wordpress/block-editor 8.5.7 → 9.1.0

package/build-module/hooks/anchor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-editor/src/hooks/anchor.js"],"names":["has","addFilter","PanelBody","TextControl","ExternalLink","__","hasBlockSupport","createHigherOrderComponent","Platform","InspectorControls","ANCHOR_REGEX","ANCHOR_SCHEMA","type","source","attribute","selector","addAttribute","settings","attributes","anchor","withInspectorControl","BlockEdit","props","hasAnchor","name","isSelected","isWeb","OS","textControl","nextValue","replace","setAttributes","addSaveProps","extraProps","blockType","id"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { has } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { PanelBody, TextControl, ExternalLink } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { InspectorControls } from '../components';\n\n/**\n * Regular expression matching invalid anchor characters for replacement.\n *\n * @type {RegExp}\n */\nconst ANCHOR_REGEX = /[\\s#]/g;\n\nconst ANCHOR_SCHEMA = {\n\ttype: 'string',\n\tsource: 'attribute',\n\tattribute: 'id',\n\tselector: '*',\n};\n\n/**\n * Filters registered block settings, extending attributes with anchor using ID\n * of the first node.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( has( settings.attributes, [ 'anchor', 'type' ] ) ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, 'anchor' ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tanchor: ANCHOR_SCHEMA,\n\t\t};\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override the default edit UI to include a new block inspector control for\n * assigning the anchor ID, if block supports anchor.\n *\n * @param {WPComponent} BlockEdit Original component.\n *\n * @return {WPComponent} Wrapped component.\n */\nexport const withInspectorControl = createHigherOrderComponent(\n\t( BlockEdit ) => {\n\t\treturn ( props ) => {\n\t\t\tconst hasAnchor = hasBlockSupport( props.name, 'anchor' );\n\n\t\t\tif ( hasAnchor && props.isSelected ) {\n\t\t\t\tconst isWeb = Platform.OS === 'web';\n\t\t\t\tconst textControl = (\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tclassName=\"html-anchor-control\"\n\t\t\t\t\t\tlabel={ __( 'HTML anchor' ) }\n\t\t\t\t\t\thelp={\n\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'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'\n\t\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t\t{ isWeb && (\n\t\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/support/article/page-jumps/'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Learn more about anchors' ) }\n\t\t\t\t\t\t\t\t\t</ExternalLink>\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\tvalue={ props.attributes.anchor || '' }\n\t\t\t\t\t\tplaceholder={ ! isWeb ? __( 'Add an anchor' ) : null }\n\t\t\t\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\t\t\t\tnextValue = nextValue.replace( ANCHOR_REGEX, '-' );\n\t\t\t\t\t\t\tprops.setAttributes( {\n\t\t\t\t\t\t\t\tanchor: nextValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tautoCapitalize=\"none\"\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t/>\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<BlockEdit { ...props } />\n\t\t\t\t\t\t{ isWeb && (\n\t\t\t\t\t\t\t<InspectorControls __experimentalGroup=\"advanced\">\n\t\t\t\t\t\t\t\t{ textControl }\n\t\t\t\t\t\t\t</InspectorControls>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t * We plan to remove scoping anchors to 'core/heading' to support\n\t\t\t\t\t\t * anchors for all eligble blocks. Additionally we plan to explore\n\t\t\t\t\t\t * leveraging InspectorAdvancedControls instead of a custom\n\t\t\t\t\t\t * PanelBody title. https://git.io/Jtcov\n\t\t\t\t\t\t */ }\n\t\t\t\t\t\t{ ! isWeb && props.name === 'core/heading' && (\n\t\t\t\t\t\t\t<InspectorControls>\n\t\t\t\t\t\t\t\t<PanelBody title={ __( 'Heading settings' ) }>\n\t\t\t\t\t\t\t\t\t{ textControl }\n\t\t\t\t\t\t\t\t</PanelBody>\n\t\t\t\t\t\t\t</InspectorControls>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn <BlockEdit { ...props } />;\n\t\t};\n\t},\n\t'withInspectorControl'\n);\n\n/**\n * Override props assigned to save component to inject anchor ID, if block\n * supports anchor. This is only applied if the block's save result is an\n * element and not a markup string.\n *\n * @param {Object} extraProps Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Current block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( extraProps, blockType, attributes ) {\n\tif ( hasBlockSupport( blockType, 'anchor' ) ) {\n\t\textraProps.id = attributes.anchor === '' ? null : attributes.anchor;\n\t}\n\n\treturn extraProps;\n}\n\naddFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );\naddFilter(\n\t'editor.BlockEdit',\n\t'core/editor/anchor/with-inspector-control',\n\twithInspectorControl\n);\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/anchor/save-props',\n\taddSaveProps\n);\n"]}
+{"version":3,"sources":["@wordpress/block-editor/src/hooks/anchor.js"],"names":["has","addFilter","PanelBody","TextControl","ExternalLink","__","hasBlockSupport","createHigherOrderComponent","Platform","InspectorControls","ANCHOR_REGEX","ANCHOR_SCHEMA","type","source","attribute","selector","addAttribute","settings","attributes","anchor","withInspectorControl","BlockEdit","props","hasAnchor","name","isSelected","isWeb","OS","textControl","nextValue","replace","setAttributes","addSaveProps","extraProps","blockType","id"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { has } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { addFilter } from '@wordpress/hooks';\nimport { PanelBody, TextControl, ExternalLink } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { hasBlockSupport } from '@wordpress/blocks';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { Platform } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { InspectorControls } from '../components';\n\n/**\n * Regular expression matching invalid anchor characters for replacement.\n *\n * @type {RegExp}\n */\nconst ANCHOR_REGEX = /[\\s#]/g;\n\nconst ANCHOR_SCHEMA = {\n\ttype: 'string',\n\tsource: 'attribute',\n\tattribute: 'id',\n\tselector: '*',\n};\n\n/**\n * Filters registered block settings, extending attributes with anchor using ID\n * of the first node.\n *\n * @param {Object} settings Original block settings.\n *\n * @return {Object} Filtered block settings.\n */\nexport function addAttribute( settings ) {\n\t// Allow blocks to specify their own attribute definition with default values if needed.\n\tif ( has( settings.attributes, [ 'anchor', 'type' ] ) ) {\n\t\treturn settings;\n\t}\n\tif ( hasBlockSupport( settings, 'anchor' ) ) {\n\t\t// Gracefully handle if settings.attributes is undefined.\n\t\tsettings.attributes = {\n\t\t\t...settings.attributes,\n\t\t\tanchor: ANCHOR_SCHEMA,\n\t\t};\n\t}\n\n\treturn settings;\n}\n\n/**\n * Override the default edit UI to include a new block inspector control for\n * assigning the anchor ID, if block supports anchor.\n *\n * @param {WPComponent} BlockEdit Original component.\n *\n * @return {WPComponent} Wrapped component.\n */\nexport const withInspectorControl = createHigherOrderComponent(\n\t( BlockEdit ) => {\n\t\treturn ( props ) => {\n\t\t\tconst hasAnchor = hasBlockSupport( props.name, 'anchor' );\n\n\t\t\tif ( hasAnchor && props.isSelected ) {\n\t\t\t\tconst isWeb = Platform.OS === 'web';\n\t\t\t\tconst textControl = (\n\t\t\t\t\t<TextControl\n\t\t\t\t\t\tclassName=\"html-anchor-control\"\n\t\t\t\t\t\tlabel={ __( 'HTML anchor' ) }\n\t\t\t\t\t\thelp={\n\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'Enter a word or two — without spaces — to make a unique web address just for this block, called an “anchor.” Then, you’ll be able to link directly to this section of your page.'\n\t\t\t\t\t\t\t\t) }\n\n\t\t\t\t\t\t\t\t{ isWeb && (\n\t\t\t\t\t\t\t\t\t<ExternalLink\n\t\t\t\t\t\t\t\t\t\thref={ __(\n\t\t\t\t\t\t\t\t\t\t\t'https://wordpress.org/support/article/page-jumps/'\n\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Learn more about anchors' ) }\n\t\t\t\t\t\t\t\t\t</ExternalLink>\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\tvalue={ props.attributes.anchor || '' }\n\t\t\t\t\t\tplaceholder={ ! isWeb ? __( 'Add an anchor' ) : null }\n\t\t\t\t\t\tonChange={ ( nextValue ) => {\n\t\t\t\t\t\t\tnextValue = nextValue.replace( ANCHOR_REGEX, '-' );\n\t\t\t\t\t\t\tprops.setAttributes( {\n\t\t\t\t\t\t\t\tanchor: nextValue,\n\t\t\t\t\t\t\t} );\n\t\t\t\t\t\t} }\n\t\t\t\t\t\tautoCapitalize=\"none\"\n\t\t\t\t\t\tautoComplete=\"off\"\n\t\t\t\t\t/>\n\t\t\t\t);\n\n\t\t\t\treturn (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<BlockEdit { ...props } />\n\t\t\t\t\t\t{ isWeb && (\n\t\t\t\t\t\t\t<InspectorControls __experimentalGroup=\"advanced\">\n\t\t\t\t\t\t\t\t{ textControl }\n\t\t\t\t\t\t\t</InspectorControls>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ /*\n\t\t\t\t\t\t * We plan to remove scoping anchors to 'core/heading' to support\n\t\t\t\t\t\t * anchors for all eligble blocks. Additionally we plan to explore\n\t\t\t\t\t\t * leveraging InspectorAdvancedControls instead of a custom\n\t\t\t\t\t\t * PanelBody title. https://github.com/WordPress/gutenberg/issues/28363\n\t\t\t\t\t\t */ }\n\t\t\t\t\t\t{ ! isWeb && props.name === 'core/heading' && (\n\t\t\t\t\t\t\t<InspectorControls>\n\t\t\t\t\t\t\t\t<PanelBody title={ __( 'Heading settings' ) }>\n\t\t\t\t\t\t\t\t\t{ textControl }\n\t\t\t\t\t\t\t\t</PanelBody>\n\t\t\t\t\t\t\t</InspectorControls>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn <BlockEdit { ...props } />;\n\t\t};\n\t},\n\t'withInspectorControl'\n);\n\n/**\n * Override props assigned to save component to inject anchor ID, if block\n * supports anchor. This is only applied if the block's save result is an\n * element and not a markup string.\n *\n * @param {Object} extraProps Additional props applied to save element.\n * @param {Object} blockType  Block type.\n * @param {Object} attributes Current block attributes.\n *\n * @return {Object} Filtered props applied to save element.\n */\nexport function addSaveProps( extraProps, blockType, attributes ) {\n\tif ( hasBlockSupport( blockType, 'anchor' ) ) {\n\t\textraProps.id = attributes.anchor === '' ? null : attributes.anchor;\n\t}\n\n\treturn extraProps;\n}\n\naddFilter( 'blocks.registerBlockType', 'core/anchor/attribute', addAttribute );\naddFilter(\n\t'editor.BlockEdit',\n\t'core/editor/anchor/with-inspector-control',\n\twithInspectorControl\n);\naddFilter(\n\t'blocks.getSaveContent.extraProps',\n\t'core/anchor/save-props',\n\taddSaveProps\n);\n"]}

package/build-module/hooks/border.js

@@ -1,89 +1,317 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+
 import { getBlockSupport } from '@wordpress/blocks';
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import { __experimentalBorderBoxControl as BorderBoxControl, __experimentalHasSplitBorders as hasSplitBorders, __experimentalIsDefinedBorder as isDefinedBorder, __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
 import { Platform } from '@wordpress/element';
+import { addFilter } from '@wordpress/hooks';
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
 
-import { BorderColorEdit, hasBorderColorValue, resetBorderColor } from './border-color';
 import { BorderRadiusEdit, hasBorderRadiusValue, resetBorderRadius } from './border-radius';
-import { BorderStyleEdit, hasBorderStyleValue, resetBorderStyle } from './border-style';
-import { BorderWidthEdit, hasBorderWidthValue, resetBorderWidth } from './border-width';
+import { getColorClassName } from '../components/colors';
 import InspectorControls from '../components/inspector-controls';
+import useMultipleOriginColorsAndGradients from '../components/colors-gradients/use-multiple-origin-colors-and-gradients';
 import useSetting from '../components/use-setting';
-import { cleanEmptyObject } from './utils';
+import { cleanEmptyObject, shouldSkipSerialization } from './utils';
 export const BORDER_SUPPORT_KEY = '__experimentalBorder';
+const borderSides = ['top', 'right', 'bottom', 'left'];
+
+const hasBorderValue = props => {
+  const {
+    borderColor,
+    style
+  } = props.attributes;
+  return isDefinedBorder(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: 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;
+};
+
+export 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
+  };
+};
+
+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;
+}
+
 export function BorderPanel(props) {
   const {
-    clientId
+    attributes,
+    clientId,
+    setAttributes
   } = props;
+  const {
+    style
+  } = attributes;
+  const {
+    colors
+  } = useMultipleOriginColorsAndGradients();
+  const isSupported = hasBorderSupport(props.name);
   const isColorSupported = useSetting('border.color') && hasBorderSupport(props.name, 'color');
   const isRadiusSupported = useSetting('border.radius') && hasBorderSupport(props.name, 'radius');
   const isStyleSupported = useSetting('border.style') && hasBorderSupport(props.name, 'style');
   const isWidthSupported = useSetting('border.width') && hasBorderSupport(props.name, 'width');
   const isDisabled = [!isColorSupported, !isRadiusSupported, !isStyleSupported, !isWidthSupported].every(Boolean);
 
-  if (isDisabled) {
+  if (isDisabled || !isSupported) {
     return null;
   }
 
   const defaultBorderControls = 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 (hasSplitBorders(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 = 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 createElement(InspectorControls, {
     __experimentalGroup: "border"
-  }, isWidthSupported && createElement(ToolsPanelItem, {
-    className: "single-column",
-    hasValue: () => hasBorderWidthValue(props),
-    label: __('Width'),
-    onDeselect: () => resetBorderWidth(props),
-    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.width,
-    resetAllFilter: createResetAllFilter('width'),
-    panelId: clientId
-  }, createElement(BorderWidthEdit, props)), isStyleSupported && createElement(ToolsPanelItem, {
-    className: "single-column",
-    hasValue: () => hasBorderStyleValue(props),
-    label: __('Style'),
-    onDeselect: () => resetBorderStyle(props),
-    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.style,
-    resetAllFilter: createResetAllFilter('style'),
-    panelId: clientId
-  }, createElement(BorderStyleEdit, props)), isColorSupported && createElement(ToolsPanelItem, {
-    hasValue: () => hasBorderColorValue(props),
-    label: __('Color'),
-    onDeselect: () => resetBorderColor(props),
-    isShownByDefault: defaultBorderControls === null || defaultBorderControls === void 0 ? void 0 : defaultBorderControls.color,
-    resetAllFilter: createResetAllFilter('color', {
-      borderColor: undefined
-    }),
+  }, (isWidthSupported || isColorSupported) && createElement(ToolsPanelItem, {
+    hasValue: () => hasBorderValue(props),
+    label: __('Border'),
+    onDeselect: () => resetBorder(props),
+    isShownByDefault: showBorderByDefault,
+    resetAllFilter: resetBorderFilter,
     panelId: clientId
-  }, createElement(BorderColorEdit, props)), isRadiusSupported && createElement(ToolsPanelItem, {
+  }, createElement(BorderBoxControl, {
+    colors: colors,
+    enableAlpha: true,
+    onChange: onBorderChange,
+    popoverPlacement: "left-start",
+    popoverOffset: 40,
+    showStyle: isStyleSupported,
+    value: hydratedBorder,
+    __experimentalHasMultipleOrigins: true,
+    __experimentalIsRenderedInSidebar: true
+  })), isRadiusSupported && createElement(ToolsPanelItem, {
     hasValue: () => hasBorderRadiusValue(props),
     label: __('Radius'),
     onDeselect: () => 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
   }, createElement(BorderRadiusEdit, props)));
 }
@@ -132,4 +360,185 @@ export 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') || shouldSkipSerialization(blockType, BORDER_SUPPORT_KEY, 'color')) {
+    return props;
+  }
+
+  const borderClasses = getBorderClasses(attributes);
+  const newClassName = classnames(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.
+ */
+
+
+export function getBorderClasses(attributes) {
+  var _style$border3;
+
+  const {
+    borderColor,
+    style
+  } = attributes;
+  const borderColorClass = getColorClassName('border-color', borderColor);
+  return classnames({
+    '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') || 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.
+ */
+
+
+export const withBorderColorPaletteStyles = 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
+  } = useMultipleOriginColorsAndGradients();
+
+  if (!hasBorderSupport(name, 'color') || shouldSkipSerialization(name, BORDER_SUPPORT_KEY, 'color')) {
+    return 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 createElement(BlockListBlock, _extends({}, props, {
+    wrapperProps: wrapperProps
+  }));
+});
+addFilter('blocks.registerBlockType', 'core/border/addAttributes', addAttributes);
+addFilter('blocks.getSaveContent.extraProps', 'core/border/addSaveProps', addSaveProps);
+addFilter('blocks.registerBlockType', 'core/border/addEditProps', addEditProps);
+addFilter('editor.BlockListBlock', 'core/border/with-border-color-palette-styles', withBorderColorPaletteStyles);
 //# sourceMappingURL=border.js.map