Enable concurrent mode by using createRoot to mount editor apps

Author: jsnajdr

packages/edit-post/README.md

@@ -476,20 +476,6 @@ _Returns_
 
 -   `WPComponent`: The component to be rendered.
 
-### reinitializeEditor
-
-Reinitializes the editor after the user chooses to reboot the editor after
-an unhandled error occurs, replacing previously mounted editor element using
-an initial state from prior to the crash.
-
-_Parameters_
-
--   _postType_ `Object`: Post type of the post to edit.
--   _postId_ `Object`: ID of the post to edit.
--   _target_ `Element`: DOM node in which editor is rendered.
--   _settings_ `?Object`: Editor settings object.
--   _initialEdits_ `Object`: Programmatic edits to apply initially, to be considered as non-user-initiated (bypass for unsaved changes prompt).
-
 ### store
 
 Store definition for the edit post namespace.

packages/edit-post/src/index.js

@@ -6,7 +6,7 @@ import {
 	registerCoreBlocks,
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
-import { render, unmountComponentAtNode } from '@wordpress/element';
+import { createRoot } from '@wordpress/element';
 import { dispatch, select } from '@wordpress/data';
 import { addFilter } from '@wordpress/hooks';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -19,49 +19,6 @@ import './plugins';
 import Editor from './editor';
 import { store as editPostStore } from './store';
 
-/**
- * Reinitializes the editor after the user chooses to reboot the editor after
- * an unhandled error occurs, replacing previously mounted editor element using
- * an initial state from prior to the crash.
- *
- * @param {Object}  postType     Post type of the post to edit.
- * @param {Object}  postId       ID of the post to edit.
- * @param {Element} target       DOM node in which editor is rendered.
- * @param {?Object} settings     Editor settings object.
- * @param {Object}  initialEdits Programmatic edits to apply initially, to be
- *                               considered as non-user-initiated (bypass for
- *                               unsaved changes prompt).
- */
-export function reinitializeEditor(
-	postType,
-	postId,
-	target,
-	settings,
-	initialEdits
-) {
-	unmountComponentAtNode( target );
-	const reboot = reinitializeEditor.bind(
-		null,
-		postType,
-		postId,
-		target,
-		settings,
-		initialEdits
-	);
-
-	render(
-		<Editor
-			settings={ settings }
-			onError={ reboot }
-			postId={ postId }
-			postType={ postType }
-			initialEdits={ initialEdits }
-			recovery
-		/>,
-		target
-	);
-}
-
 /**
  * Initializes and returns an instance of Editor.
  *
@@ -81,14 +38,6 @@ export function initializeEditor(
 	initialEdits
 ) {
 	const target = document.getElementById( id );
-	const reboot = reinitializeEditor.bind(
-		null,
-		postType,
-		postId,
-		target,
-		settings,
-		initialEdits
-	);
 
 	dispatch( preferencesStore ).setDefaults( 'core/edit-post', {
 		editorMode: 'visual',
@@ -185,15 +134,13 @@ export function initializeEditor(
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	render(
+	createRoot( target ).render(
 		<Editor
 			settings={ settings }
-			onError={ reboot }
 			postId={ postId }
 			postType={ postType }
 			initialEdits={ initialEdits }
-		/>,
-		target
+		/>
 	);
 }
 

packages/edit-site/src/index.js

@@ -7,7 +7,7 @@ import {
 	__experimentalRegisterExperimentalCoreBlocks,
 } from '@wordpress/block-library';
 import { dispatch } from '@wordpress/data';
-import { render, unmountComponentAtNode } from '@wordpress/element';
+import { createRoot } from '@wordpress/element';
 import {
 	__experimentalFetchLinkSuggestions as fetchLinkSuggestions,
 	__experimentalFetchUrlData as fetchUrlData,
@@ -53,10 +53,6 @@ export function reinitializeEditor( target, settings ) {
 		}
 	);
 
-	// This will be a no-op if the target doesn't have any React nodes.
-	unmountComponentAtNode( target );
-	const reboot = reinitializeEditor.bind( null, target, settings );
-
 	// We dispatch actions and update the store synchronously before rendering
 	// so that we won't trigger unnecessary re-renders with useEffect.
 	{
@@ -91,7 +87,7 @@ export function reinitializeEditor( target, settings ) {
 	window.addEventListener( 'dragover', ( e ) => e.preventDefault(), false );
 	window.addEventListener( 'drop', ( e ) => e.preventDefault(), false );
 
-	render( <App reboot={ reboot } />, target );
+	createRoot( target ).render( <App /> );
 }
 
 /**

packages/edit-widgets/src/index.js

@@ -8,7 +8,7 @@ import {
 	store as blocksStore,
 } from '@wordpress/blocks';
 import { dispatch } from '@wordpress/data';
-import { render, unmountComponentAtNode } from '@wordpress/element';
+import { createRoot } from '@wordpress/element';
 import {
 	registerCoreBlocks,
 	__experimentalGetCoreBlocks,
@@ -42,23 +42,6 @@ const disabledBlocks = [
 	...( ALLOW_REUSABLE_BLOCKS ? [] : [ 'core/block' ] ),
 ];
 
-/**
- * Reinitializes the editor after the user chooses to reboot the editor after
- * an unhandled error occurs, replacing previously mounted editor element using
- * an initial state from prior to the crash.
- *
- * @param {Element} target   DOM node in which editor is rendered.
- * @param {?Object} settings Editor settings object.
- */
-export function reinitializeEditor( target, settings ) {
-	unmountComponentAtNode( target );
-	const reboot = reinitializeEditor.bind( null, target, settings );
-	render(
-		<Layout blockEditorSettings={ settings } onError={ reboot } />,
-		target
-	);
-}
-
 /**
  * Initializes the block editor in the widgets screen.
  *
@@ -67,7 +50,6 @@ export function reinitializeEditor( target, settings ) {
  */
 export function initialize( id, settings ) {
 	const target = document.getElementById( id );
-	const reboot = reinitializeEditor.bind( null, target, settings );
 	const coreBlocks = __experimentalGetCoreBlocks().filter( ( block ) => {
 		return ! (
 			disabledBlocks.includes( block.name ) ||
@@ -105,10 +87,7 @@ export function initialize( id, settings ) {
 	// do this will result in errors in the default block parser.
 	// see: https://github.com/WordPress/gutenberg/issues/33097
 	setFreeformContentHandlerName( 'core/html' );
-	render(
-		<Layout blockEditorSettings={ settings } onError={ reboot } />,
-		target
-	);
+	createRoot( target ).render( <Layout blockEditorSettings={ settings } /> );
 }
 
 /**

packages/element/README.md

@@ -198,6 +198,10 @@ _Returns_
 
 -   `Object`: Ref object.
 
+### createRoot
+
+Undocumented declaration.
+
 ### findDOMNode
 
 Finds the dom node of a React component.
@@ -234,6 +238,10 @@ _Parameters_
 -   _element_ `import('./react').WPElement`: Element to hydrate.
 -   _target_ `HTMLElement`: DOM node into which element should be hydrated.
 
+### hydrateRoot
+
+Undocumented declaration.
+
 ### isEmptyElement
 
 Checks if the provided WP element is empty.

packages/element/src/react-platform.js

@@ -8,6 +8,7 @@ import {
 	hydrate,
 	unmountComponentAtNode,
 } from 'react-dom';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 
 /**
  * Creates a portal into which a component can be rendered.
@@ -27,6 +28,9 @@ export { createPortal };
  */
 export { findDOMNode };
 
+export { createRoot };
+
+export { hydrateRoot };
 /**
  * Renders a given element into the target DOM node.
  *