Create IBE using React's in the isolated non-WP browser example

To match the new React 18 API.
Automattic · Mar 21, 2024 · b1241a0 · b1241a0
1 parent 4eac66c
commit b1241a0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/build-browser/isolated-block-editor.js b/build-browser/isolated-block-editor.js
diff --git a/src/browser/index.js b/src/browser/index.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 
-import { render, unmountComponentAtNode } from '@wordpress/element';
+import { createRoot, unmountComponentAtNode } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -68,20 +68,21 @@ function attachEditor( textarea, userSettings = {} ) {
 	const editor = document.createElement( 'div' );
 	editor.classList.add( 'editor' );
 
+	const editorReactRoot = createRoot( editor );
+
 	// Insert after the textarea, and hide it
 	// @ts-ignore
 	textarea.parentNode.insertBefore( editor, textarea.nextSibling );
 	textarea.style.display = 'none';
 
 	// Render the editor
-	render(
+	editorReactRoot.render(
 		<IsolatedBlockEditor
 			settings={ { ...settings, ...userSettings } }
 			onLoad={ ( parser, rawHandler ) => onLoad( textarea.value, parser, rawHandler ) }
 			onSaveContent={ ( content ) => saveBlocks( content, textarea ) }
 			onError={ () => document.location.reload() }
-		></IsolatedBlockEditor>,
-		editor
+		></IsolatedBlockEditor>
 	);
 }