From 083eb0986ed90cb3ce82a57f2dd8a55aa79247d8 Mon Sep 17 00:00:00 2001
From: Jorge <jorge.costa@developer.pt>
Date: Thu, 30 Aug 2018 19:00:21 +0100
Subject: [PATCH] Fix: Align: Only add data-align for wide and full aligns if
 editor/theme 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      | 23 ++++++++++----
 packages/editor/src/hooks/test/align.js | 41 +++++++++++++++++++++----
 2 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/packages/editor/src/hooks/align.js b/packages/editor/src/hooks/align.js
index bd49b5cf77fe29..3d72672a4b11b8 100644
--- a/packages/editor/src/hooks/align.js
+++ b/packages/editor/src/hooks/align.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { assign, get, includes } from 'lodash';
+import { assign, filter, get, includes } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -10,6 +10,7 @@ import { assign, get, includes } from 'lodash';
 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
diff --git a/packages/editor/src/hooks/test/align.js b/packages/editor/src/hooks/test/align.js
index ccc678eee8d772..164b3481935647 100644
--- a/packages/editor/src/hooks/test/align.js
+++ b/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 } />
 			) );