diff --git a/blocks/block-edit/index.js b/blocks/block-edit/index.js index c36ef97c3871dc..4a071789cdb93d 100644 --- a/blocks/block-edit/index.js +++ b/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 ); diff --git a/blocks/test/helpers/index.js b/blocks/test/helpers/index.js index ee813e88907d96..f46573240df852 100644 --- a/blocks/test/helpers/index.js +++ b/blocks/test/helpers/index.js @@ -27,6 +27,7 @@ export const blockEditRender = ( name, settings ) => { attributes={ block.attributes } setAttributes={ noop } user={ {} } + createInnerBlockList={ noop } /> ); }; diff --git a/editor/components/block-list/block.js b/editor/components/block-list/block.js index d3ba504acba6ea..8e160bd1979866 100644 --- a/editor/components/block-list/block.js +++ b/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 ) => { diff --git a/blocks/block-edit/utils.js b/editor/components/block-list/utils.js similarity index 88% rename from blocks/block-edit/utils.js rename to editor/components/block-list/utils.js index 9f913309bb82c0..67a1969753739f 100644 --- a/blocks/block-edit/utils.js +++ b/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 -