Accurately sync values ​​of UnitControl and ToggleGroupControl (#240)

Author: t-hamano

src/settings/table-cell-settings.tsx

@@ -22,6 +22,7 @@ import {
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 
 /**
@@ -67,6 +68,8 @@ import type {
 	BlockAttributes,
 } from '../BlockAttributes';
 
+const PERCENTAGE_WIDTHS = [ 25, 50, 75, 100 ];
+
 type Props = {
 	setAttributes: ( attrs: Partial< BlockAttributes > ) => void;
 	vTable: VTable;
@@ -99,6 +102,9 @@ export default function TableCellSettings( { setAttributes, vTable, selectedCell
 	}, [] );
 
 	const cellStylesObj = convertToObject( targetCell.styles );
+	const [ parsedWidthQuantity, parsedWidthUnit ] = parseQuantityAndUnitFromRawValue(
+		cellStylesObj?.width
+	);
 
 	const updateCellsState = ( state: {
 		styles?: any;
@@ -269,10 +275,16 @@ export default function TableCellSettings( { setAttributes, vTable, selectedCell
 				hideLabelFromVision
 				label={ __( 'Cell percentage width', 'flexible-table-block' ) }
 				isBlock
-				value={ cellStylesObj?.width }
+				value={
+					parsedWidthQuantity &&
+					PERCENTAGE_WIDTHS.includes( parsedWidthQuantity ) &&
+					parsedWidthUnit === '%'
+						? cellStylesObj?.width
+						: undefined
+				}
 				onChange={ ( value ) => onChangeWidth( value as Property.Width ) }
 			>
-				{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
+				{ PERCENTAGE_WIDTHS.map( ( perWidth ) => {
 					return (
 						<ToggleGroupControlOption
 							key={ perWidth }

src/settings/table-settings.tsx

@@ -21,6 +21,7 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
+	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 
 /**
@@ -70,6 +71,8 @@ import {
 import type { StickyValue, BlockAttributes } from '../BlockAttributes';
 import type { StoreOptions } from '../store';
 
+const PERCENTAGE_WIDTHS = [ 25, 50, 75, 100 ];
+
 type Props = {
 	attributes: BlockAttributes;
 	setAttributes: ( attrs: Partial< BlockAttributes > ) => void;
@@ -97,6 +100,16 @@ export default function TableSettings( {
 
 	const tableWidthUnits = useCustomUnits( { availableUnits: TABLE_WIDTH_UNITS } );
 
+	const [ parsedWidthQuantity, parsedWidthUnit ] = parseQuantityAndUnitFromRawValue(
+		tableStylesObj?.width
+	);
+	const [ parsedMaxWidthQuantity, parsedMaxWidthUnit ] = parseQuantityAndUnitFromRawValue(
+		tableStylesObj?.maxWidth
+	);
+	const [ parsedMinWidthQuantity, parsedMinWidthUnit ] = parseQuantityAndUnitFromRawValue(
+		tableStylesObj?.minWidth
+	);
+
 	const onChangeHasFixedLayout = () => {
 		setAttributes( { hasFixedLayout: ! hasFixedLayout } );
 	};
@@ -331,10 +344,17 @@ export default function TableSettings( {
 				hideLabelFromVision
 				label={ __( 'Table percentage width', 'flexible-table-block' ) }
 				isBlock
-				value={ tableStylesObj?.width }
+				value={
+					tableStylesObj?.width === 'auto' ||
+					( parsedWidthQuantity &&
+						PERCENTAGE_WIDTHS.includes( parsedWidthQuantity ) &&
+						parsedWidthUnit === '%' )
+						? tableStylesObj?.width
+						: undefined
+				}
 				onChange={ ( value ) => onChangeWidth( value as Property.Width ) }
 			>
-				{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
+				{ PERCENTAGE_WIDTHS.map( ( perWidth ) => {
 					return (
 						<ToggleGroupControlOption
 							key={ perWidth }
@@ -369,10 +389,17 @@ export default function TableSettings( {
 				hideLabelFromVision
 				label={ __( 'Table percentage max width', 'flexible-table-block' ) }
 				isBlock
-				value={ tableStylesObj?.maxWidth }
+				value={
+					tableStylesObj?.maxWidth === 'none' ||
+					( parsedMaxWidthQuantity &&
+						PERCENTAGE_WIDTHS.includes( parsedMaxWidthQuantity ) &&
+						parsedMaxWidthUnit === '%' )
+						? tableStylesObj?.maxWidth
+						: undefined
+				}
 				onChange={ ( value ) => onChangeMaxWidth( value as Property.MaxWidth ) }
 			>
-				{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
+				{ PERCENTAGE_WIDTHS.map( ( perWidth ) => {
 					return (
 						<ToggleGroupControlOption
 							key={ perWidth }
@@ -406,10 +433,16 @@ export default function TableSettings( {
 				hideLabelFromVision
 				label={ __( 'Table percentage min width', 'flexible-table-block' ) }
 				isBlock
-				value={ tableStylesObj?.minWidth }
+				value={
+					parsedMinWidthQuantity &&
+					PERCENTAGE_WIDTHS.includes( parsedMinWidthQuantity ) &&
+					parsedMinWidthUnit === '%'
+						? tableStylesObj?.minWidth
+						: undefined
+				}
 				onChange={ ( value ) => onChangeMinWidth( value as Property.MinWidth ) }
 			>
-				{ [ 25, 50, 75, 100 ].map( ( perWidth ) => {
+				{ PERCENTAGE_WIDTHS.map( ( perWidth ) => {
 					return (
 						<ToggleGroupControlOption
 							key={ perWidth }