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';