From e2236dc3952a9b4102e2555479c7f1fef5635de4 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Thu, 11 Feb 2021 10:20:54 -0800
Subject: [PATCH 1/4] Stub of justify controls in social links, needs fixing
 elsewhere first

---
 .../block-library/src/social-links/edit.js     | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index e0e62f1bd56c7..65a9756decc9e 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -14,6 +14,7 @@ import {
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
 	useBlockProps,
 	InspectorControls,
+	JustifyToolbar,
 	ContrastChecker,
 	PanelColorSettings,
 	withColors,
@@ -52,6 +53,7 @@ export function SocialLinksEdit( props ) {
 	const {
 		iconBackgroundColorValue,
 		iconColorValue,
+		justify,
 		openInNewTab,
 		size,
 	} = attributes;
@@ -156,6 +158,22 @@ export function SocialLinksEdit( props ) {
 						) }
 					</ToolbarItem>
 				</ToolbarGroup>
+				<JustifyToolbar
+					allowedControls={ [
+						'left',
+						'center',
+						'right',
+						'space-between',
+					] }
+					value={ justify }
+					onChange={ ( value ) =>
+						setAttributes( { justify: value } )
+					}
+					popoverProps={ {
+						position: 'bottom right',
+						isAlternate: true,
+					} }
+				/>
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>

From 5a2cbf6e60c95d81d3f259ecfdbee79865165fb1 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Fri, 12 Feb 2021 11:08:10 -0800
Subject: [PATCH 2/4] Add item justification toolbar, classnames

---
 .../block-library/src/social-links/edit.js    | 35 ++++++++++---------
 .../block-library/src/social-links/save.js    |  8 ++++-
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js
index 65a9756decc9e..4df5f475f802e 100644
--- a/packages/block-library/src/social-links/edit.js
+++ b/packages/block-library/src/social-links/edit.js
@@ -53,7 +53,7 @@ export function SocialLinksEdit( props ) {
 	const {
 		iconBackgroundColorValue,
 		iconColorValue,
-		justify,
+		itemsJustification,
 		openInNewTab,
 		size,
 	} = attributes;
@@ -88,6 +88,7 @@ export function SocialLinksEdit( props ) {
 		'has-icon-color': iconColor.color || iconColorValue,
 		'has-icon-background-color':
 			iconBackgroundColor.color || iconBackgroundColorValue,
+		[ `items-justified-${ itemsJustification }` ]: itemsJustification,
 	} );
 
 	const style = {
@@ -113,6 +114,22 @@ export function SocialLinksEdit( props ) {
 	return (
 		<Fragment>
 			<BlockControls>
+				<JustifyToolbar
+					allowedControls={ [
+						'left',
+						'center',
+						'right',
+						'space-between',
+					] }
+					value={ itemsJustification }
+					onChange={ ( value ) =>
+						setAttributes( { itemsJustification: value } )
+					}
+					popoverProps={ {
+						position: 'bottom right',
+						isAlternate: true,
+					} }
+				/>
 				<ToolbarGroup>
 					<ToolbarItem>
 						{ ( toggleProps ) => (
@@ -158,22 +175,6 @@ export function SocialLinksEdit( props ) {
 						) }
 					</ToolbarItem>
 				</ToolbarGroup>
-				<JustifyToolbar
-					allowedControls={ [
-						'left',
-						'center',
-						'right',
-						'space-between',
-					] }
-					value={ justify }
-					onChange={ ( value ) =>
-						setAttributes( { justify: value } )
-					}
-					popoverProps={ {
-						position: 'bottom right',
-						isAlternate: true,
-					} }
-				/>
 			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js
index 65699fd903635..eafca3dbac53b 100644
--- a/packages/block-library/src/social-links/save.js
+++ b/packages/block-library/src/social-links/save.js
@@ -10,12 +10,18 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( props ) {
 	const {
-		attributes: { iconBackgroundColorValue, iconColorValue, size },
+		attributes: {
+			iconBackgroundColorValue,
+			iconColorValue,
+			itemsJustification,
+			size,
+		},
 	} = props;
 
 	const className = classNames( size, {
 		'has-icon-color': iconColorValue,
 		'has-icon-background-color': iconBackgroundColorValue,
+		[ `items-justified-${ itemsJustification }` ]: itemsJustification,
 	} );
 
 	const style = {

From f8e7d7f09736055ec495e4688587ea14768ef27c Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Fri, 12 Feb 2021 11:20:16 -0800
Subject: [PATCH 3/4] Remove hard-coded justify-content

---
 packages/block-library/src/social-links/style.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 1c9360e22112f..31dcfd19c5fb7 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -1,7 +1,6 @@
 .wp-block-social-links {
 	display: flex;
 	flex-wrap: wrap;
-	justify-content: flex-start;
 	padding-left: 0;
 	padding-right: 0;
 	// Some themes set text-indent on all <ul>

From 330ac7899de7111da78950b6426810382bd69537 Mon Sep 17 00:00:00 2001
From: Marcus Kazmierczak <marcus@mkaz.com>
Date: Tue, 16 Feb 2021 14:24:47 -0800
Subject: [PATCH 4/4] Add justification CSS to common for blocks

---
 packages/block-library/src/common.scss | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss
index bf437ce82cbb2..0aa200e9cb3f6 100644
--- a/packages/block-library/src/common.scss
+++ b/packages/block-library/src/common.scss
@@ -64,3 +64,20 @@
 .aligncenter {
 	clear: both;
 }
+
+// Justification.
+.items-justified-left {
+	justify-content: flex-start;
+}
+
+.items-justified-center {
+	justify-content: center;
+}
+
+.items-justified-right {
+	justify-content: flex-end;
+}
+
+.items-justified-space-between {
+	justify-content: space-between;
+}