Add missing controls to flex layouts.

WordPress · Jan 13, 2023 · 4555b58 · 4555b58
1 parent 10f631b
commit 4555b58
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 10 deletions.
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/icons.js b/packages/block-editor/src/components/block-vertical-alignment-control/icons.js
@@ -20,3 +20,16 @@ export const alignTop = (
 		<Path d="M9 20h6V9H9v11zM4 4v1.5h16V4H4z" />
 	</SVG>
 );
+
+// Todo: Replace with the real icons.
+export const alignStretch = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z" />
+	</SVG>
+);
+
+export const spaceBetween = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M20 11h-5V4H9v7H4v1.5h5V20h6v-7.5h5z" />
+	</SVG>
+);
diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js
@@ -7,7 +7,13 @@ import { ToolbarGroup, ToolbarDropdownMenu } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import { alignTop, alignCenter, alignBottom } from './icons';
+import {
+	alignTop,
+	alignCenter,
+	alignBottom,
+	alignStretch,
+	spaceBetween,
+} from './icons';
 
 const BLOCK_ALIGNMENTS_CONTROLS = {
 	top: {
@@ -22,6 +28,14 @@ const BLOCK_ALIGNMENTS_CONTROLS = {
 		icon: alignBottom,
 		title: _x( 'Align bottom', 'Block vertical alignment setting' ),
 	},
+	stretch: {
+		icon: alignStretch,
+		title: _x( 'Stretch to fill', 'Block vertical alignment setting' ),
+	},
+	spaceBetween: {
+		icon: spaceBetween,
+		title: _x( 'Space between', 'Block vertical alignment setting' ),
+	},
 };
 
 const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ];

diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
@@ -44,12 +44,15 @@ const alignItemsMap = {
 	left: 'flex-start',
 	right: 'flex-end',
 	center: 'center',
+	stretch: 'stretch',
 };
 
 const verticalAlignmentMap = {
 	top: 'flex-start',
 	center: 'center',
 	bottom: 'flex-end',
+	stretch: 'stretch',
+	spaceBetween: 'space-between',
 };
 
 const flexWrapOptions = [ 'wrap', 'nowrap' ];
@@ -101,14 +104,13 @@ export default {
 					onChange={ onChange }
 					isToolbar
 				/>
-				{ allowVerticalAlignment &&
-					layout?.orientation !== 'vertical' && (
-						<FlexLayoutVerticalAlignmentControl
-							layout={ layout }
-							onChange={ onChange }
-							isToolbar
-						/>
-					) }
+				{ allowVerticalAlignment && (
+					<FlexLayoutVerticalAlignmentControl
+						layout={ layout }
+						onChange={ onChange }
+						isToolbar
+					/>
+				) }
 			</BlockControls>
 		);
 	},
@@ -153,6 +155,9 @@ export default {
 				rules.push( `justify-content: ${ justifyContent }` );
 			}
 		} else {
+			if ( verticalAlignment ) {
+				rules.push( `justify-content: ${ verticalAlignment }` );
+			}
 			rules.push( 'flex-direction: column' );
 			rules.push( `align-items: ${ alignItems }` );
 		}
@@ -188,7 +193,14 @@ function FlexLayoutVerticalAlignmentControl( {
 	onChange,
 	isToolbar = false,
 } ) {
-	const { verticalAlignment = verticalAlignmentMap.center } = layout;
+	const { orientation = 'horizontal' } = layout;
+
+	const defaultVerticalAlignment =
+		orientation === 'horizontal'
+			? verticalAlignmentMap.center
+			: verticalAlignmentMap.top;
+
+	const { verticalAlignment = defaultVerticalAlignment } = layout;
 
 	const onVerticalAlignmentChange = ( value ) => {
 		onChange( {
@@ -201,6 +213,11 @@ function FlexLayoutVerticalAlignmentControl( {
 			<BlockVerticalAlignmentControl
 				onChange={ onVerticalAlignmentChange }
 				value={ verticalAlignment }
+				controls={
+					orientation === 'horizontal'
+						? [ 'top', 'center', 'bottom', 'stretch' ]
+						: [ 'top', 'center', 'bottom', 'spaceBetween' ]
+				}
 			/>
 		);
 	}
@@ -255,6 +272,8 @@ function FlexLayoutJustifyContentControl( {
 	const allowedControls = [ 'left', 'center', 'right' ];
 	if ( orientation === 'horizontal' ) {
 		allowedControls.push( 'space-between' );
+	} else {
+		allowedControls.push( 'stretch' );
 	}
 	if ( isToolbar ) {
 		return (
@@ -293,6 +312,13 @@ function FlexLayoutJustifyContentControl( {
 			icon: justifySpaceBetween,
 			label: __( 'Space between items' ),
 		} );
+	} else {
+		// Todo: we also need an icon here.
+		justificationOptions.push( {
+			value: 'stretch',
+			icon: justifySpaceBetween,
+			label: __( 'Stretch items' ),
+		} );
 	}
 
 	return (