VisualEditorInserter: Clear block selection on open

WordPress · Jan 5, 2018 · 153fcdc · 153fcdc
1 parent c6cdbb8
commit 153fcdc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/editor/edit-post/modes/visual-editor/inserter.js b/editor/edit-post/modes/visual-editor/inserter.js
@@ -17,7 +17,7 @@ import { createBlock, BlockIcon } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { Inserter } from '../../../components';
-import { insertBlock } from '../../../store/actions';
+import { clearSelectedBlock, insertBlock } from '../../../store/actions';
 import { getMostFrequentlyUsedBlocks, getBlockCount, getBlocks } from '../../../store/selectors';
 
 export class VisualEditorInserter extends Component {
@@ -34,11 +34,14 @@ export class VisualEditorInserter extends Component {
 
 	toggleControls( isShowingControls ) {
 		this.setState( { isShowingControls } );
+
+		if ( isShowingControls && this.props.clearSelectedBlock ) {
+			this.props.clearSelectedBlock();
+		}
 	}
 
 	insertBlock( name ) {
-		const { onInsertBlock } = this.props;
-		onInsertBlock( createBlock( name ) );
+		this.props.insertBlock( createBlock( name ) );
 	}
 
 	isDisabledBlock( block ) {
@@ -96,7 +99,10 @@ export default compose(
 				blocks: getBlocks( state ),
 			};
 		},
-		{ onInsertBlock: insertBlock },
+		{
+			insertBlock,
+			clearSelectedBlock,
+		},
 	),
 	withContext( 'editor' )( ( settings ) => {
 		const { templateLock } = settings;

diff --git a/editor/edit-post/modes/visual-editor/test/inserter.js b/editor/edit-post/modes/visual-editor/test/inserter.js
@@ -15,11 +15,13 @@ import { VisualEditorInserter } from '../inserter';
 
 describe( 'VisualEditorInserter', () => {
 	it( 'should show controls when receiving focus', () => {
-		const wrapper = shallow( <VisualEditorInserter /> );
+		const clearSelectedBlock = jest.fn();
+		const wrapper = shallow( <VisualEditorInserter clearSelectedBlock={ clearSelectedBlock } /> );
 
 		wrapper.simulate( 'focus' );
 
 		expect( wrapper.state( 'isShowingControls' ) ).toBe( true );
+		expect( clearSelectedBlock ).toHaveBeenCalled();
 	} );
 
 	it( 'should hide controls when losing focus', () => {
@@ -32,10 +34,10 @@ describe( 'VisualEditorInserter', () => {
 	} );
 
 	it( 'should insert frequently used blocks', () => {
-		const onInsertBlock = jest.fn();
+		const insertBlock = jest.fn();
 		const mostFrequentlyUsedBlocks = [ getBlockType( 'core/paragraph' ), getBlockType( 'core/image' ) ];
 		const wrapper = shallow(
-			<VisualEditorInserter onInsertBlock={ onInsertBlock } mostFrequentlyUsedBlocks={ mostFrequentlyUsedBlocks } />
+			<VisualEditorInserter insertBlock={ insertBlock } mostFrequentlyUsedBlocks={ mostFrequentlyUsedBlocks } />
 		);
 		wrapper.state.preferences = {
 			blockUsage: {
@@ -48,7 +50,7 @@ describe( 'VisualEditorInserter', () => {
 			.findWhere( ( node ) => node.prop( 'children' ) === 'Paragraph' )
 			.simulate( 'click' );
 
-		expect( onInsertBlock ).toHaveBeenCalled();
-		expect( onInsertBlock.mock.calls[ 0 ][ 0 ].name ).toBe( 'core/paragraph' );
+		expect( insertBlock ).toHaveBeenCalled();
+		expect( insertBlock.mock.calls[ 0 ][ 0 ].name ).toBe( 'core/paragraph' );
 	} );
 } );