Border Block Support: Add utilities to get border classes and styles (#…

…31264)

* Add utilities to get border support classes and styles

This follows the same pattern as the utilities added for the colors block support.

Its intended use is in retrieving border related styles and classes to apply to inner block elements.

* Export border support utilities for native

packages/block-editor/src/hooks/index.js

@@ -12,4 +12,5 @@ import './font-size';
 import './border-color';
 import './layout';
 
+export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';

packages/block-editor/src/hooks/index.native.js

@@ -9,4 +9,5 @@ import './style';
 import './color';
 import './font-size';
 
+export { getBorderClassesAndStyles, useBorderProps } from './use-border-props';
 export { getColorClassesAndStyles, useColorProps } from './use-color-props';

packages/block-editor/src/hooks/use-border-props.js

@@ -0,0 +1,73 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import { getInlineStyles } from './style';
+import {
+	getColorClassName,
+	getColorObjectByAttributeValues,
+} from '../components/colors';
+import useEditorFeature from '../components/use-editor-feature';
+
+// This utility is intended to assist where the serialization of the border
+// block support is being skipped for a block but the border related CSS classes
+// & styles still need to be generated so they can be applied to inner elements.
+
+const EMPTY_ARRAY = [];
+
+/**
+ * Provides the CSS class names and inline styles for a block's border support
+ * attributes.
+ *
+ * @param  {Object} attributes             Block attributes.
+ * @param  {string} attributes.borderColor Selected named border color.
+ * @param  {Object} attributes.style       Block's styles attribute.
+ *
+ * @return {Object} Border block support derived CSS classes & styles.
+ */
+export function getBorderClassesAndStyles( { borderColor, style } ) {
+	const borderStyles = style?.border || {};
+	const borderClass = getColorClassName( 'border-color', borderColor );
+
+	const className = classnames( {
+		[ borderClass ]: !! borderClass,
+		'has-border-color': borderColor || style?.border?.color,
+	} );
+
+	return {
+		className: className || undefined,
+		style: getInlineStyles( { border: borderStyles } ),
+	};
+}
+
+/**
+ * Derives the border related props for a block from its border block support
+ * attributes.
+ *
+ * Inline styles are forced for named colors to ensure these selections are
+ * reflected when themes do not load their color stylesheets in the editor.
+ *
+ * @param  {Object} attributes Block attributes.
+ * @return {Object}            ClassName & style props from border block support.
+ */
+export function useBorderProps( attributes ) {
+	const colors = useEditorFeature( 'color.palette' ) || EMPTY_ARRAY;
+	const borderProps = getBorderClassesAndStyles( attributes );
+
+	// Force inline style to apply border color when themes do not load their
+	// color stylesheets in the editor.
+	if ( attributes.borderColor ) {
+		const borderColorObject = getColorObjectByAttributeValues(
+			colors,
+			attributes.borderColor
+		);
+
+		borderProps.style.borderColor = borderColorObject.color;
+	}
+
+	return borderProps;
+}

packages/block-editor/src/index.js

@@ -8,6 +8,8 @@ import '@wordpress/rich-text';
  */
 import './hooks';
 export {
+	getBorderClassesAndStyles as __experimentalGetBorderClassesAndStyles,
+	useBorderProps as __experimentalUseBorderProps,
 	getColorClassesAndStyles as __experimentalGetColorClassesAndStyles,
 	useColorProps as __experimentalUseColorProps,
 } from './hooks';