From 7f2c48b6b67a19652a6c876a612294551c3d0ba1 Mon Sep 17 00:00:00 2001
From: Pedro Figueroa <59029273+mardelnet@users.noreply.github.com>
Date: Thu, 31 Oct 2024 12:15:04 +0100
Subject: [PATCH] PLANET-7446: Remove lightbox (#1259)

PLANET-7446: Force no lightbox

- Remove lightbox from paragraphs by class name
---
 assets/src/blocks/Gallery/GalleryFrontend.js  |  30 +-
 assets/src/components/Lightbox/Lightbox.js    | 118 ----
 .../Lightbox/setupLightboxForImages.js        |  54 --
 assets/src/components/Lightbox/useLightbox.js |  18 -
 assets/src/frontendIndex.js                   |   3 -
 assets/src/styles/lightbox.scss               |   1 -
 .../vendors/photoswipe/_main-settings.scss    |  19 -
 .../src/styles/vendors/photoswipe/main.scss   | 189 ------
 .../styles/vendors/photoswipe/p4-skin.scss    | 601 ------------------
 .../photoswipe/planet4-photoswipe.scss        |   5 -
 classes/class-loader.php                      |   7 -
 .../vendors/photoswipe/default-skin.png       | Bin 547 -> 0 bytes
 .../vendors/photoswipe/default-skin.svg       |   1 -
 .../images/vendors/photoswipe/preloader.gif   | Bin 866 -> 0 bytes
 webpack.config.js                             |   1 -
 15 files changed, 3 insertions(+), 1044 deletions(-)
 delete mode 100644 assets/src/components/Lightbox/Lightbox.js
 delete mode 100644 assets/src/components/Lightbox/setupLightboxForImages.js
 delete mode 100644 assets/src/components/Lightbox/useLightbox.js
 delete mode 100644 assets/src/styles/lightbox.scss
 delete mode 100644 assets/src/styles/vendors/photoswipe/_main-settings.scss
 delete mode 100644 assets/src/styles/vendors/photoswipe/main.scss
 delete mode 100644 assets/src/styles/vendors/photoswipe/p4-skin.scss
 delete mode 100644 assets/src/styles/vendors/photoswipe/planet4-photoswipe.scss
 delete mode 100644 public/images/vendors/photoswipe/default-skin.png
 delete mode 100644 public/images/vendors/photoswipe/default-skin.svg
 delete mode 100644 public/images/vendors/photoswipe/preloader.gif

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' && <GalleryCarousel onImageClick={openLightbox} images={images} />}
-          {layout === 'three-columns' && <GalleryThreeColumns onImageClick={openLightbox} images={images} postType={postType} />}
-          {layout === 'grid' && <GalleryGrid onImageClick={openLightbox} images={images} />}
+          {layout === 'slider' && <GalleryCarousel images={images} />}
+          {layout === 'three-columns' && <GalleryThreeColumns images={images} postType={postType} />}
+          {layout === 'grid' && <GalleryGrid images={images} />}
         </>
       ) : null}
