Block List: Inject inner block list creator as function

Generate BlockList from block's own utils, which has advantage of:

- Not having circular dependency from blocks to editor
- Respecting block menu and contextual toolbar props

blocks/block-edit/index.js

@@ -9,12 +9,11 @@ import { noop, get } from 'lodash';
  */
 import { withSelect } from '@wordpress/data';
 import { Component, compose } from '@wordpress/element';
-import { withFilters, withAPIData } from '@wordpress/components';
+import { withContext, withFilters, withAPIData } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
-import { createInnerBlockList } from './utils';
 import {
 	getBlockType,
 	getBlockDefaultClassname,
@@ -25,17 +24,12 @@ export class BlockEdit extends Component {
 	getChildContext() {
 		const {
 			id: uid,
-			renderBlockMenu,
-			showContextualToolbar,
 			user,
+			createInnerBlockList,
 		} = this.props;
 
 		return {
-			BlockList: createInnerBlockList(
-				uid,
-				renderBlockMenu,
-				showContextualToolbar
-			),
+			BlockList: createInnerBlockList( uid ),
 			canUserUseUnfilteredHTML: get( user.data, [
 				'capabilities',
 				'unfiltered_html',
@@ -88,4 +82,5 @@ export default compose( [
 	withAPIData( ( { postType } ) => ( {
 		user: `/wp/v2/users/me?post_type=${ postType }&context=edit`,
 	} ) ),
+	withContext( 'createInnerBlockList' )(),
 ] )( BlockEdit );

blocks/test/helpers/index.js

@@ -27,6 +27,7 @@ export const blockEditRender = ( name, settings ) => {
 			attributes={ block.attributes }
 			setAttributes={ noop }
 			user={ {} }
+			createInnerBlockList={ noop }
 		/>
 	);
 };

editor/components/block-list/block.js

@@ -3,7 +3,7 @@
  */
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { get, reduce, size, castArray, first, last } from 'lodash';
+import { get, reduce, size, castArray, first, last, noop } from 'lodash';
 import tinymce from 'tinymce';
 
 /**
@@ -45,6 +45,7 @@ import BlockMobileToolbar from './block-mobile-toolbar';
 import BlockInsertionPoint from './insertion-point';
 import IgnoreNestedEvents from './ignore-nested-events';
 import InserterWithShortcuts from '../inserter-with-shortcuts';
+import { createInnerBlockList } from './utils';
 import {
 	clearSelectedBlock,
 	editPost,
@@ -109,6 +110,24 @@ export class BlockListBlock extends Component {
 		};
 	}
 
+	/**
+	 * 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: ( uid ) => {
+				const { renderBlockMenu, showContextualToolbar } = this.props;
+				return createInnerBlockList( uid, renderBlockMenu, showContextualToolbar );
+			},
+		};
+	}
+
 	componentDidMount() {
 		if ( this.props.isTyping ) {
 			document.addEventListener( 'mousemove', this.stopTypingOnMouseMove );
@@ -749,6 +768,10 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 
 BlockListBlock.className = 'editor-block-list__block-edit';
 
+BlockListBlock.childContextTypes = {
+	createInnerBlockList: noop,
+};
+
 export default compose(
 	connect( mapStateToProps, mapDispatchToProps ),
 	withContext( 'editor' )( ( settings ) => {

blocks/block-edit/utils.js → editor/components/block-list/utils.js

@@ -3,6 +3,11 @@
  */
 import { Component } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import BlockList from './';
+
 /**
  * An object of cached BlockList components
  *
@@ -43,12 +48,8 @@ export function createInnerBlockList( uid, renderBlockMenu, showContextualToolba
 				}
 
 				render() {
-					// TODO: We shouldn't access BlockList via the global. Need
-					// to explore better merging of overlapping editor / blocks
-					// modules pieces.
 					return (
-						// eslint-disable-next-line react/jsx-no-undef
-						<wp.editor.BlockList
+						<BlockList
 							rootUID={ uid }
 							renderBlockMenu={ renderBlockMenu }
 							showContextualToolbar={ showContextualToolbar }