From 153fcdc44edc2fa134da476b3aa3bf6477a90824 Mon Sep 17 00:00:00 2001
From: Miguel Fonseca <miguelcsf@gmail.com>
Date: Fri, 5 Jan 2018 13:29:05 +0000
Subject: [PATCH] VisualEditorInserter: Clear block selection on open

---
 editor/edit-post/modes/visual-editor/inserter.js   | 14 ++++++++++----
 .../edit-post/modes/visual-editor/test/inserter.js | 12 +++++++-----
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/editor/edit-post/modes/visual-editor/inserter.js b/editor/edit-post/modes/visual-editor/inserter.js
index 52ca08cb4d901..b2de29db739c3 100644
--- 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
index a4b6c7f3a7c85..893b7122b1f35 100644
--- 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' );
 	} );
 } );