--- a/wp/wp-includes/blocks/image/view.js Fri Sep 05 18:40:08 2025 +0200
+++ b/wp/wp-includes/blocks/image/view.js Fri Sep 05 18:52:52 2025 +0200
@@ -23,13 +23,13 @@
/************************************************************************/
var __webpack_exports__ = {};
-;// CONCATENATED MODULE: external "@wordpress/interactivity"
+;// external "@wordpress/interactivity"
var x = (y) => {
var x = {}; __webpack_require__.d(x, y); return x
}
var y = (x) => (() => (x))
-const interactivity_namespaceObject = x({ ["getContext"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getContext), ["getElement"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getElement), ["store"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.store) });
-;// CONCATENATED MODULE: ./node_modules/@wordpress/block-library/build-module/image/view.js
+const interactivity_namespaceObject = x({ ["getContext"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getContext), ["getElement"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.getElement), ["store"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.store), ["withSyncEvent"]: () => (__WEBPACK_EXTERNAL_MODULE__wordpress_interactivity_8e89b257__.withSyncEvent) });
+;// ./node_modules/@wordpress/block-library/build-module/image/view.js
/**
* WordPress dependencies
*/
@@ -50,29 +50,18 @@
* @type {number}
*/
let lastTouchTime = 0;
-
-/**
- * Stores the image reference of the currently opened lightbox.
- *
- * @type {HTMLElement}
- */
-let imageRef;
-
-/**
- * Stores the button reference of the currently opened lightbox.
- *
- * @type {HTMLElement}
- */
-let buttonRef;
const {
state,
actions,
callbacks
} = (0,interactivity_namespaceObject.store)('core/image', {
state: {
- currentImage: {},
+ currentImageId: null,
+ get currentImage() {
+ return state.metadata[state.currentImageId];
+ },
get overlayOpened() {
- return state.currentImage.currentSrc;
+ return state.currentImageId !== null;
},
get roleAttribute() {
return state.overlayOpened ? 'dialog' : null;
@@ -83,36 +72,63 @@
get enlargedSrc() {
return state.currentImage.uploadedSrc || 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
},
+ get figureStyles() {
+ return state.overlayOpened && `${state.currentImage.figureStyles?.replace(/margin[^;]*;?/g, '')};`;
+ },
get imgStyles() {
return state.overlayOpened && `${state.currentImage.imgStyles?.replace(/;$/, '')}; object-fit:cover;`;
+ },
+ get imageButtonRight() {
+ const {
+ imageId
+ } = (0,interactivity_namespaceObject.getContext)();
+ return state.metadata[imageId].imageButtonRight;
+ },
+ get imageButtonTop() {
+ const {
+ imageId
+ } = (0,interactivity_namespaceObject.getContext)();
+ return state.metadata[imageId].imageButtonTop;
+ },
+ get isContentHidden() {
+ const ctx = (0,interactivity_namespaceObject.getContext)();
+ return state.overlayEnabled && state.currentImageId === ctx.imageId;
+ },
+ get isContentVisible() {
+ const ctx = (0,interactivity_namespaceObject.getContext)();
+ return !state.overlayEnabled && state.currentImageId === ctx.imageId;
}
},
actions: {
showLightbox() {
- const ctx = (0,interactivity_namespaceObject.getContext)();
+ const {
+ imageId
+ } = (0,interactivity_namespaceObject.getContext)();
// Bails out if the image has not loaded yet.
- if (!ctx.imageRef?.complete) {
+ if (!state.metadata[imageId].imageRef?.complete) {
return;
}
- // Stores the positons of the scroll to fix it until the overlay is
+ // Stores the positions of the scroll to fix it until the overlay is
// closed.
state.scrollTopReset = document.documentElement.scrollTop;
state.scrollLeftReset = document.documentElement.scrollLeft;
- // Moves the information of the expaned image to the state.
- ctx.currentSrc = ctx.imageRef.currentSrc;
- imageRef = ctx.imageRef;
- buttonRef = ctx.buttonRef;
- state.currentImage = ctx;
+ // Sets the current expanded image in the state and enables the overlay.
state.overlayEnabled = true;
+ state.currentImageId = imageId;
// Computes the styles of the overlay for the animation.
callbacks.setOverlayStyles();
},
hideLightbox() {
if (state.overlayEnabled) {
+ // Starts the overlay closing animation. The showClosingAnimation
+ // class is used to avoid showing it on page load.
+ state.showClosingAnimation = true;
+ state.overlayEnabled = false;
+
// Waits until the close animation has completed before allowing a
// user to scroll again. The duration of this animation is defined in
// the `styles.scss` file, but in any case we should wait a few
@@ -122,23 +138,16 @@
// Delays before changing the focus. Otherwise the focus ring will
// appear on Firefox before the image has finished animating, which
// looks broken.
- buttonRef.focus({
+ state.currentImage.buttonRef.focus({
preventScroll: true
});
- // Resets the current image to mark the overlay as closed.
- state.currentImage = {};
- imageRef = null;
- buttonRef = null;
+ // Resets the current image id to mark the overlay as closed.
+ state.currentImageId = null;
}, 450);
-
- // Starts the overlay closing animation. The showClosingAnimation
- // class is used to avoid showing it on page load.
- state.showClosingAnimation = true;
- state.overlayEnabled = false;
}
},
- handleKeydown(event) {
+ handleKeydown: (0,interactivity_namespaceObject.withSyncEvent)(event => {
if (state.overlayEnabled) {
// Focuses the close button when the user presses the tab key.
if (event.key === 'Tab') {
@@ -153,8 +162,8 @@
actions.hideLightbox();
}
}
- },
- handleTouchMove(event) {
+ }),
+ handleTouchMove: (0,interactivity_namespaceObject.withSyncEvent)(event => {
// On mobile devices, prevents triggering the scroll event because
// otherwise the page jumps around when it resets the scroll position.
// This also means that closing the lightbox requires that a user
@@ -164,7 +173,7 @@
if (state.overlayEnabled) {
event.preventDefault();
}
- },
+ }),
handleTouchStart() {
isTouching = true;
},
@@ -197,7 +206,7 @@
},
callbacks: {
setOverlayStyles() {
- if (!imageRef) {
+ if (!state.overlayEnabled) {
return;
}
let {
@@ -205,11 +214,11 @@
naturalHeight,
offsetWidth: originalWidth,
offsetHeight: originalHeight
- } = imageRef;
+ } = state.currentImage.imageRef;
let {
x: screenPosX,
y: screenPosY
- } = imageRef.getBoundingClientRect();
+ } = state.currentImage.imageRef.getBoundingClientRect();
// Natural ratio of the image clicked to open the lightbox.
const naturalRatio = naturalWidth / naturalHeight;
@@ -246,6 +255,7 @@
let containerMaxHeight = imgMaxHeight;
let containerWidth = imgMaxWidth;
let containerHeight = imgMaxHeight;
+
// Checks if the target image has a different ratio than the original
// one (thumbnail). Recalculates the width and height.
if (naturalRatio.toFixed(2) !== imgRatio.toFixed(2)) {
@@ -327,7 +337,6 @@
// adding 1 pixel to the container width and height solves the problem,
// though this can be removed if the issue is fixed in the future.
state.overlayStyles = `
- :root {
--wp--lightbox-initial-top-position: ${screenPosY}px;
--wp--lightbox-initial-left-position: ${screenPosX}px;
--wp--lightbox-container-width: ${containerWidth + 1}px;
@@ -336,15 +345,17 @@
--wp--lightbox-image-height: ${lightboxImgHeight}px;
--wp--lightbox-scale: ${containerScale};
--wp--lightbox-scrollbar-width: ${window.innerWidth - document.documentElement.clientWidth}px;
- }
- `;
+ `;
},
setButtonStyles() {
- const ctx = (0,interactivity_namespaceObject.getContext)();
+ const {
+ imageId
+ } = (0,interactivity_namespaceObject.getContext)();
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
- ctx.imageRef = ref;
+ state.metadata[imageId].imageRef = ref;
+ state.metadata[imageId].currentSrc = ref.currentSrc;
const {
naturalWidth,
naturalHeight,
@@ -374,11 +385,13 @@
}
const buttonOffsetTop = figureHeight - offsetHeight;
const buttonOffsetRight = figureWidth - offsetWidth;
+ let imageButtonTop = buttonOffsetTop + 16;
+ let imageButtonRight = buttonOffsetRight + 16;
// In the case of an image with object-fit: contain, the size of the
// <img> element can be larger than the image itself, so it needs to
// calculate where to place the button.
- if (ctx.scaleAttr === 'contain') {
+ if (state.metadata[imageId].scaleAttr === 'contain') {
// Natural ratio of the image.
const naturalRatio = naturalWidth / naturalHeight;
// Offset ratio of the image.
@@ -387,19 +400,18 @@
// If it reaches the width first, it keeps the width and compute the
// height.
const referenceHeight = offsetWidth / naturalRatio;
- ctx.imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 16;
- ctx.imageButtonRight = buttonOffsetRight + 16;
+ imageButtonTop = (offsetHeight - referenceHeight) / 2 + buttonOffsetTop + 16;
+ imageButtonRight = buttonOffsetRight + 16;
} else {
// If it reaches the height first, it keeps the height and compute
// the width.
const referenceWidth = offsetHeight * naturalRatio;
- ctx.imageButtonTop = buttonOffsetTop + 16;
- ctx.imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16;
+ imageButtonTop = buttonOffsetTop + 16;
+ imageButtonRight = (offsetWidth - referenceWidth) / 2 + buttonOffsetRight + 16;
}
- } else {
- ctx.imageButtonTop = buttonOffsetTop + 16;
- ctx.imageButtonRight = buttonOffsetRight + 16;
}
+ state.metadata[imageId].imageButtonTop = imageButtonTop;
+ state.metadata[imageId].imageButtonRight = imageButtonRight;
},
setOverlayFocus() {
if (state.overlayEnabled) {
@@ -411,11 +423,13 @@
}
},
initTriggerButton() {
- const ctx = (0,interactivity_namespaceObject.getContext)();
+ const {
+ imageId
+ } = (0,interactivity_namespaceObject.getContext)();
const {
ref
} = (0,interactivity_namespaceObject.getElement)();
- ctx.buttonRef = ref;
+ state.metadata[imageId].buttonRef = ref;
}
}
}, {