Code Editor: unselect blocks and disable inserter (WordPress#9815)

* Code Editor: unselect blocks and disable inserter

* chore: Make comment a sentence

* Adding a test for the code editor to ensure blocks are unselected and inserter disabled

edit-post/components/header/header-toolbar/index.js

@@ -25,15 +25,15 @@ import {
 import './style.scss';
 import FullscreenModeClose from '../fullscreen-mode-close';
 
-function HeaderToolbar( { hasFixedToolbar, isLargeViewport } ) {
+function HeaderToolbar( { hasFixedToolbar, isLargeViewport, mode } ) {
 	return (
 		<NavigableToolbar
 			className="edit-post-header-toolbar"
 			aria-label={ __( 'Editor Toolbar' ) }
 		>
 			<FullscreenModeClose />
 			<div>
-				<Inserter position="bottom right" />
+				<Inserter disabled={ mode !== 'visual' } position="bottom right" />
 				<DotTip id="core/editor.inserter">
 					{ __( 'Welcome to the wonderful world of blocks! Click the “+” (“Add block”) button to add a new block. There are blocks available for all kind of content: you can insert text, headings, images, lists, and lots more!' ) }
 				</DotTip>
@@ -53,6 +53,7 @@ function HeaderToolbar( { hasFixedToolbar, isLargeViewport } ) {
 export default compose( [
 	withSelect( ( select ) => ( {
 		hasFixedToolbar: select( 'core/edit-post' ).isFeatureActive( 'fixedToolbar' ),
+		mode: select( 'core/edit-post' ).getEditorMode(),
 	} ) ),
 	withViewportMatch( { isLargeViewport: 'medium' } ),
 ] )( HeaderToolbar );

edit-post/store/effects.js

@@ -6,7 +6,7 @@ import { reduce, some } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { select, subscribe } from '@wordpress/data';
+import { select, subscribe, dispatch } from '@wordpress/data';
 import { speak } from '@wordpress/a11y';
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
@@ -120,6 +120,11 @@ const effects = {
 			.then( () => store.dispatch( metaBoxUpdatesSuccess() ) );
 	},
 	SWITCH_MODE( action ) {
+		// Unselect blocks when we switch to the code editor.
+		if ( action.mode !== 'visual' ) {
+			dispatch( 'core/editor' ).clearSelectedBlock();
+		}
+
 		const message = action.mode === 'visual' ? __( 'Visual editor selected' ) : __( 'Code editor selected' );
 		speak( message, 'assertive' );
 	},

packages/editor/src/components/inserter/index.js

@@ -39,6 +39,7 @@ class Inserter extends Component {
 			children,
 			onInsertBlock,
 			rootClientId,
+			disabled,
 		} = this.props;
 
 		if ( items.length === 0 ) {
@@ -61,6 +62,7 @@ class Inserter extends Component {
 						className="editor-inserter__toggle"
 						aria-haspopup="true"
 						aria-expanded={ isOpen }
+						disabled={ disabled }
 					>
 						{ children }
 					</IconButton>

test/e2e/specs/editor-modes.test.js

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { clickBlockAppender, newPost } from '../support/utils';
+import { clickBlockAppender, newPost, switchToEditor } from '../support/utils';
 
 describe( 'Editing modes (visual/HTML)', () => {
 	beforeEach( async () => {
@@ -80,4 +80,33 @@ describe( 'Editing modes (visual/HTML)', () => {
 		htmlBlockContent = await page.$eval( '.editor-block-list__layout .editor-block-list__block .editor-block-list__block-html-textarea', ( node ) => node.textContent );
 		expect( htmlBlockContent ).toEqual( '<p class="has-large-font-size">Hello world!</p>' );
 	} );
+
+	it( 'the code editor should unselect blocks and disable the inserter', async () => {
+		// The paragraph block should be selected
+		const title = await page.$eval(
+			'.editor-block-inspector__card-title',
+			( element ) => element.innerText
+		);
+		expect( title ).toBe( 'Paragraph' );
+
+		// The Block inspector should be active
+		let blockInspectorTab = await page.$( '.edit-post-sidebar__panel-tab.is-active[aria-label="Block settings"]' );
+		expect( blockInspectorTab ).not.toBeNull();
+
+		// Switch to Code Editor
+		await switchToEditor( 'Code' );
+
+		// The Block inspector should not be active anymore
+		blockInspectorTab = await page.$( '.edit-post-sidebar__panel-tab.is-active[aria-label="Block settings"]' );
+		expect( blockInspectorTab ).toBeNull();
+
+		// No block is selected
+		await page.click( '.edit-post-sidebar__panel-tab[aria-label="Block settings"]' );
+		const noBlocksElement = await page.$( '.editor-block-inspector__no-blocks' );
+		expect( noBlocksElement ).not.toBeNull();
+
+		// The inserter is disabled
+		const disabledInserter = await page.$( '.editor-inserter > button:disabled' );
+		expect( disabledInserter ).not.toBeNull();
+	} );
 } );