DEV Community

Julien Maury
Julien Maury

Posted on • Updated on • Originally published at

WordPress Gutenberg - the fast way?

Let's see a basic example using a fantastic package.


There are still some issues with Gutenberg. A lot of people do not want (or can not) use it yet.

I don't want to talk about that specifically here. It's just a quick example to show how fast it seems now.

An excellent npm package

I'm using @wordpress/scripts. It has everything you need to create Gutenberg stuff, including blocks, sidebars, hooks, and more.

I've created a demo repository called Basic Block Gutenberg


I've coded some demo to show how it looks :

Basic Block Gutenberg

Basic example made with the amazing package @wordpress/scripts. Creating Gutenberg codes (blocks, sidebar, hooks) is a lot easier than before.


To get this basic block in your WordPress:

  • Download and activate the plugin
  • cd YOUR_PATH/wp-content/plugins/basic-block-gutenberg (replace YOUR_PATH with your path to the WordPress install)
  • yarn && yarn dev
  • enjoy

Use it as starter

It's a starter, nothing more, but it's the easiest structure. src and build folders are important. The @wordpress/scripts package uses them, but the build folder is automatically generated when you run a yarn build or a yarn dev

It's pretty basic, but it works.

The translation part

I've included the translation part, and it's still a nightmare if you don't use the platform and want to ship your translation files.

Once you got your .pot file, you need to copy it in your language like that:

cp languages/basic-block-gutenberg.pot languages/basic-block-gutenberg-fr_FR.po
Enter fullscreen mode Exit fullscreen mode

Of course, replace it with your language code.
However, you need to convert it to a JSON format that wp_set_script_translations will use.

There is some WP CLI tool for that:

wp i18n make-json languages
Enter fullscreen mode Exit fullscreen mode

But it still has some bugs. It generates files with weird names with md5 sequences, and you need to replace manually with basic-block-gutenberg-YOUR_LOCALE-my-block-js.json.

my-block-js is the handle used to register the wp script. This process does not feel proper, but nothing is perfect.

Wrap up

Hopefully, it would help you if you don't know how to start or don't know that npm package yet.

Install the 12.5.0 version (or newer) that fixes security issues if you want to test the @wordpress/scripts package on your project.

Discussion (1)

rindraraininoro profile image
Raininoro Rindra

I am more familiar with classic editor. That's why I am still using it.