Components: Deprecate withContext HOC

docs/reference/deprecated.md

@@ -7,6 +7,7 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo
  - `wp.utils.mediaUpload` has been removed. Please use `wp.editor.mediaUpload` instead.
  - `wp.utils.preloadImage` has been removed.
  - `supports.wideAlign` has been removed from the Block API. Please use `supports.alignWide` instead.
+ - `wp.components.withContext` has been removed. Please use `wp.element.createContext` instead. See: https://reactjs.org/docs/context.html.
 
 ## 3.5.0
 

editor/components/inner-blocks/index.js

@@ -1,17 +1,16 @@
 /**
  * External dependencies
  */
-import { pick, isEqual, map } from 'lodash';
+import { pick, identity, isEqual, map } from 'lodash';
 import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { withContext } from '@wordpress/components';
 import { withViewportMatch } from '@wordpress/viewport';
 import { Component } from '@wordpress/element';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { synchronizeBlocksWithTemplate } from '@wordpress/blocks';
+import { synchronizeBlocksWithTemplate, withBlockContentContext } from '@wordpress/blocks';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { compose } from '@wordpress/compose';
 
@@ -150,10 +149,13 @@ InnerBlocks = compose( [
 	} ),
 ] )( InnerBlocks );
 
-InnerBlocks.Content = ( { BlockContent } ) => {
-	return <BlockContent />;
-};
-
-InnerBlocks.Content = withContext( 'BlockContent' )()( InnerBlocks.Content );
+InnerBlocks.Content = withBlockContentContext(
+	identity
+)(
+	( { BlockContent } ) => {
+		console.log( BlockContent );
+		return <BlockContent />;
+	}
+);
 
 export default InnerBlocks;

packages/blocks/src/block-content-provider/index.js

@@ -1,20 +1,27 @@
 /**
  * WordPress dependencies
  */
-import { Component, RawHTML } from '@wordpress/element';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { createContext, RawHTML } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { serialize } from '../api';
 
+const { Consumer, Provider } = createContext( {
+	BlockContent: () => {},
+} );
+
 /**
  * An internal block component used in block content serialization to inject
  * nested block content within the `save` implementation of the ancestor
  * component in which it is nested. The component provides a pre-bound
  * `BlockContent` component via context, which is used by the developer-facing
  * `InnerBlocks.Content` component to render block content.
  *
+ * @return {WPElement} Element with BlockContent injected via context.
+ *
  * @example
  *
  * ```jsx
@@ -23,28 +30,43 @@ import { serialize } from '../api';
  * </BlockContentProvider>
  * ```
  */
-class BlockContentProvider extends Component {
-	getChildContext() {
-		const { innerBlocks } = this.props;
+const BlockContentProvider = ( { children, innerBlocks } ) => {
+	const BlockContent = () => {
+		// Value is an array of blocks, so defer to block serializer
+		const html = serialize( innerBlocks );
 
-		return {
-			BlockContent() {
-				// Value is an array of blocks, so defer to block serializer
-				const html = serialize( innerBlocks );
+		// Use special-cased raw HTML tag to avoid default escaping
+		return <RawHTML>{ html }</RawHTML>;
+	};
 
-				// Use special-cased raw HTML tag to avoid default escaping
-				return <RawHTML>{ html }</RawHTML>;
-			},
-		};
-	}
-
-	render() {
-		return this.props.children;
-	}
-}
-
-BlockContentProvider.childContextTypes = {
-	BlockContent: () => {},
+	return (
+		<Provider value={ { BlockContent } }>
+			{ children }
+		</Provider>
+	);
 };
 
+/**
+ * A Higher Order Component used to inject BlockContent context to the
+ * wrapped component.
+ *
+ * @param {Function} mapContextToProps Function called on every context change,
+ *                                     expected to return object of props to
+ *                                     merge with the component's own props.
+ *
+ * @return {Component} Enhanced component with injected context as props.
+ */
+export const withBlockContentContext = ( mapContextToProps ) => createHigherOrderComponent( ( OriginalComponent ) => {
+	return ( props ) => (
+		<Consumer>
+			{ ( context ) => (
+				<OriginalComponent
+					{ ...props }
+					{ ...mapContextToProps( context, props ) }
+				/>
+			) }
+		</Consumer>
+	);
+}, 'withBlockContentContext' );
+
 export default BlockContentProvider;

packages/blocks/src/index.js

@@ -9,3 +9,4 @@
 // and then stored as objects in state, from which it is then rendered for editing.
 import './store';
 export * from './api';
+export { withBlockContentContext } from './block-content-provider';

packages/components/src/higher-order/with-context/index.js

@@ -8,9 +8,17 @@ import { noop } from 'lodash';
  */
 import { Component } from '@wordpress/element';
 import { createHigherOrderComponent } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 export default ( contextName ) => ( mapSettingsToProps ) => createHigherOrderComponent(
 	( OriginalComponent ) => {
+		deprecated( 'wp.components.withContext', {
+			version: '3.6',
+			alternative: 'wp.element.createContext',
+			plugin: 'Gutenberg',
+			hint: 'https://reactjs.org/docs/context.html',
+		} );
+
 		class WrappedComponent extends Component {
 			render() {
 				const extraProps = mapSettingsToProps ?

packages/element/src/serialize.js

@@ -445,6 +445,8 @@ export function renderElement( element, context = {} ) {
 				},
 				context
 			);
+		default:
+			throw new Error( tagName );
 	}
 
 	switch ( typeof tagName ) {