Add a very primitive undo system

editor/BlockEditor.jsx

@@ -11,7 +11,7 @@ import blockLibraryStyle from '@wordpress/block-library/build-style/style.css?in
 import componentsStyle from '@wordpress/components/build-style/style.css?inline';
 import formatLibraryStyle from '@wordpress/format-library/build-style/style.css?inline';
 
-export default function BlockEditor() {
+export default function BlockEditor({ hasUndo, undo, hasRedo, redo }) {
 		const styles = [
 				{ css: componentsStyle },
 				{ css: blockLibraryCommon },
@@ -25,7 +25,7 @@ export default function BlockEditor() {
 						<FullscreenMode isActive={ true } />
 						<Sidebar />
 						<InterfaceSkeleton
-								header={ <Header /> }
+								header={ <Header hasUndo={hasUndo} undo={undo} hasRedo={hasRedo} redo={redo} /> }
 								content={ <BlockCanvas height="100%" styles={styles} /> }
 								sidebar={ <ComplementaryArea.Slot scope={ scope } /> }
 								secondarySidebar={ <BlockLibrary /> }

editor/Editor.jsx

@@ -1,4 +1,5 @@
 import { useState } from '@wordpress/element';
+import { useStateWithHistory } from '@wordpress/compose';
 import { BlockEditorProvider } from '@wordpress/block-editor';
 
 import BlockEditor from './BlockEditor';
@@ -6,15 +7,21 @@ import BlockEditor from './BlockEditor';
 import './editor.scss';
 
 export default function Editor() {
+		const { value, setValue, hasUndo, hasRedo, undo, redo } = useStateWithHistory( { blocks: [] } );
 		const [ blocks, updateBlocks ] = useState([]);
 
 		return (
 				<BlockEditorProvider
-						value={ blocks }
+						value={ value.blocks }
-						onInput={ updateBlocks }
+						onInput={ ( blocks, { selection }) => setValue( { blocks, selection }, true ) }
-						onChange={ updateBlocks }
+						onChange={ ( blocks, {selection}) => setValue( { blocks, selection }, false ) }
 				>
-						<BlockEditor/>
+						<BlockEditor
+								hasUndo={ hasUndo }
+								undo={ undo }
+								hasRedo={ hasRedo }
+								redo={ redo }
+						/>
 				</BlockEditorProvider>
 		);
 }

editor/Header.jsx

@@ -1,11 +1,14 @@
 import { PinnedItems } from '@wordpress/interface';
+import { Button } from '@wordpress/components';
 
 import { scope } from './constants';
 
-export default function Header() {
+export default function Header( { hasUndo, undo, hasRedo, redo } ) {
 		return (
 				<div className="tipus-header">
 						<div>
+								<Button variant="secondary" disabled={ !hasUndo } onClick={ undo }>Undo</Button>
+								<Button variant="secondary" disabled={ !hasRedo } onClick={ redo }>Redo</Button>
 						</div>
 						<div className="tipus-header__settings">
 								<PinnedItems.Slot scope={ scope } />

package-lock.json

@@ -12,6 +12,7 @@
 								"@wordpress/block-editor": "^13.0.0",
 								"@wordpress/block-library": "^9.0.0",
 								"@wordpress/components": "^28.0.0",
+								"@wordpress/compose": "^7.0.0",
 								"@wordpress/data": "^10.0.0",
 								"@wordpress/element": "^6.0.0",
 								"@wordpress/format-library": "^5.0.0",
@@ -3185,9 +3186,9 @@
 						"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
 				},
 				"node_modules/electron-to-chromium": {
-						"version": "1.4.814",
+						"version": "1.4.815",
-						"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.814.tgz",
+						"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.815.tgz",
-						"integrity": "sha512-GVulpHjFu1Y9ZvikvbArHmAhZXtm3wHlpjTMcXNGKl4IQ4jMQjlnz8yMQYYqdLHKi/jEL2+CBC2akWVCoIGUdw==",
+						"integrity": "sha512-OvpTT2ItpOXJL7IGcYakRjHCt8L5GrrN/wHCQsRB4PQa1X9fe+X9oen245mIId7s14xvArCGSTIq644yPUKKLg==",
 						"dev": true
 				},
 				"node_modules/emoji-regex": {
@@ -3986,9 +3987,9 @@
 						}
 				},
 				"node_modules/postcss": {
-						"version": "8.4.38",
+						"version": "8.4.39",
-						"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+						"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.39.tgz",
-						"integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+						"integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
 						"funding": [
 								{
 										"type": "opencollective",
@@ -4005,7 +4006,7 @@
 						],
 						"dependencies": {
 								"nanoid": "^3.3.7",
-								"picocolors": "^1.0.0",
+								"picocolors": "^1.0.1",
 								"source-map-js": "^1.2.0"
 						},
 						"engines": {

package.json

@@ -14,6 +14,7 @@
 				"@wordpress/block-editor": "^13.0.0",
 				"@wordpress/block-library": "^9.0.0",
 				"@wordpress/components": "^28.0.0",
+				"@wordpress/compose": "^7.0.0",
 				"@wordpress/data": "^10.0.0",
 				"@wordpress/element": "^6.0.0",
 				"@wordpress/format-library": "^5.0.0",