Blocks: Merge Provider with BlockEdit

WordPress · Apr 13, 2018 · c74fbcb · c74fbcb
1 parent d000dcf
commit c74fbcb
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 56 deletions.
diff --git a/blocks/block-edit/context.js b/blocks/block-edit/context.js
@@ -1,52 +1,13 @@
 /**
  * External dependencies
  */
-import { Component, createContext, createHigherOrderComponent } from '@wordpress/element';
+import { createContext, createHigherOrderComponent } from '@wordpress/element';
 
 const { Consumer, Provider } = createContext( {
 	isSelected: true,
 } );
 
-/**
- * A Higher Order Component used to be provide a context for BlockEdit
- * component.
- *
- * @param {Component} OriginalComponent Component to wrap.
- *
- * @return {Component} Component with a BlockEdit context set.
- */
-export const withBlockEditContextProvider = createHigherOrderComponent( ( OriginalComponent ) => {
-	return class ComponentWithProvider extends Component {
-		constructor( props ) {
-			super( props );
-			this.state = {
-				context: {
-					isSelected: props.isSelected,
-				},
-			};
-		}
-
-		static getDerivedStateFromProps( nextProps, prevState ) {
-			if ( nextProps.isSelected === prevState.context.isSelected ) {
-				return null;
-			}
-
-			return {
-				context: {
-					isSelected: nextProps.isSelected,
-				},
-			};
-		}
-
-		render() {
-			return (
-				<Provider value={ this.state.context }>
-					<OriginalComponent { ...this.props } />
-				</Provider>
-			);
-		}
-	};
-}, 'withBlockEditContextProvider' );
+export { Provider as BlockEditContextProvider };
 
 /**
  * A Higher Order Component used to inject BlockEdit context to the

diff --git a/blocks/block-edit/index.js b/blocks/block-edit/index.js
@@ -19,9 +19,18 @@ import {
 	getBlockDefaultClassName,
 	hasBlockSupport,
 } from '../api';
-import { withBlockEditContextProvider } from './context';
+import { BlockEditContextProvider } from './context';
 
 export class BlockEdit extends Component {
+	constructor( props ) {
+		super( props );
+		this.state = {
+			context: {
+				isSelected: props.isSelected,
+			},
+		};
+	}
+
 	getChildContext() {
 		const {
 			id: uid,
@@ -38,6 +47,18 @@ export class BlockEdit extends Component {
 		};
 	}
 
+	static getDerivedStateFromProps( nextProps, prevState ) {
+		if ( nextProps.isSelected === prevState.context.isSelected ) {
+			return null;
+		}
+
+		return {
+			context: {
+				isSelected: nextProps.isSelected,
+			},
+		};
+	}
+
 	render() {
 		const { name, attributes = {}, isSelected } = this.props;
 		const blockType = getBlockType( name );
@@ -60,12 +81,14 @@ export class BlockEdit extends Component {
 		// For backwards compatibility concerns adds a focus and setFocus prop
 		// These should be removed after some time (maybe when merging to Core)
 		return (
-			<Edit
-				{ ...this.props }
-				className={ className }
-				focus={ isSelected ? {} : false }
-				setFocus={ noop }
-			/>
+			<BlockEditContextProvider value={ this.state.context }>
+				<Edit
+					{ ...this.props }
+					className={ className }
+					focus={ isSelected ? {} : false }
+					setFocus={ noop }
+				/>
+			</BlockEditContextProvider>
 		);
 	}
 }
@@ -76,7 +99,6 @@ BlockEdit.childContextTypes = {
 };
 
 export default compose( [
-	withBlockEditContextProvider,
 	withFilters( 'blocks.BlockEdit' ),
 	withSelect( ( select ) => ( {
 		postType: select( 'core/editor' ).getEditedPostAttribute( 'type' ),

diff --git a/blocks/block-edit/test/index.js b/blocks/block-edit/test/index.js
@@ -38,7 +38,7 @@ describe( 'BlockEdit', () => {
 
 		const wrapper = shallow( <BlockEdit name="core/test-block" /> );
 
-		expect( wrapper.type() ).toBe( edit );
+		expect( wrapper.find( edit ) ).toBePresent();
 	} );
 
 	it( 'should use save implementation of block as fallback', () => {
@@ -51,7 +51,7 @@ describe( 'BlockEdit', () => {
 
 		const wrapper = shallow( <BlockEdit name="core/test-block" /> );
 
-		expect( wrapper.type() ).toBe( save );
+		expect( wrapper.find( save ) ).toBePresent();
 	} );
 
 	it( 'should combine the default class name with a custom one', () => {
@@ -70,6 +70,6 @@ describe( 'BlockEdit', () => {
 			<BlockEdit name="core/test-block" attributes={ attributes } />
 		);
 
-		expect( wrapper.prop( 'className' ) ).toBe( 'wp-block-test-block my-class' );
+		expect( wrapper.find( edit ) ).toHaveClassName( 'wp-block-test-block my-class' );
 	} );
 } );
diff --git a/blocks/test/helpers/index.js b/blocks/test/helpers/index.js
@@ -13,9 +13,6 @@ import {
 	registerBlockType,
 } from '../..';
 import { BlockEdit } from '../../block-edit';
-import { withBlockEditContextProvider } from '../../block-edit/context';
-
-const BlockEditWithContext = withBlockEditContextProvider( BlockEdit );
 
 export const blockEditRender = ( name, settings ) => {
 	if ( ! getBlockType( name ) ) {
@@ -24,7 +21,7 @@ export const blockEditRender = ( name, settings ) => {
 	const block = createBlock( name );
 
 	return render(
-		<BlockEditWithContext
+		<BlockEdit
 			name={ name }
 			isSelected={ false }
 			attributes={ block.attributes }