From dd5886070419d077b77d13d9468b33ecf798f66e Mon Sep 17 00:00:00 2001 From: Jorge 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 | 31 +++++++++++++++----- packages/editor/src/hooks/test/align.js | 39 +++++++++++++++++++++---- 2 files changed, 57 insertions(+), 13 deletions(-) diff --git a/packages/editor/src/hooks/align.js b/packages/editor/src/hooks/align.js index 7b80924c433e20..7349d4bc95d58d 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, has, includes } from 'lodash'; +import { assign, filter, get, has, includes } from 'lodash'; /** * WordPress dependencies @@ -10,6 +10,7 @@ import { assign, get, has, includes } from 'lodash'; 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 ; }; +} ); + +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 index ccc678eee8d772..af79613ab47e2f 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,11 @@ describe( 'align', () => { ...blockSettings, supports: { align: true, - alignWide: false, + alignWide: true, }, } ); - const EnhancedComponent = withDataAlign( ( { wrapperProps } ) => ( + const EnhancedComponent = innerWithDataAlign( ( { 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 } ) => ( +
+ ) ); + + const wrapper = renderer.create( + + ); + 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 } ) => (
) );