Add Layout controls to children of Flex layout blocks

lib/block-supports/layout.php

@@ -316,13 +316,61 @@ function gutenberg_get_classnames_from_last_tag( $html ) {
  * @return string                Filtered block content.
  */
 function gutenberg_render_layout_support_flag( $block_content, $block ) {
-	$block_type     = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
-	$support_layout = block_has_support( $block_type, array( '__experimentalLayout' ), false );
+	$block_type       = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+	$support_layout   = block_has_support( $block_type, array( '__experimentalLayout' ), false );
+	$has_child_layout = isset( $block['attrs']['style']['layout']['selfStretch'] );
 
-	if ( ! $support_layout ) {
+	if ( ! $support_layout
+	&& ! $has_child_layout ) {
 		return $block_content;
 	}
 
+	$outer_class_names = array();
+
+	if ( $has_child_layout && ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] || 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) ) {
+
+		$container_content_class = wp_unique_id( 'wp-container-content-' );
+
+		$child_layout_styles = array();
+
+		if ( 'fixed' === $block['attrs']['style']['layout']['selfStretch'] && isset( $block['attrs']['style']['layout']['flexSize'] ) ) {
+			$child_layout_styles[] = array(
+				'selector'     => ".$container_content_class",
+				'declarations' => array(
+					'flex-shrink' => '0',
+					'flex-basis'  => $block['attrs']['style']['layout']['flexSize'],
+					'box-sizing'  => 'border-box',
+				),
+			);
+		} elseif ( 'fill' === $block['attrs']['style']['layout']['selfStretch'] ) {
+			$child_layout_styles[] = array(
+				'selector'     => ".$container_content_class",
+				'declarations' => array(
+					'flex-grow' => '1',
+				),
+			);
+		}
+
+		gutenberg_style_engine_get_stylesheet_from_css_rules(
+			$child_layout_styles,
+			array(
+				'context'  => 'block-supports',
+				'prettify' => false,
+			)
+		);
+
+		$outer_class_names[] = $container_content_class;
+
+	}
+
+	// Return early if only child layout exists.
+	if ( ! $support_layout && ! empty( $outer_class_names ) ) {
+		$content = new WP_HTML_Tag_Processor( $block_content );
+		$content->next_tag();
+		$content->add_class( implode( ' ', $outer_class_names ) );
+		return $content;
+	}
+
 	$block_gap              = gutenberg_get_global_settings( array( 'spacing', 'blockGap' ) );
 	$global_layout_settings = gutenberg_get_global_settings( array( 'layout' ) );
 	$has_block_gap_support  = isset( $block_gap ) ? null !== $block_gap : false;
@@ -428,21 +476,36 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 		}
 	}
 
+	$content_with_outer_classnames = '';
+
+	if ( ! empty( $outer_class_names ) ) {
+		$content_with_outer_classnames = new WP_HTML_Tag_Processor( $block_content );
+		$content_with_outer_classnames->next_tag();
+		foreach ( $outer_class_names as $outer_class_name ) {
+			$content_with_outer_classnames->add_class( $outer_class_name );
+		}
+
+		$content_with_outer_classnames = (string) $content_with_outer_classnames;
+	}
+
 	/**
 	* The first chunk of innerContent contains the block markup up until the inner blocks start.
 	* We want to target the opening tag of the inner blocks wrapper, which is the last tag in that chunk.
 	*/
 	$inner_content_classnames = isset( $block['innerContent'][0] ) && 'string' === gettype( $block['innerContent'][0] ) ? gutenberg_get_classnames_from_last_tag( $block['innerContent'][0] ) : '';
 
-	$content = new WP_HTML_Tag_Processor( $block_content );
+	$content = $content_with_outer_classnames ? new WP_HTML_Tag_Processor( $content_with_outer_classnames ) : new WP_HTML_Tag_Processor( $block_content );
+
 	if ( $inner_content_classnames ) {
 		$content->next_tag( array( 'class_name' => $inner_content_classnames ) );
 		foreach ( $class_names as $class_name ) {
 			$content->add_class( $class_name );
 		}
 	} else {
 		$content->next_tag();
-		$content->add_class( implode( ' ', $class_names ) );
+		foreach ( $class_names as $class_name ) {
+			$content->add_class( $class_name );
+		}
 	}
 
 	return (string) $content;