-
-      {(renderLightbox && items.length) ?
-        <Lightbox isOpen={isOpen} index={index} items={items} onClose={closeLightbox} /> :
-        null
-      }
     </section>
   );
 };
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(
-    <div
-      className="pswp"
-      tabIndex="-1"
-      role="dialog"
-      aria-hidden="true"
-      ref={node => {
-        photoSwipeElement = node;
-      }}
-    >
-      <div className="pswp__bg" />
-      <div className="pswp__scroll-wrap">
-        <div className="pswp__container">
-          <div className="pswp__item" />
-          <div className="pswp__item" />
-          <div className="pswp__item" />
-        </div>
-
-        <div className="pswp__ui pswp__ui--hidden">
-          <div className="pswp__top-bar">
-            <div className="pswp__counter" />
-            <button className="pswp__button pswp__button--close" title="Close (Esc)" />
-            <button className="pswp__button pswp__button--share" title="Share" />
-            <button className="pswp__button pswp__button--fs" title="Toggle fullscreen" />
-            <button className="pswp__button pswp__button--zoom" title="Zoom in/out" />
-            <div className="pswp__preloader">
-              <div className="pswp__preloader__icn">
-                <div className="pswp__preloader__cut">
-                  <div className="pswp__preloader__donut" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <div className="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
-            <div className="pswp__share-tooltip" />
-          </div>
-          <button className="pswp__button pswp__button--arrow--left" title="Previous (arrow left)" />
-          <button className="pswp__button pswp__button--arrow--right" title="Next (arrow right)" />
-
-          <div className="pswp__caption">
-            <div className="pswp__caption__center" />
-          </div>
-          <div className="p4-caption-and-indicators">
-            <div className="p4-photoswipe-indicators-wrapper">
-              {
-                items.length > 1 && items.map((item, idx) =>
-                  <span className={`p4-photoswipe-indicator-click-area ${idx === currentIndex ? 'active' : ''}`} key={idx}>
-                    <span className="p4-photoswipe-indicator-bar" />
-                  </span>
-                )
-              }
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body
-  );
-};
-
diff --git a/assets/src/components/Lightbox/setupLightboxForImages.js b/assets/src/components/Lightbox/setupLightboxForImages.js
deleted file mode 100644
index 65fc5e57d..000000000
--- a/assets/src/components/Lightbox/setupLightboxForImages.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import {Lightbox} from './Lightbox';
-import {createRoot} from 'react-dom/client';
-
-const setupImageAndCaption = (lightBoxNode, imageSelector = 'img', captionSelector = null) => {
-  // Returns the callback for `forEach`
-  return (imageBlock, index) => {
-    const image = imageBlock.querySelector(imageSelector);
-
-    if (!image) {
-      return;
-    }
-
-    const item = {
-      src: image.src ? image.src : image.dataset.src,
-      w: 0,
-      h: 0,
-    };
-
-    const caption = imageBlock.querySelector(captionSelector);
-    if (caption) {
-      item.title = caption.innerHTML;
-    }
-    const rootElement = createRoot(lightBoxNode);
-
-    imageBlock.querySelector('img').addEventListener('click', () => rootElement.render(<Lightbox isOpen={true} index={index} items={[item]} />));
-  };
-};
-
-export const setupLightboxForImages = function() {
-  // We can't use `createPortal` outside `render()`,
-  // `React.render()` needs a node, even if it ends up being empty.
-  // See: https://github.com/facebook/react/issues/12653#issuecomment-382851495
-  const lightBoxNode = document.createElement('div');
-  lightBoxNode.style.position = 'fixed';
-
-  document.body.appendChild(lightBoxNode);
-
-  const imageBlocks = [...document.querySelectorAll('.wp-block-image:not(.force-no-lightbox)')];
-  // Images that are links should not have the lightbox
-  const imageBlocksWithoutLinks = imageBlocks.filter(imageBlock => {
-    const image = imageBlock.querySelector('img');
-    return image.parentElement.tagName !== 'A';
-  });
-  imageBlocksWithoutLinks.forEach(setupImageAndCaption(lightBoxNode, 'img', 'figcaption'));
-
-  const imagesWithCaptions = document.querySelectorAll('.post-content .wp-caption, .page-content .wp-caption');
-  imagesWithCaptions.forEach(setupImageAndCaption(lightBoxNode, 'img', '.wp-caption-text'));
-
-  const imagesInParagraphs = document.querySelectorAll('.post-content p:not(.wp-caption), .page-content p:not(.wp-caption)');
-  imagesInParagraphs.forEach(setupImageAndCaption(lightBoxNode, 'img'));
-
-  const mediaAndTextImages = document.querySelectorAll('.wp-block-media-text:not(.force-no-lightbox)');
-  mediaAndTextImages.forEach(setupImageAndCaption(lightBoxNode));
-};
diff --git a/assets/src/components/Lightbox/useLightbox.js b/assets/src/components/Lightbox/useLightbox.js
deleted file mode 100644
index 559ab1e4b..000000000
--- a/assets/src/components/Lightbox/useLightbox.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import {useState} from '@wordpress/element';
-
-export const useLightbox = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [index, setIndex] = useState(0);
-
-  const openLightbox = evt => {
-    evt.preventDefault();
-    setIsOpen(true);
-    setIndex(parseInt(evt.currentTarget.dataset.index));
-  };
-
-  const closeLightbox = () => {
-    setIsOpen(false);
-  };
-
-  return {isOpen, index, openLightbox, closeLightbox};
-};
diff --git a/assets/src/frontendIndex.js b/assets/src/frontendIndex.js
index 13070871d..7f99de947 100644
--- a/assets/src/frontendIndex.js
+++ b/assets/src/frontendIndex.js
@@ -5,7 +5,6 @@ import 'regenerator-runtime/runtime';
 
 import {HappypointFrontend} from './blocks/Happypoint/HappypointFrontend';
 import {ColumnsFrontend} from './blocks/Columns/ColumnsFrontend';
-import {setupLightboxForImages} from './components/Lightbox/setupLightboxForImages';
 import {setupParallax} from './components/Parallax/setupParallax';
 
 import {createRoot} from 'react-dom/client';
@@ -33,7 +32,5 @@ document.addEventListener('DOMContentLoaded', () => {
       rootElement.render(<BlockFrontend {...attributes.attributes} />);
     }
   );
-
-  setupLightboxForImages();
   setupParallax();
 });
