Add flex layout to Buttons block and new layout type.

WordPress · Nov 2, 2021 · edb0d3d · edb0d3d
1 parent 154b34a
commit edb0d3d
Show file tree

Hide file tree

Showing 8 changed files with 197 additions and 68 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -100,6 +100,33 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		}
 		$style .= '}';
 
+		$style .= "$selector > * { margin: 0; }";
+	} elseif ('column' === $layout_type ) {
+		$justify_content_options = array(
+			'left'          => 'flex-start',
+			'right'         => 'flex-end',
+			'center'        => 'center',
+		);
+
+		$style  = "$selector {";
+		$style .= 'display: flex;';
+		$style .= 'flex-direction: column;';
+		if ( $has_block_gap_support ) {
+			$style .= 'gap: var( --wp--style--block-gap, 0.5em );';
+		} else {
+			$style .= 'gap: 0.5em;';
+		}
+		$style .= 'flex-wrap: wrap;';
+		/**
+		 * Add this style only if is not empty for backwards compatibility,
+		 * since we intend to convert blocks that had flex layout implemented
+		 * by custom css.
+		 */
+		if ( ! empty( $layout['justifyContent'] ) && array_key_exists( $layout['justifyContent'], $justify_content_options ) ) {
+			$style .= "align-items: {$justify_content_options[ $layout['justifyContent'] ]};";
+		}
+		$style .= '}';
+
 		$style .= "$selector > * { margin: 0; }";
 	}
 

diff --git a/packages/block-editor/src/layouts/column.js b/packages/block-editor/src/layouts/column.js
@@ -0,0 +1,152 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { justifyLeft, justifyCenter, justifyRight } from '@wordpress/icons';
+import { Button } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { appendSelectors } from './utils';
+import useSetting from '../components/use-setting';
+import { BlockControls, JustifyContentControl } from '../components';
+
+const justifyContentMap = {
+	left: 'flex-start',
+	right: 'flex-end',
+	center: 'center',
+};
+
+export default {
+	name: 'column',
+	label: __( 'Column' ),
+	inspectorControls: function FlexLayoutInspectorControls( {
+		layout = {},
+		onChange,
+	} ) {
+		return (
+			<FlexLayoutJustifyContentControl
+				layout={ layout }
+				onChange={ onChange }
+			/>
+		);
+	},
+	toolBarControls: function FlexLayoutToolbarControls( {
+		layout = {},
+		onChange,
+		layoutBlockSupport,
+	} ) {
+		if ( layoutBlockSupport?.allowSwitching ) {
+			return null;
+		}
+		return (
+			<BlockControls group="block" __experimentalShareWithChildBlocks>
+				<FlexLayoutJustifyContentControl
+					layout={ layout }
+					onChange={ onChange }
+					isToolbar
+				/>
+			</BlockControls>
+		);
+	},
+	save: function FlexLayoutStyle( { selector, layout } ) {
+		const blockGapSupport = useSetting( 'spacing.blockGap' );
+		const hasBlockGapStylesSupport = blockGapSupport !== null;
+		const alignItems =
+			justifyContentMap[ layout.justifyContent ] || 'flex-start';
+		return (
+			<style>{ `
+				 ${ appendSelectors( selector ) } {
+					 display: flex;
+					 flex-direction: column;
+					 gap: ${
+							hasBlockGapStylesSupport
+								? 'var( --wp--style--block-gap, 0.5em )'
+								: '0.5em'
+						};
+					 flex-wrap: wrap;
+					 align-items: ${ alignItems };
+				 }
+ 
+				 ${ appendSelectors( selector, '> *' ) } {
+					 margin: 0;
+				 }
+			 ` }</style>
+		);
+	},
+	getOrientation() {
+		return 'vertical';
+	},
+	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' ),
+	},
+];
+function FlexLayoutJustifyContentControl( {
+	layout,
+	onChange,
+	isToolbar = false,
+} ) {
+	const { justifyContent = 'left' } = layout;
+	const onJustificationChange = ( value ) => {
+		onChange( {
+			...layout,
+			justifyContent: value,
+		} );
+	};
+	if ( isToolbar ) {
+		return (
+			<JustifyContentControl
+				allowedControls={ [
+					'left',
+					'center',
+					'right',
+					'space-between',
+				] }
+				value={ justifyContent }
+				onChange={ onJustificationChange }
+				popoverProps={ {
+					position: 'bottom right',
+					isAlternate: true,
+				} }
+			/>
+		);
+	}
+
+	return (
+		<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>
+	);
+}
diff --git a/packages/block-editor/src/layouts/index.js b/packages/block-editor/src/layouts/index.js
@@ -3,8 +3,9 @@
  */
 import flex from './flex';
 import flow from './flow';
+import column from './column';
 
