fancybox 3 integration into wordpress Gutenberg gallery block

fancy-gallery.js

if ($('.wp-block-gallery')) {

  $('.blocks-gallery-item').click(function() {

    var galleryImages = $(this).closest('.wp-block-gallery').find('a');
    var gallery = [];

    galleryImages.each(function( index, galleryItem ) {

      var caption = $(this).parent().find('figcaption') ?  $(this).find('img').attr('alt') : $(this).parent().find('figcaption')  ;

      gallery.push({
        src : galleryItem.href,
        opts : {
          caption: caption
        }
      })
      
    });

    $.fancybox.open( gallery, { loop: false , index: $(this).closest('li').index() } );

    return false;
  });
}

2021/08/22 - Updated to wp 5.8

To get it working you need to create a WordPress gallery and in the Gallery settings tab, under "Link to:" select "Media File".
You need to load the fancybox script (http://fancybox.net/)