Gutenberg : override core blocks rendering
Auteur(s) de l'article
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!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'sfunctions.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