packages/block-editor/src/components/block-list/block.js

@@ -40,7 +40,7 @@ import BlockCrashBoundary from './block-crash-boundary';
 import BlockHtml from './block-html';
 import { useBlockProps } from './use-block-props';
 import { store as blockEditorStore } from '../../store';
-
+import { useLayout } from './layout';
 export const BlockListBlockContext = createContext();
 
 /**
@@ -130,6 +130,8 @@ function BlockListBlock( {
 	const { removeBlock } = useDispatch( blockEditorStore );
 	const onRemove = useCallback( () => removeBlock( clientId ), [ clientId ] );
 
+	const parentLayout = useLayout();
+
 	// We wrap the BlockEdit component in a div that hides it when editing in
 	// HTML mode. This allows us to render all of the ancillary pieces
 	// (InspectorControls, etc.) which are inside `BlockEdit` but not
@@ -148,6 +150,7 @@ function BlockListBlock( {
 			isSelectionEnabled={ isSelectionEnabled }
 			toggleSelection={ toggleSelection }
 			__unstableLayoutClassNames={ layoutClassNames }
+			__unstableParentLayout={ parentLayout }
 		/>
 	);
 

packages/block-editor/src/hooks/child-layout.js

@@ -0,0 +1,168 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalUnitControl as UnitControl,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import useSetting from '../components/use-setting';
+
+function helpText( selfStretch ) {
+	switch ( selfStretch ) {
+		case 'fill':
+			return __( 'Stretch to fill available space.' );
+		case 'fixed':
+			return __( 'Specify a fixed width.' );
+		default:
+			return __( 'Fit contents.' );
+	}
+}
+
+/**
+ * Inspector control panel containing the child layout related configuration
+ *
+ * @param {Object} props                        Block props.
+ * @param {Object} props.attributes             Block attributes.
+ * @param {Object} props.setAttributes          Function to set block attributes.
+ * @param {Object} props.__unstableParentLayout
+ *
+ * @return {WPElement} child layout edit element.
+ */
+export function ChildLayoutEdit( {
+	attributes,
+	setAttributes,
+	__unstableParentLayout: parentLayout,
+} ) {
+	const { style = {} } = attributes;
+	const { layout: childLayout = {} } = style;
+	const { selfStretch, flexSize } = childLayout;
+
+	return (
+		<>
+			<ToggleGroupControl
+				label={ childLayoutOrientation( parentLayout ) }
+				value={ selfStretch || 'fit' }
+				help={ helpText( selfStretch ) }
+				onChange={ ( value ) => {
+					setAttributes( {
+						style: {
+							...style,
+							layout: {
+								...childLayout,
+								selfStretch: value,
+							},
+						},
+					} );
+				} }
+				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
+					style={ { height: 'auto' } }
+					onChange={ ( value ) => {
+						setAttributes( {
+							style: {
+								...style,
+								layout: {
+									...childLayout,
+									flexSize: value,
+								},
+							},
+						} );
+					} }
+					value={ flexSize }
+				/>
+			) }
+		</>
+	);
+}
+
+/**
+ * Determines if there is child layout support.
+ *
+ * @param {Object} props                        Block Props object.
+ * @param {Object} props.__unstableParentLayout Parent layout.
+ *
+ * @return {boolean}     Whether there is support.
+ */
+export function hasChildLayoutSupport( {
+	__unstableParentLayout: parentLayout,
+} ) {
+	const {
+		type: parentLayoutType = 'default',
+		allowSizingOnChildren = false,
+	} = parentLayout;
+	const support = parentLayoutType === 'flex' && allowSizingOnChildren;
+
+	return support;
+}
+
+/**
+ * Checks if there is a current value in the child layout attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}      Whether or not the block has a child layout value set.
+ */
+export function hasChildLayoutValue( props ) {
+	return props.attributes.style?.layout !== undefined;
+}
+
+/**
+ * Resets the child layout attribute. This can be used when disabling
+ * child layout controls for a block via a progressive discovery panel.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block attributes.
+ * @param {Object} props.setAttributes Function to set block attributes.
+ */
+export function resetChildLayout( { attributes = {}, setAttributes } ) {
+	const { style } = attributes;
+
+	setAttributes( {
+		style: {
+			...style,
+			layout: undefined,
+		},
+	} );
+}
+
+/**
+ * Custom hook that checks if child layout settings have been disabled.
+ *
+ * @param {Object} props Block props.
+ *
+ * @return {boolean}     Whether the child layout setting is disabled.
+ */
+export function useIsChildLayoutDisabled( props ) {
+	const isDisabled = ! useSetting( 'layout' );
+
+	return ! hasChildLayoutSupport( props ) || isDisabled;
+}
+
+export function childLayoutOrientation( parentLayout ) {
+	const { orientation = 'horizontal' } = parentLayout;
+
+	return orientation === 'horizontal' ? __( 'Width' ) : __( 'Height' );
+}

