@wordpress/block-editor 7.0.4 → 8.0.3

package/src/layouts/flex.js

@@ -7,8 +7,10 @@ import {
 	justifyCenter,
 	justifyRight,
 	justifySpaceBetween,
+	arrowRight,
+	arrowDown,
 } from '@wordpress/icons';
-import { Button } from '@wordpress/components';
+import { Button, ToggleControl, Flex, FlexItem } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -17,6 +19,7 @@ import { appendSelectors } from './utils';
 import useSetting from '../components/use-setting';
 import { BlockControls, JustifyContentControl } from '../components';
 
+// Used with the default, horizontal flex orientation.
 const justifyContentMap = {
 	left: 'flex-start',
 	right: 'flex-end',
@@ -24,6 +27,15 @@ const justifyContentMap = {
 	'space-between': 'space-between',
 };
 
+// Used with the vertical (column) flex orientation.
+const alignItemsMap = {
+	left: 'flex-start',
+	right: 'flex-end',
+	center: 'center',
+};
+
+const flexWrapOptions = [ 'wrap', 'nowrap' ];
+
 export default {
 	name: 'flex',
 	label: __( 'Flex' ),
@@ -31,11 +43,27 @@ export default {
 		layout = {},
 		onChange,
 	} ) {
+		const { allowOrientation = true } = layout;
 		return (
-			<FlexLayoutJustifyContentControl
-				layout={ layout }
-				onChange={ onChange }
-			/>
+			<>
+				<Flex>
+					<FlexItem>
+						<FlexLayoutJustifyContentControl
+							layout={ layout }
+							onChange={ onChange }
+						/>
+					</FlexItem>
+					<FlexItem>
+						{ allowOrientation && (
+							<OrientationControl
+								layout={ layout }
+								onChange={ onChange }
+							/>
+						) }
+					</FlexItem>
+				</Flex>
+				<FlexWrapControl layout={ layout } onChange={ onChange } />
+			</>
 		);
 	},
 	toolBarControls: function FlexLayoutToolbarControls( {
@@ -57,10 +85,48 @@ export default {
 		);
 	},
 	save: function FlexLayoutStyle( { selector, layout } ) {
+		const {
+			orientation = 'horizontal',
+			setCascadingProperties = false,
+		} = layout;
 		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';
+		let rowOrientation = `
+		flex-direction: row;
+		align-items: center;
+		justify-content: ${ justifyContent };
+		`;
+		if ( setCascadingProperties ) {
+			// --layout-justification-setting allows children to inherit the value
+			// regardless or row or column direction.
+			rowOrientation += `
+			--layout-justification-setting: ${ justifyContent };
+			--layout-direction: row;
+			--layout-wrap: ${ flexWrap };
+			--layout-justify: ${ justifyContent };
+			--layout-align: center;
+			`;
+		}
+		const alignItems =
+			alignItemsMap[ layout.justifyContent ] || alignItemsMap.left;
+		let columnOrientation = `
+		flex-direction: column;
+		align-items: ${ alignItems };
+		`;
+		if ( setCascadingProperties ) {
+			columnOrientation += `
+			--layout-justification-setting: ${ alignItems };
+			--layout-direction: column;
+			--layout-justify: initial;
+			--layout-align: ${ alignItems };
+			`;
+		}
 		return (
 			<style>{ `
 				${ appendSelectors( selector ) } {
@@ -70,10 +136,8 @@ export default {
 							? 'var( --wp--style--block-gap, 0.5em )'
 							: '0.5em'
 					};
-					flex-wrap: wrap;
-					align-items: center;
-					flex-direction: row;
-					justify-content: ${ justifyContent };
+					flex-wrap: ${ flexWrap };
+					${ orientation === 'horizontal' ? rowOrientation : columnOrientation }
 				}
 
 				${ appendSelectors( selector, '> *' ) } {
@@ -82,57 +146,35 @@ export default {
 			` }</style>
 		);
 	},
-	getOrientation() {
-		return 'horizontal';
+	getOrientation( layout ) {
+		const { orientation = 'horizontal' } = layout;
+		return orientation;
 	},
 	getAlignments() {
 		return [];
 	},
 };
 
-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 { justifyContent = 'left', orientation = 'horizontal' } = layout;
 	const onJustificationChange = ( value ) => {
 		onChange( {
 			...layout,
 			justifyContent: value,
 		} );
 	};
+	const allowedControls = [ 'left', 'center', 'right' ];
+	if ( orientation === 'horizontal' ) {
+		allowedControls.push( 'space-between' );
+	}
 	if ( isToolbar ) {
 		return (
 			<JustifyContentControl
-				allowedControls={ [
-					'left',
-					'center',
-					'right',
-					'space-between',
-				] }
+				allowedControls={ allowedControls }
 				value={ justifyContent }
 				onChange={ onJustificationChange }
 				popoverProps={ {
@@ -143,6 +185,31 @@ function FlexLayoutJustifyContentControl( {
 		);
 	}
 
+	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' ),
+		},
+	];
+	if ( orientation === 'horizontal' ) {
+		justificationOptions.push( {
+			value: 'space-between',
+			icon: justifySpaceBetween,
+			label: __( 'Space between items' ),
+		} );
+	}
+
 	return (
 		<fieldset className="block-editor-hooks__flex-layout-justification-controls">
 			<legend>{ __( 'Justification' ) }</legend>
@@ -162,3 +229,50 @@ 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' }
+		/>
+	);
+}
+
+function OrientationControl( { layout, onChange } ) {
+	const { orientation = 'horizontal' } = layout;
+	return (
+		<fieldset className="block-editor-hooks__flex-layout-orientation-controls">
+			<legend>{ __( 'Orientation' ) }</legend>
+			<Button
+				label={ 'horizontal' }
+				icon={ arrowRight }
+				isPressed={ orientation === 'horizontal' }
+				onClick={ () =>
+					onChange( {
+						...layout,
+						orientation: 'horizontal',
+					} )
+				}
+			/>
+			<Button
+				label={ 'vertical' }
+				icon={ arrowDown }
+				isPressed={ orientation === 'vertical' }
+				onClick={ () =>
+					onChange( {
+						...layout,
+						orientation: 'vertical',
+					} )
+				}
+			/>
+		</fieldset>
+	);
+}