From 60197535617ec1257cf6fb0736d9d3247e441f06 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 27 Oct 2021 17:47:54 +0300
Subject: [PATCH 1/2] [Block Editor]: Add `flex-wrap` control to `flex` layout

---
 lib/block-supports/layout.php               | 10 +++-
 packages/block-editor/src/hooks/layout.scss |  1 +
 packages/block-editor/src/layouts/flex.js   | 56 ++++++++++++++++++---
 3 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index 1af4a7f842c4d0..dbf0a862e08069 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -76,6 +76,14 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			'space-between' => 'space-between',
 		);
 
+		$flex_wrap_options = array(
+			'wrap'   => 'wrap',
+			'nowrap' => 'nowrap',
+		);
+		$flex_wrap         = ! empty( $layout['flexWrap'] ) && array_key_exists( $layout['flexWrap'], $flex_wrap_options ) ?
+			$flex_wrap_options[ $layout['flexWrap'] ] :
+			'wrap';
+
 		$style  = "$selector {";
 		$style .= 'display: flex;';
 		if ( $has_block_gap_support ) {
@@ -83,7 +91,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		} else {
 			$style .= 'gap: 0.5em;';
 		}
-		$style .= 'flex-wrap: wrap;';
+		$style .= "flex-wrap: $flex_wrap;";
 		$style .= 'align-items: center;';
 		/**
 		 * Add this style only if is not empty for backwards compatibility,
diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss
index 9d154045c5a282..653f9da7b9bda5 100644
--- a/packages/block-editor/src/hooks/layout.scss
+++ b/packages/block-editor/src/hooks/layout.scss
@@ -23,6 +23,7 @@
 }
 
 .block-editor-hooks__flex-layout-justification-controls {
+	margin-bottom: $grid-unit-15;
 	legend {
 		margin-bottom: $grid-unit-10;
 	}
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index fd8e446aa2ae00..d890ab04cf605a 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -8,7 +8,11 @@ import {
 	justifyRight,
 	justifySpaceBetween,
 } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
+import {
+	Button,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -24,6 +28,11 @@ const justifyContentMap = {
 	'space-between': 'space-between',
 };
 
+const flexWrapMap = {
+	wrap: 'wrap',
+	nowrap: 'nowrap',
+};
+
 export default {
 	name: 'flex',
 	label: __( 'Flex' ),
@@ -32,10 +41,13 @@ export default {
 		onChange,
 	} ) {
 		return (
-			<FlexLayoutJustifyContentControl
-				layout={ layout }
-				onChange={ onChange }
-			/>
+			<>
+				<FlexLayoutJustifyContentControl
+					layout={ layout }
+					onChange={ onChange }
+				/>
+				<FlexWrapControl layout={ layout } onChange={ onChange } />
+			</>
 		);
 	},
 	toolBarControls: function FlexLayoutToolbarControls( {
@@ -60,7 +72,9 @@ export default {
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
 		const justifyContent =
-			justifyContentMap[ layout.justifyContent ] || 'flex-start';
+			justifyContentMap[ layout.justifyContent ] ||
+			justifyContentMap.left;
+		const flexWrap = flexWrapMap[ layout.flexWrap ] || flexWrapMap.wrap;
 		return (
 			<style>{ `
 				${ appendSelectors( selector ) } {
@@ -70,7 +84,7 @@ export default {
 							? 'var( --wp--style--block-gap, 0.5em )'
 							: '0.5em'
 					};
-					flex-wrap: wrap;
+					flex-wrap: ${ flexWrap };
 					align-items: center;
 					flex-direction: row;
 					justify-content: ${ justifyContent };
@@ -162,3 +176,31 @@ function FlexLayoutJustifyContentControl( {
 		</fieldset>
 	);
 }
+
+function FlexWrapControl( { layout, onChange } ) {
+	const { flexWrap = flexWrapMap.wrap } = layout;
+	const helpTexts = {
+		wrap: __( 'Items wrap onto multiple lines.' ),
+		nowrap: __( 'Items are forced onto one line.' ),
+	};
+	return (
+		<ToggleGroupControl
+			label={ __( 'Flex wrap' ) }
+			value={ flexWrap }
+			help={ helpTexts[ flexWrap ] }
+			onChange={ ( value ) => {
+				onChange( {
+					...layout,
+					flexWrap: value,
+				} );
+			} }
+			isBlock
+		>
+			<ToggleGroupControlOption value="wrap" label={ __( 'Wrap' ) } />
+			<ToggleGroupControlOption
+				value="nowrap"
+				label={ __( 'No Wrap' ) }
+			/>
+		</ToggleGroupControl>
+	);
+}

From 8b7114646940f3e60510a78907308a0ea7042837 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Thu, 28 Oct 2021 10:42:10 +0300
Subject: [PATCH 2/2] change to ToggleControl

---
 lib/block-supports/layout.php             |  9 ++----
 packages/block-editor/src/layouts/flex.js | 39 +++++++----------------
 2 files changed, 14 insertions(+), 34 deletions(-)

diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
index dbf0a862e08069..2ea8871df102e4 100644
--- a/lib/block-supports/layout.php
+++ b/lib/block-supports/layout.php
@@ -76,12 +76,9 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			'space-between' => 'space-between',
 		);
 
-		$flex_wrap_options = array(
-			'wrap'   => 'wrap',
-			'nowrap' => 'nowrap',
-		);
-		$flex_wrap         = ! empty( $layout['flexWrap'] ) && array_key_exists( $layout['flexWrap'], $flex_wrap_options ) ?
-			$flex_wrap_options[ $layout['flexWrap'] ] :
+		$flex_wrap_options = array( 'wrap', 'nowrap' );
+		$flex_wrap         = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ?
+			$layout['flexWrap'] :
 			'wrap';
 
 		$style  = "$selector {";
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index d890ab04cf605a..03ed93d31a266e 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -8,11 +8,7 @@ import {
 	justifyRight,
 	justifySpaceBetween,
 } from '@wordpress/icons';
-import {
-	Button,
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components';
+import { Button, ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -28,10 +24,7 @@ const justifyContentMap = {
 	'space-between': 'space-between',
 };
 
-const flexWrapMap = {
-	wrap: 'wrap',
-	nowrap: 'nowrap',
-};
+const flexWrapOptions = [ 'wrap', 'nowrap' ];
 
 export default {
 	name: 'flex',
@@ -74,7 +67,9 @@ export default {
 		const justifyContent =
 			justifyContentMap[ layout.justifyContent ] ||
 			justifyContentMap.left;
-		const flexWrap = flexWrapMap[ layout.flexWrap ] || flexWrapMap.wrap;
+		const flexWrap = flexWrapOptions.includes( layout.flexWrap )
+			? layout.flexWrap
+			: 'wrap';
 		return (
 			<style>{ `
 				${ appendSelectors( selector ) } {
@@ -178,29 +173,17 @@ function FlexLayoutJustifyContentControl( {
 }
 
 function FlexWrapControl( { layout, onChange } ) {
-	const { flexWrap = flexWrapMap.wrap } = layout;
-	const helpTexts = {
-		wrap: __( 'Items wrap onto multiple lines.' ),
-		nowrap: __( 'Items are forced onto one line.' ),
-	};
+	const { flexWrap = 'wrap' } = layout;
 	return (
-		<ToggleGroupControl
-			label={ __( 'Flex wrap' ) }
-			value={ flexWrap }
-			help={ helpTexts[ flexWrap ] }
+		<ToggleControl
+			label={ __( 'Allow to wrap to multiple lines' ) }
 			onChange={ ( value ) => {
 				onChange( {
 					...layout,
-					flexWrap: value,
+					flexWrap: value ? 'wrap' : 'nowrap',
 				} );
 			} }
-			isBlock
-		>
-			<ToggleGroupControlOption value="wrap" label={ __( 'Wrap' ) } />
-			<ToggleGroupControlOption
-				value="nowrap"
-				label={ __( 'No Wrap' ) }
-			/>
-		</ToggleGroupControl>
+			checked={ flexWrap === 'wrap' }
+		/>
 	);
 }