Unlocking the Power of Gutenberg: A Beginner’s Guide to Creating WordPress Plugins

What is Gutenberg?

Gutenberg is the revolutionary React-based WordPress editor that has transformed the way we create content. With its block-based architecture, Gutenberg provides a single piece of functionality accessible via the editor, making it easy to create and manage content.

The Two Faces of Gutenberg

Gutenberg comes in two versions: the Gutenberg plugin, which receives new features every two weeks, and the integration to WordPress core (called the WordPress editor), which consolidates new features every three to four months.

Blocks: The Building Blocks of Gutenberg

Blocks are high-level components that provide a single piece of functionality accessible via the editor. They make it easy to save content into the database and enable rich user interactions. With the emergence of plugins bundling several blocks together, the block directory within the editor allows us to install a block on the fly while editing a blog post.

Creating a New Project: Single-Block Plugins vs. Multi-Block Plugins

To create a new project, we need to decide whether to create a single-block plugin or a multi-block plugin. Single-block plugins are ideal for providing a specific functionality, while multi-block plugins are suitable for plugins that require multiple blocks to operate together.

Scaffolding a Single-Block Plugin

To scaffold a single-block plugin, we can use tools like the WP CLI scaffold command, the create-guten-block package, or the @wordpress/create-block package. The @wordpress/create-block package is the official solution, maintained by the team developing Gutenberg, and is always up to date with the project’s requirements.

npx @wordpress/create-block my-block

Scaffolding a Multi-Block Plugin

To create a multi-block plugin, we can use the @wordpress/create-block package to generate individual blocks and then combine them into a single plugin. This approach allows us to have independent blocks with their own package.json and webpack configuration.

npx @wordpress/create-block my-block-1
npx @wordpress/create-block my-block-2

Setting Up the Development Environment

To set up the development environment, we can use wp-env, a Docker-based tool that provides a local WordPress environment for building and testing plugins and themes. With wp-env, we can create a fully working instance of WordPress with our plugin installed and activated.

npx wp-env start

Hot Module Replacement: The Future of Development

Hot Module Replacement (HMR) is a feature that allows us to exchange, add, or remove modules while an application is running, without a full reload. With wp-env, we can provide support for HMR when developing the site, making it an essential tool for building sites through the upcoming full site editor.

module.exports = {
  //...
  devServer: {
    hot: true,
  },
};