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.

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!

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

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