-const layoutTypes = [ flow, flex ];
+const layoutTypes = [ flow, flex, column ];
 
 /**
  * Retrieves a layout type by name.

diff --git a/packages/block-library/src/buttons/block.json b/packages/block-library/src/buttons/block.json
@@ -6,15 +6,6 @@
 	"description": "Prompt visitors to take action with a group of button-style links.",
 	"keywords": [ "link" ],
 	"textdomain": "default",
-	"attributes": {
-		"contentJustification": {
-			"type": "string"
-		},
-		"orientation": {
-			"type": "string",
-			"default": "horizontal"
-		}
-	},
 	"supports": {
 		"anchor": true,
 		"align": [ "wide", "full" ],
@@ -25,6 +16,13 @@
 			"__experimentalDefaultControls": {
 				"blockGap": true
 			}
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": {
+				"type": "flex"
+			}
 		}
 	},
 	"editorStyle": "wp-block-buttons-editor",

diff --git a/packages/block-library/src/buttons/edit.js b/packages/block-library/src/buttons/edit.js
@@ -1,16 +1,10 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import {
 	BlockControls,
 	useBlockProps,
 	useInnerBlocksProps,
-	JustifyContentControl,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -21,28 +15,9 @@ import { useSelect } from '@wordpress/data';
 import { name as buttonBlockName } from '../button';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
-const LAYOUT = {
-	type: 'default',
-	alignments: [],
-};
-const VERTICAL_JUSTIFY_CONTROLS = [ 'left', 'center', 'right' ];
-const HORIZONTAL_JUSTIFY_CONTROLS = [
-	'left',
-	'center',
-	'right',
-	'space-between',
-];
 
-function ButtonsEdit( {
-	attributes: { contentJustification, orientation },
-	setAttributes,
-} ) {
-	const blockProps = useBlockProps( {
-		className: classnames( {
-			[ `is-content-justification-${ contentJustification }` ]: contentJustification,
-			'is-vertical': orientation === 'vertical',
-		} ),
-	} );
+function ButtonsEdit( { attributes: { layout = {} } } ) {
+	const blockProps = useBlockProps();
 	const preferredStyle = useSelect( ( select ) => {
 		const preferredStyleVariations = select(
 			blockEditorStore
@@ -58,31 +33,16 @@ function ButtonsEdit( {
 				{ className: preferredStyle && `is-style-${ preferredStyle }` },
 			],
 		],
-		orientation,
-		__experimentalLayout: LAYOUT,
+		__experimentalLayout: layout,
 		templateInsertUpdatesSelection: true,
 	} );
 
-	const justifyControls =
-		orientation === 'vertical'
-			? VERTICAL_JUSTIFY_CONTROLS
-			: HORIZONTAL_JUSTIFY_CONTROLS;
-
 	return (
 		<>
-			<BlockControls group="block" __experimentalShareWithChildBlocks>
-				<JustifyContentControl
-					allowedControls={ justifyControls }
-					value={ contentJustification }
-					onChange={ ( value ) =>
-						setAttributes( { contentJustification: value } )
-					}
-					popoverProps={ {
-						position: 'bottom right',
-						isAlternate: true,
-					} }
-				/>
-			</BlockControls>
+			<BlockControls
+				group="block"
+				__experimentalShareWithChildBlocks
+			></BlockControls>
 			<div { ...innerBlocksProps } />
 		</>
 	);

diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss
@@ -1,11 +1,6 @@
 // This variable is repeated across Button, Buttons, and Buttons editor styles.
 $blocks-block__margin: 0.5em;
 
-.wp-block > .wp-block-buttons {
-	display: flex;
-	flex-wrap: wrap;
-}
-
 .wp-block-buttons {
 	// Override editor auto block margins for button as well as the block appender.
 	> .wp-block {

diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
@@ -2,10 +2,6 @@
 $blocks-block__margin: 0.5em;
 
 .wp-block-buttons {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: var(--wp--style--block-gap, $blocks-block__margin);
 
 	&.is-vertical {
 		flex-direction: column;

diff --git a/packages/block-library/src/buttons/variations.js b/packages/block-library/src/buttons/variations.js
@@ -9,14 +9,14 @@ const variations = [
 		isDefault: true,
 		title: __( 'Horizontal' ),
 		description: __( 'Buttons shown in a row.' ),
-		attributes: { orientation: 'horizontal' },
+		attributes: { layout: { type: 'flex' } },
 		scope: [ 'transform' ],
 	},
 	{
 		name: 'buttons-vertical',
 		title: __( 'Vertical' ),
 		description: __( 'Buttons shown in a column.' ),
-		attributes: { orientation: 'vertical' },
+		attributes: { layout: { type: 'column' } },
 		scope: [ 'transform' ],
 	},
 ];