CODEWITHSUNDEEP
reactjswordpress
chandan_sinha
chandan_sinha

Reputation: 103

WordPress editor made in React?

I have added 'React Developer Tools' as Chrome extension in my browser which shows me which all sites are using ReactJS. While writing a post today, I noticed that the extension shows my WordPress editor is using the production build of React.

Extension shows the editor is made in React

I quickly visited my WordPress site but the extension doesn't trigger there.

Actual WordPress site

So what is happening here? Is this just a bug in the extension? I know that you can use WordPress as a headless CMS in React but that is certainly not the case here.

Upvotes: 0

Views: 479

Answers (2)

Carlos Martínez
Carlos Martínez

Reputation: 339

React is included at the core of WordPress and obviously, it embeds the production build.

The following is not the cleanest solution but is useful for theme development. It works by replacing the production build for the development one at enqueuing time. You may check for React version that your WordPress installation is using.

add_filter( 'script_loader_tag', function ( $tag, $handle, $src ) {
$replace = [
    'react' => 'https://unpkg.com/[email protected]/umd/react.development.js',
    'react-dom' => 'https://unpkg.com/[email protected]/umd/react-dom.development.js'
];
if (!array_key_exists($handle, $replace)) return $tag;
$newTag = str_replace($src, $replace[$handle], $tag);
$newTag = str_replace('><', ' crossorigin><', $tag);
return wp_get_environment_type() === 'development'
    ? $newTag
    : $tag; 
}, 10, 3 );

Make sure you have set the environment to 'development' in wp-config.php.

define( 'WP_ENVIRONMENT_TYPE', 'development' );

Upvotes: 0

Luca Fabbian
Luca Fabbian

Reputation: 215

I suppose your wordpress editor just uses a component written with react that is not required on the website (maybe the editor itself?).

It's not uncommon practice. For example, if you add "Facebook comment plugin" on your website, it will add react on the background. If you have the react extension enabled, it will tell you that react has been found, even if it's used just for a little part of the website.

Moreover, I presume your readers are not meant to use the editor, so it make sense that they do not have to download it since is not required for them.

To confirm that's the case, you can open chrome dev tools and use the "network" - it would tell you exactly what resources have been requested by the current page.

Upvotes: 1

Related Questions