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
@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 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
my-block-js is the handle used to register the wp script. This process does not feel proper, but nothing is perfect.
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.