Experiment with adding 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",
@@ -44,6 +46,7 @@
     "@wordpress/format-library": "^1.23.0",
     "@wordpress/i18n": "^3.15.0",
     "@wordpress/interface": "^0.8.0",
-    "@wordpress/media-utils": "^1.16.0"
+    "@wordpress/media-utils": "^1.16.0",
+    "redux-undo": "^1.0.1"
   }
 }

src/components/block-editor/index.js

@@ -23,7 +23,8 @@ import {
 import Sidebar from 'components/sidebar';
 
 function BlockEditor( { settings: _settings } ) {
-	const [ blocks, updateBlocks ] = useState( [] );
+	const blocks = useSelect((select) => select("getdavesbe").getBlocks());
+	const { updateBlocks } = useDispatch("getdavesbe");
 	const { createInfoNotice } = useDispatch( 'core/notices' );
 
 	const canUserCreateMedia = useSelect( ( select ) => {
@@ -47,17 +48,17 @@ function BlockEditor( { settings: _settings } ) {
 		};
 	}, [ canUserCreateMedia, _settings ] );
 
-	useEffect( () => {
-		const storedBlocks = window.localStorage.getItem( 'getdavesbeBlocks' );
+	// useEffect( () => {
+	// 	const storedBlocks = window.localStorage.getItem( 'getdavesbeBlocks' );
 
-		if ( storedBlocks?.length ) {
-			handleUpdateBlocks(() => parse(storedBlocks));
-			createInfoNotice( 'Blocks loaded', {
-				type: 'snackbar',
-				isDismissible: true,
-			} );
-		}
-	}, [] );
+	// 	if ( storedBlocks?.length ) {
+	// 		handleUpdateBlocks(() => parse(storedBlocks));
+	// 		createInfoNotice( 'Blocks loaded', {
+	// 			type: 'snackbar',
+	// 			isDismissible: true,
+	// 		} );
+	// 	}
+	// }, [] );
 
 	/**
 	 * Wrapper for updating blocks. Required as `onInput` callback passed to
@@ -70,8 +71,9 @@ function BlockEditor( { settings: _settings } ) {
 	}
 
 	function handlePersistBlocks( newBlocks ) {
-		updateBlocks( newBlocks );
-		window.localStorage.setItem( 'getdavesbeBlocks', serialize( newBlocks ) );
+		updateBlocks( newBlocks, true );
+		// persistBlocks(newBlocks);
+		// window.localStorage.setItem( 'getdavesbeBlocks', serialize( newBlocks ) );
 	}
 
 	return (

src/components/header/index.js

@@ -3,17 +3,27 @@
  */
 import { __ } from '@wordpress/i18n';
 
+
+import HistoryUndo from './undo';
+import HistoryRedo from "./redo";
+
 export default function Header() {
+	function handleUndo() {
+		console.log( 'undo' );
+	}
 	return (
 		<div
 			className="getdavesbe-header"
 			role="region"
-			aria-label={ __( 'Standalone Editor top bar.', 'getdavesbe' ) }
+			aria-label={__("Standalone Editor top bar.", "getdavesbe")}
 			tabIndex="-1"
 		>
 			<h1 className="getdavesbe-header__title">
-				{ __( 'Standalone Block Editor', 'getdavesbe' ) }
+				{__("Standalone Block Editor", "getdavesbe")}
 			</h1>
+
+			<HistoryUndo />
+			<HistoryRedo />
 		</div>
 	);
 }

src/components/header/redo.js

@@ -0,0 +1,35 @@
+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 { redo as redoIcon } from '@wordpress/icons';
+
+
+function HistoryRedo( { hasRedo, redo, ...props } ) {
+	return (
+		<Button
+			{ ...props }
+			icon={ redoIcon }
+			label={ __( 'Red' ) }
+			shortcut={ displayShortcut.primary( 'z' ) }
+			// If there are no redo 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={ ! hasRedo }
+			onClick={ hasRedo ? redo : undefined }
+			className="editor-history__redo"
+		/>
+	);
+}
+
+const EnhancedHistoryRedo = compose( [
+	withSelect( ( select ) => ( {
+		hasRedo: select( 'getdavesbe' ).hasRedo(),
+	} ) ),
+	withDispatch( ( dispatch ) => ( {
+		redo: dispatch( 'getdavesbe' ).redo,
+	} ) ),
+] )( HistoryRedo );
+
+export default EnhancedHistoryRedo;

src/components/header/undo.js

@@ -0,0 +1,35 @@
+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' ).hasUndo(),
+	} ) ),
+	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/action-types.js

@@ -0,0 +1,2 @@
+export const UPDATE_BLOCKS = "UPDATE_BLOCKS";
+export const PERSIST_BLOCKS = "PERSIST_BLOCKS";

src/store/actions.js

@@ -0,0 +1,21 @@
+import { dispatch } from '@wordpress/data-controls';
+import { UPDATE_BLOCKS, PERSIST_BLOCKS } from "./action-types";
+import { ActionCreators } from "redux-undo";
+
+
+export function undo() {
+	return ActionCreators.undo();
+}
+
+export function redo() {
+	return ActionCreators.redo();
+}
+
+export function updateBlocks( blocks, persist = false ) {
+	return {
+		type: persist ? PERSIST_BLOCKS : UPDATE_BLOCKS,
+		blocks,
+	};
+}
+
+

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,24 @@
+
+import undoable, { groupByActionTypes, includeAction } from "redux-undo";
+
+
+
+import { UPDATE_BLOCKS, PERSIST_BLOCKS } from "./action-types";
+
+function blocksReducer(state = [], action) {
+	switch (action.type) {
+		case UPDATE_BLOCKS:
+		case PERSIST_BLOCKS:
+			const { blocks } = action;
+
+			return {
+				blocks,
+			};
+	}
+
+	return state;
+}
+
+export default undoable(blocksReducer, {
+	filter: includeAction(PERSIST_BLOCKS),
+});

src/store/selectors.js

@@ -0,0 +1,19 @@
+import { createRegistrySelector } from '@wordpress/data';
+
+
+
+
+
+
+export const getBlocks = ( state ) => {
+	return state.present.blocks || [];
+}
+
+export const hasUndo = (state) => {
+	return state.past?.length;
+};
+
+export const hasRedo = (state) => {
+	return state.future?.length;
+};
+

src/styles.scss

@@ -4,6 +4,7 @@
 @import "~@wordpress/base-styles/breakpoints";
 @import "~@wordpress/base-styles/animations";
 @import "~@wordpress/base-styles/z-index";
+@import "~@wordpress/interface/src/style.scss";
 
 
 

webpack.config.js

@@ -15,7 +15,8 @@ module.exports = {
 		...defaultConfig.resolve,
 		// alias directories to paths you can use in import() statements
 		alias: {
-			components: path.join( paths.srcDir, 'components' ),
+			components: path.join(paths.srcDir, "components"),
+			store: path.join(paths.srcDir, "store"),
 		},
 	},
 };