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.
WordPress · Nov 8, 2018 · dd58860 · dd58860
1 parent c746581
commit dd58860
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 13 deletions.
diff --git a/packages/editor/src/hooks/align.js b/packages/editor/src/hooks/align.js
@@ -2,14 +2,15 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { assign, get, has, includes } from 'lodash';
+import { assign, filter, get, has, includes } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport, getBlockSupport, getBlockType } 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;
 	}
 
@@ -58,7 +64,7 @@ export function getBlockValidAlignments( blockName ) {
 		// `true` includes all alignments...
 		validAlignments.push( 'left', 'center', 'right' );
 
-		if ( hasBlockSupport( blockName, 'alignWide', true ) ) {
+		if ( considerWideControlsEnabled && hasBlockSupport( blockName, 'alignWide', true ) ) {
 			validAlignments.push( 'wide', 'full' );
 		}
 	}
@@ -109,10 +115,13 @@ 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 ) ) {
@@ -121,6 +130,14 @@ export const withDataAlign = createHigherOrderComponent( ( BlockListBlock ) => {
 
 		return <BlockListBlock { ...props } wrapperProps={ wrapperProps } />;
 	};
+} );
+
+export const withDataAlign = createHigherOrderComponent( ( BlockListBlock ) => {
+	return withSelect(
+		( select ) => ( {
+			wideControlsEnabled: select( 'core/editor' ).getEditorSettings().alignWide,
+		} )
+	)( innerWithDataAlign( BlockListBlock ) );
 }, 'withDataAlign' );
 
 /**

diff --git 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,11 @@ describe( 'align', () => {
 				...blockSettings,
 				supports: {
 					align: true,
-					alignWide: false,
+					alignWide: true,
 				},
 			} );
 
-			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
+			const EnhancedComponent = innerWithDataAlign( ( { wrapperProps } ) => (
 				<div { ...wrapperProps } />
 			) );
 
@@ -166,14 +166,41 @@ describe( 'align', () => {
 					block={ {
 						name: 'core/foo',
 						attributes: {
-							align: 'left',
+							align: 'wide',
 						},
 					} }
 				/>
 			);
 			expect( wrapper.toTree().rendered.props.wrapperProps ).toEqual( {
-				'data-align': 'left',
+				'data-align': 'wide',
+			} );
+		} );
+
+		it( 'should not render wide/full wrapper props if wide controls are not enabled', () => {
+			registerBlockType( 'core/foo', {
+				...blockSettings,
+				supports: {
+					align: true,
+					alignWide: true,
+				},
 			} );
+
+			const EnhancedComponent = innerWithDataAlign( ( { wrapperProps } ) => (
+				<div { ...wrapperProps } />
+			) );
+
+			const wrapper = renderer.create(
+				<EnhancedComponent
+					block={ {
+						name: 'core/foo',
+						attributes: {
+							align: 'wide',
+						},
+					} }
+					wideControlsEnabled={ false }
+				/>
+			);
+			expect( wrapper.toTree().rendered.props.wrapperProps ).toEqual( undefined );
 		} );
 
 		it( 'should not render invalid align', () => {
@@ -185,7 +212,7 @@ describe( 'align', () => {
 				},
 			} );
 
-			const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => (
+			const EnhancedComponent = innerWithDataAlign( ( { wrapperProps } ) => (
 				<div { ...wrapperProps } />
 			) );