Fix/flex controls bugs (#47533)

* Add stretch icon to toolbar justification controls.

* Check justification and alignment are correct for orientation

* Tweak Button styles so stretch control works.

* Revert button

packages/block-editor/src/components/justify-content-control/ui.js

@@ -7,6 +7,7 @@ import {
 	justifyCenter,
 	justifyRight,
 	justifySpaceBetween,
+	justifyStretch,
 } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
@@ -15,6 +16,7 @@ const icons = {
 	center: justifyCenter,
 	right: justifyRight,
 	'space-between': justifySpaceBetween,
+	stretch: justifyStretch,
 };
 
 function JustifyContentUI( {
@@ -66,6 +68,13 @@ function JustifyContentUI( {
 			isActive: 'space-between' === value,
 			onClick: () => handleClick( 'space-between' ),
 		},
+		{
+			name: 'stretch',
+			icon: justifyStretch,
+			title: __( 'Stretch items' ),
+			isActive: 'stretch' === value,
+			onClick: () => handleClick( 'stretch' ),
+		},
 	];
 
 	const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;

packages/block-editor/src/layouts/flex.js

@@ -314,7 +314,6 @@ function FlexLayoutJustifyContentControl( {
 			label: __( 'Space between items' ),
 		} );
 	} else {
-		// Todo: we also need an icon here.
 		justificationOptions.push( {
 			value: 'stretch',
 			icon: justifyStretch,
@@ -360,18 +359,42 @@ function FlexWrapControl( { layout, onChange } ) {
 }
 
 function OrientationControl( { layout, onChange } ) {
-	const { orientation = 'horizontal' } = layout;
+	const {
+		orientation = 'horizontal',
+		verticalAlignment,
+		justifyContent,
+	} = layout;
 	return (
 		<ToggleGroupControl
 			className="block-editor-hooks__flex-layout-orientation-controls"
 			label={ __( 'Orientation' ) }
 			value={ orientation }
-			onChange={ ( value ) =>
-				onChange( {
+			onChange={ ( value ) => {
+				// Make sure the vertical alignment and justification are compatible with the new orientation.
+				let newVerticalAlignment = verticalAlignment;
+				let newJustification = justifyContent;
+				if ( value === 'horizontal' ) {
+					if ( verticalAlignment === 'space-between' ) {
+						newVerticalAlignment = 'center';
+					}
+					if ( justifyContent === 'stretch' ) {
+						newJustification = 'left';
+					}
+				} else {
+					if ( verticalAlignment === 'stretch' ) {
+						newVerticalAlignment = 'top';
+					}
+					if ( justifyContent === 'space-between' ) {
+						newJustification = 'left';
+					}
+				}
+				return onChange( {
 					...layout,
 					orientation: value,
-				} )
-			}
+					verticalAlignment: newVerticalAlignment,
+					justifyContent: newJustification,
+				} );
+			} }
 		>
 			<ToggleGroupControlOptionIcon
 				icon={ arrowRight }