Добавляем умное всплывающее окно fancybox 3 для Gutenberg галереи

Для начала, нужно подключить сам fancybox3 (архив с .js, .css файлами).

Задача: в редакторе gutenberg (или классическом) при выборе опции в галереи / одиночном изображении «ссылка на» — «медиафайл» — должно открываться модальное окно с увеличенным изображением, если же ссылка является не изображением, то есть обыкновенный url на стороннюю страницу, сайт — никаких всплывающих окон быть не должно.

Реализация выглядит следующим образом: нужно написать кастомную функцию Javascript, с помощью которой определим url на наличие расширения изображения — .jpg, .png…

function isImgLink(url) {
        if(typeof url !== 'string') return false;
        return(url.match(/^http[^\?]*.(jpg|jpeg|gif|png|tiff|bmp)(\?(.*))?$/gmi) != null);
    }

Проверим через консоль:

console.log(isImgLink('https://example.com/img.jpg')); // вернёт true
console.log(isImgLink('https://example.com/any-route?param=not-img-file.jpg')); // вернёт false
console.log(isImgLink('https://example.com/img.jpg?param=123')); // вернёт true

Далее, если url является ссылкой на изображение, то добавим атрибут data-fancybox:

//wp gutenberg gallery and classic editor
$('.wp-block-gallery figure a, .wp-block-image a, .gallery .gallery-item a').each(function() { 
    var linkHref = $(this).attr('href'); //get href 
    //if href is link img then attr fancybox
    if(isImgLink(linkHref)){
       $(this).attr('data-fancybox', 'images');
    }
});