Merge pull request #671 from tomusborne/fix-aligns-supports-layout

Fix: Align classes when using theme.json
tomusborne · Aug 26, 2022 · bf5ce2e · bf5ce2e
2 parents 3d8161d + c3da6ef
commit bf5ce2e
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 6 deletions.
diff --git 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
@@ -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
@@ -1,21 +1,31 @@
 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 = {
 		className: classnames( {
 			'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,
 	};