Try: Extensibility: Enable hook-based Slot/Fill registration

components/higher-order/with-hooks/index.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+export default ( WrappedComponent ) => {
+	function HooksComponent( props, context ) {
+		return (
+			<WrappedComponent
+				{ ...props }
+				{ ...context } />
+		);
+	}
+
+	// Derive display name from original component
+	const { displayName = WrappedComponent.name || 'Component' } = WrappedComponent;
+	HooksComponent.displayName = `hooks(${ displayName })`;
+
+	HooksComponent.contextTypes = {
+		hooks: noop,
+	};
+
+	return HooksComponent;
+};

components/higher-order/with-hooks/provider.js

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import createHooks from '@wordpress/hooks';
+import { Component } from '@wordpress/element';
+
+export default class HooksProvider extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.hooks = createHooks();
+	}
+
+	getChildContext() {
+		const { hooks } = this;
+		return { hooks };
+	}
+
+	render() {
+		return this.props.children;
+	}
+}
+
+HooksProvider.childContextTypes = {
+	hooks: noop,
+};

components/index.js

@@ -12,6 +12,7 @@ export { default as ExternalLink } from './external-link';
 export { default as FormFileUpload } from './form-file-upload';
 export { default as FormToggle } from './form-toggle';
 export { default as FormTokenField } from './form-token-field';
+export { default as HooksProvider } from './higher-order/with-hooks/provider';
 export { default as IconButton } from './icon-button';
 export { default as KeyboardShortcuts } from './keyboard-shortcuts';
 export { NavigableMenu, TabbableContainer } from './navigable-container';
@@ -35,5 +36,6 @@ export { default as navigateRegions } from './higher-order/navigate-regions';
 export { default as withAPIData } from './higher-order/with-api-data';
 export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn } from './higher-order/with-focus-return';
+export { default as withHooks } from './higher-order/with-hooks';
 export { default as withInstanceId } from './higher-order/with-instance-id';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';

editor/components/index.js

@@ -41,3 +41,4 @@ export { default as Warning } from './warning';
 
 // State Related Components
 export { default as EditorProvider } from './provider';
+export { default as PluginFills } from './plugin-fills';

editor/components/plugin-fills/index.js

@@ -0,0 +1,58 @@
+/**
+ * External dependencies
+ */
+import { map } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Fill, withHooks } from '@wordpress/components';
+import { Component } from '@wordpress/element';
+
+class PluginFills extends Component {
+	constructor() {
+		super( ...arguments );
+
+		this.registerFill = this.registerFill.bind( this );
+
+		this.state = {
+			fills: {},
+		};
+	}
+
+	componentDidMount() {
+		this.props.hooks.addAction( 'registerFill', 'core\plugin-fills-register', this.registerFill );
+	}
+
+	componentWillUnmount() {
+		this.props.hooks.removeAction( 'registerFill', 'core\plugin-fills-register' );
+	}
+
+	registerFill( name, FillComponent ) {
+		this.setState( ( prevState ) => {
+			const { fills } = prevState;
+
+			return {
+				fills: {
+					...fills,
+					[ name ]: [
+						...( fills[ name ] || [] ),
+						FillComponent,
+					],
+				},
+			};
+		} );
+	}
+
+	render() {
+		return map( this.state.fills, ( components, name ) => (
+			<Fill key={ name } name={ name }>
+				{ map( components, ( FillComponent, index ) => (
+					<FillComponent key={ index } />
+				) ) }
+			</Fill>
+		) );
+	}
+}
+
+export default withHooks( PluginFills );

editor/components/provider/index.js

@@ -14,6 +14,7 @@ import {
 	APIProvider,
 	DropZoneProvider,
 	SlotFillProvider,
+	HooksProvider,
 } from '@wordpress/components';
 
 /**
@@ -42,6 +43,8 @@ class EditorProvider extends Component {
 	constructor( props ) {
 		super( ...arguments );
 
+		this.setHooks = this.setHooks.bind( this );
+
 		const store = createReduxStore( props.initialState );
 
 		// If initial state is passed, assume that we don't need to initialize,
@@ -73,6 +76,10 @@ class EditorProvider extends Component {
 		}
 	}
 
+	setHooks( node ) {
+		this.hooks = node.hooks;
+	}
+
 	render() {
 		const { children } = this.props;
 		const providers = [
@@ -103,6 +110,11 @@ class EditorProvider extends Component {
 				SlotFillProvider,
 			],
 
+			[
+				HooksProvider,
+				{ ref: this.setHooks },
+			],
+
 			// APIProvider
 			//
 			//  - context.getAPISchema

editor/header/publish-dropdown/index.js

@@ -2,7 +2,7 @@
  * WordPress Dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { withAPIData, PanelBody } from '@wordpress/components';
+import { withAPIData, PanelBody, Slot } from '@wordpress/components';
 
 /**
  * Internal Dependencies
@@ -44,6 +44,7 @@ function PublishDropdown( { user, onSubmit } ) {
 					<PostSchedule />
 				</PanelBody>
 			}
+			<Slot name="publish-dropdown" />
 			<div className="editor-publish-dropdown__publish-button-container">
 				<PostPublishButton onSubmit={ onSubmit } />
 			</div>

editor/index.js

@@ -96,5 +96,8 @@ export function createEditorInstance( id, post, settings ) {
 		initializeMetaBoxes( metaBoxes ) {
 			provider.store.dispatch( initializeMetaBoxState( metaBoxes ) );
 		},
+		registerFill( fill, component ) {
+			provider.hooks.doAction( 'registerFill', fill, component );
+		},
 	};
 }

editor/layout/index.js

@@ -20,7 +20,12 @@ import TextEditor from '../modes/text-editor';
 import VisualEditor from '../modes/visual-editor';
 import DocumentTitle from '../document-title';
 import { removeNotice } from '../actions';
-import { MetaBoxes, AutosaveMonitor, UnsavedChangesWarning } from '../components';
+import {
+	MetaBoxes,
+	AutosaveMonitor,
+	UnsavedChangesWarning,
+	PluginFills,
+} from '../components';
 import {
 	getEditorMode,
 	isEditorSidebarOpened,
@@ -50,6 +55,7 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
 			</div>
 			{ isSidebarOpened && <Sidebar /> }
 			<Popover.Slot />
+			<PluginFills />
 		</div>
 	);
 }