From f336028364aaa8804f2cb0397fae69554c26d894 Mon Sep 17 00:00:00 2001
From: John Godley <johng75@gmail.com>
Date: Mon, 12 Jul 2021 10:40:42 +0100
Subject: [PATCH 1/3] Add a fill slot for the toolbar

This allows custom components to be inserted into the toolbar area
---
 src/components/block-editor-toolbar/index.js |  3 +++
 src/components/block-editor-toolbar/slot.js  | 17 +++++++++++++++++
 src/index.js                                 |  3 ++-
 3 files changed, 22 insertions(+), 1 deletion(-)
 create mode 100644 src/components/block-editor-toolbar/slot.js

diff --git a/src/components/block-editor-toolbar/index.js b/src/components/block-editor-toolbar/index.js
index 169c19374..76c71d175 100644
--- a/src/components/block-editor-toolbar/index.js
+++ b/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 }
diff --git a/src/components/block-editor-toolbar/slot.js b/src/components/block-editor-toolbar/slot.js
new file mode 100644
index 000000000..1f1e59417
--- /dev/null
+++ b/src/components/block-editor-toolbar/slot.js
@@ -0,0 +1,17 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const { Fill, Slot } = createSlotFill( 'IsolatedToolbar' );
+
+const ToolbarSlot = ( { children } ) => {
+	return <Fill>{ children }</Fill>;
+};
+
+ToolbarSlot.Slot = function ( props ) {
+	return <Slot>{ ( fills ) => fills }</Slot>;
+};
+
+export default ToolbarSlot;
diff --git a/src/index.js b/src/index.js
index 8959e2921..093a76b35 100644
--- a/src/index.js
+++ b/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 };

From 3154f287ebd5b23cd9ceafefb359710c527d7152 Mon Sep 17 00:00:00 2001
From: John Godley <johng75@gmail.com>
Date: Mon, 12 Jul 2021 10:41:59 +0100
Subject: [PATCH 2/3] Add a store selector to get edit count

Simple method to detect changes in history
---
 src/store/blocks/selectors.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/store/blocks/selectors.js b/src/store/blocks/selectors.js
index 851a1f169..459da0667 100644
--- a/src/store/blocks/selectors.js
+++ b/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;
+}
\ No newline at end of file

From cc36f495a7d39f585b16f48cd10d310d3cc02a6d Mon Sep 17 00:00:00 2001
From: John Godley <johng75@gmail.com>
Date: Thu, 29 Jul 2021 10:34:27 +0100
Subject: [PATCH 3/3] Update readme for ToolbarSlot

---
 README.md                                   | 7 ++++++-
 src/components/block-editor-toolbar/slot.js | 7 +++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e9f3550c0..18ccf00a8 100644
--- a/README.md
+++ b/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' )
 );
diff --git a/src/components/block-editor-toolbar/slot.js b/src/components/block-editor-toolbar/slot.js
index 1f1e59417..cc8def2ab 100644
--- a/src/components/block-editor-toolbar/slot.js
+++ b/src/components/block-editor-toolbar/slot.js
@@ -6,6 +6,13 @@ 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>;
 };