DEV Community

loading...

WordPress Gutenberg - the fast way?

jmau111 profile image Julien Maury Originally published at blog.julien-maury.dev Updated on ・2 min read

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

Instructions

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 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
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 (2)

pic
Editor guide
Collapse
jmau111 profile image
Julien Maury Author

I've updated the post and the GitHub demo as well with the new version or @wordpress/scripts. This 12.5.0 fix security issues.

Collapse
rindraraininoro profile image
Raininoro Rindra

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