diff --git a/assets/src/blocks/Gallery/GalleryFrontend.js b/assets/src/blocks/Gallery/GalleryFrontend.js index 57deb8569..32e47c3ca 100644 --- a/assets/src/blocks/Gallery/GalleryFrontend.js +++ b/assets/src/blocks/Gallery/GalleryFrontend.js @@ -3,34 +3,15 @@ import {GalleryCarousel} from './GalleryCarousel'; import {GalleryThreeColumns} from './GalleryThreeColumns'; import {GalleryGrid} from './GalleryGrid'; import {getGalleryLayout, GALLERY_BLOCK_CLASSES} from './getGalleryLayout'; -import {getCaptionWithCredits} from './getCaptionWithCredits.js'; -import {Lightbox} from '../../components/Lightbox/Lightbox'; -import {useLightbox} from '../../components/Lightbox/useLightbox'; - -const imagesToItems = images => images.map( - image => ({ - src: image.image_src, - w: 0, - h: 0, - title: getCaptionWithCredits(image), - }) -); export const GalleryFrontend = ({ attributes = {}, - renderLightbox = false, }) => { const [images, setImages] = useState([]); - const [items, setItems] = useState([]); - const {isOpen, index, openLightbox, closeLightbox} = useLightbox(); const className = attributes.className ?? ''; const layout = getGalleryLayout(className, attributes.gallery_block_style ?? ''); const postType = document.body.getAttribute('data-post-type'); - useEffect(() => { - setItems(imagesToItems(images)); - }, [images]); - useEffect(() => { if (attributes.image_data.length && attributes.images.length) { setImages(attributes.images); @@ -54,16 +35,11 @@ export const GalleryFrontend = ({ {images.length ? ( <> - {layout === 'slider' && } - {layout === 'three-columns' && } - {layout === 'grid' && } + {layout === 'slider' && } + {layout === 'three-columns' && } + {layout === 'grid' && } ) : null} - - {(renderLightbox && items.length) ? - : - null - } ); }; diff --git a/assets/src/components/Lightbox/Lightbox.js b/assets/src/components/Lightbox/Lightbox.js deleted file mode 100644 index 40ee3b2be..000000000 --- a/assets/src/components/Lightbox/Lightbox.js +++ /dev/null @@ -1,118 +0,0 @@ -import {useEffect, useRef, useState} from '@wordpress/element'; - -import PhotoSwipe from '../../../../node_modules/photoswipe/dist/photoswipe.js'; -import PhotoSwipeUI_Default from '../../../../node_modules/photoswipe/dist/photoswipe-ui-default.js'; - -// `items` should be an array of object with this shape: -// [{ src, w, h, title }, ...] -// See: https://photoswipe.com/documentation/getting-started.html -export const Lightbox = ({index, isOpen, items, onClose = () => {}}) => { - let photoSwipeElement = useRef(null); - - const photoSwipeOptions = { - index: index || 0, - closeOnScroll: false, - history: false, - fullscreenEl: false, - zoomEl: false, - shareEl: false, - counterEl: false, - }; - - const [currentIndex, setCurrentIndex] = useState(photoSwipeOptions.index); - - useEffect(() => { - if (!isOpen) { - return; - } - - const photoSwipe = new PhotoSwipe(photoSwipeElement, PhotoSwipeUI_Default, items, photoSwipeOptions); - - // eslint-disable-next-line no-shadow - photoSwipe.listen('gettingData', (index, galleryItem) => { - if (galleryItem.w < 1 || galleryItem.h < 1) { - const imageSizeHandler = new Image(); - imageSizeHandler.onload = function() { - galleryItem.w = this.width; - galleryItem.h = this.height; - photoSwipe.updateSize(true); - }; - imageSizeHandler.src = galleryItem.src; - } - }); - - photoSwipe.listen('destroy', () => { - onClose(); - }); - - photoSwipe.listen('close', () => { - onClose(); - }); - - photoSwipe.listen('afterChange', () => { - setCurrentIndex(photoSwipe.getCurrentIndex()); - }); - - photoSwipe.init(); - }, [items, isOpen, index]); - - return wp.element.createPortal( -