[Block Library - Social Links]: Use the new flex layout (#34493)

* [Block Library - Social Links]: Use the new `flex` layout * don't check for theme support in social links edit fn * associate `themeSupportsLayout` with `default/flow` layout * handle deprecations * add fixture and fix deprecation handling for default value * Remove link margin. * remove help from control * make justification work properly with JustifyContentControl - temp commit * add `toolBarControls` to layouts * fix import * rename layout.edit to layout.inspectorControls * pass layoutBlockSupport to edit functions Co-authored-by: jasmussen <[email protected]>
WordPress · Sep 7, 2021 · dd5fd6b · dd5fd6b
1 parent 435119c
commit dd5fd6b
Show file tree

Hide file tree

Showing 13 changed files with 427 additions and 94 deletions.
diff --git a/lib/block-supports/layout.php b/lib/block-supports/layout.php
@@ -29,7 +29,7 @@ function gutenberg_register_layout_support( $block_type ) {
  * Generates the CSS corresponding to the provided layout.
  *
  * @param string  $selector CSS selector.
- * @param array   $layout   Layout object.
+ * @param array   $layout   Layout object. The one that is passed has already checked the existance of default block layout.
  * @param boolean $has_block_gap_support Whether the theme has support for the block gap.
  *
  * @return string CSS style.
@@ -68,6 +68,13 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 			$style .= "$selector > * + * { margin-top: var( --wp--style--block-gap ); margin-bottom: 0; }";
 		}
 	} elseif ( 'flex' === $layout_type ) {
+		$justify_content_options = array(
+			'left'          => 'flex-start',
+			'right'         => 'flex-end',
+			'center'        => 'center',
+			'space-between' => 'space-between',
+		);
+
 		$style  = "$selector {";
 		$style .= 'display: flex;';
 		if ( $has_block_gap_support ) {
@@ -77,6 +84,14 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 		}
 		$style .= 'flex-wrap: wrap;';
 		$style .= 'align-items: center;';
+		/**
+		 * 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 .= "justify-content: {$justify_content_options[ $layout['justifyContent'] ]};";
+		}
 		$style .= '}';
 
 		$style .= "$selector > * { margin: 0; }";

diff --git a/packages/block-editor/src/hooks/layout.js b/packages/block-editor/src/hooks/layout.js
@@ -40,23 +40,32 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		return getSettings().supportsLayout;
 	}, [] );
 
-	if ( ! themeSupportsLayout ) {
-		return null;
-	}
-
+	const layoutBlockSupport = getBlockSupport(
+		blockName,
+		layoutBlockSupportKey,
+		{}
+	);
 	const {
-		allowSwitching: canBlockSwitchLayout,
+		allowSwitching,
 		allowEditing = true,
 		allowInheriting = true,
 		default: defaultBlockLayout,
-	} = getBlockSupport( blockName, layoutBlockSupportKey ) || {};
+	} = layoutBlockSupport;
 
 	if ( ! allowEditing ) {
 		return null;
 	}
 
-	const usedLayout = layout ? layout : defaultBlockLayout || {};
+	const usedLayout = layout || defaultBlockLayout || {};
 	const { inherit = false, type = 'default' } = usedLayout;
+	/**
+	 * `themeSupportsLayout` is only relevant to the `default/flow`
+	 * layout and it should not be taken into account when other
+	 * `layout` types are used.
+	 */
+	if ( type === 'default' && ! themeSupportsLayout ) {
+		return null;
+	}
 	const layoutType = getLayoutType( type );
 
 	const onChangeType = ( newType ) =>
@@ -65,33 +74,45 @@ function LayoutPanel( { setAttributes, attributes, name: blockName } ) {
 		setAttributes( { layout: newLayout } );
 
 	return (
-		<InspectorControls>
-			<PanelBody title={ __( 'Layout' ) }>
-				{ allowInheriting && !! defaultThemeLayout && (
-					<ToggleControl
-						label={ __( 'Inherit default layout' ) }
-						checked={ !! inherit }
-						onChange={ () =>
-							setAttributes( { layout: { inherit: ! inherit } } )
-						}
-					/>
-				) }
-
-				{ ! inherit && canBlockSwitchLayout && (
-					<LayoutTypeSwitcher
-						type={ type }
-						onChange={ onChangeType }
-					/>
-				) }
-
-				{ ! inherit && layoutType && (
-					<layoutType.edit
-						layout={ usedLayout }
-						onChange={ onChangeLayout }
-					/>
-				) }
-			</PanelBody>
-		</InspectorControls>
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Layout' ) }>
+					{ allowInheriting && !! defaultThemeLayout && (
+						<ToggleControl
+							label={ __( 'Inherit default layout' ) }
+							checked={ !! inherit }
+							onChange={ () =>
+								setAttributes( {
+									layout: { inherit: ! inherit },
+								} )
+							}
+						/>
+					) }
+
+					{ ! inherit && allowSwitching && (
+						<LayoutTypeSwitcher
+							type={ type }
+							onChange={ onChangeType }
+						/>
+					) }
+
+					{ ! inherit && layoutType && (
+						<layoutType.inspectorControls
+							layout={ usedLayout }
+							onChange={ onChangeLayout }
+							layoutBlockSupport={ layoutBlockSupport }
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
+			{ ! inherit && layoutType && (
+				<layoutType.toolBarControls
+					layout={ usedLayout }
+					onChange={ onChangeLayout }
+					layoutBlockSupport={ layoutBlockSupport }
+				/>
+			) }
+		</>
 	);
 }
 

diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js
@@ -1,27 +1,63 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} 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',
+	'space-between': 'space-between',
+};
 
 export default {
 	name: 'flex',
-
 	label: __( 'Flex' ),
-
-	edit() {
-		return null;
+	inspectorControls: function FlexLayoutInspectorControls( {
+		layout = {},
+		onChange,
+	} ) {
+		return (
+			<FlexLayoutJustifyContentControl
+				layout={ layout }
+				onChange={ onChange }
+			/>
+		);
 	},
-
-	save: function FlexLayoutStyle( { selector } ) {
+	toolBarControls: function FlexLayoutToolbarControls( {
+		layout = {},
+		onChange,
+		layoutBlockSupport,
+	} ) {
+		if ( layoutBlockSupport?.allowSwitching ) {
+			return null;
+		}
+		return (
+			<BlockControls group="block" __experimentalExposeToChildren>
+				<FlexLayoutJustifyContentControl
+					layout={ layout }
+					onChange={ onChange }
+					isToolbar
+				/>
+			</BlockControls>
+		);
+	},
+	save: function FlexLayoutStyle( { selector, layout } ) {
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
 		const hasBlockGapStylesSupport = blockGapSupport !== null;
-
+		const justifyContent =
+			justifyContentMap[ layout.justifyContent ] || 'flex-start';
 		return (
 			<style>{ `
 				${ appendSelectors( selector ) } {
@@ -33,6 +69,8 @@ export default {
 					};
 					flex-wrap: wrap;
 					align-items: center;
+					flex-direction: row;
+					justify-content: ${ justifyContent };
 				}
 
 				${ appendSelectors( selector, '> *' ) } {
@@ -41,12 +79,71 @@ export default {
 			` }</style>
 		);
 	},
-
 	getOrientation() {
 		return 'horizontal';
 	},
-
 	getAlignments() {
 		return [];
 	},
 };
+
+function FlexLayoutJustifyContentControl( {
+	layout,
+	onChange,
+	isToolbar = false,
+} ) {
+	const { justifyContent = 'left' } = layout;
+	if ( isToolbar ) {
+		return (
+			<JustifyContentControl
+				allowedControls={ [
+					'left',
+					'center',
+					'right',
+					'space-between',
+				] }
+				value={ justifyContent }
+				onChange={ ( value ) => {
+					onChange( {
+						...layout,
+						justifyContent: value,
+					} );
+				} }
+				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>
+	);
+}
diff --git a/packages/block-editor/src/layouts/flow.js b/packages/block-editor/src/layouts/flow.js
@@ -17,10 +17,11 @@ import { appendSelectors } from './utils';
 
 export default {
 	name: 'default',
-
 	label: __( 'Flow' ),
-
-	edit: function LayoutDefaultEdit( { layout, onChange } ) {
+	inspectorControls: function DefaultLayoutInspectorControls( {
+		layout,
+		onChange,
+	} ) {
 		const { wideSize, contentSize } = layout;
 		const units = useCustomUnits( {
 			availableUnits: useSetting( 'spacing.units' ) || [
@@ -101,7 +102,9 @@ export default {
 			</>
 		);
 	},
-
+	toolBarControls: function DefaultLayoutToolbarControls() {
+		return null;
+	},
 	save: function DefaultLayoutStyle( { selector, layout = {} } ) {
 		const { contentSize, wideSize } = layout;
 		const blockGapSupport = useSetting( 'spacing.blockGap' );
@@ -115,11 +118,11 @@ export default {
 						margin-left: auto !important;
 						margin-right: auto !important;
 					}
-	
+
 					${ appendSelectors( selector, '> [data-align="wide"]' ) }  {
 						max-width: ${ wideSize ?? contentSize };
 					}
-	
+
 					${ appendSelectors( selector, '> [data-align="full"]' ) } {
 						max-width: none;
 					}
@@ -131,7 +134,7 @@ export default {
 				float: left;
 				margin-right: 2em;
 			}
-	
+
 			${ appendSelectors( selector, '> [data-align="right"]' ) } {
 				float: right;
 				margin-left: 2em;
@@ -150,11 +153,9 @@ export default {
 
 		return <style>{ style }</style>;
 	},
-
 	getOrientation() {
 		return 'vertical';
 	},
-
 	getAlignments( layout ) {
 		if ( layout.alignments !== undefined ) {
 			return layout.alignments;

diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json
@@ -41,7 +41,14 @@
 	"supports": {
 		"align": [ "left", "center", "right" ],
 		"anchor": true,
-		"__experimentalExposeControlsToChildren": true
+		"__experimentalExposeControlsToChildren": true,
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": {
+				"type": "flex"
+			}
+		}
 	},
 	"styles": [
 		{ "name": "default", "label": "Default", "isDefault": true },