Blocks: Fix BlockEdit hooks not working properly with context (#6312)

blocks/block-edit/context.js

@@ -4,7 +4,7 @@
 import { createContext, createHigherOrderComponent } from '@wordpress/element';
 
 const { Consumer, Provider } = createContext( {
-	isSelected: true,
+	isSelected: false,
 } );
 
 export { Provider as BlockEditContextProvider };

blocks/block-edit/edit.js

@@ -0,0 +1,52 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { withFilters } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import {
+	getBlockType,
+	getBlockDefaultClassName,
+	hasBlockSupport,
+} from '../api';
+
+export const Edit = ( props ) => {
+	const { attributes = {}, isSelected, name } = props;
+	const blockType = getBlockType( name );
+
+	if ( ! blockType ) {
+		return null;
+	}
+
+	// Generate a class name for the block's editable form
+	const generatedClassName = hasBlockSupport( blockType, 'className', true ) ?
+		getBlockDefaultClassName( name ) :
+		null;
+	const className = classnames( generatedClassName, attributes.className );
+
+	// `edit` and `save` are functions or components describing the markup
+	// with which a block is displayed. If `blockType` is valid, assign
+	// them preferentially as the render value for the block.
+	const Component = blockType.edit || blockType.save;
+
+	// For backwards compatibility concerns adds a focus and setFocus prop
+	// These should be removed after some time (maybe when merging to Core)
+	return (
+		<Component
+			{ ...props }
+			className={ className }
+			focus={ isSelected ? {} : false }
+			setFocus={ noop }
+		/>
+	);
+};
+
+export default withFilters( 'blocks.BlockEdit' )( Edit );

blocks/block-edit/index.js

@@ -1,24 +1,19 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import { noop, get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { withSelect } from '@wordpress/data';
 import { Component, compose } from '@wordpress/element';
-import { withContext, withFilters, withAPIData } from '@wordpress/components';
+import { withContext, withAPIData } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import {
-	getBlockType,
-	getBlockDefaultClassName,
-	hasBlockSupport,
-} from '../api';
+import Edit from './edit';
 import { BlockEditContextProvider } from './context';
 
 export class BlockEdit extends Component {
@@ -56,34 +51,11 @@ export class BlockEdit extends Component {
 	}
 
 	render() {
-		const { name, attributes = {}, isSelected } = this.props;
-		const blockType = getBlockType( name );
-
-		if ( ! blockType ) {
-			return null;
-		}
-
-		// Generate a class name for the block's editable form
-		const generatedClassName = hasBlockSupport( blockType, 'className', true ) ?
-			getBlockDefaultClassName( name ) :
-			null;
-		const className = classnames( generatedClassName, attributes.className );
-
-		// `edit` and `save` are functions or components describing the markup
-		// with which a block is displayed. If `blockType` is valid, assign
-		// them preferentially as the render value for the block.
-		const Edit = blockType.edit || blockType.save;
-
 		// For backwards compatibility concerns adds a focus and setFocus prop
 		// These should be removed after some time (maybe when merging to Core)
 		return (
 			<BlockEditContextProvider value={ this.state.context }>
-				<Edit
-					{ ...this.props }
-					className={ className }
-					focus={ isSelected ? {} : false }
-					setFocus={ noop }
-				/>
+				<Edit { ...this.props } />
 			</BlockEditContextProvider>
 		);
 	}
@@ -95,7 +67,6 @@ BlockEdit.childContextTypes = {
 };
 
 export default compose( [
-	withFilters( 'blocks.BlockEdit' ),
 	withSelect( ( select ) => ( {
 		postType: select( 'core/editor' ).getEditedPostAttribute( 'type' ),
 	} ) ),

blocks/block-edit/test/index.js → blocks/block-edit/test/edit.js

@@ -7,22 +7,22 @@ import { noop } from 'lodash';
 /**
  * Internal dependencies
  */
-import { BlockEdit } from '../';
+import { Edit } from '../edit';
 import {
 	registerBlockType,
 	unregisterBlockType,
 	getBlockTypes,
 } from '../../api';
 
-describe( 'BlockEdit', () => {
+describe( 'Edit', () => {
 	afterEach( () => {
 		getBlockTypes().forEach( ( block ) => {
 			unregisterBlockType( block.name );
 		} );
 	} );
 
 	it( 'should return null if block type not defined', () => {
-		const wrapper = shallow( <BlockEdit name="core/test-block" /> );
+		const wrapper = shallow( <Edit name="core/test-block" /> );
 
 		expect( wrapper.type() ).toBe( null );
 	} );
@@ -36,7 +36,7 @@ describe( 'BlockEdit', () => {
 			edit,
 		} );
 
-		const wrapper = shallow( <BlockEdit name="core/test-block" /> );
+		const wrapper = shallow( <Edit name="core/test-block" /> );
 
 		expect( wrapper.find( edit ) ).toBePresent();
 	} );
@@ -49,7 +49,7 @@ describe( 'BlockEdit', () => {
 			title: 'block title',
 		} );
 
-		const wrapper = shallow( <BlockEdit name="core/test-block" /> );
+		const wrapper = shallow( <Edit name="core/test-block" /> );
 
 		expect( wrapper.find( save ) ).toBePresent();
 	} );
@@ -67,7 +67,7 @@ describe( 'BlockEdit', () => {
 		} );
 
 		const wrapper = shallow(
-			<BlockEdit name="core/test-block" attributes={ attributes } />
+			<Edit name="core/test-block" attributes={ attributes } />
 		);
 
 		expect( wrapper.find( edit ) ).toHaveClassName( 'wp-block-test-block my-class' );