Devel

src/FlexibleTable/FlexibleTable.jsx

@@ -210,7 +210,7 @@ export default function FlexibleTable({
 					/>
 
 					<DuoInput
-						label={__("Border row width", 'flexible-invoices-core')}
+						label={__("Row top/bottom border width", 'flexible-invoices-core')}
 						values={
 							{
 								headerBorderRowWidthTop,
@@ -227,7 +227,7 @@ export default function FlexibleTable({
 						onChange={(value) => setAttributes({headerBorderColumnColor: value})}
 					/>
 					<DuoInput
-						label={__("Border cell width", 'flexible-invoices-core')}
+						label={__("Column left/right border width", 'flexible-invoices-core')}
 						values={
 							{
 								headerBorderColumnWidthLeft,
@@ -254,7 +254,7 @@ export default function FlexibleTable({
 					/>
 
 					<ToggleControl
-						label={__('Duo color table', 'flexible-invoices-core')}
+						label={__('Alternating row colors', 'flexible-invoices-core')}
 						checked={multipleBodyBackground}
 						onChange={(newValue) => setAttributes({multipleBodyBackground: newValue})}
 					/>
@@ -303,20 +303,25 @@ export default function FlexibleTable({
 						}
 					/>
 					<ColorSelector
-						label={__('Border row color', 'flexible-invoices-core')}
+						label={__('Row top/bottom border width', 'flexible-invoices-core')}
 						value={bodyBorderRowColor}
 						enableAlpha={false}
 						returnFormat={'hex'}
 						onChange={(value) => setAttributes({bodyBorderRowColor: value})}
 					/>
 					<DuoInput
-						label={__("Border row width", 'flexible-invoices-core')}
+						label={__("Column left/right border width", 'flexible-invoices-core')}
 						values={
 							{
 								bodyBorderRowWidthTop,
 								bodyBorderRowWidthBottom,
 							}
 						}
+						units={ [
+						{ label: 'px', value: 'px' },
+						{ label: 'em', value: 'em' },
+						{ label: 'pt', value: 'pt' }
+						] }
 						onChange={handleMultipleAttributesChange}
 					/>
 					<ColorSelector
@@ -335,6 +340,11 @@ export default function FlexibleTable({
 							}
 						}
 						layout={'row'}
+						units={ [
+							{ label: 'px', value: 'px' },
+							{ label: 'em', value: 'em' },
+							{ label: 'pt', value: 'pt' }
+						] }
 						onChange={handleMultipleAttributesChange}
 					/>
 				</PanelBody>