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.
@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
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
YOUR_PATHwith your path to the WordPress install)
yarn && yarn dev
Use it as starter
It's a starter, nothing more, but it's the easiest structure.
build folders are important.
@wordpress/scripts package uses them, but the
build folder is automatically generated when you run a
yarn build or a
It's pretty basic, but it works.
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.