WordPress Gutenberg - the fast way?

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

Disclaimer

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

Demo

I’ve coded this demo here to show how it looks.

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 wordpress.org 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

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

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.

I’ve received some warning from dependabot because of a subpackage called “url-regex”, though, so be careful.