diff --git a/assets/src/styles/lightbox.scss b/assets/src/styles/lightbox.scss
deleted file mode 100644
index 5edb810bc..000000000
--- a/assets/src/styles/lightbox.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "vendors/photoswipe/planet4-photoswipe";
diff --git a/assets/src/styles/vendors/photoswipe/_main-settings.scss b/assets/src/styles/vendors/photoswipe/_main-settings.scss
deleted file mode 100644
index 79a319548..000000000
--- a/assets/src/styles/vendors/photoswipe/_main-settings.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// This file mimics: https://github.com/dimsemenov/PhotoSwipe/blob/v4.1.3/src/css/_main-settings.scss
-
-$pswp__show-hide-transition-duration: 333ms !default;
-$pswp__controls-transition-duration: 333ms !default;
-$pswp__background-color: rgba(0, 0, 0, .85) !default;
-$pswp__placeholder-color: #111 !default;
-$pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
-$pswp__root-z-index: 150000 !default;
-$pswp__assets-path: "../../public/images/vendors/photoswipe/" !default; // path to skin assets folder (preloader, PNG and SVG sprite)
-$pswp__error-text-color: #111 !default; // "Image not loaded" text color
-$pswp__include-minimal-style: true !default;
-
-// Planet4 specific rules
-$p4-pswp-counter-text-color: #111;
-$p4-pswp-caption-text-color: black;
-$p4-pswp-top-bar-background: white;
-$p4-pswp-caption-background: white;
-$p4-pswp-arrows-background: white;
-$p4-pswp-button-opacity: 1;
diff --git a/assets/src/styles/vendors/photoswipe/main.scss b/assets/src/styles/vendors/photoswipe/main.scss
deleted file mode 100644
index 89ba20af3..000000000
--- a/assets/src/styles/vendors/photoswipe/main.scss
+++ /dev/null
@@ -1,189 +0,0 @@
-// This file was obtained from: https://github.com/dimsemenov/PhotoSwipe/blob/v4.1.3/src/css/main.scss
-
-/* pswp = photoswipe */
-.pswp {
-  display: none;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  left: 0;
-  top: 0;
-  overflow: hidden;
-  touch-action: none;
-  z-index: $pswp__root-z-index;
-  text-size-adjust: 100%;
-  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
-  backface-visibility: hidden;
-  outline: none;
-
-  @if $pswp__box-sizing-border-box == true {
-    * {
-      box-sizing: border-box;
-    }
-  }
-
-  img {
-    max-width: none;
-  }
-}
-
-/* style is added when JS option showHideOpacity is set to true */
-.pswp--animate_opacity {
-  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
-  opacity: 0.001;
-  will-change: opacity;
-  /* for open/close transition */
-  transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
-}
-
-.pswp--open {
-  display: block;
-}
-
-.pswp--zoom-allowed .pswp__img {
-  /* autoprefixer: off */
-  cursor: -webkit-zoom-in;
-  cursor: -moz-zoom-in;
-  cursor: zoom-in;
-}
-
-.pswp--zoomed-in .pswp__img {
-  /* autoprefixer: off */
-  cursor: -webkit-grab;
-  cursor: -moz-grab;
-  cursor: grab;
-}
-
-.pswp--dragging  .pswp__img {
-  /* autoprefixer: off */
-  cursor: -webkit-grabbing;
-  cursor: -moz-grabbing;
-  cursor: grabbing;
-}
-
-/*
-  Background is added as a separate element.
-  As animating opacity is much faster than animating rgba() background-color.
-*/
-
-.pswp__bg {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  background: $pswp__background-color;
-  opacity: 0;
-  transform: translateZ(0);
-  backface-visibility: hidden;
-  will-change: opacity;
-  /* for open/close transition */
-  transition: opacity $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
-}
-
-.pswp__scroll-wrap {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.pswp__container,
-.pswp__zoom-wrap {
-  touch-action: none;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  backface-visibility: hidden;
-}
-
-/* Prevent selection and tap highlights */
-.pswp__container,
-.pswp__img {
-  user-select: none;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  -webkit-touch-callout: none;
-}
-
-.pswp__zoom-wrap {
-  position: absolute;
-  width: 100%;
-  transform-origin: left top;
-  /* for open/close transition */
-  transition: transform $pswp__show-hide-transition-duration cubic-bezier(.4, 0, .22, 1);
-}
-
-.pswp--animated-in {
-  .pswp__bg,
-  .pswp__zoom-wrap {
-    transition: none;
-  }
-}
-
-.pswp__item {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  overflow: hidden;
-}
-
-.pswp__img {
-  position: absolute;
-  width: auto;
-  height: auto;
-  top: 0;
-  left: 0;
-}
-
-/*
-  stretched thumbnail or div placeholder element (see below)
-  style is added to avoid flickering in webkit/blink when layers overlap
-*/
-
-.pswp__img--placeholder {
-  backface-visibility: hidden;
-}
-
-/*
-  div element that matches size of large image
-  large image loads on top of it
-*/
-
-.pswp__img--placeholder--blank {
-  background: $pswp__placeholder-color;
-}
-
-.pswp--ie .pswp__img {
-  width: 100% !important;
-  height: auto !important;
-  left: 0;
-  top: 0;
-}
-
-/*
-  Error message appears when image is not loaded
-  (JS option errorMsg controls markup)
-*/
-
-.pswp__error-msg {
-  position: absolute;
-  left: 0;
-  top: 50%;
-  width: 100%;
-  text-align: center;
-  font-size: 14px;
-  line-height: 16px;
-  margin-top: -8px;
-  color: $pswp__error-text-color;
-}
-
-.pswp__error-msg a {
-  color: $pswp__error-text-color;
-  text-decoration: underline;
-}
diff --git a/assets/src/styles/vendors/photoswipe/p4-skin.scss b/assets/src/styles/vendors/photoswipe/p4-skin.scss
deleted file mode 100644
index 1e1b6288f..000000000
--- a/assets/src/styles/vendors/photoswipe/p4-skin.scss
+++ /dev/null
@@ -1,601 +0,0 @@
-// This file is based in: https://github.com/dimsemenov/PhotoSwipe/blob/v4.1.3/src/css/default-skin/default-skin.scss
-// ...with some minor tweaks/additions.
-
-/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
-
-/*
-
-Contents:
-
-1. Buttons
-2. Share modal and links
-3. Index indicator ("1 of X" counter)
-4. Caption
-5. Loading indicator
-6. Additional styles (root element, top bar, idle state, hidden state, etc.)
-
-*/
-
-// PhotoSwipe uses Autoprefixer, so vendor prefixed are added automatically when needed.
-
-/*
-
-1. Buttons
-
-*/
-
-/* <button> css reset */
-.pswp__button {
-  width: 44px;
-  height: 44px;
-  position: relative;
-  background: none;
-  cursor: pointer;
-  overflow: visible;
-  appearance: none;
-  display: block;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  float: right;
-  opacity: $p4-pswp-button-opacity;
-  transition: opacity 0.2s;
-  box-shadow: none;
-
-  &:focus,
-  &:hover {
-    opacity: 1;
-  }
-
-  &:active {
-    outline: none;
-    opacity: $p4-pswp-button-opacity;
-  }
-
-  &::-moz-focus-inner {
-    padding: 0;
-    border: 0;
-  }
-}
-
-/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
-.pswp__ui--over-close .pswp__button--close {
-  opacity: 1;
-}
-
-.pswp__button,
-.pswp__button--arrow--left:before,
-.pswp__button--arrow--right:before {
-  background: url(#{$pswp__assets-path}default-skin.svg) 0 0 no-repeat;
-  background-size: 264px 88px;
-  width: 44px;
-  height: 44px;
-  border-radius: 44px;
-}
-
-@media (-webkit-min-device-pixel-ratio: 1.1),  (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
-
-  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
-  .pswp--svg .pswp__button,
-  .pswp--svg .pswp__button--arrow--left:before,
-  .pswp--svg .pswp__button--arrow--right:before {
-    background-image: url(#{$pswp__assets-path}default-skin.svg);
-  }
-
-  .pswp--svg .pswp__button--arrow--left,
-  .pswp--svg .pswp__button--arrow--right {
-    background: none;
-  }
-}
-
-.pswp__button--close {
-  background-position: 0 -44px;
-}
-
-.pswp__button--share {
-  background-position: -44px -44px;
-}
-
-.pswp__button--fs {
-  display: none;
-}
-
-.pswp--supports-fs .pswp__button--fs {
-  display: block;
-}
-
-.pswp--fs .pswp__button--fs {
-  background-position: -44px 0;
-}
-
-.pswp__button--zoom {
-  display: none;
-  background-position: -88px 0;
-}
-
-.pswp--zoom-allowed .pswp__button--zoom {
-  display: block;
-}
-
-.pswp--zoomed-in .pswp__button--zoom {
-  background-position: -132px 0;
-}
-
-/* no arrows on touch screens */
-.pswp--touch {
-  .pswp__button--arrow--left,
-  .pswp__button--arrow--right {
-    visibility: hidden;
-  }
-}
-
-/*
-Arrow buttons hit area
-(icon is added to :before pseudo-element)
-*/
-
-.pswp__button--arrow--left,
-.pswp__button--arrow--right {
-  background: none;
-  top: 50%;
-  margin-top: -50px;
-  width: 70px;
-  height: 100px;
-  position: absolute;
-}
-
-.pswp__button--arrow--left {
-  left: 0;
-}
-
-.pswp__button--arrow--right {
-  right: 0;
-}
-
-.pswp__button--arrow--left:before,
-.pswp__button--arrow--right:before {
-  content: "";
-  top: 35px;
-  background-color: $p4-pswp-arrows-background;
-  height: 32px;
-  width: 32px;
-  position: absolute;
-  border-radius: 32px;
-}
-
-.pswp__button--arrow--left:before {
-  left: 6px;
-  background-position: -138px -44px;
-}
-
-.pswp__button--arrow--right:before {
-  right: 6px;
-  background-position: -94px -44px;
-}
-
-/*
-2. Share modal/popup and links
-*/
-
-.pswp__counter,
-.pswp__share-modal {
-  user-select: none;
-}
-
-.pswp__share-modal {
-  display: block;
-  background: rgba(0, 0, 0, 0.5);
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  padding: 10px;
-  position: absolute;
-  z-index: $pswp__root-z-index + 100;
-  opacity: 0;
-  transition: opacity 0.25s ease-out;
-  backface-visibility: hidden;
-  will-change: opacity;
-}
-
-.pswp__share-modal--hidden {
-  display: none;
-}
-
-.pswp__share-tooltip {
-  z-index: $pswp__root-z-index + 120;
-  position: absolute;
-  background: #fff;
-  top: 56px;
-  border-radius: 2px;
-  display: block;
-  width: auto;
-  right: 44px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
-  transform: translateY(6px);
-  transition: transform 0.25s;
-  backface-visibility: hidden;
-  will-change: transform;
-
-  a {
-    display: block;
-    padding: 8px 12px;
-    color: #000;
-    text-decoration: none;
-    font-size: 14px;
-    line-height: 18px;
-
-    &:hover {
-      text-decoration: none;
-      color: #000;
-    }
-
-    &:first-child {
-      /* round corners on the first/last list item */
-      border-radius: 2px 2px 0 0;
-    }
-
-    &:last-child {
-      border-radius: 0 0 2px 2px;
-    }
-  }
-}
-
-.pswp__share-modal--fade-in {
-  opacity: 1;
-
-  .pswp__share-tooltip {
-    transform: translateY(0);
-  }
-}
-
-/* increase size of share links on touch devices */
-.pswp--touch .pswp__share-tooltip a {
-  padding: 16px 12px;
-}
-
-a.pswp__share--facebook {
-  &:before {
-    content: "";
-    display: block;
-    width: 0;
-    height: 0;
-    position: absolute;
-    top: -12px;
-    right: 15px;
-    border: 6px solid rgba(0, 0, 0, 0);
-    border-bottom-color: #fff;
-    -webkit-pointer-events: none;
-    -moz-pointer-events: none;
-    pointer-events: none;
-  }
-
-  &:hover {
-    background: #3e5c9a;
-    color: #fff;
-
-    &:before {
-      border-bottom-color: #3e5c9a;
-    }
-  }
-}
-
-a.pswp__share--twitter {
-  &:hover {
-    background: #55acee;
-    color: #fff;
-  }
-}
-
-a.pswp__share--pinterest {
-  &:hover {
-    background: #ccc;
-    color: #ce272d;
-  }
-}
-
-a.pswp__share--download {
-  &:hover {
-    background: #ddd;
-  }
-}
-
-/*
-3. Index indicator ("1 of X" counter)
-*/
-
-.pswp__counter {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 44px;
-  font-size: 13px;
-  line-height: 44px;
-  color: $p4-pswp-counter-text-color;
-  opacity: 0.75;
-  padding: 0 10px;
-}
-
-/*
-4. Caption
-*/
-
-.pswp__caption {
-  position: absolute;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  min-height: 44px;
-  background-color: $p4-pswp-caption-background;
-
-  small {
-    font-size: 11px;
-    color: $p4-pswp-caption-text-color;
-  }
-}
-
-.pswp__caption__center {
-  text-align: center;
-  max-width: 80%;
-  margin: 0 auto;
-  font-size: 13px;
-  padding: 32px 32px 48px 32px;
-  line-height: 20px;
-  color: $p4-pswp-caption-text-color;
-}
-
-.pswp__caption--empty {
-  display: none;
-}
-
-/* Fake caption element, used to calculate height of next/prev image */
-.pswp__caption--fake {
-  visibility: hidden;
-}
-
-/*
-5. Loading indicator (preloader)
-You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
-*/
-
-.pswp__preloader {
-  width: 44px;
-  height: 44px;
-  position: absolute;
-  top: 0;
-  left: 50%;
-  margin-left: -22px;
-  opacity: 0;
-  transition: opacity 0.25s ease-out;
-  will-change: opacity;
-  direction: ltr;
-}
-
-.pswp__preloader__icn {
-  width: 20px;
-  height: 20px;
-  margin: 12px;
-}
-
-.pswp__preloader--active {
-  opacity: 1;
-
-  .pswp__preloader__icn {
-    /* We use .gif in browsers that don't support CSS animation */
-    background: url(#{$pswp__assets-path}preloader.gif) 0 0 no-repeat;
-  }
-}
-
-.pswp--css_animation {
-  .pswp__preloader--active {
-    opacity: 1;
-
-    .pswp__preloader__icn {
-      animation: clockwise 500ms linear infinite;
-    }
-
-    .pswp__preloader__donut {
-      animation: donut-rotate 1000ms cubic-bezier(.4, 0, .22, 1) infinite;
-    }
-  }
-
-  .pswp__preloader__icn {
-    background: none;
-    opacity: 0.75;
-    width: 14px;
-    height: 14px;
-    position: absolute;
-    left: 15px;
-    top: 15px;
-    margin: 0;
-  }
-
-  .pswp__preloader__cut {
-    /*
-    The idea of animating inner circle is based on Polymer ("material") loading indicator
-    by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
-    */
-    position: relative;
-    width: 7px;
-    height: 14px;
-    overflow: hidden;
-  }
-
-  .pswp__preloader__donut {
-    box-sizing: border-box;
-    width: 14px;
-    height: 14px;
-    border: 2px solid #fff;
-    border-radius: 50%;
-    border-left-color: transparent;
-    border-bottom-color: transparent;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background: none;
-    margin: 0;
-  }
-}
-
-@media screen and (max-width: 1024px) {
-  .pswp__preloader {
-    position: relative;
-    left: auto;
-    top: auto;
-    margin: 0;
-    float: right;
-  }
-}
-
-@keyframes clockwise {
-  0% { transform: rotate(0deg); }
-
-  100% { transform: rotate(360deg); }
-}
-
-@keyframes donut-rotate {
-  0% { transform: rotate(0); }
-
-  50% { transform: rotate(-140deg); }
-
-  100% { transform: rotate(0); }
-}
-
-/*
-6. Additional styles
-*/
-
-/* root element of UI */
-.pswp__ui {
-  -webkit-font-smoothing: auto;
-  visibility: visible;
-  opacity: 1;
-  z-index: $pswp__root-z-index + 50;
-}
-
-/* top black bar with buttons and "1 of X" indicator */
-.pswp__top-bar {
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 44px;
-  width: 100%;
-  background-color: $p4-pswp-top-bar-background;
-}
-
-.pswp__caption,
-.pswp__top-bar,
-.pswp--has_mouse .pswp__button--arrow--left,
-.pswp--has_mouse .pswp__button--arrow--right {
-  backface-visibility: hidden;
-  will-change: opacity;
-  transition: opacity $pswp__controls-transition-duration cubic-bezier(.4, 0, .22, 1);
-}
-
-/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
-.pswp--has_mouse {
-  .pswp__button--arrow--left,
-  .pswp__button--arrow--right {
-    visibility: visible;
-  }
-}
-
-/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
-.pswp__ui--fit {
-  .pswp__top-bar {
-    background-color: $p4-pswp-top-bar-background;
-  }
-
-  .pswp__caption {
-    background-color: $p4-pswp-caption-background;
-  }
-}
-
-/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
-.pswp__ui--idle {
-  .pswp__top-bar {
-    opacity: 0;
-  }
-
-  .pswp__button--arrow--left,
-  .pswp__button--arrow--right {
-    opacity: 0;
-  }
-}
-
-/*
-pswp__ui--hidden class is added when controls are hidden
-e.g. when user taps to toggle visibility of controls
-*/
-
-.pswp__ui--hidden {
-  .pswp__top-bar,
-  .pswp__caption,
-  .pswp__button--arrow--left,
-  .pswp__button--arrow--right {
-    /* Force paint & create composition layer for controls. */
-    opacity: 0.001;
-  }
-}
-
-/* pswp__ui--one-slide class is added when there is just one item in gallery */
-.pswp__ui--one-slide {
-  .pswp__button--arrow--left,
-  .pswp__button--arrow--right,
-  .pswp__counter {
-    display: none;
-  }
-}
-
-.pswp__element--disabled {
-  display: none !important;
-}
-
-@if $pswp__include-minimal-style == true {
-  .pswp--minimal--dark {
-    .pswp__top-bar {
-      background: none;
-    }
-  }
-}
-
-.p4-photoswipe-indicators-wrapper {
-  padding: 20px 0;
-  width: 100%;
-  left: 0;
-  right: 0;
-  text-align: center;
-  position: absolute;
-  z-index: 9999;
-  /*bottom: 0;*/
-  line-height: 0;
-}
-
-.p4-photoswipe-indicators-wrapper span.p4-photoswipe-indicator-click-area {
-  width: 40px;
-  margin: -4px 8px 0 8px;
-  display: inline-block;
-  padding: 8px 0;
-}
-
-.p4-photoswipe-indicators-wrapper span.p4-photoswipe-indicator-bar {
-  height: 4px;
-  background: #999999;
-  display: block;
-}
-
-.p4-photoswipe-indicators-wrapper
-span.p4-photoswipe-indicator-click-area.active
-span.p4-photoswipe-indicator-bar {
-  background: #333333;
-}
-
-.p4-caption-and-indicators {
-  padding: 0;
-  bottom: 0;
-  position: fixed;
-  width: 100%;
-  height: 48px;
-  line-height: 48px;
-  background: white;
-}
diff --git a/assets/src/styles/vendors/photoswipe/planet4-photoswipe.scss b/assets/src/styles/vendors/photoswipe/planet4-photoswipe.scss
deleted file mode 100644
index 83578300d..000000000
--- a/assets/src/styles/vendors/photoswipe/planet4-photoswipe.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// This mimics the Photoswipe setup for its "default skin" here:
-// https://github.com/dimsemenov/PhotoSwipe/tree/v4.1.3/src/css
-@import "main-settings";
-@import "main";
-@import "p4-skin";
diff --git a/classes/class-loader.php b/classes/class-loader.php
index fd6225764..4573da40a 100644
--- a/classes/class-loader.php
+++ b/classes/class-loader.php
@@ -353,13 +353,6 @@ public function enqueue_public_assets() {
 			self::file_ver( P4GBKS_PLUGIN_DIR . '/assets/build/style.min.css' )
 		);
 
-		wp_enqueue_style(
-			'photoswipe',
-			P4GBKS_PLUGIN_URL . 'assets/build/lightbox.min.css',
-			[],
-			self::file_ver( P4GBKS_PLUGIN_DIR . '/assets/build/lightbox.min.css' )
-		);
-
 		// Include React in the Frontend.
 		self::enqueue_local_script(
 			'planet4-blocks-script',
diff --git a/public/images/vendors/photoswipe/default-skin.png b/public/images/vendors/photoswipe/default-skin.png
deleted file mode 100644
index 441c502c92fe66534f0ca07b1c639a02a9bfc6e8..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 547
zcmeAS@N?(olHy`uVBq!ia0y~yVB`R@BRE)q<YKmk=0Jg0o-U3d6^w6hZ_EmD6gl>>
zQzfg0DSPAQu<jh?A1qD&i4UW9oK(6o<CsFutULFjKBR6c;CA%c-tk*}nZ<&(?2Xk4
z$Ntn`J*!va`lG1qnU3Zp6;BxYd!0l0ea=+7kGI5T7#5tI<;|9+YBGKHd8ZBMH4QdB
znW3s&aLSQ$?b9;W1wI*@1k!UN3L>=lA~!r-)AA>V`{IQs4>>BL>kcznXerunmlb=|
zWcaU3Q?y({((8tixy!m+M^9AR2>U-@Q#M^%Df}$cvwDB2dmHkM!%s>?s`+*-6<*}b
z<C)%Z(AZ^u`>C6z+Z%-w!koN!M(Vgcu$6vxWM6}@S%6da&YLklvPaws&rO=B5mA?S
z`j1}n(OIHjt=UhUKbx#56!7%<D(MS#>kz(zdN0WP!2crw3%tChOzkj<<b0i=y2knc
zj0;J5)!$CrAGmk#%Icy!%X<7jC@<y?`MF<;fq!c30<XDz+bf-(Zr#is;<<WWd(D%s
z2T7~A9d5i#sW{I6@4>5G+?=I5j*G7gE&0rKP}eS!-QI|4{hH?XQwM7IF@KnRe$O+>
z{=5>|J!M5a2Uz(xeHVC@V0bikU*S=2|Myc@XUBb*dfe5v>F)hwKM!2~;rOU>BEr>~
b?RAXa8OAS+-W5gzBcH+3)z4*}Q$iB}<;L|a

diff --git a/public/images/vendors/photoswipe/default-skin.svg b/public/images/vendors/photoswipe/default-skin.svg
deleted file mode 100644
index 59f8d8c26..000000000
--- a/public/images/vendors/photoswipe/default-skin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg width="264" height="88" viewBox="0 0 264 88" xmlns="http://www.w3.org/2000/svg"><title>default-skin 2</title><g fill="none" fill-rule="evenodd"><g><path d="M67.002 59.5v3.768c-6.307.84-9.184 5.75-10.002 9.732 2.22-2.83 5.564-5.098 10.002-5.098V71.5L73 65.585 67.002 59.5z" id="Shape" fill="#111"/><g fill="#111"><path d="M13 29v-5h2v3h3v2h-5zM13 15h5v2h-3v3h-2v-5zM31 15v5h-2v-3h-3v-2h5zM31 29h-5v-2h3v-3h2v5z" id="Shape"/></g><g fill="#111"><path d="M62 24v5h-2v-3h-3v-2h5zM62 20h-5v-2h3v-3h2v5zM70 20v-5h2v3h3v2h-5zM70 24h5v2h-3v3h-2v-5z"/></g><path d="M20.586 66l-5.656-5.656 1.414-1.414L22 64.586l5.656-5.656 1.414 1.414L23.414 66l5.656 5.656-1.414 1.414L22 67.414l-5.656 5.656-1.414-1.414L20.586 66z" fill="#111"/><path d="M111.785 65.03L110 63.5l3-3.5h-10v-2h10l-3-3.5 1.785-1.468L117 59l-5.215 6.03z" fill="#111"/><path d="M152.215 65.03L154 63.5l-3-3.5h10v-2h-10l3-3.5-1.785-1.468L147 59l5.215 6.03z" fill="#111"/><g><path id="Rectangle-11" fill="#111" d="M160.957 28.543l-3.25-3.25-1.413 1.414 3.25 3.25z"/><path d="M152.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" id="Oval-1" stroke="#111" stroke-width="1.5"/><path fill="#111" d="M150 21h5v1h-5z"/></g><g><path d="M116.957 28.543l-1.414 1.414-3.25-3.25 1.414-1.414 3.25 3.25z" fill="#111"/><path d="M108.5 27c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5-5.5 2.462-5.5 5.5 2.462 5.5 5.5 5.5z" stroke="#111" stroke-width="1.5"/><path fill="#111" d="M106 21h5v1h-5z"/><path fill="#111" d="M109.043 19.008l-.085 5-1-.017.085-5z"/></g></g></g></svg>
diff --git a/public/images/vendors/photoswipe/preloader.gif b/public/images/vendors/photoswipe/preloader.gif
deleted file mode 100644
index b8faa697c58d574f24ad1295e75f0d5acd807f5e..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 866
zcmZ?wbhEHb6k!ly_{_o3-rjC+Zyz2WuCA_r{`~pv+qci3KR-V||NsC04A_9;e{Mh5
zkYH!W09PYD17=2`8pWS1tn3UN3_2k7AY&a^f(1@`u68|kN2-anp`@o>g(G~Sn2@7~
zvrSHk@6L6-E23jkXGSe|W^B}1J~?m6<|idKEbm%BM24;D%DJ|N(R9l~ccCqU+Q+*;
zC5ucI@C@nw^6r%q!X8EjMg}1uWMJ_VIH~Eq&?0*FO2eyaf-K)^A9_r?%$cNpd!OXZ
zyRr-qE*mIV$)11C{jT81{0Z$J3}?0<))hG5vRG1UYSC0B7N*W^r@l5FO#1Xzrq1ia
zTn=1T^n$F=WVos(%8F{m-NFaLj%Zde9n3X=TfxLgq!o+{fL6S;ys9S2hHAxJg$Kcb
zXjU{H=yiZw!NyFa73aYLC2&=Zkpb0;Sb+zV6Va?_KDagjZUqMmkyf;Ve38j<RZW&1
z)rz|Y4}=-etYA5GHUVx07b}rgID-R9;;I@a6RH)mjt?#uqFK>;h?fCw1rHl`E7%!y
z;3<mPsbZJaVFN31NyXe%0uT1yJXU(T-BCGmo?!Ui(7*%T3No8~ZkO2|-ZQ(eY=dAY
c+u_2AK6?DVPZ=2;yjEUO-?r+hn-GIF0L{!s`~Uy|

diff --git a/webpack.config.js b/webpack.config.js
index 1d6354bae..87a68a6b9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -78,7 +78,6 @@ const cssConfig = {
   entry: {
     style: './assets/src/styles/style.scss',
     editorStyle: './assets/src/styles/editorStyle.scss',
-    lightbox: './assets/src/styles/lightbox.scss',
     AccordionStyle: './assets/src/styles/blocks/Accordion/AccordionStyle.scss',
     AccordionEditorStyle: './assets/src/styles/blocks/Accordion/AccordionEditorStyle.scss',
     CarouselHeaderStyle: './assets/src/styles/blocks/CarouselHeader/CarouselHeaderStyle.scss',