diff --git a/packages/edit-post/README.md b/packages/edit-post/README.md
index d8b3233e1e73f..ea3986a9fc3bd 100644
--- a/packages/edit-post/README.md
+++ b/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.
diff --git a/packages/edit-post/src/index.js b/packages/edit-post/src/index.js
index 2a276fccd62ba..a1ca01fccbb04 100644
--- a/packages/edit-post/src/index.js
+++ b/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,6 +42,7 @@ export function reinitializeEditor(
unmountComponentAtNode( target );
const reboot = reinitializeEditor.bind(
null,
+ root,
postType,
postId,
target,
@@ -47,7 +50,7 @@ export function reinitializeEditor(
initialEdits
);
- render(
+ root.render(
,
- 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(
,
- target
+ />
);
}
diff --git a/packages/element/README.md b/packages/element/README.md
index ab2f1a4d2bb0d..58aa3597461a1 100755
--- a/packages/element/README.md
+++ b/packages/element/README.md
@@ -198,6 +198,10 @@ _Returns_
- `Object`: Ref object.
+### createRoot
+
+Undocumented declaration.
+
### findDOMNode
Finds the dom node of a React component.
diff --git a/packages/element/src/react-platform.js b/packages/element/src/react-platform.js
index 4c29f7da795dd..2c03e96b32107 100644
--- a/packages/element/src/react-platform.js
+++ b/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 };
diff --git a/packages/element/src/react.js b/packages/element/src/react.js
index f21fe4574c24f..9086598bb8b35 100644
--- a/packages/element/src/react.js
+++ b/packages/element/src/react.js
@@ -26,6 +26,7 @@ import {
useDebugValue,
lazy,
Suspense,
+ createRoot,
} from 'react';
import { isString } from 'lodash';