From 3d7bbe35fe67fbb19c78e1e5080818acf4184150 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 8 Sep 2021 16:13:47 +0300
Subject: [PATCH 1/2] Update justication control in `flex` layout

---
 packages/block-editor/src/hooks/layout.scss |  6 ++
 packages/block-editor/src/layouts/flex.js   | 91 ++++++++++++---------
 2 files changed, 59 insertions(+), 38 deletions(-)

diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss
index 3b06bc44478bad..4194880718208c 100644
--- a/packages/block-editor/src/hooks/layout.scss
+++ b/packages/block-editor/src/hooks/layout.scss
@@ -21,3 +21,9 @@
 .block-editor-hooks__layout-controls-helptext {
 	font-size: $helptext-font-size;
 }
+
+.block-editor-hooks__flex-layout-justification-controls {
+	legend {
+		margin-bottom: 8px;
+	}
+}
diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
index 2c1b9f69be4a56..471cdc99b99b05 100644
--- a/packages/block-editor/src/layouts/flex.js
+++ b/packages/block-editor/src/layouts/flex.js
@@ -1,11 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import {
-	__experimentalToggleGroupControl as ToggleGroupControl,
-	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
-} from '@wordpress/components';
+	justifyLeft,
+	justifyCenter,
+	justifyRight,
+	justifySpaceBetween,
+} from '@wordpress/icons';
+import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -87,12 +90,40 @@ export default {
 	},
 };
 
+const justificationOptions = [
+	{
+		value: 'left',
+		icon: justifyLeft,
+		label: __( 'Justify items left' ),
+	},
+	{
+		value: 'center',
+		icon: justifyCenter,
+		label: __( 'Justify items center' ),
+	},
+	{
+		value: 'right',
+		icon: justifyRight,
+		label: __( 'Justify items right' ),
+	},
+	{
+		value: 'space-between',
+		icon: justifySpaceBetween,
+		label: __( 'Space between items' ),
+	},
+];
 function FlexLayoutJustifyContentControl( {
 	layout,
 	onChange,
 	isToolbar = false,
 } ) {
 	const { justifyContent = 'left' } = layout;
+	const onJustificationChange = ( value ) => {
+		onChange( {
+			...layout,
+			justifyContent: value,
+		} );
+	};
 	if ( isToolbar ) {
 		return (
 			<JustifyContentControl
@@ -103,12 +134,7 @@ function FlexLayoutJustifyContentControl( {
 					'space-between',
 				] }
 				value={ justifyContent }
-				onChange={ ( value ) => {
-					onChange( {
-						...layout,
-						justifyContent: value,
-					} );
-				} }
+				onChange={ onJustificationChange }
 				popoverProps={ {
 					position: 'bottom right',
 					isAlternate: true,
@@ -116,34 +142,23 @@ function FlexLayoutJustifyContentControl( {
 			/>
 		);
 	}
+
 	return (
-		<ToggleGroupControl
-			label={ __( 'Justify content' ) }
-			value={ justifyContent }
-			onChange={ ( value ) => {
-				onChange( {
-					...layout,
-					justifyContent: value,
-				} );
-			} }
-			isBlock
-		>
-			<ToggleGroupControlOption
-				value="left"
-				label={ _x( 'Left', 'Justify content option' ) }
-			/>
-			<ToggleGroupControlOption
-				value="center"
-				label={ _x( 'Center', 'Justify content option' ) }
-			/>
-			<ToggleGroupControlOption
-				value="right"
-				label={ _x( 'Right', 'Justify content option' ) }
-			/>
-			<ToggleGroupControlOption
-				value="space-between"
-				label={ _x( 'Space between', 'Justify content option' ) }
-			/>
-		</ToggleGroupControl>
+		<fieldset className="block-editor-hooks__flex-layout-justification-controls">
+			<legend>{ __( 'Justification' ) }</legend>
+			<div>
+				{ justificationOptions.map( ( { value, icon, label } ) => {
+					return (
+						<Button
+							key={ value }
+							label={ label }
+							icon={ icon }
+							isPressed={ justifyContent === value }
+							onClick={ () => onJustificationChange( value ) }
+						/>
+					);
+				} ) }
+			</div>
+		</fieldset>
 	);
 }

From 6f869083c92a0f94fb8ccd5a312f4464cc098ba0 Mon Sep 17 00:00:00 2001
From: ntsekouras <ntsekouras@outlook.com>
Date: Wed, 8 Sep 2021 17:03:52 +0300
Subject: [PATCH 2/2] use var value

---
 packages/block-editor/src/hooks/layout.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/hooks/layout.scss b/packages/block-editor/src/hooks/layout.scss
index 4194880718208c..9d154045c5a282 100644
--- a/packages/block-editor/src/hooks/layout.scss
+++ b/packages/block-editor/src/hooks/layout.scss
@@ -24,6 +24,6 @@
 
 .block-editor-hooks__flex-layout-justification-controls {
 	legend {
-		margin-bottom: 8px;
+		margin-bottom: $grid-unit-10;
 	}
 }