Add toolbar slot

README.md

@@ -168,10 +168,11 @@ The `IsolatedBlockEditor` also exports the following support component:
 
 - `EditorLoaded` - Include this to be notified when the editor is loading and has loaded
 - `DocumentSection` - Wrap up a component to appear in the document tab of the inspector
+- `ToolbarSlot` - Insert content into the toolbar
 
 ```js
 
-import IsolatedBlockEditor, { EditorLoaded, DocumentSection } from 'isolated-block-editor';
+import IsolatedBlockEditor, { EditorLoaded, DocumentSection, ToolbarSlot } from 'isolated-block-editor';
 
 render(
 	<IsolatedBlockEditor
@@ -182,6 +183,10 @@ render(
 	>
 		<EditorLoaded onLoaded={ () => {} } onLoading={ () => {} } />
 		<DocumentSection>Extra Information</DocumentSection>
+
+		<ToolbarSlot>
+			<button>Beep!</button>
+		</ToolbarSlot>
 	</IsolatedBlockEditor>,
 	document.querySelector( '#editor' )
 );

src/components/block-editor-toolbar/index.js

@@ -14,6 +14,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import MoreMenu from './more-menu';
 import HeaderToolbar from './header-toolbar';
 import Inspector from './inspector';
+import ToolbarSlot from './slot';
 import './style.scss';
 
 /** @typedef {import('../../store/editor/reducer').EditorMode} EditorMode */
@@ -57,6 +58,8 @@ const BlockEditorToolbar = ( props ) => {
 				</div>
 
 				<div className="edit-post-header__settings">
+					<ToolbarSlot.Slot />
+
 					{ inspector && (
 						<Button
 							icon={ cog }

src/components/block-editor-toolbar/slot.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const { Fill, Slot } = createSlotFill( 'IsolatedToolbar' );
+
+/**
+ * A Toolbar slot/fill
+ *
+ * @param {object} props Component props
+ * @param {object} props.children Child components to insert in the toolbar slot
+ * @returns object
+ */
+const ToolbarSlot = ( { children } ) => {
+	return <Fill>{ children }</Fill>;
+};
+
+ToolbarSlot.Slot = function ( props ) {
+	return <Slot>{ ( fills ) => fills }</Slot>;
+};
+
+export default ToolbarSlot;

src/index.js

@@ -24,6 +24,7 @@ import ContentSaver from './components/content-saver';
 import registerApiHandlers from './components/api-fetch';
 import storeHotSwapPlugin from './store/plugins/store-hot-swap';
 import DocumentSection from './components/document';
+import ToolbarSlot from './components/block-editor-toolbar/slot';
 
 // Export library components
 import EditorLoaded from './components/editor-loaded';
@@ -198,4 +199,4 @@ function IsolatedBlockEditor( props ) {
 
 export default withRegistryProvider( IsolatedBlockEditor );
 
-export { EditorLoaded, DocumentSection };
+export { EditorLoaded, DocumentSection, ToolbarSlot };

src/store/blocks/selectors.js

@@ -35,3 +35,12 @@ export function hasEditorUndo( state ) {
 export function hasEditorRedo( state ) {
 	return state.blocks.future.length > 0 && getEditorMode( state ) === 'visual';
 }
+
+/**
+ * Get current edit count
+ * @param {object} state - Current state
+ * @returns {number}
+ */
+export function getEditCount( state ) {
+	return state.blocks.present.editCount;
+}