Sync editor settings in layout effect (fixes autosave e2e)

packages/editor/src/components/local-autosave-monitor/index.js

@@ -3,7 +3,7 @@
  */
 import { useCallback, useEffect, useRef } from '@wordpress/element';
 import { ifCondition, usePrevious } from '@wordpress/compose';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useSelect, useDispatch, useRegistry } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { parse } from '@wordpress/blocks';
 import { store as noticesStore } from '@wordpress/notices';
@@ -53,19 +53,14 @@ const hasSessionStorageSupport = () => {
  * restore a local autosave, if one exists.
  */
 function useAutosaveNotice() {
-	const { postId, isEditedPostNew, hasRemoteAutosave } = useSelect(
+	const registry = useRegistry();
+	const { postId, isEditedPostNew } = useSelect(
 		( select ) => ( {
 			postId: select( editorStore ).getCurrentPostId(),
 			isEditedPostNew: select( editorStore ).isEditedPostNew(),
-			hasRemoteAutosave:
-				!! select( editorStore ).getEditorSettings().autosave,
 		} ),
 		[]
 	);
-	const { getEditedPostAttribute } = useSelect( editorStore );
-
-	const { createWarningNotice, removeNotice } = useDispatch( noticesStore );
-	const { editPost, resetEditorBlocks } = useDispatch( editorStore );
 
 	useEffect( () => {
 		let localAutosave = localAutosaveGet( postId, isEditedPostNew );
@@ -83,24 +78,31 @@ function useAutosaveNotice() {
 		const { post_title: title, content, excerpt } = localAutosave;
 		const edits = { title, content, excerpt };
 
-		{
-			// Only display a notice if there is a difference between what has been
-			// saved and that which is stored in sessionStorage.
-			const hasDifference = Object.keys( edits ).some( ( key ) => {
-				return edits[ key ] !== getEditedPostAttribute( key );
-			} );
-
-			if ( ! hasDifference ) {
-				// If there is no difference, it can be safely ejected from storage.
-				localAutosaveClear( postId, isEditedPostNew );
-				return;
-			}
+		const { getEditedPostAttribute, getEditorSettings } =
+			registry.select( editorStore );
+
+		// Only display a notice if there is a difference between what has been
+		// saved and that which is stored in sessionStorage.
+		const hasDifference = Object.keys( edits ).some( ( key ) => {
+			return edits[ key ] !== getEditedPostAttribute( key );
+		} );
+
+		if ( ! hasDifference ) {
+			// If there is no difference, it can be safely ejected from storage.
+			localAutosaveClear( postId, isEditedPostNew );
+			return;
 		}
 
+		const hasRemoteAutosave = !! getEditorSettings().autosave;
 		if ( hasRemoteAutosave ) {
 			return;
 		}
 
+		const { createWarningNotice, removeNotice } =
+			registry.dispatch( noticesStore );
+		const { editPost, resetEditorBlocks } =
+			registry.dispatch( editorStore );
+
 		const id = 'wpEditorAutosaveRestore';
 
 		createWarningNotice(
@@ -125,7 +127,7 @@ function useAutosaveNotice() {
 				],
 			}
 		);
-	}, [ isEditedPostNew, postId ] );
+	}, [ registry, postId, isEditedPostNew ] );
 }
 
 /**

packages/editor/src/components/provider/index.js

@@ -380,7 +380,8 @@ export const ExperimentalEditorProvider = withRegistryProvider(
 		}, [ post.type, post.id, setEditedPost, removeNotice ] );
 
 		// Synchronize the editor settings as they change.
-		useEffect( () => {
+		// Do it as a layout effect so that rendered UI with outdated settings is not painted.
+		useLayoutEffect( () => {
 			updateEditorSettings( settings );
 		}, [ settings, updateEditorSettings ] );
 

test/e2e/specs/editor/various/autosave.spec.js

@@ -293,7 +293,8 @@ test.describe( 'Autosave', () => {
 			name: 'Block: Paragraph',
 		} );
 		await paragraph.click();
-		await page.keyboard.type( ' after save' );
+		// Type slowly to ensure that autosave happens more than 1s after publish.
+		await page.keyboard.type( ' after save', { delay: 100 } );
 
 		// Trigger remote autosave.
 		await page.evaluate( () =>
@@ -327,21 +328,6 @@ test.describe( 'Autosave', () => {
 		await page.reload();
 		await page.waitForFunction( () => window?.wp?.data );
 
-		// FIXME: Occasionally, upon reload, there is no server-provided
-		// autosave value available, despite our having previously explicitly
-		// autosaved. The reasons for this are still unknown. Since this is
-		// unrelated to *local* autosave, until we can understand them, we'll
-		// drop this test's expectations if we don't have an autosave object
-		// available.
-		const stillHasRemoteAutosave = await page.evaluate(
-			() =>
-				window.wp.data.select( 'core/editor' ).getEditorSettings()
-					.autosave
-		);
-		if ( ! stillHasRemoteAutosave ) {
-			return;
-		}
-
 		// Only remote autosave notice should be applied.
 		await expect(
 			page.locator( '.components-notice__content' )