diff -r 48c4eec2b7e6 -r 8c2e4d02f4ef wp/wp-includes/blocks/image/view.js --- 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 // 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; } } }, {