Width and height controls not working yet

WordPress · Aug 11, 2023 · d480a06 · d480a06
1 parent af6c273
commit d480a06
Show file tree

Hide file tree

Showing 4 changed files with 206 additions and 72 deletions.
diff --git a/packages/block-editor/src/components/child-layout-control/index.js b/packages/block-editor/src/components/child-layout-control/index.js
@@ -2,27 +2,14 @@
  * WordPress dependencies
  */
 import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUnitControl as UnitControl,
+	CustomSelectControl,
+	FlexBlock,
+	__experimentalHStack as HStack,
 } 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.
  *
@@ -31,13 +18,23 @@ function helpText( selfStretch, parentLayout ) {
  * @param {Function} props.onChange     Function to update the child layout value.
  * @param {Object}   props.parentLayout The parent layout value.
  *
+ * @param {string}   props.align
  * @return {WPElement} child layout edit element.
  */
 export default function ChildLayoutControl( {
 	value: childLayout = {},
 	onChange,
 	parentLayout,
+	align,
 } ) {
+	const {
+		orientation = 'horizontal',
+		type: parentLayoutType,
+		default: { type: defaultParentLayoutType = 'default' } = {},
+	} = parentLayout ?? {};
+
+	const parentLayoutTypeToUse = parentLayoutType ?? defaultParentLayoutType;
+
 	const { selfStretch, flexSize } = childLayout;
 
 	useEffect( () => {
@@ -49,52 +46,187 @@ export default function ChildLayoutControl( {
 		}
 	}, [] );
 
+	const selectedWidth = (
+		_selfStretch,
+		_align,
+		_parentLayoutTypeToUse,
+		_orientation
+	) => {
+		if ( _parentLayoutTypeToUse === 'constrained' ) {
+			// Replace "full" with "fill" for full width alignments.
+			const alignmentValue = _align === 'full' ? 'fill' : _align;
+			return alignmentValue || 'content';
+		} else if (
+			_parentLayoutTypeToUse === 'flex' &&
+			_orientation === 'vertical'
+		) {
+			return 'fit';
+		} else if (
+			_parentLayoutTypeToUse === 'flex' &&
+			_orientation === 'horizontal'
+		) {
+			return _selfStretch || 'fit';
+		}
+		return 'fill';
+	};
+
+	const selectedHeight = (
+		_selfStretch,
+		_parentLayoutTypeToUse,
+		_orientation
+	) => {
+		if (
+			_parentLayoutTypeToUse === 'flex' &&
+			_orientation === 'vertical'
+		) {
+			return _selfStretch || 'fit';
+		}
+		return 'fit';
+	};
+
+	const widthOptions = [
+		{
+			key: 'fill',
+			value: 'fill',
+			name: __( 'Fill' ),
+		},
+	];
+
+	if ( parentLayoutTypeToUse === 'constrained' ) {
+		widthOptions.push(
+			{
+				key: 'content',
+				value: 'content',
+				name: __( 'Content' ),
+			},
+			{
+				key: 'wide',
+				value: 'wide',
+				name: __( 'Wide' ),
+			}
+		);
+	} else if (
+		parentLayoutTypeToUse === 'flex' &&
+		orientation === 'vertical'
+	) {
+		widthOptions.pop().push( {
+			key: 'fit',
+			value: 'fit',
+			name: __( 'Fit' ),
+		} );
+	} else if (
+		parentLayoutTypeToUse === 'flex' &&
+		orientation === 'horizontal'
+	) {
+		widthOptions.push(
+			{
+				key: 'fit',
+				value: 'fit',
+				name: __( 'Fit' ),
+			},
+			{
+				key: 'fixed',
+				value: 'fixed',
+				name: __( 'Custom' ),
+			}
+		);
+	}
+
+	const heightOptions = [
+		{
+			key: 'fit',
+			value: 'fit',
+			name: __( 'Fit' ),
+		},
+	];
+
+	if ( parentLayoutTypeToUse === 'flex' && orientation === 'vertical' ) {
+		heightOptions.push(
+			{
+				key: 'fixed',
+				value: 'fixed',
+				name: __( 'Custom' ),
+			},
+			{
+				key: 'fill',
+				value: 'fill',
+				name: __( 'Fill' ),
+			}
+		);
+	} else if (
+		parentLayoutTypeToUse === 'flex' &&
+		orientation === 'horizontal'
+	) {
+		heightOptions.push( {
+			key: 'fill',
+			value: 'fill',
+			name: __( 'Fill' ),
+		} );
+	}
+
+	const onChangeWidth = () => {};
+
+	const onChangeHeight = () => {};
+
 	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 }
-				/>
-			) }
+			<HStack style={ { alignItems: 'flex-end' } }>
+				<FlexBlock>
+					<CustomSelectControl
+						label={ __( 'Width' ) }
+						value={ selectedWidth(
+							selfStretch,
+							align,
+							parentLayoutTypeToUse,
+							orientation
+						) }
+						options={ widthOptions }
+						onChange={ onChangeWidth }
+						__nextUnconstrainedWidth
+						__next36pxDefaultSize
+					/>
+				</FlexBlock>
+				<FlexBlock>
+					<UnitControl
+						size={ '__unstable-large' }
+						onChange={ ( value ) => {
+							onChange( {
+								...childLayout,
+								flexSize: value,
+							} );
+						} }
+						value={ flexSize }
+					/>
+				</FlexBlock>
+			</HStack>
+			<HStack style={ { alignItems: 'flex-end' } }>
+				<FlexBlock>
+					<CustomSelectControl
+						label={ __( 'Height' ) }
+						value={ selectedHeight(
+							selfStretch,
+							parentLayoutTypeToUse,
+							orientation
+						) }
+						options={ heightOptions }
+						onChange={ onChangeHeight }
+						__nextUnconstrainedWidth
+						__next36pxDefaultSize
+					/>
+				</FlexBlock>
+				<FlexBlock>
+					<UnitControl
+						size={ '__unstable-large' }
+						onChange={ ( value ) => {
+							onChange( {
+								...childLayout,
+								flexSize: value,
+							} );
+						} }
+						value={ flexSize }
+					/>
+				</FlexBlock>
+			</HStack>
 		</>
 	);
 }

