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', () => {