From d487019304e8e1580010155ccddd36c1d16b3a1e Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 10 Jul 2024 16:51:40 -0400 Subject: [PATCH 1/6] Hide content image when lightbox is opened --- packages/block-library/src/image/index.php | 1 + packages/block-library/src/image/style.scss | 4 ++++ 2 files changed, 5 insertions(+) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 886843d83ba72..9dcd2b5cc4720 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -230,6 +230,7 @@ function block_core_image_render_lightbox( $block_content, $block ) { // contain a caption, and we don't want to trigger the lightbox when the // caption is clicked. $p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' ); + $p->set_attribute( 'data-wp-class--hide', 'state.overlayOpened' ); $body_content = $p->get_updated_html(); diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 84c5a1f42de15..e71b7db064dd9 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -9,6 +9,10 @@ max-width: 100%; vertical-align: bottom; box-sizing: border-box; + + &.hide { + opacity: 0; + } } // The following style maintains border radius application for deprecated From af27f5347ffb71b73839a2a1caec96145e96863e Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 12 Jul 2024 18:00:45 -0400 Subject: [PATCH 2/6] Handle duplicate image when closing lightbox as well --- packages/block-library/src/image/index.php | 3 ++- packages/block-library/src/image/style.scss | 18 +++++++++++++++++- packages/block-library/src/image/view.js | 15 ++++++++++++++- 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 9dcd2b5cc4720..c1bc3c6a717fa 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -230,7 +230,8 @@ function block_core_image_render_lightbox( $block_content, $block ) { // contain a caption, and we don't want to trigger the lightbox when the // caption is clicked. $p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' ); - $p->set_attribute( 'data-wp-class--hide', 'state.overlayOpened' ); + $p->set_attribute( 'data-wp-class--hide', 'state.contentImageHide' ); + $p->set_attribute( 'data-wp-class--show', 'state.contentImageShow' ); $body_content = $p->get_updated_html(); diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index e71b7db064dd9..62f8b77fb3263 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -11,7 +11,11 @@ box-sizing: border-box; &.hide { - opacity: 0; + visibility: hidden; + } + + &.show { + animation: show-content-image 0.4s; } } @@ -323,6 +327,18 @@ } } +@keyframes show-content-image { + 0% { + visibility: hidden; + } + 99% { + visibility: hidden; + } + 100% { + visibility: visible; + } +} + @keyframes turn-on-visibility { 0% { opacity: 0; diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js index 99cc84d79f0f4..22bc3bde473b9 100644 --- a/packages/block-library/src/image/view.js +++ b/packages/block-library/src/image/view.js @@ -59,6 +59,19 @@ const { state, actions, callbacks } = store( const { imageId } = getContext(); return state.metadata[ imageId ].imageButtonTop; }, + get contentImageHide() { + const ctx = getContext(); + return ( + state.overlayEnabled && state.currentImageId === ctx.imageId + ); + }, + get contentImageShow() { + const ctx = getContext(); + return ( + ! state.overlayEnabled && + state.currentImageId === ctx.imageId + ); + }, }, actions: { showLightbox() { @@ -75,8 +88,8 @@ const { state, actions, callbacks } = store( state.scrollLeftReset = document.documentElement.scrollLeft; // Sets the current expanded image in the state and enables the overlay. - state.currentImageId = imageId; state.overlayEnabled = true; + state.currentImageId = imageId; // Computes the styles of the overlay for the animation. callbacks.setOverlayStyles(); From e3976e8d4161985ab6a76d3e1b02a64c64979dac Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 12 Jul 2024 18:07:07 -0400 Subject: [PATCH 3/6] Remove styling for prefers reduced motion --- packages/block-library/src/image/style.scss | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 62f8b77fb3263..1bb19bf29da69 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -10,12 +10,14 @@ vertical-align: bottom; box-sizing: border-box; - &.hide { - visibility: hidden; - } + @media (prefers-reduced-motion: no-preference) { + &.hide { + visibility: hidden; + } - &.show { - animation: show-content-image 0.4s; + &.show { + animation: show-content-image 0.4s; + } } } From 72b3688a8e9e5624c11b2362c62fd19b263ea1a8 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Mon, 15 Jul 2024 14:49:02 -0400 Subject: [PATCH 4/6] Rename state getters --- packages/block-library/src/image/index.php | 4 ++-- packages/block-library/src/image/view.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index c1bc3c6a717fa..2823200251455 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -230,8 +230,8 @@ function block_core_image_render_lightbox( $block_content, $block ) { // contain a caption, and we don't want to trigger the lightbox when the // caption is clicked. $p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' ); - $p->set_attribute( 'data-wp-class--hide', 'state.contentImageHide' ); - $p->set_attribute( 'data-wp-class--show', 'state.contentImageShow' ); + $p->set_attribute( 'data-wp-class--hide', 'state.isContentHidden' ); + $p->set_attribute( 'data-wp-class--show', 'state.isContentVisible' ); $body_content = $p->get_updated_html(); diff --git a/packages/block-library/src/image/view.js b/packages/block-library/src/image/view.js index 22bc3bde473b9..576b39ea0db40 100644 --- a/packages/block-library/src/image/view.js +++ b/packages/block-library/src/image/view.js @@ -59,13 +59,13 @@ const { state, actions, callbacks } = store( const { imageId } = getContext(); return state.metadata[ imageId ].imageButtonTop; }, - get contentImageHide() { + get isContentHidden() { const ctx = getContext(); return ( state.overlayEnabled && state.currentImageId === ctx.imageId ); }, - get contentImageShow() { + get isContentVisible() { const ctx = getContext(); return ( ! state.overlayEnabled && From 40c28b9eead72a44eb4bf4706b38e026fe77607f Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Wed, 17 Jul 2024 16:19:27 -0400 Subject: [PATCH 5/6] Hide captions in galleries when opening lightbox --- packages/block-library/src/image/index.php | 4 ++-- packages/block-library/src/image/style.scss | 20 +++++++++++++++++--- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 2823200251455..8e7b422496b4c 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -220,6 +220,8 @@ function block_core_image_render_lightbox( $block_content, $block ) { JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ) ); + $p->set_attribute( 'data-wp-class--hide-content', 'state.isContentHidden' ); + $p->set_attribute( 'data-wp-class--show-content', 'state.isContentVisible' ); // Image. $p->next_tag( 'img' ); @@ -230,8 +232,6 @@ function block_core_image_render_lightbox( $block_content, $block ) { // contain a caption, and we don't want to trigger the lightbox when the // caption is clicked. $p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' ); - $p->set_attribute( 'data-wp-class--hide', 'state.isContentHidden' ); - $p->set_attribute( 'data-wp-class--show', 'state.isContentVisible' ); $body_content = $p->get_updated_html(); diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 1bb19bf29da69..8560df8f08350 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -9,15 +9,29 @@ max-width: 100%; vertical-align: bottom; box-sizing: border-box; + } - @media (prefers-reduced-motion: no-preference) { - &.hide { + @media (prefers-reduced-motion: no-preference) { + &.hide-content { + img { visibility: hidden; } + figcaption { + .wp-block-gallery & { + visibility: hidden; + } + } + } - &.show { + &.show-content { + img { animation: show-content-image 0.4s; } + figcaption { + .wp-block-gallery & { + animation: show-content-image 0.4s; + } + } } } From 59a63c37ba57384005988b66026437831c00af4b Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Thu, 18 Jul 2024 08:31:05 -0400 Subject: [PATCH 6/6] Revert "Hide captions in galleries when opening lightbox" This reverts commit 40c28b9eead72a44eb4bf4706b38e026fe77607f. --- packages/block-library/src/image/index.php | 4 ++-- packages/block-library/src/image/style.scss | 20 +++----------------- 2 files changed, 5 insertions(+), 19 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 8e7b422496b4c..2823200251455 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -220,8 +220,6 @@ function block_core_image_render_lightbox( $block_content, $block ) { JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ) ); - $p->set_attribute( 'data-wp-class--hide-content', 'state.isContentHidden' ); - $p->set_attribute( 'data-wp-class--show-content', 'state.isContentVisible' ); // Image. $p->next_tag( 'img' ); @@ -232,6 +230,8 @@ function block_core_image_render_lightbox( $block_content, $block ) { // contain a caption, and we don't want to trigger the lightbox when the // caption is clicked. $p->set_attribute( 'data-wp-on-async--click', 'actions.showLightbox' ); + $p->set_attribute( 'data-wp-class--hide', 'state.isContentHidden' ); + $p->set_attribute( 'data-wp-class--show', 'state.isContentVisible' ); $body_content = $p->get_updated_html(); diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 8560df8f08350..1bb19bf29da69 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -9,29 +9,15 @@ max-width: 100%; vertical-align: bottom; box-sizing: border-box; - } - @media (prefers-reduced-motion: no-preference) { - &.hide-content { - img { + @media (prefers-reduced-motion: no-preference) { + &.hide { visibility: hidden; } - figcaption { - .wp-block-gallery & { - visibility: hidden; - } - } - } - &.show-content { - img { + &.show { animation: show-content-image 0.4s; } - figcaption { - .wp-block-gallery & { - animation: show-content-image 0.4s; - } - } } }