Update README.md for @wordpress/element. createRoot not available until WordPress 6.2

[helgatheviking]

Mention that createRoot() is not available until React 18/WordPress 6.2

What?

Adding version-specific information about createRoot and an example for mounting an app that works in both WP 6.1 and 6.2.

Why?

This PR is necessary, because I spent an entire day wondering why createRoot was undefined despite following the example exactly. This is not available prior to React 18/WordPress 6.2 and many plugins/themes will need to support both versions.

How?

Explain the version limitations

Testing Instructions

Might warrant another PR because you can't actually drop the example into a WP template to test since the wp script isn't loaded until the footer (or so it appears to me since I was getting wp undefined errors).

To test, I inserted <div id="greeting"> in a template and then added the script inline:

/**
 * Mount example component
 */
function test_react_mount() {
	
    wp_add_inline_script( 'wp-element', '
				
        function Greeting( props ) {
		return wp.element.createElement(
			"span",
			null,
			"Hello " + props.toWhom + "!"
		);
	}

        if ( wp.element.createRoot ) {
        
	        wp.element
		        .createRoot( document.getElementById( "greeting" ) )
		        .render( wp.element.createElement( Greeting, { toWhom: "World" } ) );
        
        
        } else {
	        wp.element
		        .render( wp.element.createElement( Greeting, { toWhom: "World" } ), document.getElementById( "greeting" ) );
        }
	    ' );
}
add_action( 'wp_enqueue_scripts', 'test_react_mount', 99 );

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @helgatheviking! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[aurooba]

This is lovely, I echo @helgatheviking! It could also be worth adding JSX example, like the one @ryanwelcher shared on Twitter:

[helgatheviking]

Love that! I might even suggest not using <App /> as that will throw an error since App is not imported. If you're familiar with react you might recognize this, but it would be nice for newbies (ie: me) if you had something that actually worked right away.... like <h1>Hello World</h1>

[margolisj]

I also ran into this issue trying to update a script with createRoot for rendering a component via the add_menu_page api. So my understanding of this is that there are different versions of gutenberg-esque libraries floating around in Wordpress. The Gutenberg plugin version in the Page + Post editor (if installed) and WP Core version (accessibly everywhere else like the FSE or admin panel). Does anyone know if that understanding is correct?

[skorasaurus]

I also ran into this issue trying to update a script with createRoot for rendering a component via the add_menu_page api. So my understanding of this is that there are different versions of gutenberg-esque libraries floating around in Wordpress. The Gutenberg plugin version in the Page + Post editor (if installed) and WP Core version (accessibly everywhere else like the FSE or admin panel). Does anyone know if that understanding is correct?

If you have the Gutenberg plugin activated in your installation of wordpress, the page/post editor (e.g. https://yourwebsite.test/wp-admin/post.php?post=63&action=edit) and the site editor (e.g. yourwebsite.test/wp-admin/site-editor.php?) will have the newest published releases of gutenberg and https://make.wordpress.org/core/tag/gutenberg-new/ can keep you up to date if you wish to follow what's in the latest releases of gutenberg.

If you don't have the gutenberg plugin activated; you'll still have access to the site editor and page/post editor, it just won't be the newest version.

[gziolo]

Nice revision to the documentation 👍

[gziolo]

I applied changes to JSDoc comments to reflect changes between React 18 and 17.

@jsnajdr, is there anything else we should mark as new or deprecated in WP 6.2.0?

[gziolo]

All good with CI, all checks satisfied 🎉

Thank you so much for opening this PR.

[helgatheviking]

@gziolo Thanks for cleaning it up!