Main

src/FlexibleTable/FlexibleTable.jsx

 import {__} from '@wordpress/i18n';
-import {
-	RichText,
-	InspectorControls,
-	useBlockProps,
-} from '@wordpress/block-editor';
-import {
-	PanelBody,
-	ToggleControl,
-} from '@wordpress/components';
+import {RichText, InspectorControls, useBlockProps,} from '@wordpress/block-editor';
+import {PanelBody, ToggleControl} from '@wordpress/components';
 import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";
-import ColorSelector from "../ColorSelector/ColorSelector";
-import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
-import AlignButtons from "../AlignButtons/AlignButtons";
-import FontStyles from "../FontStyles/FontStyles";
-import QuatroInput from "../QuatroInput/QuatroInput";
-import BlockPlaceholders from "../BlockPlaceholders/BlockPlaceholders";
+import {DuoInput, NumberWithUnit, ColorSelector, FontStyles, AlignButtons, BlockPlaceholders} from "../../index";
 
 export default function FlexibleTable({attributes, setAttributes, placeholders, footer, additionalOptions }) {
 	const {
@@ -30,16 +18,22 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 		headerTextDecoration,
 		headerFontSize,
 
+		tableBorderColor,
+		tableBorderWidth,
+
+		bodyBorderColumnColor,
+		bodyBorderColumnWidthLeft,
+		bodyBorderColumnWidthRight,
+		bodyBorderRowColor,
+		bodyBorderRowWidthTop,
+		bodyBorderRowWidthBottom,
+
+		headerBorderColumnColor,
+		headerBorderColumnWidthLeft,
+		headerBorderColumnWidthRight,
+		headerBorderRowColor,
 		headerBorderRowWidthTop,
-		headerBorderRowWidthLeft,
-		headerBorderRowWidthRight,
 		headerBorderRowWidthBottom,
-		headerBorderRowColor,
-		headerBorderCellWidthTop,
-		headerBorderCellWidthLeft,
-		headerBorderCellWidthRight,
-		headerBorderCellWidthBottom,
-		headerBorderCellColor,
 
 		bodyBackground,
 		multipleBodyBackground,
@@ -51,18 +45,6 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 		bodyFontStyle,
 		bodyTextDecoration,
 		bodyFontSize,
-
-		bodyBorderRowWidthTop,
-		bodyBorderRowWidthLeft,
-		bodyBorderRowWidthRight,
-		bodyBorderRowWidthBottom,
-		bodyBorderRowColor,
-		bodyBorderCellWidthTop,
-		bodyBorderCellWidthLeft,
-		bodyBorderCellWidthRight,
-		bodyBorderCellWidthBottom,
-		bodyBorderCellColor,
-
 	} = attributes;
 
 	const blockProps = useBlockProps();
@@ -194,6 +176,21 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 							}
 						}
 					/>
+
+					<ColorSelector
+						label={__('Table border color', 'flexible-invoices-core')}
+						value={tableBorderColor}
+						enableAlpha={false}
+						returnFormat={'hex'}
+						onChange={(value) => setAttributes({tableBorderColor: value})}
+					/>
+
+					<NumberWithUnit
+						label={__('Table border width', 'flexible-invoices-core')}
+						value={tableBorderWidth}
+						onChange={(value) => setAttributes({tableBorderWidth: value})}
+					/>
+
 					<ColorSelector
 						label={__('Border row color', 'flexible-invoices-core')}
 						value={headerBorderRowColor}
@@ -201,13 +198,12 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						returnFormat={'hex'}
 						onChange={(value) => setAttributes({headerBorderRowColor: value})}
 					/>
-					<QuatroInput
+
+					<DuoInput
 						label={__("Border row width", 'flexible-invoices-core')}
 						values={
 							{
 								headerBorderRowWidthTop,
-								headerBorderRowWidthLeft,
-								headerBorderRowWidthRight,
 								headerBorderRowWidthBottom,
 							}
 						}
@@ -215,21 +211,20 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 					/>
 					<ColorSelector
 						label={__('Border cell color', 'flexible-invoices-core')}
-						value={headerBorderCellColor}
+						value={headerBorderColumnColor}
 						enableAlpha={false}
 						returnFormat={'hex'}
-						onChange={(value) => setAttributes({headerBorderCellColor: value})}
+						onChange={(value) => setAttributes({headerBorderColumnColor: value})}
 					/>