packages/block-editor/src/hooks/dimensions.js

@@ -6,7 +6,10 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
+import {
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
 import { Platform, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getBlockSupport } from '@wordpress/blocks';
@@ -46,6 +49,14 @@ import {
 	resetPadding,
 	useIsPaddingDisabled,
 } from './padding';
+import {
+	ChildLayoutEdit,
+	hasChildLayoutSupport,
+	hasChildLayoutValue,
+	resetChildLayout,
+	useIsChildLayoutDisabled,
+	childLayoutOrientation,
+} from './child-layout';
 import useSetting from '../components/use-setting';
 import { store as blockEditorStore } from '../store';
 
@@ -85,8 +96,9 @@ export function DimensionsPanel( props ) {
 	const isPaddingDisabled = useIsPaddingDisabled( props );
 	const isMarginDisabled = useIsMarginDisabled( props );
 	const isMinHeightDisabled = useIsMinHeightDisabled( props );
+	const isChildLayoutDisabled = useIsChildLayoutDisabled( props );
 	const isDisabled = useIsDimensionsDisabled( props );
-	const isSupported = hasDimensionsSupport( props.name );
+	const isSupported = hasDimensionsSupport( props );
 	const spacingSizes = useSetting( 'spacing.spacingSizes' );
 	const paddingMouseOver = useVisualizerMouseOver();
 	const marginMouseOver = useVisualizerMouseOver();
@@ -121,6 +133,8 @@ export function DimensionsPanel( props ) {
 		'tools-panel-item-spacing': spacingSizes && spacingSizes.length > 0,
 	} );
 
+	const { __unstableParentLayout: parentLayout } = props;
+
 	return (
 		<>
 			<InspectorControls __experimentalGroup="dimensions">
@@ -198,6 +212,23 @@ export function DimensionsPanel( props ) {
 						<MinHeightEdit { ...props } />
 					</ToolsPanelItem>
 				) }
+				{ ! isChildLayoutDisabled && (
+					<VStack
+						as={ ToolsPanelItem }
+						spacing={ 2 }
+						hasValue={ () => hasChildLayoutValue( props ) }
+						label={ childLayoutOrientation( parentLayout ) }
+						onDeselect={ () => resetChildLayout( props ) }
+						resetAllFilter={ createResetAllFilter(
+							'selfStretch',
+							'layout'
+						) }
+						isShownByDefault={ false }
+						panelId={ props.clientId }
+					>
+						<ChildLayoutEdit { ...props } />
+					</VStack>
+				) }
 			</InspectorControls>
 			{ ! isPaddingDisabled && (
 				<PaddingVisualizer
@@ -218,20 +249,23 @@ export function DimensionsPanel( props ) {
 /**
  * Determine whether there is dimensions related block support.
  *
- * @param {string} blockName Block name.
+ * @param {Object} props Block props.
  *
  * @return {boolean} Whether there is support.
  */
-export function hasDimensionsSupport( blockName ) {
+export function hasDimensionsSupport( props ) {
 	if ( Platform.OS !== 'web' ) {
 		return false;
 	}
 
+	const { name: blockName } = props;
+
 	return (
 		hasGapSupport( blockName ) ||
 		hasMinHeightSupport( blockName ) ||
 		hasPaddingSupport( blockName ) ||
-		hasMarginSupport( blockName )
+		hasMarginSupport( blockName ) ||
+		hasChildLayoutSupport( props )
 	);
 }