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/contributors/code/scripts.md

@@ -23,7 +23,7 @@ The editor includes a number of packages to enable various pieces of functionali
 | [Dom Ready](/packages/dom-ready/README.md)                                                   | wp-dom-ready                          | Execute callback after the DOM is loaded                                                                                                                      |
 | [Editor](/packages/editor/README.md)                                                         | wp-editor                             | Building blocks for WordPress editors                                                                                                                         |
 | [Edit Post](/packages/edit-post/README.md)                                                   | wp-edit-post                          | Edit Post Module for WordPress                                                                                                                                |
-| [Element](/packages/element/README.md)                                                       | wp-element                            | Element is, quite simply, an abstraction layer atop [React](https://reactjs.org/)                                                                             |
+| [Element](/packages/element/README.md)                                                       | wp-element                            | Element is a set of utilities to work with [React](https://reactjs.org/) elements and components                                                                      |
 | [Escape Html](/packages/escape-html/README.md)                                               | wp-escape-html                        | Escape HTML utils                                                                                                                                             |
 | [Hooks](/packages/hooks/README.md)                                                           | wp-hooks                              | A lightweight and efficient EventManager for JavaScript                                                                                                       |
 | [Html Entities](/packages/html-entities/README.md)                                           | wp-html-entities                      | HTML entity utilities for WordPress                                                                                                                           |

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,7 +18,7 @@ Go ahead and create these files using the following snippets:
 **src/index.js:**
 
 ```js
-import { render } from '@wordpress/element';
+import { render } from 'react-dom';
 
 function MyFirstApp() {
 	return <span>Hello from JavaScript!</span>;

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 { render } 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,8 @@ 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 { 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';

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() {

docs/how-to-guides/internationalization.md

@@ -24,7 +24,7 @@ function myguten_block_init() {
     wp_register_script(
         'myguten-script',
         plugins_url( 'block.js', __FILE__ ),
-        array( 'wp-blocks', 'wp-element', 'wp-i18n', 'wp-block-editor' )
+        array( 'wp-blocks', 'react', 'wp-i18n', 'wp-block-editor' )
     );
 
     register_block_type( 'myguten/simple', array(
@@ -67,8 +67,8 @@ registerBlockType( 'myguten/simple', {
 {% Plain %}
 
 ```js
+const el = React.createElement;
 const { __ } = wp.i18n;
-const el = wp.element.createElement;
 const { registerBlockType } = wp.blocks;
 const { useBlockProps } = wp.blockEditor;
 

docs/how-to-guides/javascript/js-build-setup.md

@@ -153,7 +153,7 @@ Likewise, you do not need to include `node_modules` or any of the above configur
 ## Dependency Management
 
 Using `wp-scripts` ver 5.0.0+ build step will also produce an `index.asset.php` file that contains an array of dependencies and a version number for your block. For our simple example above, it is something like:
-`array('dependencies' => array('wp-element', 'wp-polyfill'), 'version' => 'fc93c4a9675c108725227db345898bcc');`
+`array('dependencies' => array('react', 'wp-polyfill'), 'version' => 'fc93c4a9675c108725227db345898bcc');`
 
 Here is how to use this asset file to automatically set the dependency list for enqueuing the script. This prevents having to manually update the dependencies, it will be created based on the package imports used within your block.