Table: Add border block support (#31265)

* 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

* Add border support to table block

This extends the table block to opt into border color, style and width block support features. It skips serialization of this support so it can be applied to the inner `table` element.

packages/block-library/src/table/block.json

@@ -126,6 +126,12 @@
 			"__experimentalSkipSerialization": true,
 			"gradients": true
 		},
+		"__experimentalBorder": {
+			"__experimentalSkipSerialization": true,
+			"color": true,
+			"style": true,
+			"width": true
+		},
 		"__experimentalSelector": ".wp-block-table > table"
 	},
 	"editorStyle": "wp-block-table-editor",

packages/block-library/src/table/edit.js

@@ -15,6 +15,7 @@ import {
 	AlignmentToolbar,
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
+	__experimentalUseBorderProps as useBorderProps,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import {
@@ -103,6 +104,7 @@ function TableEdit( {
 	const [ selectedCell, setSelectedCell ] = useState();
 
 	const colorProps = useColorProps( attributes );
+	const borderProps = useBorderProps( attributes );
 
 	/**
 	 * Updates the initial column count used for table creation.
@@ -477,10 +479,12 @@ function TableEdit( {
 			) }
 			{ ! isEmpty && (
 				<table
-					className={ classnames( colorProps.className, {
-						'has-fixed-layout': hasFixedLayout,
-					} ) }
-					style={ colorProps.style }
+					className={ classnames(
+						colorProps.className,
+						borderProps.className,
+						{ 'has-fixed-layout': hasFixedLayout }
+					) }
+					style={ { ...colorProps.style, ...borderProps.style } }
 				>
 					{ renderedSections }
 				</table>

packages/block-library/src/table/save.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import {
 	RichText,
 	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
 	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
 } from '@wordpress/block-editor';
 
@@ -21,8 +22,9 @@ export default function save( { attributes } ) {
 	}
 
 	const colorProps = getColorClassesAndStyles( attributes );
+	const borderProps = getBorderClassesAndStyles( attributes );
 
-	const classes = classnames( colorProps.className, {
+	const classes = classnames( colorProps.className, borderProps.className, {
 		'has-fixed-layout': hasFixedLayout,
 	} );
 
@@ -73,7 +75,7 @@ export default function save( { attributes } ) {
 		<figure { ...useBlockProps.save() }>
 			<table
 				className={ classes === '' ? undefined : classes }
-				style={ colorProps.style }
+				style={ { ...colorProps.style, ...borderProps.style } }
 			>
 				<Section type="head" rows={ head } />
 				<Section type="body" rows={ body } />

packages/block-library/src/table/style.scss

@@ -97,4 +97,36 @@
 
 		border-bottom: 1px solid $gray-100;
 	}
+
+	// Border Styles
+	//
+	// Allow any custom border color, style or width selections to be inherited
+	// from the table element that receives the border support props.
+
+	.has-border-color {
+		> *,
+		tr,
+		th,
+		td {
+			border-color: inherit;
+		}
+	}
+
+	table[style*="border-style"] {
+		> *,
+		tr,
+		th,
+		td {
+			border-style: inherit;
+		}
+	}
+
+	table[style*="border-width"] {
+		> *,
+		tr,
+		th,
+		td {
+			border-width: inherit;
+		}
+	}
 }