Initial attempt at Undo/Redo

package.json

@@ -18,7 +18,9 @@
   },
   "devDependencies": {
     "@wordpress/env": "^2.0.0",
+    "@wordpress/data-controls": "^1.14.0",
     "@wordpress/eslint-plugin": "^7.2.0",
+    "@wordpress/keycodes": "^2.13.0",
     "@wordpress/scripts": "^12.2.0",
     "autoprefixer": "^9.8.6",
     "css-loader": "^4.3.0",

src/components/header/index.js

@@ -2,8 +2,14 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { EditorHistoryRedo } from '@wordpress/editor';
+
+import HistoryUndo from './undo';
 
 export default function Header() {
+	function handleUndo() {
+		console.log( 'undo' );
+	}
 	return (
 		<div
 			className="getdavesbe-header"
@@ -14,6 +20,9 @@ export default function Header() {
 			<h1 className="getdavesbe-header__title">
 				{ __( 'Standalone Block Editor', 'getdavesbe' ) }
 			</h1>
+
+			<HistoryUndo />
+			<EditorHistoryRedo />
 		</div>
 	);
 }

src/components/header/undo.js

@@ -0,0 +1,34 @@
+import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/components';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+import { displayShortcut } from '@wordpress/keycodes';
+import { undo as undoIcon } from '@wordpress/icons';
+
+function HistoryUndo( { hasUndo, undo, ...props } ) {
+	return (
+		<Button
+			{ ...props }
+			icon={ undoIcon }
+			label={ __( 'Undo' ) }
+			shortcut={ displayShortcut.primary( 'z' ) }
+			// If there are no undo levels we don't want to actually disable this
+			// button, because it will remove focus for keyboard users.
+			// See: https://github.com/WordPress/gutenberg/issues/3486
+			aria-disabled={ ! hasUndo }
+			onClick={ hasUndo ? undo : undefined }
+			className="editor-history__undo"
+		/>
+	);
+}
+
+const EnhancedHistoryUndo = compose( [
+	withSelect( ( select ) => ( {
+		hasUndo: select( 'getdavesbe' ).hasEditorUndo(),
+	} ) ),
+	withDispatch( ( dispatch ) => ( {
+		undo: dispatch( 'getdavesbe' ).undo,
+	} ) ),
+] )( HistoryUndo );
+
+export default EnhancedHistoryUndo;

src/index.js

@@ -3,11 +3,15 @@ import { render } from '@wordpress/element';
 import { registerCoreBlocks } from '@wordpress/block-library';
 import Editor from './editor';
 
+import './store';
+
 import './styles.scss';
 
-domReady( function() {
+domReady( function () {
 	const settings = window.getdaveSbeSettings || {};
 	registerCoreBlocks();
-	render( <Editor settings={ settings } />, document.getElementById( 'getdave-sbe-block-editor' ) );
+	render(
+		<Editor settings={ settings } />,
+		document.getElementById( 'getdave-sbe-block-editor' )
+	);
 } );
-

src/store/actions.js

@@ -0,0 +1,20 @@
+import { dispatch } from '@wordpress/data-controls';
+
+/**
+ * Returns an action object used in signalling that undo history should
+ * restore last popped state.
+ *
+ * @yield {Object} Action object.
+ */
+export function* redo() {
+	yield dispatch( 'core', 'redo' );
+}
+
+/**
+ * Returns an action object used in signalling that undo history should pop.
+ *
+ * @yield {Object} Action object.
+ */
+export function* undo() {
+	yield dispatch( 'core', 'undo' );
+}

src/store/index.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { registerStore } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import reducer from './reducer';
+import * as selectors from './selectors';
+import * as actions from './actions';
+
+/**
+ * Module Constants
+ */
+const MODULE_KEY = 'getdavesbe';
+
+const store = registerStore( MODULE_KEY, {
+	reducer,
+	selectors,
+	actions,
+} );
+
+window.getDaveStore = store;
+
+export default store;

src/store/reducer.js

@@ -0,0 +1,3 @@
+export default function ( state = [], action ) {
+	return state;
+}

src/store/selectors.js

@@ -0,0 +1,24 @@
+import { createRegistrySelector } from '@wordpress/data';
+
+/**
+ * Returns true if any past editor history snapshots exist, or false otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether undo history exists.
+ */
+export const hasEditorUndo = createRegistrySelector( ( select ) => () => {
+	return select( 'core' ).hasUndo();
+} );
+
+/**
+ * Returns true if any future editor history snapshots exist, or false
+ * otherwise.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether redo history exists.
+ */
+export const hasEditorRedo = createRegistrySelector( ( select ) => () => {
+	return select( 'core' ).hasRedo();
+} );