Working on updating a WordPress tutorial

[paaljoachim]

Hey

--- I will update this issue as I am still working with ChatGPT on improving the code. ----

I am working with ChatGTP on getting code working correctly. It is working nicely with a Gallery Image block but it is not working with Single image blocks or Media & Text blocks.

Here is the code I currently have:

`
add_action('wp_enqueue_scripts', function () {
if (is_admin()) return;

// --- Load LightGallery CSS & JS ---
wp_enqueue_style(
    'lightgallery',
    'https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/css/lightgallery-bundle.min.css',
    [],
    '2.7.2'
);

wp_enqueue_script(
    'lightgallery',
    'https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/lightgallery.min.js',
    [],
    '2.7.2',
    true
);

wp_enqueue_script(
    'lightgallery-zoom',
    'https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/zoom/lg-zoom.min.js',
    ['lightgallery'],
    '2.7.2',
    true
);

wp_enqueue_script(
    'lightgallery-thumb',
    'https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/thumbnail/lg-thumbnail.min.js',
    ['lightgallery'],
    '2.7.2',
    true
);

wp_enqueue_script(
    'lightgallery-fullscreen',
    'https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/plugins/fullscreen/lg-fullscreen.min.js',
    ['lightgallery'],
    '2.7.2',
    true
);

// --- Initialize LightGallery for gallery blocks ---
add_action('wp_footer', function () { ?>
    <script>
    document.addEventListener('DOMContentLoaded', function () {
        // Select all gallery blocks
        const galleries = document.querySelectorAll('.wp-block-gallery');

        galleries.forEach(gallery => {
            const galleryLinks = gallery.querySelectorAll('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]');

            // Add captions from figcaption or alt text
            galleryLinks.forEach(link => {
                const figure = link.closest('figure');
                const caption = figure ? figure.querySelector('figcaption') : null;
                if (caption && caption.innerHTML.trim()) {
                    link.setAttribute('data-sub-html', caption.innerHTML.trim());
                } else {
                    const img = link.querySelector('img');
                    if (img && img.alt) link.setAttribute('data-sub-html', img.alt);
                }
            });

            // Initialize LightGallery on this gallery
            if (typeof lightGallery !== 'undefined') {
                lightGallery(gallery, {
                    selector: 'a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]',
                    plugins: [lgZoom, lgThumbnail, lgFullscreen],
                    download: false,
                    zoom: true,
                    thumbnail: true,
                    animateThumb: true,
                    showThumbByDefault: true,
                    closable: true,
                    speed: 600,
                    hideBarsDelay: 2000
                });
            }
        });
    });
    </script>

    <style>
    /* --- Hover effect on gallery images --- */
    .wp-block-gallery img {
        transition: filter 0.3s ease;
    }
    .wp-block-gallery a:hover img {
        filter: brightness(1.1);
    }

    /* --- Close button --- */
    .lg-toolbar .lg-close {
        display: block;
        opacity: 0.7;
        font-size: 22px;
        right: 20px;
        top: 25px;
        color: #fff;
        cursor: pointer;
        position: absolute;
        transition: opacity 0.3s ease, transform 0.2s ease;
    }
    .lg-toolbar .lg-close:hover {
        opacity: 1;
        transform: scale(1.1);
    }

    /* --- Fullscreen button --- */
    .lg-toolbar .lg-fullscreen {
        display: block;
        opacity: 0.7;
        font-size: 22px;
        right: 55px;
        top: 25px;
        color: #fff;
        cursor: pointer;
        position: absolute;
        transition: opacity 0.3s ease, transform 0.2s ease;
    }
    .lg-toolbar .lg-fullscreen:hover {
        opacity: 1;
        transform: scale(1.1);
    }

    /* --- Navigation arrows --- */
    .lg-prev, .lg-next {
        opacity: 0.4;
        transition: opacity 0.3s ease, transform 0.2s ease;
        color: #fff;
        font-size: 28px;
    }
    .lg-prev:hover, .lg-next:hover {
        opacity: 0.9;
        transform: scale(1.1);
    }

    /* --- Thumbnails --- */
    .lg-thumb-outer {
        background: rgba(0, 0, 0, 0.9);
        padding: 8px 0;
    }
    .lg-thumb-outer .lg-thumb-item {
        width: 80px;
        height: 60px;
        overflow: hidden;
        margin-right: 5px;
    }
    .lg-thumb-outer .lg-thumb-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 3px;
        border: 2px solid rgba(255,255,255,0.3);
    }
    .lg-thumb-outer .lg-thumb-item.active img,
    .lg-thumb-outer .lg-thumb-item:hover img {
        border-color: #fff;
    }
    </style>
<?php });

});
`