Fix: Align: Only add data-align for wide and full aligns if editor/th…

…eme supports them

Full and wide aligns were always shown in the editor if they were previously set or set because of a default value even if the current theme does not supports them.

packages/editor/src/hooks/align.js

@@ -2,14 +2,15 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { assign, get, includes } from 'lodash';
+import { assign, filter, get, includes } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport, getBlockSupport } from '@wordpress/blocks';
+import { withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -43,13 +44,18 @@ export function addAttribute( settings ) {
  * Returns an array of valid alignments for a block type depending on its
  * defined supports. Returns an empty array if block does not support align.
  *
- * @param  {string}   blockName Block name to check
- * @return {string[]}           Valid alignments for block
+ * @param  {string}   blockName                   Block name to check
+ * @param  {?boolean} considerWideControlsEnabled True if the function should consider wide and full alignments as supported.
+ * @return {string[]}                             Valid alignments for block
  */
-export function getBlockValidAlignments( blockName ) {
+export function getBlockValidAlignments( blockName, considerWideControlsEnabled = true ) {
 	// Explicitly defined array set of valid alignments
 	const blockAlign = getBlockSupport( blockName, 'align' );
 	if ( Array.isArray( blockAlign ) ) {
+		// remove wide and full from the array of alignments if theme does not supports them.
+		if ( ! considerWideControlsEnabled ) {
+			return filter( blockAlign, ( align ) => ( align !== 'wide' && align !== 'full' ) );
+		}
 		return blockAlign;
 	}
 
@@ -100,10 +106,10 @@ export const withToolbarControls = createHigherOrderComponent( ( BlockEdit ) =>
  * @param  {Function} BlockListBlock Original component
  * @return {Function}                Wrapped component
  */
-export const withDataAlign = createHigherOrderComponent( ( BlockListBlock ) => {
+export const innerWithDataAlign = createHigherOrderComponent( ( BlockListBlock ) => {
 	return ( props ) => {
 		const { align } = props.block.attributes;
-		const validAlignments = getBlockValidAlignments( props.block.name );
+		const validAlignments = getBlockValidAlignments( props.block.name, props.wideControlsEnabled );
 
 		let wrapperProps = props.wrapperProps;
 		if ( includes( validAlignments, align ) ) {
@@ -113,6 +119,11 @@ export const withDataAlign = createHigherOrderComponent( ( BlockListBlock ) => {
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
 	};
 }, 'withDataAlign' );
+export const withDataAlign = withSelect(
+	( select ) => ( {
+		wideControlsEnabled: select( 'core/editor' ).getEditorSettings().alignWide,
+	} )
+)( innerWithDataAlign );
 
 /**
  * Override props assigned to save component to inject alignment class name if

packages/editor/src/hooks/test/align.js

@@ -20,7 +20,7 @@ import {
 import {
 	getBlockValidAlignments,
 	withToolbarControls,
-	withDataAlign,
+	innerWithDataAlign,
 	addAssignedAlign,
 } from '../align';
 
@@ -153,11 +153,39 @@ describe( 'align', () => {
 				...blockSettings,
 				supports: {
 					align: true,
-					alignWide: false,
+					alignWide: true,
+				},
+			} );
+
+			const EnhancedComponent = innerWithDataAlign( ( { wrapperProps } ) => (
+				<div { ...wrapperProps } />
+			) );
+
+			const wrapper = renderer.create(
+				<EnhancedComponent
+					block={ {
+						name: 'core/foo',
+						attributes: {
+							align: 'wide',
+						},
+					} }
+				/>
+			);
+			expect( wrapper.toTree().rendered.props.wrapperProps ).toEqual( {
+				'data-align': 'wide',
+			} );
+		} );
+
+		it( 'should render no wide/full wrapper props if wide controls are not enabled', () => {
+			registerBlockType( 'core/foo', {
+				...blockSettings,
+				supports: {
+					align: true,
+					alignWide: true,
 				},
 			} );
 
-			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
+			const EnhancedComponent = innerWithDataAlign( ( { wrapperProps } ) => (
 				<div { ...wrapperProps } />
 			) );
 
@@ -166,13 +194,14 @@ describe( 'align', () => {
 					block={ {
 						name: 'core/foo',
 						attributes: {
-							align: 'left',
+							align: 'wide',
 						},
 					} }
+					wideControlsEnabled={ false }
 				/>
 			);
 			expect( wrapper.toTree().rendered.props.wrapperProps ).toEqual( {
-				'data-align': 'left',
+				'data-align': 'wide',
 			} );
 		} );
 
@@ -185,7 +214,7 @@ describe( 'align', () => {
 				},
 			} );
 
-			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
+			const EnhancedComponent = innerWithDataAlign( ( { wrapperProps } ) => (
 				<div { ...wrapperProps } />
 			) );