-					<QuatroInput
+					<DuoInput
 						label={__("Border cell width", 'flexible-invoices-core')}
 						values={
 							{
-								headerBorderCellWidthTop,
-								headerBorderCellWidthLeft,
-								headerBorderCellWidthRight,
-								headerBorderCellWidthBottom,
+								headerBorderColumnWidthLeft,
+								headerBorderColumnWidthRight,
 							}
 						}
+						layout={'row'}
 						onChange={handleMultipleAttributesChange}
 					/>
 
@@ -304,13 +299,11 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 						returnFormat={'hex'}
 						onChange={(value) => setAttributes({bodyBorderRowColor: value})}
 					/>
-					<QuatroInput
+					<DuoInput
 						label={__("Border row width", 'flexible-invoices-core')}
 						values={
 							{
 								bodyBorderRowWidthTop,
-								bodyBorderRowWidthLeft,
-								bodyBorderRowWidthRight,
 								bodyBorderRowWidthBottom,
 							}
 						}
@@ -318,21 +311,20 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 					/>
 					<ColorSelector
 						label={__('Border cell color', 'flexible-invoices-core')}
-						value={bodyBorderCellColor}
+						value={bodyBorderColumnColor}
 						enableAlpha={false}
 						returnFormat={'hex'}
-						onChange={(value) => setAttributes({bodyBorderCellColor: value})}
+						onChange={(value) => setAttributes({bodyBorderColumnColor: value})}
 					/>
-					<QuatroInput
+					<DuoInput
 						label={__("Border cell width", 'flexible-invoices-core')}
 						values={
 							{
-								bodyBorderCellWidthTop,
-								bodyBorderCellWidthLeft,
-								bodyBorderCellWidthRight,
-								bodyBorderCellWidthBottom,
+								bodyBorderColumnWidthRight,
+								bodyBorderColumnWidthLeft,
 							}
 						}
+						layout={'row'}
 						onChange={handleMultipleAttributesChange}
 					/>
 				</PanelBody>
@@ -343,14 +335,15 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 			</InspectorControls>
 			<div {...blockProps}>
 				<table className="fitb-item-table has-background" style={{
+					borderStyle: "solid",
+					borderColor: tableBorderColor,
+					borderWidth: tableBorderWidth,
 					borderCollapse: 'collapse'
 				}}>
 					<thead className={"fitb-item-table-header"} style={{
 						borderStyle: "solid",
 						borderColor: headerBorderRowColor,
 						borderTopWidth: headerBorderRowWidthTop,
-						borderLeftWidth: headerBorderRowWidthLeft,
-						borderRightWidth: headerBorderRowWidthRight,
 						borderBottomWidth: headerBorderRowWidthBottom,
 					}}>
 					<tr className={"fitb-item-table-header-row"} style={{
@@ -361,11 +354,9 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 								<th className={"fitb-item-table-header-cell"} key={index}
 									style={{
 										borderStyle: "solid",
-										borderColor: headerBorderCellColor,
-										borderTopWidth: headerBorderCellWidthTop,
-										borderLeftWidth: headerBorderCellWidthLeft,
-										borderRightWidth: headerBorderCellWidthRight,
-										borderBottomWidth: headerBorderCellWidthBottom,
+										borderColor: headerBorderColumnColor,
+										borderLeftWidth: headerBorderColumnWidthLeft,
+										borderRightWidth: headerBorderColumnWidthRight,
 									}}>
 									<RichText
 										tagName="div"
@@ -393,8 +384,6 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 							borderStyle: "solid",
 							borderColor: bodyBorderRowColor,
 							borderTopWidth: bodyBorderRowWidthTop,
-							borderLeftWidth: bodyBorderRowWidthLeft,
-							borderRightWidth: bodyBorderRowWidthRight,
 							borderBottomWidth: bodyBorderRowWidthBottom,
 						}}>
 							{rows.map((row, index) => (
@@ -402,11 +391,9 @@ export default function FlexibleTable({attributes, setAttributes, placeholders,
 									<td className={"fitb-item-table-cell"} key={index}
 										style={{
 											borderStyle: "solid",
-											borderColor: bodyBorderCellColor,
-											borderTopWidth: bodyBorderCellWidthTop,
-											borderLeftWidth: bodyBorderCellWidthLeft,
-											borderRightWidth: bodyBorderCellWidthRight,
-											borderBottomWidth: bodyBorderCellWidthBottom,
+											borderColor: bodyBorderColumnColor,
+											borderLeftWidth: bodyBorderColumnWidthLeft,
+											borderRightWidth: bodyBorderColumnWidthRight,
 										}}>
 										<RichText
 											tagName="div"