[Block Library - Social Links]: Use the new flex layout

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.
  *
  * @return string CSS style.
  */
@@ -70,6 +70,14 @@ function gutenberg_get_layout_style( $selector, $layout ) {
 		$style .= 'gap: var( --wp--style--block-gap, 0.5em );';
 		$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'] ) ) {
+			$style .= "justify-content: {$layout['justifyContent']};";
+		}
 		$style .= '}';
 
 		$style .= "$selector > * { margin: 0; }";

packages/block-editor/src/layouts/flex.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -10,21 +14,52 @@ import { appendSelectors } from './utils';
 
 export default {
 	name: 'flex',
-
 	label: __( 'Flex' ),
-
-	edit() {
-		return null;
+	edit: function LayoutFlexEdit( { layout = {}, onChange } ) {
+		const { justifyContent = 'flex-start' } = layout;
+		return (
+			<ToggleGroupControl
+				label={ __( 'Justify content' ) }
+				value={ justifyContent }
+				help={ __( 'Add some help here??' ) }
+				onChange={ ( value ) => {
+					onChange( {
+						...layout,
+						justifyContent: value,
+					} );
+				} }
+				isBlock
+			>
+				<ToggleGroupControlOption
+					value="flex-start"
+					label={ _x( 'Left', 'Justify content option' ) }
+				/>
+				<ToggleGroupControlOption
+					value="center"
+					label={ _x( 'Center', 'Justify content option' ) }
+				/>
+				<ToggleGroupControlOption
+					value="flex-end"
+					label={ _x( 'Right', 'Justify content option' ) }
+				/>
+				<ToggleGroupControlOption
+					value="space-between"
+					label={ _x( 'Space between', 'Justify content option' ) }
+				/>
+			</ToggleGroupControl>
+		);
 	},
-
-	save: function FlexLayoutStyle( { selector } ) {
+	save: function FlexLayoutStyle( { selector, layout } ) {
+		const { justifyContent = 'flex-start' } = layout;
 		return (
 			<style>{ `
 				${ appendSelectors( selector ) } {
 					display: flex;
 					gap: var( --wp--style--block-gap, 0.5em );
 					flex-wrap: wrap;
 					align-items: center;
+					flex-direction: row;
+					justify-content: ${ justifyContent };
 				}
 
 				${ appendSelectors( selector, '> *' ) } {
@@ -33,11 +68,9 @@ export default {
 			` }</style>
 		);
 	},
-
 	getOrientation() {
 		return 'horizontal';
 	},
-
 	getAlignments() {
 		return [];
 	},

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 },

packages/block-library/src/social-links/deprecated.js

@@ -8,8 +8,102 @@ import classNames from 'classnames';
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
+const justifyContentMap = {
+	left: 'flex-start',
+	right: 'flex-end',
+	center: 'center',
+	'space-between': 'space-between',
+};
+
+// TODO: this is temp implementation to test quickly.
+// This will need to be applied to the others migrations.
+// The problem exists because `itemsJustification` was introduced in https://github.com/WordPress/gutenberg/pull/28980/files
+// and wasn't declared in block.json (https://github.com/WordPress/gutenberg/issues/34003).
+const migrateWithLayout = ( attributes ) => {
+	if ( !! attributes.layout ) {
+		return attributes;
+	}
+
+	let justifyContent = 'flex-start';
+	let className = attributes.className;
+	const cssClasses = className?.split( ' ' );
+	if ( cssClasses ) {
+		const prefix = 'item-justified-';
+		className = cssClasses.reduce( ( accumulator, cssClass ) => {
+			if ( ! cssClass.startsWith( prefix ) ) {
+				justifyContent =
+					justifyContentMap[ cssClass.slice( prefix.length + 1 ) ];
+				return accumulator;
+			}
+			return `${ accumulator } ${ cssClass }`;
+		}, '' );
+	}
+	return {
+		...attributes,
+		className,
+		layout: {
+			type: 'flex',
+			justifyContent,
+		},
+	};
+};
+
 // Social Links block deprecations.
 const deprecated = [
+	// Implement `flex` layout.
+	{
+		attributes: {
+			iconColor: {
+				type: 'string',
+			},
+			customIconColor: {
+				type: 'string',
+			},
+			iconColorValue: {
+				type: 'string',
+			},
+			iconBackgroundColor: {
+				type: 'string',
+			},
+			customIconBackgroundColor: {
+				type: 'string',
+			},
+			iconBackgroundColorValue: {
+				type: 'string',
+			},
+			openInNewTab: {
+				type: 'boolean',
+				default: false,
+			},
+			size: {
+				type: 'string',
+			},
+		},
+		isEligible: ( { layout } ) => ! layout,
+		migrate: migrateWithLayout,
+		save( props ) {
+			const {
+				attributes: {
+					iconBackgroundColorValue,
+					iconColorValue,
+					itemsJustification,
+					size,
+				},
+			} = props;
+
+			const className = classNames( size, {
+				'has-icon-color': iconColorValue,
+				'has-icon-background-color': iconBackgroundColorValue,
+				[ `items-justified-${ itemsJustification }` ]: itemsJustification,
+			} );
+
+			return (
+				<ul { ...useBlockProps.save( { className } ) }>
+					<InnerBlocks.Content />
+				</ul>
+			);
+		},
+	},
 	// V1. Remove CSS variable use for colors.
 	{
 		attributes: {

packages/block-library/src/social-links/edit.js

@@ -6,18 +6,18 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-
+import { getBlockSupport } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
 import { Fragment, useEffect } from '@wordpress/element';
-
 import {
 	BlockControls,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	useBlockProps,
 	InspectorControls,
-	JustifyContentControl,
 	ContrastChecker,
 	PanelColorSettings,
 	withColors,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	MenuGroup,
@@ -38,8 +38,18 @@ const sizeOptions = [
 	{ name: __( 'Huge' ), value: 'has-huge-icon-size' },
 ];
 
+const getDefaultBlockLayout = ( blockTypeOrName ) => {
+	const layoutBlockSupportConfig = getBlockSupport(
+		blockTypeOrName,
+		'__experimentalLayout'
+	);
+	return layoutBlockSupportConfig?.default;
+};
+
 export function SocialLinksEdit( props ) {
 	const {
+		name,
+		clientId,
 		attributes,
 		iconBackgroundColor,
 		iconColor,
@@ -52,10 +62,23 @@ export function SocialLinksEdit( props ) {
 	const {
 		iconBackgroundColorValue,
 		iconColorValue,
-		itemsJustification,
 		openInNewTab,
 		size,
+		layout,
 	} = attributes;
+	// This probably should not be used/checked here. We need to make all `social-links`
+	// blocks to use `flex` layout.
+	const { themeSupportsLayout } = useSelect(
+		( select ) => {
+			const { getSettings } = select( blockEditorStore );
+			return {
+				themeSupportsLayout: getSettings()?.supportsLayout,
+			};
+		},
+		[ clientId ]
+	);
+
+	const usedLayout = !! layout || getDefaultBlockLayout( name );
 
 	// Remove icon background color if logos only style selected.
 	const logosOnly =
@@ -93,16 +116,16 @@ export function SocialLinksEdit( props ) {
 		'has-icon-color': iconColor.color || iconColorValue,
 		'has-icon-background-color':
 			iconBackgroundColor.color || iconBackgroundColorValue,
-		[ `items-justified-${ itemsJustification }` ]: itemsJustification,
 	} );
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
-		orientation: 'horizontal',
 		placeholder: isSelected ? SelectedSocialPlaceholder : SocialPlaceholder,
 		templateLock: false,
 		__experimentalAppenderTagName: 'li',
+		__experimentalLayout:
+			themeSupportsLayout && usedLayout ? usedLayout : undefined,
 	} );
 
 	const POPOVER_PROPS = {
@@ -111,24 +134,6 @@ export function SocialLinksEdit( props ) {
 
 	return (
 		<Fragment>
-			<BlockControls group="block" __experimentalExposeToChildren>
-				<JustifyContentControl
-					allowedControls={ [
-						'left',
-						'center',
-						'right',
-						'space-between',
-					] }
-					value={ itemsJustification }
-					onChange={ ( value ) =>
-						setAttributes( { itemsJustification: value } )
-					}
-					popoverProps={ {
-						position: 'bottom right',
-						isAlternate: true,
-					} }
-				/>
-			</BlockControls>
 			<BlockControls group="other">
 				<ToolbarDropdownMenu
 					label={ __( 'Size' ) }

packages/block-library/src/social-links/save.js

@@ -10,18 +10,12 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( props ) {
 	const {
-		attributes: {
-			iconBackgroundColorValue,
-			iconColorValue,
-			itemsJustification,
-			size,
-		},
+		attributes: { iconBackgroundColorValue, iconColorValue, size },
 	} = props;
 
 	const className = classNames( size, {
 		'has-icon-color': iconColorValue,
 		'has-icon-background-color': iconBackgroundColorValue,
-		[ `items-justified-${ itemsJustification }` ]: itemsJustification,
 	} );
 
 	return (

packages/block-library/src/social-links/style.scss

@@ -1,6 +1,4 @@
 .wp-block-social-links {
-	display: flex;
-	flex-wrap: wrap;
 	padding-left: 0;
 	padding-right: 0;
 	// Some themes set text-indent on all <ul>