Plugins: Refactor plugin context implementation

edit-post/components/header/plugin-sidebar-more-menu-item/index.js

@@ -26,17 +26,19 @@ const PluginSidebarMoreMenuItem = ( { children, icon, isSelected, onClick } ) =>
 );
 
 export default compose(
-	withPluginContext,
-	withSelect( ( select, { icon, pluginContext, target } ) => {
+	withPluginContext( ( context, ownProps ) => {
+		return {
+			icon: ownProps.icon || context.icon,
+			sidebarName: `${ context.name }/${ ownProps.target }`,
+		};
+	} ),
+	withSelect( ( select, { sidebarName } ) => {
 		const {
 			getActiveGeneralSidebarName,
 		} = select( 'core/edit-post' );
-		const sidebarName = `${ pluginContext.name }/${ target }`;
 
 		return {
-			icon: icon || pluginContext.icon,
 			isSelected: getActiveGeneralSidebarName() === sidebarName,
-			sidebarName,
 		};
 	} ),
 	withDispatch( ( dispatch, { isSelected, sidebarName } ) => {

edit-post/components/sidebar/plugin-sidebar/index.js

@@ -73,19 +73,21 @@ function PluginSidebar( props ) {
 }
 
 export default compose(
-	withPluginContext,
-	withSelect( ( select, { icon, name, pluginContext } ) => {
+	withPluginContext( ( context, ownProps ) => {
+		return {
+			icon: ownProps.icon || context.icon,
+			sidebarName: `${ context.name }/${ ownProps.name }`,
+		};
+	} ),
+	withSelect( ( select, { sidebarName } ) => {
 		const {
 			getActiveGeneralSidebarName,
 			isPluginItemPinned,
 		} = select( 'core/edit-post' );
-		const sidebarName = `${ pluginContext.name }/${ name }`;
 
 		return {
-			icon: icon || pluginContext.icon,
 			isActive: getActiveGeneralSidebarName() === sidebarName,
 			isPinned: isPluginItemPinned( sidebarName ),
-			sidebarName,
 		};
 	} ),
 	withDispatch( ( dispatch, { isActive, sidebarName } ) => {

plugins/components/plugin-area/index.js

@@ -32,7 +32,6 @@ class PluginArea extends Component {
 		return {
 			plugins: map( getPlugins(), ( { icon, name, render } ) => {
 				return {
-					name,
 					Plugin: render,
 					context: {
 						name,
@@ -60,9 +59,9 @@ class PluginArea extends Component {
 	render() {
 		return (
 			<div style={ { display: 'none' } }>
-				{ map( this.state.plugins, ( { context, name, Plugin } ) => (
+				{ map( this.state.plugins, ( { context, Plugin } ) => (
 					<PluginContextProvider
-						key={ name }
+						key={ context.name }
 						value={ context }
 					>
 						<Plugin />

plugins/components/plugin-context/index.js

@@ -11,23 +11,24 @@ const { Consumer, Provider } = createContext( {
 export { Provider as PluginContextProvider };
 
 /**
- * A Higher-order Component used to inject Plugin context into the wrapped
- * component.
+ * A Higher Order Component used to inject Plugin context to the
+ * wrapped component.
  *
- * @param {Component} OriginalComponent Component to wrap.
+ * @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} Component with Plugin context injected.
+ * @return {Component} Enhanced component with injected context as props.
  */
-export const withPluginContext = createHigherOrderComponent(
-	( OriginalComponent ) => ( props ) => (
+export const withPluginContext = ( mapContextToProps ) => createHigherOrderComponent( ( OriginalComponent ) => {
+	return ( props ) => (
 		<Consumer>
-			{ ( pluginContext ) => (
+			{ ( context ) => (
 				<OriginalComponent
 					{ ...props }
-					pluginContext={ pluginContext }
+					{ ...mapContextToProps( context, props ) }
 				/>
 			) }
 		</Consumer>
-	),
-	'withPluginContext'
-);
+	);
+}, 'withPluginContext' );