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.
WordPress · Aug 11, 2018 · 13dc2e0 · 13dc2e0
1 parent 97dd134
commit 13dc2e0
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 );
 	} );
 } );