What is the canonical way to use the version of React that ship with Gutenberg on the front end?

[johnhooks]

I want to create a Gutenberg block that uses React on the client rendered page (not the admin pages).

• Is React code split from the rest of Gutenberg?

• If so, how can I enqueue that specific bundled React to be used?

EDIT: I also asked the question on Stack Overflow, and have been told it's not possible. Is that true?

https://wordpress.stackexchange.com/q/414182/143387

[tomdevisser]

@johnhooks This might be useful https://stackoverflow.com/questions/51771125/wordpress-gutenberg-react-components-on-front-end

[johnhooks]

@tomdevisser

I'm still working out the details, but the best solution I've found so far is to add wp-element as a dependency of my enqueued script. When built with @wordpress/scripts it adds the Gutenberg version of React to the frontend under the global wp.react and transforms the JSX to use wp.react.createElement. It works, but I haven't confirmed this is the standard way to do this.

add_action( 'wp_enqueue_scripts', 'my_enqueue_plugin_js' ); // Loads on frontend

function my_enqueue_plugin_js() {
    wp_enqueue_script(
      'my-plugin-frontend',
      plugin_dir_url( __FILE__ ) . 'js/plugin.js',
      ['wp-element']
    );
}

[tomdevisser]

I don't think there is a "standard" way for this, but this looks good. Be aware that wp-element is a wrapper around certain functionality of React, but not all. And if you're using components in your backend from let's say wordpress/components, you might want to load more than just the wp-element script.

[johnhooks]

Understood. My intent in doing this for a stand alone component that doesn't have any dependencies on Gutenberg on the frontend, but will be wrapped with customizability in the block editor. My current usage is an audio player that displays the same UI when in the block editor and the frontend rendered result.