Update the documentation of the block editor and replace @wordpress/element with react

docs/contributors/code/coding-guidelines.md

@@ -529,7 +529,7 @@ alert( `My name is ${ name }.` );
     -   Example: `document.body.classList.toggle( 'has-focus', nodeRef.current?.contains( document.activeElement ) );` may wrongly _add_ the class, since [the second argument is optional](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList/toggle). If `undefined` is passed, it would not unset the class as it would when `false` is passed.
     -   Example: `<input value={ state.selected?.value.trim() } />` may inadvertently cause warnings in React by toggling between [controlled and uncontrolled inputs](https://reactjs.org/docs/uncontrolled-components.html). This is an easy trap to fall into when eagerly assuming that a result of `trim()` will always return a string value, overlooking the fact the optional chaining may have caused evaluation to abort earlier with a value of `undefined`.
 
-### `@wordpress/element` (React) Components
+### React Components
 
 It is preferred to implement all components as [function components](https://reactjs.org/docs/components-and-props.html), using [hooks](https://reactjs.org/docs/hooks-reference.html) to manage component state and lifecycle. With the exception of [error boundaries](https://reactjs.org/docs/error-boundaries.html), you should never encounter a situation where you must use a class component. Note that the [WordPress guidance on Code Refactoring](https://make.wordpress.org/core/handbook/contribute/code-refactoring/) applies here: There needn't be a concentrated effort to update class components in bulk. Instead, consider it as a good refactoring opportunity in combination with some other change.
 
@@ -756,7 +756,7 @@ When documenting an example, use the markdown <code>\`\`\`</code> code block to
  */
 ````
 
-### Documenting `@wordpress/element` (React) Components
+### Documenting React Components
 
 When possible, all components should be implemented as [function components](https://reactjs.org/docs/components-and-props.html#function-and-class-components), using [hooks](https://reactjs.org/docs/hooks-intro.html) for managing component lifecycle and state.
 

docs/explanations/architecture/modularity.md

@@ -43,7 +43,7 @@ function MyApp() {
 ```php
 // myplugin.php
 // Example of script registration dependending on the "components" and "element packages.
-wp_register_script( 'myscript', 'pathtomyscript.js', array ('wp-components', "wp-element" ) );
+wp_register_script( 'myscript', 'pathtomyscript.js', array ('wp-components', "react" ) );
 ```
 
 ```js

docs/how-to-guides/block-tutorial/applying-styles-with-stylesheets.md

@@ -58,8 +58,8 @@ registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 {% Plain %}
 
 ```js
-( function ( blocks, element, blockEditor ) {
-	var el = element.createElement;
+( function ( blocks, React, blockEditor ) {
+	var el = React.createElement;
 
 	blocks.registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 		edit: function ( props ) {
@@ -93,7 +93,7 @@ registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 			);
 		},
 	} );
-} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );
+} )( window.wp.blocks, window.React, window.wp.blockEditor );
 ```
 
 {% end %}
@@ -134,8 +134,8 @@ registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 {% Plain %}
 
 ```js
-( function ( blocks, element, blockEditor ) {
-	var el = element.createElement;
+( function ( blocks, React, blockEditor ) {
+	var el = React.createElement;
 
 	blocks.registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 		edit: function ( props ) {
@@ -155,7 +155,7 @@ registerBlockType( 'gutenberg-examples/example-02-stylesheets', {
 			);
 		},
 	} );
-} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );
+} )( window.wp.blocks, window.React, window.wp.blockEditor );
 ```
 
 {% end %}
@@ -180,8 +180,8 @@ Edit the asset file to include the block-editor dependency for the scripts.
 <?php return
 	array( 'dependencies' =>
 		array(
+			'react',
 			'wp-blocks',
-			'wp-element',
 			'wp-block-editor',
 			'wp-polyfill'
 		),

docs/how-to-guides/block-tutorial/block-controls-toolbar-and-sidebar.md

@@ -95,8 +95,8 @@ registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
 {% Plain %}
 
 ```js
-( function ( blocks, blockEditor, element ) {
-	var el = element.createElement;
+( function ( blocks, blockEditor, React ) {
+	var el = React.createElement;
 	var RichText = blockEditor.RichText;
 	var AlignmentToolbar = blockEditor.AlignmentToolbar;
 	var BlockControls = blockEditor.BlockControls;
@@ -176,7 +176,7 @@ registerBlockType( 'gutenberg-examples/example-04-controls-esnext', {
 			);
 		},
 	} );
-} )( window.wp.blocks, window.wp.blockEditor, window.wp.element );
+} )( window.wp.blocks, window.wp.blockEditor, window.React );
 ```
 
 {% end %}

docs/how-to-guides/block-tutorial/block-supports-in-static-blocks.md

@@ -67,8 +67,8 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
 {% Plain %}
 
 ```js
-( function ( blocks, blockEditor, element ) {
-	var el = element.createElement;
+( function ( blocks, blockEditor, React ) {
+	var el = React.createElement;
 	var RichText = blockEditor.RichText;
 	var useBlockProps = blockEditor.useBlockProps;
 
@@ -118,7 +118,7 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
 			);
 		},
 	} );
-} )( window.wp.blocks, window.wp.blockEditor, window.wp.element );
+} )( window.wp.blocks, window.wp.blockEditor, window.React );
 ```
 
 {% end %}

docs/how-to-guides/block-tutorial/creating-dynamic-blocks.md

@@ -55,8 +55,8 @@ registerBlockType( 'gutenberg-examples/example-dynamic', {
 {% Plain %}
 
 ```js
-( function ( blocks, element, data, blockEditor ) {
-	var el = element.createElement,
+( function ( blocks, React, data, blockEditor ) {
+	var el = React.createElement,
 		registerBlockType = blocks.registerBlockType,
 		useSelect = data.useSelect,
 		useBlockProps = blockEditor.useBlockProps;
@@ -86,7 +86,7 @@ registerBlockType( 'gutenberg-examples/example-dynamic', {
 	} );
 } )(
 	window.wp.blocks,
-	window.wp.element,
+	window.React,
 	window.wp.data,
 	window.wp.blockEditor
 );
@@ -187,8 +187,8 @@ registerBlockType( 'gutenberg-examples/example-dynamic', {
 {% Plain %}
 
 ```js
-( function ( blocks, element, serverSideRender, blockEditor ) {
-	var el = element.createElement,
+( function ( blocks, React, serverSideRender, blockEditor ) {
+	var el = React.createElement,
 		registerBlockType = blocks.registerBlockType,
 		ServerSideRender = serverSideRender,
 		useBlockProps = blockEditor.useBlockProps;
@@ -213,7 +213,7 @@ registerBlockType( 'gutenberg-examples/example-dynamic', {
 	} );
 } )(
 	window.wp.blocks,
-	window.wp.element,
+	window.React,
 	window.wp.serverSideRender,
 	window.wp.blockEditor
 );

docs/how-to-guides/block-tutorial/introducing-attributes-and-editable-fields.md

@@ -111,8 +111,8 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
 {% Plain %}
 
 ```js
-( function ( blocks, blockEditor, element ) {
-	var el = element.createElement;
+( function ( blocks, blockEditor, React ) {
+	var el = React.createElement;
 	var RichText = blockEditor.RichText;
 	var useBlockProps = blockEditor.useBlockProps;
 
@@ -162,7 +162,7 @@ registerBlockType( 'gutenberg-examples/example-03-editable-esnext', {
 			);
 		},
 	} );
-} )( window.wp.blocks, window.wp.blockEditor, window.wp.element );
+} )( window.wp.blocks, window.wp.blockEditor, window.React );
 ```
 
 {% end %}

docs/how-to-guides/block-tutorial/nested-blocks-inner-blocks.md

@@ -41,8 +41,8 @@ registerBlockType( 'gutenberg-examples/example-06', {
 {% Plain %}
 
 ```js
-( function ( blocks, element, blockEditor ) {
-	var el = element.createElement;
+( function ( blocks, React, blockEditor ) {
+	var el = React.createElement;
 	var InnerBlocks = blockEditor.InnerBlocks;
 	var useBlockProps = blockEditor.useBlockProps;
 
@@ -62,7 +62,7 @@ registerBlockType( 'gutenberg-examples/example-06', {
 			return el( 'div', blockProps, el( InnerBlocks.Content ) );
 		},
 	} );
-} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );
+} )( window.wp.blocks, window.React, window.wp.blockEditor );
 ```
 
 {% end %}
@@ -241,8 +241,8 @@ registerBlockType( 'gutenberg-examples/example-06', {
 {% Plain %}
 
 ```js
-( function ( blocks, element, blockEditor ) {
-	var el = element.createElement;
+( function ( blocks, React, blockEditor ) {
+	var el = React.createElement;
 	var InnerBlocks = blockEditor.InnerBlocks;
 	var useBlockProps = blockEditor.useBlockProps;
 	var useInnerBlocksProps = blockEditor.useInnerBlocksProps;
@@ -265,7 +265,7 @@ registerBlockType( 'gutenberg-examples/example-06', {
 			return el( 'div', blockProps, el( 'div', innerBlocksProps ) );
 		},
 	} );
-} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );
+} )( window.wp.blocks, window.React, window.wp.blockEditor );
 ```
 
 {% end %}
@@ -305,8 +305,8 @@ registerBlockType( 'gutenberg-examples/example-06', {
 {% Plain %}
 
 ```js
-( function ( blocks, element, blockEditor ) {
-	var el = element.createElement;
+( function ( blocks, React, blockEditor ) {
+	var el = React.createElement;
 	var InnerBlocks = blockEditor.InnerBlocks;
 	var useBlockProps = blockEditor.useBlockProps;
 	var useInnerBlocksProps = blockEditor.useInnerBlocksProps;
@@ -328,7 +328,7 @@ registerBlockType( 'gutenberg-examples/example-06', {
 			return el( 'div', innerBlocksProps );
 		},
 	} );
-} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );
+} )( window.wp.blocks, window.React, window.wp.blockEditor );
 ```
 
 {% end %}
@@ -372,8 +372,8 @@ registerBlockType( 'gutenberg-examples/example-06', {
 {% Plain %}
 
 ```js
-( function ( blocks, element, blockEditor ) {
-	var el = element.createElement;
+( function ( blocks, React, blockEditor ) {
+	var el = React.createElement;
 	var InnerBlocks = blockEditor.InnerBlocks;
 	var useBlockProps = blockEditor.useBlockProps;
 	var useInnerBlocksProps = blockEditor.useInnerBlocksProps;
@@ -398,7 +398,7 @@ registerBlockType( 'gutenberg-examples/example-06', {
 		},
 		// ...
 	} );
-} )( window.wp.blocks, window.wp.element, window.wp.blockEditor );
+} )( window.wp.blocks, window.React, window.wp.blockEditor );
 ```
 
 {% end %}

docs/how-to-guides/block-tutorial/writing-your-first-block-type.md

@@ -145,8 +145,8 @@ registerBlockType( 'gutenberg-examples/example-01-basic-esnext', {
 Add the following to `block.js`
 
 ```js
-( function ( blocks, element ) {
-	var el = element.createElement;
+( function ( blocks, React ) {
+	var el = React.createElement;
 
 	blocks.registerBlockType( 'gutenberg-examples/example-01-basic', {
 		edit: function () {
@@ -156,7 +156,7 @@ Add the following to `block.js`
 			return el( 'p', {}, 'Hola mundo (from the frontend).' );
 		},
 	} );
-} )( window.wp.blocks, window.wp.element );
+} )( window.wp.blocks, window.React );
 ```
 
 {% end %}
@@ -182,8 +182,8 @@ Create the asset file to load the dependencies for the scripts. The name of this
 <?php return
 	array( 'dependencies' =>
 		array(
+			'react',
 			'wp-blocks',
-			'wp-element',
 			'wp-polyfill'
 		),
 		'version' => '0.1'

docs/how-to-guides/data-basics/1-data-basics-setup.md

@@ -18,18 +18,18 @@ Go ahead and create these files using the following snippets:
 **src/index.js:**
 
 ```js
-import { render } from '@wordpress/element';
+import { createRoot } from 'react-dom';
 
 function MyFirstApp() {
 	return <span>Hello from JavaScript!</span>;
 }
 
+const root = createRoot( document.getElementById( 'my-first-gutenberg-app' ) );
 window.addEventListener(
 	'load',
 	function () {
-		render(
+		root.render(
 			<MyFirstApp />,
-			document.querySelector( '#my-first-gutenberg-app' )
 		);
 	},
 	false

docs/how-to-guides/data-basics/2-building-a-list-of-pages.md

@@ -150,8 +150,8 @@ The list of pages is short for now; however, the longer it grows, the harder it
 Let’s start by adding a search field:
 
 ```js
+import { useState } from 'react';
 import { SearchControl } from '@wordpress/components';
-import { useState, render } from '@wordpress/element';
 
 function MyFirstApp() {
 	const [searchTerm, setSearchTerm] = useState( '' );
@@ -211,8 +211,9 @@ The `searchTerm` is now used as a `search` query parameter when provided. Note t
 Finally, here’s how `MyFirstApp` looks once we wire it all together:
 
 ```js
+import { useState } from 'react';
+import { createRoot } from 'react-dom';
 import { SearchControl } from '@wordpress/components';
-import { useState, render } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 
@@ -359,8 +360,9 @@ And voilà! That's it.
 All the pieces are in place, great! Here’s the complete JavaScript code of our app:
 
 ```js
+import { useState } from 'react';
+import { createRoot } from 'react-dom';
 import { SearchControl, Spinner } from '@wordpress/components';
-import { useState, render } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { store as coreDataStore } from '@wordpress/core-data';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -421,12 +423,14 @@ function PagesList( { hasResolved, pages } ) {
 	);
 }
 
+const root = createRoot(
+	document.querySelector( '#my-first-gutenberg-app' )
+);
 window.addEventListener(
 	'load',
 	function () {
-		render(
-			<MyFirstApp />,
-			document.querySelector( '#my-first-gutenberg-app' )
+		root.render(
+			<MyFirstApp />
 		);
 	},
 	false

docs/how-to-guides/data-basics/5-adding-a-delete-button.md

@@ -142,7 +142,7 @@ wp.data.select( 'core' ).getLastEntityDeleteError( 'postType', 'page', 9 )
 Here's how we can apply it in `DeletePageButton`:
 
 ```js
-import { useEffect } from '@wordpress/element';
+import { useEffect } from 'react';
 const DeletePageButton = ({ pageId }) => {
 	// ...
 	const { error, /* ... */ } = useSelect(
@@ -252,8 +252,8 @@ Now we're ready to tell the user about any errors that may have occurred.
 With the SnackbarNotices component in place, we're ready to dispatch some notifications! Here's how:
 
 ```js
+import { useEffect } from 'react';
 import { store as noticesStore } from '@wordpress/notices';
-import { useEffect } from '@wordpress/element';
 function DeletePageButton( { pageId } ) {
 	const { createSuccessNotice, createErrorNotice } = useDispatch( noticesStore );
 	// useSelect returns a list of selectors if you pass the store handle
@@ -307,8 +307,8 @@ And that's it!
 All the pieces are in place, great! Here’s all the changes we've made in this chapter:
 
 ```js
+import { useState, useEffect } from 'react';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
 import { Button, Modal, TextControl } from '@wordpress/components';
 
 function MyFirstApp() {