[Block Editor]: Add flex-wrap control to flex layout (#36003)

* [Block Editor]: Add `flex-wrap` control to `flex` layout * change to ToggleControl
WordPress · Nov 1, 2021 · f58c4f8 · f58c4f8
1 parent d391388
commit f58c4f8
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 8 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -76,14 +76,19 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			'space-between' => 'space-between',
 		);
 
+		$flex_wrap_options = array( 'wrap', 'nowrap' );
+		$flex_wrap         = ! empty( $layout['flexWrap'] ) && in_array( $layout['flexWrap'], $flex_wrap_options, true ) ?
+			$layout['flexWrap'] :
+			'wrap';
+
 		$style  = "$selector {";
 		$style .= 'display: flex;';
 		if ( $has_block_gap_support ) {
 			$style .= 'gap: var( --wp--style--block-gap, 0.5em );';
 		} 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
@@ -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
@@ -8,7 +8,7 @@ import {
 	justifyRight,
 	justifySpaceBetween,
 } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
+import { Button, ToggleControl } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -24,6 +24,8 @@ const justifyContentMap = {
 	'space-between': 'space-between',
 };
 
+const flexWrapOptions = [ 'wrap', 'nowrap' ];
+
 export default {
 	name: 'flex',
 	label: __( 'Flex' ),
@@ -32,10 +34,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 +65,11 @@ 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 = flexWrapOptions.includes( layout.flexWrap )
+			? layout.flexWrap
+			: 'wrap';
 		return (
 			<style>{ `
 				${ appendSelectors( selector ) } {
@@ -70,7 +79,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 +171,19 @@ function FlexLayoutJustifyContentControl( {
 		</fieldset>
 	);
 }
+
+function FlexWrapControl( { layout, onChange } ) {
+	const { flexWrap = 'wrap' } = layout;
+	return (
+		<ToggleControl
+			label={ __( 'Allow to wrap to multiple lines' ) }
+			onChange={ ( value ) => {
+				onChange( {
+					...layout,
+					flexWrap: value ? 'wrap' : 'nowrap',
+				} );
+			} }
+			checked={ flexWrap === 'wrap' }
+		/>
+	);
+}