How to add a Lightbox to the Gutenberg Gallery Block

The Gallery Block from Gutenberg doesn't have a lightbox option. There are many plugins for that but we can do it manually, in a couple of minutes.

For the lightbox, we will use the same library as used in this tutorial , aka GLightbox.
To load the external files, we will use Advanced Scripts (aff link) , but you can use some other similar plugin, or do it manually. It's just faster and more convenient with AS.

First thing first, be sure to select Media File in the link option of your Gutenberg gallery :

Then in Advanced Scripts, add a new script to load this CSS file :
https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css

Add a new script to load the JS file :
https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js

And finally, add this code :

var lightbox = GLightbox({
  selector: '.blocks-gallery-item a'
});

That's all. It just takes 2 minutes to add a nice lightbox to your galleries ;)