From e5a79a29e8a07bd716fee1b0b3a64a4510eb559e Mon Sep 17 00:00:00 2001
From: Nick Diego <ndiego@outermost.co>
Date: Sat, 1 Oct 2022 10:56:57 -0500
Subject: [PATCH] Fix alignment bug.

---
 src/edit.js | 20 +++++++++++++-------
 src/save.js | 25 +++++++++++++++----------
 2 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/src/edit.js b/src/edit.js
index d972e7b..2caf222 100644
--- a/src/edit.js
+++ b/src/edit.js
@@ -104,19 +104,19 @@ export function Edit( props ) {
 	const {
 		flipHorizontal,
 		flipVertical,
-		label,
-		title,
-		linkRel,
-		linkTarget,
-		linkUrl,
+		hasNoIconFill,
 		icon,
 		iconBackgroundColorValue,
 		iconColorValue,
-		hasNoIconFill,
 		iconName,
 		itemsJustification,
+		label,
+		linkRel,
+		linkTarget,
+		linkUrl,
 		percentWidth,
 		rotate,
+		title,
 		width,
 	} = attributes;
 	const { gradientClass, gradientValue, setGradient } = useGradient();
@@ -558,7 +558,13 @@ export function Edit( props ) {
 			{ blockControls }
 			{ inspectorControls }
 			<div
-				{ ...useBlockProps( { ref, onKeyDown } ) }
+				{ ...useBlockProps( {
+					className:
+						itemsJustification &&
+						`items-justified-${ itemsJustification }`,
+					ref,
+					onKeyDown,
+				} ) }
 				// This is a bit of a hack. we only want the margin styles
 				// applied to the main block div.
 				style={ blockMargin }
diff --git a/src/save.js b/src/save.js
index 529fa2d..76df689 100644
--- a/src/save.js
+++ b/src/save.js
@@ -27,24 +27,25 @@ import parseIcon from './utils/parse-icon';
  */
 export default function Save( props ) {
 	const {
+		customGradient,
+		flipHorizontal,
+		flipVertical,
+		gradient,
+		hasNoIconFill,
 		icon,
-		iconName,
 		iconBackgroundColor,
 		iconBackgroundColorValue,
 		iconColorValue,
-		hasNoIconFill,
-		gradient,
-		customGradient,
+		iconName,
+		itemsJustification,
 		label,
-		title,
-		linkUrl,
 		linkRel,
 		linkTarget,
+		linkUrl,
+		percentWidth,
 		rotate,
-		flipHorizontal,
-		flipVertical,
+		title,
 		width,
-		percentWidth,
 	} = props.attributes;
 
 	// If there is no icon and no iconName, don't save anything.
@@ -166,7 +167,11 @@ export default function Save( props ) {
 
 	return (
 		<div
-			{ ...useBlockProps.save() }
+			{ ...useBlockProps.save( {
+				className:
+					itemsJustification &&
+					`items-justified-${ itemsJustification }`,
+			} ) }
 			// This is a bit of a hack. we only want the margin styles
 			// applied to the main block div.
 			style={ blockMargin }