From 13dc2e002dfc0d63de163ab044a8b6bf9882770a Mon Sep 17 00:00:00 2001
From: John Godley <johng75@gmail.com>
Date: Wed, 11 Jul 2018 10:11:10 +0100
Subject: [PATCH] Block options: disable edit toggle in error state

Adds a `canEdit` prop to the block settings menu that determines whether the mode toggle menu option is enabled.

When a block is in an error state (crashed or invalid content) then the mode toggle is disabled as it has no effect.
---
 .../editor/src/components/block-list/block.js |  1 +
 .../block-settings-menu/block-mode-toggle.js  |  3 ++-
 .../components/block-settings-menu/index.js   |  2 ++
 .../test/block-mode-toggle.js                 | 23 +++++++++++++++----
 4 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/editor/src/components/block-list/block.js b/packages/editor/src/components/block-list/block.js
index 9c38b2be13eca2..a24195d4ac6a72 100644
--- a/packages/editor/src/components/block-list/block.js
+++ b/packages/editor/src/components/block-list/block.js
@@ -500,6 +500,7 @@ export class BlockListBlock extends Component {
 						clientIds={ clientId }
 						rootClientId={ rootClientId }
 						isHidden={ ! ( isHovered || isSelected ) || hoverArea !== 'right' || isTypingWithinBlock }
+						canEdit={ isValid }
 					/>
 				) }
 				{ shouldShowBreadcrumb && (
diff --git a/packages/editor/src/components/block-settings-menu/block-mode-toggle.js b/packages/editor/src/components/block-settings-menu/block-mode-toggle.js
index a8702f58f25748..e0f6ae7accb6f1 100644
--- a/packages/editor/src/components/block-settings-menu/block-mode-toggle.js
+++ b/packages/editor/src/components/block-settings-menu/block-mode-toggle.js
@@ -12,7 +12,7 @@ import { getBlockType, hasBlockSupport } from '@wordpress/blocks';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
 
-export function BlockModeToggle( { blockType, mode, onToggleMode, small = false } ) {
+export function BlockModeToggle( { blockType, mode, onToggleMode, small = false, enabled = true } ) {
 	if ( ! hasBlockSupport( blockType, 'html', true ) ) {
 		return null;
 	}
@@ -25,6 +25,7 @@ export function BlockModeToggle( { blockType, mode, onToggleMode, small = false
 		<MenuItem
 			className="editor-block-settings-menu__control"
 			onClick={ onToggleMode }
+			disabled={ ! enabled }
 			icon="html"
 			label={ small ? label : undefined }
 		>
diff --git a/packages/editor/src/components/block-settings-menu/index.js b/packages/editor/src/components/block-settings-menu/index.js
index d953895739a703..b4ed4208a14044 100644
--- a/packages/editor/src/components/block-settings-menu/index.js
+++ b/packages/editor/src/components/block-settings-menu/index.js
@@ -66,6 +66,7 @@ export class BlockSettingsMenu extends Component {
 			onSelect,
 			focus,
 			isHidden,
+			canEdit,
 			onDuplicate,
 			onRemove,
 			canDuplicate,
@@ -142,6 +143,7 @@ export class BlockSettingsMenu extends Component {
 								<BlockModeToggle
 									clientId={ firstBlockClientId }
 									onToggle={ onClose }
+									enabled={ canEdit }
 								/>
 							) }
 							{ count === 1 && (
diff --git a/packages/editor/src/components/block-settings-menu/test/block-mode-toggle.js b/packages/editor/src/components/block-settings-menu/test/block-mode-toggle.js
index 61f819da34dbad..10dfd6cf2b2092 100644
--- a/packages/editor/src/components/block-settings-menu/test/block-mode-toggle.js
+++ b/packages/editor/src/components/block-settings-menu/test/block-mode-toggle.js
@@ -24,9 +24,10 @@ describe( 'BlockModeToggle', () => {
 				mode="visual"
 			/>
 		);
-		const text = wrapper.find( 'MenuItem' ).first().prop( 'children' );
+		const button = wrapper.find( 'MenuItem' ).first();
 
-		expect( text ).toEqual( 'Edit as HTML' );
+		expect( button.prop( 'children' ) ).toEqual( 'Edit as HTML' );
+		expect( button.prop( 'disabled' ) ).toBe( false );
 	} );
 
 	it( 'should render the Visual mode button', () => {
@@ -36,8 +37,22 @@ describe( 'BlockModeToggle', () => {
 				mode="html"
 			/>
 		);
-		const text = wrapper.find( 'MenuItem' ).first().prop( 'children' );
+		const button = wrapper.find( 'MenuItem' ).first();
 
-		expect( text ).toEqual( 'Edit visually' );
+		expect( button.prop( 'children' ) ).toEqual( 'Edit visually' );
+		expect( button.prop( 'disabled' ) ).toBe( false );
+	} );
+
+	it( 'should render a disabled button', () => {
+		const wrapper = shallow(
+			<BlockModeToggle
+				blockType={ { supports: { html: true } } }
+				mode="html"
+				enabled={ false }
+			/>
+		);
+		const button = wrapper.find( 'MenuItem' ).first();
+
+		expect( button.prop( 'disabled' ) ).toBe( true );
 	} );
 } );