Block List: Remove createInnerBlockList utility / context

WordPress · Jun 6, 2018 · 9d305d1 · 9d305d1
1 parent 5984cdf
commit 9d305d1
Show file tree

Hide file tree

Showing 9 changed files with 118 additions and 235 deletions.
diff --git a/core-blocks/block/edit.js b/core-blocks/block/edit.js
@@ -10,7 +10,7 @@ import { Component, Fragment, compose } from '@wordpress/element';
 import { Placeholder, Spinner, Disabled } from '@wordpress/components';
 import { withSelect, withDispatch } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
-import { BlockEdit } from '@wordpress/editor';
+import { BlockEdit, withBlockEditContext } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -86,7 +86,7 @@ class SharedBlockEdit extends Component {
 	}
 
 	render() {
-		const { isSelected, sharedBlock, block, isFetching, isSaving } = this.props;
+		const { isSelected, sharedBlock, block, isFetching, isSaving, renderBlockMenu } = this.props;
 		const { isEditing, title, changedAttributes } = this.state;
 
 		if ( ! sharedBlock && isFetching ) {
@@ -102,6 +102,7 @@ class SharedBlockEdit extends Component {
 				{ ...this.props }
 				isSelected={ isEditing && isSelected }
 				id={ block.uid }
+				renderBlockMenu={ renderBlockMenu }
 				name={ block.name }
 				attributes={ { ...block.attributes, ...changedAttributes } }
 				setAttributes={ isEditing ? this.setAttributes : noop }
@@ -133,6 +134,10 @@ class SharedBlockEdit extends Component {
 }
 
 export default compose( [
+	withBlockEditContext( ( context ) => {
+		const { renderBlockMenu } = context;
+		return { renderBlockMenu };
+	} ),
 	withSelect( ( select, ownProps ) => {
 		const {
 			getSharedBlock,

diff --git a/core-blocks/test/helpers/index.js b/core-blocks/test/helpers/index.js
@@ -31,7 +31,6 @@ export const blockEditRender = ( name, settings ) => {
 			attributes={ block.attributes }
 			setAttributes={ noop }
 			user={ {} }
-			createInnerBlockList={ noop }
 		/>
 	);
 };
diff --git a/editor/components/block-edit/context.js b/editor/components/block-edit/context.js
@@ -13,6 +13,8 @@ const { Consumer, Provider } = createContext( {
 	isSelected: false,
 	focusedElement: null,
 	setFocusedElement: noop,
+	uid: null,
+	renderBlockMenu: noop,
 } );
 
 export { Provider as BlockEditContextProvider };

diff --git a/editor/components/block-edit/index.js b/editor/components/block-edit/index.js
@@ -8,7 +8,7 @@ import { noop, get } from 'lodash';
  */
 import { withSelect } from '@wordpress/data';
 import { Component, compose } from '@wordpress/element';
-import { withContext, withAPIData } from '@wordpress/components';
+import { withAPIData } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -27,15 +27,9 @@ export class BlockEdit extends Component {
 	}
 
 	getChildContext() {
-		const {
-			id: uid,
-			user,
-			createInnerBlockList,
-		} = this.props;
+		const { user } = this.props;
 
 		return {
-			uid,
-			BlockList: createInnerBlockList( uid ),
 			canUserUseUnfilteredHTML: get( user.data, [
 				'capabilities',
 				'unfiltered_html',
@@ -52,18 +46,14 @@ export class BlockEdit extends Component {
 		} );
 	}
 
-	static getDerivedStateFromProps( { name, isSelected }, prevState ) {
-		if (
-			name === prevState.name &&
-			isSelected === prevState.isSelected
-		) {
-			return null;
-		}
+	static getDerivedStateFromProps( props ) {
+		const { id, name, isSelected, renderBlockMenu } = props;
 
 		return {
-			...prevState,
 			name,
 			isSelected,
+			uid: id,
+			renderBlockMenu,
 		};
 	}
 
@@ -77,8 +67,6 @@ export class BlockEdit extends Component {
 }
 
 BlockEdit.childContextTypes = {
-	uid: noop,
-	BlockList: noop,
 	canUserUseUnfilteredHTML: noop,
 };
 
@@ -89,5 +77,4 @@ export default compose( [
 	withAPIData( ( { postType } ) => ( {
 		user: `/wp/v2/users/me?post_type=${ postType }&context=edit`,
 	} ) ),
-	withContext( 'createInnerBlockList' )(),
 ] )( BlockEdit );
diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get, reduce, size, castArray, first, last, noop } from 'lodash';
+import { get, reduce, size, castArray, first, last } from 'lodash';
 import tinymce from 'tinymce';
 
 /**
@@ -50,7 +50,6 @@ import IgnoreNestedEvents from './ignore-nested-events';
 import InserterWithShortcuts from '../inserter-with-shortcuts';
 import Inserter from '../inserter';
 import withHoverAreas from './with-hover-areas';
-import { createInnerBlockList } from '../../utils/block-list';
 
 const { BACKSPACE, DELETE, ENTER } = keycodes;
 
@@ -75,7 +74,6 @@ export class BlockListBlock extends Component {
 		this.onDragStart = this.onDragStart.bind( this );
 		this.onDragEnd = this.onDragEnd.bind( this );
 		this.selectOnOpen = this.selectOnOpen.bind( this );
-		this.createInnerBlockList = this.createInnerBlockList.bind( this );
 		this.hadTouchStart = false;
 
 		this.state = {
@@ -85,26 +83,6 @@ export class BlockListBlock extends Component {
 		};
 	}
 
-	createInnerBlockList( uid ) {
-		const { renderBlockMenu } = this.props;
-		return createInnerBlockList( uid, renderBlockMenu );
-	}
-
-	/**
-	 * Provides context for descendent components for use in block rendering.
-	 *
-	 * @return {Object} Child context.
-	 */
-	getChildContext() {
-		// Blocks may render their own BlockEdit, in which case we must provide
-		// a mechanism for them to create their own InnerBlockList. BlockEdit
-		// is defined in `@wordpress/blocks`, so to avoid a circular dependency
-		// we inject this function via context.
-		return {
-			createInnerBlockList: this.createInnerBlockList,
-		};
-	}
-
 	componentDidMount() {
 		if ( this.props.isSelected ) {
 			this.focusTabbable();
@@ -560,6 +538,7 @@ export class BlockListBlock extends Component {
 								onReplace={ isLocked ? undefined : onReplace }
 								mergeBlocks={ isLocked ? undefined : this.mergeBlocks }
 								id={ uid }
+								renderBlockMenu={ renderBlockMenu }
 								isSelectionEnabled={ this.props.isSelectionEnabled }
 								toggleSelection={ this.props.toggleSelection }
 							/>
@@ -700,10 +679,6 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps ) => {
 	};
 } );
 
-BlockListBlock.childContextTypes = {
-	createInnerBlockList: noop,
-};
-
 export default compose(
 	applyWithSelect,
 	applyWithDispatch,

diff --git a/editor/components/block-preview/index.js b/editor/components/block-preview/index.js
@@ -7,56 +7,37 @@ import { noop } from 'lodash';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
 import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import BlockEdit from '../block-edit';
-import { createInnerBlockList } from '../../utils/block-list';
 import './style.scss';
 
 /**
  * Block Preview Component: It renders a preview given a block name and attributes.
  *
- * @param   {Object}    props Component props.
- * @return {WPElement}       Rendered element.
+ * @param {Object} props Component props.
+ *
+ * @return {WPElement} Rendered element.
  */
-class BlockPreview extends Component {
-	getChildContext() {
-		// Blocks may render their own BlockEdit, in which case we must provide
-		// a mechanism for them to create their own InnerBlockList. BlockEdit
-		// is defined in `@wordpress/blocks`, so to avoid a circular dependency
-		// we inject this function via context.
-		return {
-			createInnerBlockList,
-		};
-	}
-
-	render() {
-		const { name, attributes } = this.props;
-
-		const block = createBlock( name, attributes );
-
-		return (
-			<div className="editor-block-preview">
-				<div className="editor-block-preview__title">{ __( 'Preview' ) }</div>
-				<div className="editor-block-preview__content">
-					<BlockEdit
-						name={ name }
-						focus={ false }
-						attributes={ block.attributes }
-						setAttributes={ noop }
-					/>
-				</div>
+function BlockPreview( { name, attributes } ) {
+	const block = createBlock( name, attributes );
+
+	return (
+		<div className="editor-block-preview">
+			<div className="editor-block-preview__title">{ __( 'Preview' ) }</div>
+			<div className="editor-block-preview__content">
+				<BlockEdit
+					name={ name }
+					focus={ false }
+					attributes={ block.attributes }
+					setAttributes={ noop }
+				/>
 			</div>
-		);
-	}
+		</div>
+	);
 }
 
-BlockPreview.childContextTypes = {
-	createInnerBlockList: noop,
-};
-
 export default BlockPreview;
diff --git a/editor/components/index.js b/editor/components/index.js
@@ -5,6 +5,7 @@ export { default as AlignmentToolbar } from './alignment-toolbar';
 export { default as BlockAlignmentToolbar } from './block-alignment-toolbar';
 export { default as BlockControls } from './block-controls';
 export { default as BlockEdit } from './block-edit';
+export { withBlockEditContext } from './block-edit/context';
 export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as ColorPalette } from './color-palette';