Enabling React Development Mode in Gutenberg

The React development mode provides useful warnings and errors. It’s therefore useful when developing Gutenberg blocks.

However Gutenberg loads the minified production build of React by default, as it it offers better performance.

WordPress 5.0 Update

WordPress 5.0 contains a regression that does not allow React to be loaded in development mode, as described in this article, see Trac Ticket #45535. As a work around, you can download this code snippet, and enable it as a MU Plugin, or place it somewhere else in your custom code.

Enabling Script Debug

To use the React development mode in Gutenberg, you need to set the SCRIPT_DEBUG constant in your wp-config.php file to true.

define( 'SCRIPT_DEBUG', true );

As a result, Gutenberg will load the development version of React, and all other third party script dependencies.

Verifying the React Build

To verify which version of React is running, you can use the React Developer Tools for Chrome. It adds an icon to the browser that changes depending on which React version is running.

If you are on a website using the React production build, the icon will have dark background:

React DevTools icon on a website with production version of React.

However of the development build of React is loaded, the icon will have an orange background:

React DevTools icon on a website with production version of React

You are now ready to start developing your own Gutenberg blocks.

If you’re looking to learn Gutenberg development, check out my posts on learning Gutenberg development in 6 days, or the in-depth Gutenberg development learning guide.

Is there a development task that you struggle with? Do you want to know more about a particular WordPress API?

If so, please let me know by suggesting a topic for an article.