From c4e59d16da0eaf8d3b58bb57f947aaf71e8dd393 Mon Sep 17 00:00:00 2001
From: Tom Usborne <tom@edge22.com>
Date: Thu, 25 Aug 2022 11:18:32 -0700
Subject: [PATCH] Fix: Align classes when using theme.json

---
 .../components/ContainerContentRenderer.js         | 14 +++++++++++---
 .../image/components/ImageContentRenderer.js       | 12 ++++++++++--
 src/components/root-element/index.js               | 12 +++++++++++-
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/src/blocks/container/components/ContainerContentRenderer.js b/src/blocks/container/components/ContainerContentRenderer.js
index e69a435ce..2511ec1a2 100644
--- a/src/blocks/container/components/ContainerContentRenderer.js
+++ b/src/blocks/container/components/ContainerContentRenderer.js
@@ -2,14 +2,14 @@ import RootElement from '../../../components/root-element';
 import GridItem from './GridItem';
 import Element from '../../../components/element';
 import { applyFilters } from '@wordpress/hooks';
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps, store as blockEditorStore } from '@wordpress/block-editor';
 import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import getIcon from '../../../utils/get-icon';
 import ShapeDividers from './ShapeDividers';
 import classnames from 'classnames';
 import { useInnerBlocksCount } from '../../../hooks';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import ComponentCSS from './ComponentCSS';
 import getBackgroundImageUrl from '../../../utils/get-background-image-url';
 
@@ -39,6 +39,13 @@ export default function ContainerContentRenderer( props ) {
 	const { selectBlock } = useDispatch( 'core/block-editor' );
 	const innerBlocksCount = useInnerBlocksCount( clientId );
 	const hasChildBlocks = 0 < innerBlocksCount;
+	const supportsLayout = useSelect( ( select ) => {
+		const {
+			getSettings,
+		} = select( blockEditorStore );
+
+		return getSettings().supportsLayout || false;
+	}, [] );
 
 	let hasStyling = (
 		!! backgroundColor ||
@@ -57,9 +64,10 @@ export default function ContainerContentRenderer( props ) {
 			[ `${ className }` ]: undefined !== className,
 			'gb-container-empty': ! hasChildBlocks && ! isBlockPreview,
 			'gb-container-visual-guides': ! hasChildBlocks && ! hasStyling && ! props.isSelected && ! isBlockPreview,
+			[ `align${ align }` ]: supportsLayout,
 		} ),
 		id: anchor ? anchor : null,
-		'data-align': align ? align : null,
+		'data-align': align && ! supportsLayout ? align : null,
 	};
 
 	const backgroundUrl = getBackgroundImageUrl( props );
diff --git a/src/blocks/image/components/ImageContentRenderer.js b/src/blocks/image/components/ImageContentRenderer.js
index eabddc31a..123ad3c80 100644
--- a/src/blocks/image/components/ImageContentRenderer.js
+++ b/src/blocks/image/components/ImageContentRenderer.js
@@ -1,5 +1,5 @@
 import ImagePlaceholder from './ImagePlaceholder';
-import { useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, store as blockEditorStore } from '@wordpress/block-editor';
 import classnames from 'classnames';
 import RootElement from '../../../components/root-element';
 import Element from '../../../components/element';
@@ -79,14 +79,22 @@ export default function ImageContentRenderer( props ) {
 	const imageUrl = useDynamicData && dynamicContentType ? dynamicImageFallback : attributes.mediaUrl;
 	const altText = useDynamicData && dynamicContentType ? currentImage?.alt_text : attributes.alt;
 	const titleText = useDynamicData && dynamicContentType ? currentImage?.title?.rendered : attributes.title;
+	const supportsLayout = useSelect( ( select ) => {
+		const {
+			getSettings,
+		} = select( blockEditorStore );
+
+		return getSettings().supportsLayout || false;
+	}, [] );
 
 	const figureAttributes = useBlockProps( {
 		className: classnames( {
 			'gb-block-image': true,
 			[ `gb-block-image-${ uniqueId }` ]: true,
 			'is-applying': !! temporaryURL,
+			[ `align${ align }` ]: !! parentBlock && supportsLayout,
 		} ),
-		'data-align': !! parentBlock ? align : null,
+		'data-align': !! parentBlock && ! supportsLayout ? align : null,
 		ref: figureRef,
 	} );
 
diff --git a/src/components/root-element/index.js b/src/components/root-element/index.js
index 1ac61738b..ff13d558e 100644
--- a/src/components/root-element/index.js
+++ b/src/components/root-element/index.js
@@ -1,12 +1,21 @@
 import { createElement } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import classnames from 'classnames';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 export default function RootElement( { name, clientId, align, children } ) {
 	const {
 		getBlockRootClientId,
 	} = useSelect( ( select ) => select( 'core/block-editor' ), [] );
 
+	const supportsLayout = useSelect( ( select ) => {
+		const {
+			getSettings,
+		} = select( blockEditorStore );
+
+		return getSettings().supportsLayout || false;
+	}, [] );
+
 	const blockName = name.toString().replace( '/', '-' );
 
 	const blockProps = {
@@ -14,8 +23,9 @@ export default function RootElement( { name, clientId, align, children } ) {
 			'wp-block': true,
 			'gb-is-root-block': true,
 			[ `gb-root-block-${ blockName }` ]: true,
+			[ `align${ align }` ]: supportsLayout,
 		} ),
-		'data-align': align ? align : null,
+		'data-align': align && ! supportsLayout ? align : null,
 		'data-block': clientId,
 	};