Reuse React Components from Gutenberg in your WordPress Plugins

A few days ago, David completed a series of four blog posts introducing React. There he explained to you how to get started with React to easily create user interfaces in WordPress. Specifically, in part 2 of this series of posts David explained how to prepare the development environment and how to create a simple React component. Today we will see that besides creating your own React components, it is a very good idea to reuse existing components.

Since Gutenberg appeared in WordPress, JavaScript and the React framework have become a key part in the WordPress development stack. That is why if you are not used to these technologies, you should learn them as soon as possible. We did so and we completely re-coded our premium plugins using React. This implied transforming all the user interfaces that we already had with React components.

Since programmers shouldn’t reinvent the wheel, and within the software development world less is always more, today we are going to see how to reuse existing React components in WordPress.

The React Components Included in WordPress

WordPress provides more than 80 React components that you can reuse in your development, through Gutenberg’s @wordpress/components package:

In each of the component folders that you will find here on the Gutenberg project’s Github you have the JavaScript source code of each component as well as its CSS styles, and documentation to know how and when to use them.

Among the components that we at Nelio have used for our new React interfaces, it is worth highlighting Button and ButtonGroup to define buttons. All controllers for fields and options such as CheckboxControl, InputControl, NumberControl, RadioControl, RangeControl, SelectControl or TextControl. Or even TabPanel for tabbed interfaces or Popover and Modal for floating dialogs. And there are many more…

If we had to develop these components from scratch, surely we would still be programming the new React interfaces of our premium plugins now. Reusing existing components is the best thing you can do as a developer to save time. And those provided by Gutenberg for WordPress are perfect for your plugins.

How to Reuse WordPress React Components

Imagine that you want to use a button in your interface developed in React. Thanks to the existing components in Gutenberg you could use the Button component directly as you can see in the following example:

/**
 * WordPress dependencies
 */
import { Button } from '@wordpress/components';
 
export default function MyComponent() {
    return <Button>Click Me!</Button>;
}

You may be wondering that for a button you would not need to use the Gutenberg component and instead use a <button> tag directly. And you would be right.

However, by using the Gutenberg Button what you get is that your button has the same CSS style as the other buttons in the WordPress interface. Also, if the component and its styles are updated, something that has happened in almost every new version of WordPress, as a developer you will not have to do anything. The responsibility for updating the Gutenberg Button is not yours. If you used your own button, that’s something you would have to take care of.

To reuse an existing Gutenberg component, you just have to check if this component exists and import it into your code through the @wordpress/components package. As you can see in the code snippet above, we have imported the Button component from this package. And to have the package available within your project, you have to install it using the command npm install @wordpress/components in the terminal. But this was already explained by David in his posts, so I’m not going to cover this again.

What you do have to keep in mind is that for these components to take the WordPress styles you have to set wp-components as a dependency of your CSS style file when you enqueue it in WordPress with the PHP function wp_enqueue_style.

Unless your needs are not covered by those React components provided by Gutenberg, don’t reinvent the wheel and use them. The benefits of reusing existing components are extremely greater than using your own components.

Nelio Unlocker

Switch to WordPress safely while keeping your design and content

Improve your SEO today and boost your site speed by converting your pages into HTML, CSS, and WordPress standards. With zero technical knowledge required, you’ll only pay for what you need.

Try It Now

Gutenberg’s React Components Storybook

One of the novelties of Gutenberg is the Storybook that we can find on Github. Storybook is an open source tool that provides a sandbox for developing and viewing components in isolation. In the case of WordPress, it serves as documentation for the components, among other things.

Among the various options included in the Gutenberg Storybook we have the possibility of trying the block editor through the Playground menu. But the most interesting option is to be able to see the documentation of the Gutenberg components in a friendly way.

You just have to open the Components menu and there you will find the list of components that WordPress provides through the @wordpress/components package. You can explore each React component and see usage examples with their full JavaScript code.

For example, in the following screenshot you see examples of the Button component with the different properties that buttons may have. Then, in the Story tab you have the source code of the complete example:

In addition, some specific components include options within the Knobs tab to modify the properties of the component and preview the changes they cause in its interface.

One of these components is the TextControl, which is used to add a text field. In the following screenshot we see the Knob tab with different options to hide the component’s label or to change the texts of both the label and the help. So we can see how the component will look with the changes and decide how we want to use it in our React interfaces:

Not all components of the @wordpress/components package have a complete documentation in the Storybook, so you will have to go to the components package section on Github to see the latest version of the status of the React components in Gutenberg.

However, as the Gutenberg Storybook documentation is completed, it will become more and more interesting for developers. Having documentation of this type in WordPress is a luxury. Its usefulness is beyond discussion.

You have already seen everything that Gutenberg’s React components can provide for your WordPress developments. Instead of reinventing the wheel and developing your own base components, take a look at Gutenberg’s React components first to achieve consistency with the rest of the WordPress interface and save development and maintenance time. Reusing software is the key to being more efficient as WordPress developers.

Featured image by Morning Brew on Unsplash.