Gutenberg : override core blocks rendering

So, you're fiddling with the Gutenberg editor and it all seems like fun. You create some custom blocks (I highly recommend Create Guten Block for this) and realise how much it is fun but complex to build some efficient and clever blocks.

Wordpress, Gutenberg. Agence web Genève Lausanne

Suddenly, you find yourself in the need of implementing this neat and amazing Js gallery plugin which will make your website look so cool!

Creating your own gallery block seems like a tedious task, and the existing core/gallery works already perfectly in the backend. So let's simply change the way the gallery block is rendering on your website, so you can have you kick-ass look without having to worry about the editing experience, which has already been taken care of!

How?

The easiest way to achieve this, is to consider the gallery as a Dynamic block and re-declare its render through PHP:

Declare the block in you chosen php file using the init hook (typically inside of your them's functions.php file).
Use the exact same block name as the one you want to override. (here core/gallery)
Only use the render_callback key to target you own function

And ta-da! Nothing more is required, the gallery plugin still works the same in the backend, and you are free to experiment all you like with your new render.

This works for all core gutenberg blocks, which means you can take advantage of the great blocks already developped, and arrange their output as you wish. If you want some nice documentation about the core gutenberg blocks, I recommend Gutenberg Blocks: A Complete List & How to Use Them