Extract a DimensionsPanel component as a reusable component between G…

…lobal Styles and Block Inspector (#48070)

packages/block-editor/src/components/child-layout-control/index.js

@@ -0,0 +1,106 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+
+function helpText( selfStretch, parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	if ( selfStretch === 'fill' ) {
+		return __( 'Stretch to fill available space.' );
+	}
+	if ( selfStretch === 'fixed' && orientation === 'horizontal' ) {
+		return __( 'Specify a fixed width.' );
+	} else if ( selfStretch === 'fixed' ) {
+		return __( 'Specify a fixed height.' );
+	}
+	return __( 'Fit contents.' );
+}
+
+/**
+ * Form to edit the child layout value.
+ *
+ * @param {Object}   props              Props.
+ * @param {Object}   props.value        The child layout value.
+ * @param {Function} props.onChange     Function to update the child layout value.
+ * @param {Object}   props.parentLayout The parent layout value.
+ *
+ * @return {WPElement} child layout edit element.
+ */
+export default function ChildLayoutControl( {
+	value: childLayout = {},
+	onChange,
+	parentLayout,
+} ) {
+	const { selfStretch, flexSize } = childLayout;
+
+	useEffect( () => {
+		if ( selfStretch === 'fixed' && ! flexSize ) {
+			onChange( {
+				...childLayout,
+				selfStretch: 'fit',
+			} );
+		}
+	}, [] );
+
+	return (
+		<>
+			<ToggleGroupControl
+				__nextHasNoMarginBottom
+				size={ '__unstable-large' }
+				label={ childLayoutOrientation( parentLayout ) }
+				value={ selfStretch || 'fit' }
+				help={ helpText( selfStretch, parentLayout ) }
+				onChange={ ( value ) => {
+					const newFlexSize = value !== 'fixed' ? null : flexSize;
+					onChange( {
+						...childLayout,
+						selfStretch: value,
+						flexSize: newFlexSize,
+					} );
+				} }
+				isBlock={ true }
+			>
+				<ToggleGroupControlOption
+					key={ 'fit' }
+					value={ 'fit' }
+					label={ __( 'Fit' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'fill' }
+					value={ 'fill' }
+					label={ __( 'Fill' ) }
+				/>
+				<ToggleGroupControlOption
+					key={ 'fixed' }
+					value={ 'fixed' }
+					label={ __( 'Fixed' ) }
+				/>
+			</ToggleGroupControl>
+			{ selfStretch === 'fixed' && (
+				<UnitControl
+					size={ '__unstable-large' }
+					onChange={ ( value ) => {
+						onChange( {
+							...childLayout,
+							flexSize: value,
+						} );
+					} }
+					value={ flexSize }
+				/>
+			) }
+		</>
+	);
+}
+
+export function childLayoutOrientation( parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+}