diff --git a/packages/block-editor/src/components/global-styles/dimensions-panel.js b/packages/block-editor/src/components/global-styles/dimensions-panel.js
@@ -78,17 +78,17 @@ function useHasMinHeight( settings ) {
 }
 
 function useHasChildLayout( settings ) {
-	const {
-		type: parentLayoutType = 'default',
-		default: { type: defaultParentLayoutType = 'default' } = {},
-		allowSizingOnChildren = false,
-	} = settings?.parentLayout ?? {};
+	// const {
+	// 	type: parentLayoutType = 'default',
+	// 	default: { type: defaultParentLayoutType = 'default' } = {},
+	// 	allowSizingOnChildren = false,
+	// } = settings?.parentLayout ?? {};
 
-	const support =
-		( defaultParentLayoutType === 'flex' || parentLayoutType === 'flex' ) &&
-		allowSizingOnChildren;
+	// const support =
+	// 	( defaultParentLayoutType === 'flex' || parentLayoutType === 'flex' ) &&
+	// 	allowSizingOnChildren;
 
-	return !! settings?.layout && support;
+	return !! settings?.layout;
 }
 
 function useHasSpacingPresets( settings ) {
@@ -203,6 +203,7 @@ export default function DimensionsPanel( {
 	panelId,
 	defaultControls = DEFAULT_CONTROLS,
 	onVisualize = () => {},
+	align = null,
 	// Special case because the layout controls are not part of the dimensions panel
 	// in global styles but not in block inspector.
 	includeLayoutControls = false,
@@ -633,6 +634,7 @@ export default function DimensionsPanel( {
 						value={ childLayout }
 						onChange={ setChildLayout }
 						parentLayout={ settings?.parentLayout }
+						align={ align }
 					/>
 				</VStack>
 			) }

diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
@@ -110,6 +110,7 @@ export function DimensionsPanel( props ) {
 				onChange={ onChange }
 				defaultControls={ defaultControls }
 				onVisualize={ setVisualizedProperty }
+				align={ attributes?.align }
 			/>
 			{ !! settings?.spacing?.padding && (
 				<PaddingVisualizer

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -718,13 +718,12 @@ export const withChildLayoutStyles = createHigherOrderComponent(
 		const { attributes } = props;
 		const { style: { layout = {} } = {} } = attributes;
 		const { selfStretch, flexSize } = layout;
-		const hasChildLayout = selfStretch || flexSize;
+		// const hasChildLayout = selfStretch || flexSize;
 		const disableLayoutStyles = useSelect( ( select ) => {
 			const { getSettings } = select( blockEditorStore );
 			return !! getSettings().disableLayoutStyles;
 		} );
-		const shouldRenderChildLayoutStyles =
-			hasChildLayout && ! disableLayoutStyles;
+		const shouldRenderChildLayoutStyles = ! disableLayoutStyles;
 
 		const element = useContext( BlockList.__unstableElementContext );
 		const id = useInstanceId( BlockListBlock );