Move to the new root API for edit-post

packages/edit-post/README.md

@@ -484,6 +484,7 @@ an initial state from prior to the crash.
 
 _Parameters_
 
+-   _root_ `Object`: React Root.
 -   _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.

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, unmountComponentAtNode } from '@wordpress/element';
 import { dispatch } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 
@@ -22,6 +22,7 @@ import Editor from './editor';
  * an unhandled error occurs, replacing previously mounted editor element using
  * an initial state from prior to the crash.
  *
+ * @param {Object}  root         React Root.
  * @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.
@@ -31,6 +32,7 @@ import Editor from './editor';
  *                               unsaved changes prompt).
  */
 export function reinitializeEditor(
+	root,
 	postType,
 	postId,
 	target,
@@ -40,23 +42,23 @@ export function reinitializeEditor(
 	unmountComponentAtNode( target );
 	const reboot = reinitializeEditor.bind(
 		null,
+		root,
 		postType,
 		postId,
 		target,
 		settings,
 		initialEdits
 	);
 
-	render(
+	root.render(
 		<Editor
 			settings={ settings }
 			onError={ reboot }
 			postId={ postId }
 			postType={ postType }
 			initialEdits={ initialEdits }
 			recovery
-		/>,
-		target
+		/>
 	);
 }
 
@@ -79,8 +81,10 @@ export function initializeEditor(
 	initialEdits
 ) {
 	const target = document.getElementById( id );
+	const root = createRoot( target );
 	const reboot = reinitializeEditor.bind(
 		null,
+		root,
 		postType,
 		postId,
 		target,
@@ -147,15 +151,14 @@ export function initializeEditor(
 		} );
 	}
 
-	render(
+	root.render(
 		<Editor
 			settings={ settings }
 			onError={ reboot }
 			postId={ postId }
 			postType={ postType }
 			initialEdits={ initialEdits }
-		/>,
-		target
+		/>
 	);
 }
 

packages/element/README.md

@@ -198,6 +198,10 @@ _Returns_
 
 -   `Object`: Ref object.
 
+### createRoot
+
+Undocumented declaration.
+
 ### findDOMNode
 
 Finds the dom node of a React component.

packages/element/src/react-platform.js

@@ -6,6 +6,7 @@ import {
 	findDOMNode,
 	render,
 	unmountComponentAtNode,
+	createRoot,
 } from 'react-dom';
 
 /**
@@ -40,3 +41,5 @@ export { render };
  * @param {Element} target DOM node in which element is to be removed
  */
 export { unmountComponentAtNode };
+
+export { createRoot };

packages/element/src/react.js

@@ -26,6 +26,7 @@ import {
 	useDebugValue,
 	lazy,
 	Suspense,
+	createRoot,
 } from 'react';
 import { isString } from 'lodash';