diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index e4cc87f80faa4..30e57fd4f033f 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -4,6 +4,10 @@ - Added `createCustomColorsHOC` for creating a higher order `withCustomColors` component. +### Bug Fixes + +- BlockSwitcher will now consistently render an icon for block multi-selections. + ### Internal - Removed `jQuery` dependency diff --git a/packages/editor/src/components/block-switcher/index.js b/packages/editor/src/components/block-switcher/index.js index adc4bf4efc142..3bd61ff38e210 100644 --- a/packages/editor/src/components/block-switcher/index.js +++ b/packages/editor/src/components/block-switcher/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { castArray, filter, first, mapKeys, orderBy } from 'lodash'; +import { castArray, filter, first, mapKeys, orderBy, uniq, map } from 'lodash'; /** * WordPress dependencies @@ -53,13 +53,20 @@ export class BlockSwitcher extends Component { 'desc' ); - const sourceBlockName = blocks[ 0 ].name; - const blockType = getBlockType( sourceBlockName ); + // When selection consists of blocks of multiple types, display an + // appropriate icon to communicate the non-uniformity. + const isSelectionOfSameType = uniq( map( blocks, 'name' ) ).length === 1; + + let icon; + if ( isSelectionOfSameType ) { + const sourceBlockName = blocks[ 0 ].name; + const blockType = getBlockType( sourceBlockName ); + icon = blockType.icon; + } else { + icon = 'layout'; + } if ( ! hasBlockStyles && ! possibleBlockTransformations.length ) { - if ( blocks.length > 1 ) { - return null; - } return ( - + ); @@ -110,7 +117,7 @@ export class BlockSwitcher extends Component { tooltip={ label } onKeyDown={ openOnArrowDown } > - + diff --git a/packages/editor/src/components/block-switcher/test/__snapshots__/index.js.snap b/packages/editor/src/components/block-switcher/test/__snapshots__/index.js.snap index f8a340a0480ad..9e03c4e31fb0d 100644 --- a/packages/editor/src/components/block-switcher/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/block-switcher/test/__snapshots__/index.js.snap @@ -1,5 +1,30 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`BlockSwitcher should render disabled block switcher with multi block of different types when no transforms 1`] = ` + + + + + +`; + +exports[`BlockSwitcher should render enabled block switcher with multi block when transforms exist 1`] = ` + +`; + exports[`BlockSwitcher should render switcher with blocks 1`] = ` { level: 3, }, isValid: true, - name: 'core/paragraph', + name: 'core/heading', originalContent: '

I am the greatest!

', clientId: 'c2403fd2-4e63-5ffa-b71c-1e0ea656c5b0', }; @@ -54,11 +54,19 @@ describe( 'BlockSwitcher', () => { edit: () => { }, save: () => {}, transforms: { - to: [ { - type: 'block', - blocks: [ 'core/paragraph' ], - transform: () => {}, - } ], + to: [ + { + type: 'block', + blocks: [ 'core/paragraph' ], + transform: () => {}, + }, + { + type: 'block', + blocks: [ 'core/paragraph' ], + transform: () => {}, + isMultiBlock: true, + }, + ], }, } ); @@ -93,6 +101,7 @@ describe( 'BlockSwitcher', () => { headingBlock1, ]; const inserterItems = [ + { name: 'core/heading', frecency: 1 }, { name: 'core/paragraph', frecency: 1 }, ]; @@ -101,24 +110,28 @@ describe( 'BlockSwitcher', () => { expect( wrapper ).toMatchSnapshot(); } ); - test( 'should not render block switcher with multi block of different types.', () => { - const blocks = [ - headingBlock1, - textBlock, + test( 'should render disabled block switcher with multi block of different types when no transforms', () => { + const blocks = [ headingBlock1, textBlock ]; + const inserterItems = [ + { name: 'core/heading', frecency: 1 }, + { name: 'core/paragraph', frecency: 1 }, ]; - const wrapper = shallow( ); - expect( wrapper.html() ).toBeNull(); + const wrapper = shallow( ); + + expect( wrapper ).toMatchSnapshot(); } ); - test( 'should not render a component when the multi selected types of blocks match.', () => { - const blocks = [ - headingBlock1, - headingBlock2, + test( 'should render enabled block switcher with multi block when transforms exist', () => { + const blocks = [ headingBlock1, headingBlock2 ]; + const inserterItems = [ + { name: 'core/heading', frecency: 1 }, + { name: 'core/paragraph', frecency: 1 }, ]; - const wrapper = shallow( ); - expect( wrapper.html() ).toBeNull(); + const wrapper = shallow( ); + + expect( wrapper ).toMatchSnapshot(); } ); describe( 'Dropdown', () => {