Update justication control in flex layout (#34651)

* Update justication control in `flex` layout * use var value
WordPress · Sep 9, 2021 · 6731514 · 6731514
1 parent 30bac4d
commit 6731514
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 38 deletions.
diff --git 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: $grid-unit-10;
+	}
+}
diff --git 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,47 +134,31 @@ function FlexLayoutJustifyContentControl( {
 					'space-between',
 				] }
 				value={ justifyContent }
-				onChange={ ( value ) => {
-					onChange( {
-						...layout,
-						justifyContent: value,
-					} );
-				} }
+				onChange={ onJustificationChange }
 				popoverProps={ {
 					position: 'bottom right',
 					isAlternate: true,
 				} }
 			/>
 		);
 	}
+
 	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>
 	);
 }