Block: Move block context provides into BlockEdit

blocks/block-edit/index.js

@@ -2,51 +2,90 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
+import { noop, get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { withFilters } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { Component, compose } from '@wordpress/element';
+import { withFilters, withAPIData } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import { createInnerBlockList } from './utils';
 import {
 	getBlockType,
 	getBlockDefaultClassname,
 	hasBlockSupport,
 } from '../api';
 
-export function BlockEdit( props ) {
-	const { name, attributes = {} } = props;
-	const blockType = getBlockType( name );
+export class BlockEdit extends Component {
+	getChildContext() {
+		const {
+			id: uid,
+			renderBlockMenu,
+			showContextualToolbar,
+			user,
+		} = this.props;
 
-	if ( ! blockType ) {
-		return null;
+		return {
+			BlockList: createInnerBlockList(
+				uid,
+				renderBlockMenu,
+				showContextualToolbar
+			),
+			canUserUseUnfilteredHTML: get( user.data, [
+				'capabilities',
+				'unfiltered_html',
+			], false ),
+		};
 	}
 
-	// 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 preferencially 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 (
-		<Edit
-			{ ...props }
-			className={ className }
-			focus={ props.isSelected ? {} : false }
-			setFocus={ noop }
-		/>
-	);
+	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 preferencially 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 (
+			<Edit
+				{ ...this.props }
+				className={ className }
+				focus={ isSelected ? {} : false }
+				setFocus={ noop }
+			/>
+		);
+	}
 }
 
-export default withFilters( 'blocks.BlockEdit' )( BlockEdit );
+BlockEdit.childContextTypes = {
+	BlockList: noop,
+	canUserUseUnfilteredHTML: noop,
+};
+
+export default compose( [
+	withFilters( 'blocks.BlockEdit' ),
+	withSelect( ( select ) => ( {
+		postType: select( 'core/editor' ).getEditedPostAttribute( 'type' ),
+	} ) ),
+	withAPIData( ( { postType } ) => ( {
+		user: `/wp/v2/users/me?post_type=${ postType }&context=edit`,
+	} ) ),
+] )( BlockEdit );

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

@@ -3,11 +3,6 @@
  */
 import { Component } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import BlockList from './';
-
 /**
  * An object of cached BlockList components
  *
@@ -48,8 +43,12 @@ 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 (
-						<BlockList
+						// eslint-disable-next-line react/jsx-no-undef
+						<wp.editor.BlockList
 							rootUID={ uid }
 							renderBlockMenu={ renderBlockMenu }
 							showContextualToolbar={ showContextualToolbar }

blocks/library/block/index.js

@@ -102,6 +102,7 @@ class ReusableBlockEdit extends Component {
 		let element = (
 			<BlockEdit
 				{ ...this.props }
+				id={ reusableBlock.uid }
 				name={ reusableBlock.type }
 				isSelected={ isEditing && isSelected }
 				attributes={ reusableBlockAttributes }

blocks/test/helpers/index.js

@@ -11,8 +11,8 @@ import {
 	createBlock,
 	getBlockType,
 	registerBlockType,
-	BlockEdit,
 } from '../..';
+import { BlockEdit } from '../../block-edit';
 
 export const blockEditRender = ( name, settings ) => {
 	if ( ! getBlockType( name ) ) {
@@ -26,6 +26,7 @@ export const blockEditRender = ( name, settings ) => {
 			isSelected={ false }
 			attributes={ block.attributes }
 			setAttributes={ noop }
+			user={ {} }
 		/>
 	);
 };

editor/components/block-list/block.js

@@ -3,7 +3,7 @@
  */
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import { get, reduce, size, castArray, noop, first, last } from 'lodash';
+import { get, reduce, size, castArray, first, last } from 'lodash';
 import tinymce from 'tinymce';
 
 /**
@@ -26,7 +26,7 @@ import {
 	isReusableBlock,
 	isUnmodifiedDefaultBlock,
 } from '@wordpress/blocks';
-import { withFilters, withContext, withAPIData } from '@wordpress/components';
+import { withFilters, withContext } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -45,7 +45,6 @@ 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,
@@ -72,7 +71,6 @@ import {
 	isSelectionEnabled,
 	isTyping,
 	getBlockMode,
-	getCurrentPostType,
 	getSelectedBlocksInitialCaretPosition,
 } from '../../store/selectors';
 
@@ -111,23 +109,6 @@ export class BlockListBlock extends Component {
 		};
 	}
 
-	getChildContext() {
-		const {
-			uid,
-			renderBlockMenu,
-			showContextualToolbar,
-		} = this.props;
-
-		return {
-			BlockList: createInnerBlockList(
-				uid,
-				renderBlockMenu,
-				showContextualToolbar
-			),
-			canUserUseUnfilteredHTML: get( this.props.user, [ 'data', 'capabilities', 'unfiltered_html' ], false ),
-		};
-	}
-
 	componentDidMount() {
 		if ( this.props.isTyping ) {
 			document.addEventListener( 'mousemove', this.stopTypingOnMouseMove );
@@ -693,7 +674,6 @@ const mapStateToProps = ( state, { uid, rootUID } ) => {
 		meta: getEditedPostAttribute( state, 'meta' ),
 		mode: getBlockMode( state, uid ),
 		isSelectionEnabled: isSelectionEnabled( state ),
-		postType: getCurrentPostType( state ),
 		initialPosition: getSelectedBlocksInitialCaretPosition( state ),
 		isSelected,
 	};
@@ -757,11 +737,6 @@ const mapDispatchToProps = ( dispatch, ownProps ) => ( {
 
 BlockListBlock.className = 'editor-block-list__block-edit';
 
-BlockListBlock.childContextTypes = {
-	BlockList: noop,
-	canUserUseUnfilteredHTML: noop,
-};
-
 export default compose(
 	connect( mapStateToProps, mapDispatchToProps ),
 	withContext( 'editor' )( ( settings ) => {
@@ -772,7 +747,4 @@ export default compose(
 		};
 	} ),
 	withFilters( 'editor.BlockListBlock' ),
-	withAPIData( ( { postType } ) => ( {
-		user: `/wp/v2/users/me?post_type=${ postType }&context=edit`,
-	} ) ),
 )( BlockListBlock );