Add experimental undo

src/components/default-settings/index.js

@@ -102,7 +102,6 @@ export default function applyDefaultSettings( settings ) {
 			disableCustomFontSizes: false,
 			disablePostFormats: true,
 			titlePlaceholder: __( 'Add title' ),
-			bodyPlaceholder: __( 'Start writing or type / to choose a block' ),
 			isRTL: false,
 			autosaveInterval: 60,
 			maxUploadFileSize: 0,
@@ -132,6 +131,8 @@ export default function applyDefaultSettings( settings ) {
 
 			...editor,
 
+			bodyPlaceholder: editor?.bodyPlaceholder ?? __( 'Start writing or type / to choose a block' ),
+
 			// @ts-ignore */}
 			availableLegacyWidgets: {},
 			hasPermissionsToManageWidgets: false,

src/components/editor-setup/index.js

@@ -2,9 +2,8 @@
  * WordPress dependencies
  */
 
-import { useEffect, useMemo } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useEffect } from '@wordpress/element';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 
 /**
@@ -28,16 +27,55 @@ import getEditorSettings from './editor-settings';
  * An initial setup is performed, and is then reset each time the editor is focussed. This ensures we are applying the right
  * settings for this particular editor.
  *
- * @param {Object} props - Component props
- * @param {BlockEditorSettings} props.currentSettings - Modified settings
- * @param {OnSettings} props.updateSettings - Update settings
- * @param {OnSettings} props.setupEditor - Set up the Gutenberg editor
- * @param {boolean} props.isEditing - Are we editing in this editor?
- * @param {boolean} props.topToolbar - Is the top toolbar enabled?
+ * @param {BlockEditorSettings} settings - Settings
  */
-function EditorSetup( props ) {
+export default function useEditorSetup( settings ) {
 	// @ts-ignore
-	const { currentSettings, updateSettings, setupEditor, isEditing, topToolbar, setupCoreEditor } = props;
+	const { undo, setupEditor } = useDispatch( 'isolated/editor' );
+	const { updateEditorSettings, setupEditorState: setupCoreEditor } = useDispatch( 'core/editor' );
+	const { updateSettings } = useDispatch( 'core/block-editor' );
+	const { isEditing, topToolbar, currentSettings } = useSelect( ( select ) => {
+		const { isEditing: isEditingSelect, isFeatureActive } = select( 'isolated/editor' );
+		// @ts-ignore
+		const { getBlockTypes } = select( blocksStore );
+		const blockTypes = getBlockTypes();
+		// @ts-ignore
+		const hasFixedToolbar = isFeatureActive( 'fixedToolbar' );
+
+		return {
+			// @ts-ignore
+			isEditing: isEditingSelect(),
+			topToolbar: hasFixedToolbar,
+			currentSettings: {
+				...settings,
+
+				editor: {
+					...getEditorSettings(
+						// @ts-ignore
+						settings.editor,
+						settings.iso,
+						blockTypes,
+						// Use the default preference, if set, otherwise use the feature
+						settings.iso?.defaultPreferences?.fixedToolbar !== undefined
+							? settings.iso?.defaultPreferences?.fixedToolbar
+							: hasFixedToolbar
+					),
+
+					// Reusable blocks
+					__experimentalReusableBlocks: [],
+					__experimentalFetchReusableBlocks: false,
+
+					// Experimental undo, to do some experimental things
+					__experimentalUndo: undo
+				},
+			}
+		};
+	}, [ settings ] );
+
+	function updateAllSettings( newSettings ) {
+		updateSettings( newSettings.editor );
+		updateEditorSettings( newSettings.editor );
+	}
 
 	// This is the initial setup
 	useEffect( () => {
@@ -52,7 +90,7 @@ function EditorSetup( props ) {
 		setupEditor( currentSettings );
 
 		// And Gutenberg
-		updateSettings( currentSettings );
+		updateAllSettings( currentSettings );
 
 		// Set up the post entities with some dummy data, ensuring that anything that uses post entities can work
 		setupCoreEditor(
@@ -66,75 +104,13 @@ function EditorSetup( props ) {
 
 	// Run whenever the editor is focussed, or the topToolbar setting or reusable blocks change
 	useEffect( () => {
-		if ( ! isEditing ) {
+		if ( !isEditing ) {
 			return;
 		}
 
 		// Setup Gutenberg for this editor, but only when focussed. This swaps allowed blocks and other capabilities
 		updateSettings( currentSettings );
 	}, [ isEditing, topToolbar, currentSettings?.editor?.reusableBlocks ] );
 
-	return null;
+	return settings;
 }
-
-// @ts-ignore
-export default compose( [
-	withSelect( ( select, { settings } ) => {
-		const { isEditing, isFeatureActive } = select( 'isolated/editor' );
-		const { getBlockTypes } = select( blocksStore );
-		const blockTypes = getBlockTypes();
-		const hasFixedToolbar = isFeatureActive( 'fixedToolbar' );
-		const reusableBlocks = select( 'core' ).getEntityRecords( 'postType', 'wp_block' );
-
-		return {
-			isEditing: isEditing(),
-			topToolbar: hasFixedToolbar,
-			currentSettings: useMemo(
-				() => ( {
-					...settings,
-
-					editor: {
-						...getEditorSettings(
-							settings.editor,
-							settings.iso,
-							blockTypes,
-							// Use the default preference, if set, otherwise use the feature
-							settings.iso?.defaultPreferences?.fixedToolbar !== undefined
-								? settings.iso?.defaultPreferences?.fixedToolbar
-								: hasFixedToolbar
-						),
-
-						// Reusable blocks
-						__experimentalReusableBlocks: [],
-						__experimentalFetchReusableBlocks: false,
-						// ...( settings.editor?.__experimentalReusableBlocks === false
-						// 	? {
-						// 			__experimentalReusableBlocks: reusableBlocks,
-						// 			__experimentalFetchReusableBlocks: false,
-						// 	  }
-						// 	: {
-						// 			__experimentalReusableBlocks: reusableBlocks,
-						// 			__experimentalFetchReusableBlocks: registry.dispatch( 'core/editor' )
-						// 				.__experimentalFetchReusableBlocks,
-						// 	  } ),
-					},
-				} ),
-				[ settings, blockTypes, hasFixedToolbar, reusableBlocks ]
-			),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { updateEditorSettings, setupEditorState: setupCoreEditor } = dispatch( 'core/editor' );
-		const { updateSettings } = dispatch( 'core/block-editor' );
-		const { setupEditor } = dispatch( 'isolated/editor' );
-
-		return {
-			setupEditor,
-			setupCoreEditor,
-			updateSettings: ( { editor } ) => {
-				updateSettings( editor );
-				updateEditorSettings( editor );
-			},
-		};
-	} ),
-] )( EditorSetup );

src/index.js

@@ -17,7 +17,7 @@ import { ShortcutProvider } from '@wordpress/keyboard-shortcuts';
 
 import BlockEditorContainer from './components/block-editor-container';
 import withRegistryProvider from './components/with-registry-provider';
-import EditorSetup from './components/editor-setup';
+import useEditorSetup from './components/editor-setup';
 import PatternMonitor from './components/pattern-monitor';
 import ContentSaver from './components/content-saver';
 import registerApiHandlers from './components/api-fetch';
@@ -124,6 +124,7 @@ import './style.scss';
  * @property {object[]} reusableBlocks
  * @property {object[]} styles
  * @property {object[]} defaultEditorStyles
+ * @property {string} bodyPlaceholder
  */
 
 /**
@@ -236,7 +237,6 @@ function IsolatedBlockEditor( props ) {
 		children,
 		onSaveContent,
 		onSaveBlocks,
-		settings,
 		__experimentalUndoManager,
 		__experimentalOnInput,
 		__experimentalOnChange,
@@ -245,8 +245,10 @@ function IsolatedBlockEditor( props ) {
 		...params
 	} = props;
 
+	// This needs to happen first to setup Gutenbergy things
 	useInitializeIsoEditor( { undoManager: __experimentalUndoManager } );
 
+	const settings = useEditorSetup( props.settings );
 	const editorSelection = useSelect(
 		( select ) => ( {
 			start: select( 'core/block-editor' ).getSelectionStart(),
@@ -263,7 +265,6 @@ function IsolatedBlockEditor( props ) {
 		<StrictMode>
 			<ShortcutProvider>
 				<ContentSaver onSaveBlocks={ onSaveBlocks } onSaveContent={ onSaveContent } />
-				<EditorSetup settings={ settings } />
 				<PatternMonitor />
 
 				<SlotFillProvider>