From d70d9ba6ddb3c282f9cfbac5f812a1ae9763bd7a Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 26 Sep 2023 18:34:18 +0100 Subject: [PATCH 1/7] If current theme is not a block theme add a default value for $background_color and $close_button_color. --- packages/block-library/src/image/index.php | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 996dbe6abf60df..6099ad343414a5 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -252,10 +252,13 @@ function block_core_image_render_lightbox( $block_content, $block ) { $q->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' ); $enlarged_image_content = $q->get_updated_html(); - $background_color = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) ); + // If the current theme is NOT a block theme, we need to set the background + // color & close button color to some default values because we can't get them + // from the Global Styles. + $background_color = wp_is_block_theme() ? esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) ) : 'white'; + $close_button_color = wp_is_block_theme() ? esc_attr( wp_get_global_styles( array( 'color', 'text' ) ) ) : 'black'; $close_button_icon = ''; - $close_button_color = esc_attr( wp_get_global_styles( array( 'color', 'text' ) ) ); $dialog_label = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' ); $close_button_label = esc_attr__( 'Close' ); From d3986f0766e37f6cb985806f33d8e68d0e658642 Mon Sep 17 00:00:00 2001 From: Michal Czaplinski Date: Tue, 26 Sep 2023 18:36:31 +0100 Subject: [PATCH 2/7] Set lightbox buttons' background & border to none on hover & focus --- packages/block-library/src/image/style.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index c7eec224f65878..60302956691629 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -169,6 +169,12 @@ outline: 5px auto -webkit-focus-ring-color; outline-offset: 5px; } + + &:hover, + &:focus { + background: none; + border: none; + } } } @@ -191,6 +197,12 @@ padding: 0; cursor: pointer; z-index: 5000000; + + &:hover, + &:focus { + background: none; + border: none; + } } .lightbox-image-container { From 8170c3d61a7df7a84452b2d6748700da5598e391 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 3 Oct 2023 09:42:23 +0200 Subject: [PATCH 3/7] Change logic to support lightbox in classic themes --- packages/block-library/src/image/index.php | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 6099ad343414a5..28d86c7f8ca30a 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -252,11 +252,14 @@ function block_core_image_render_lightbox( $block_content, $block ) { $q->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' ); $enlarged_image_content = $q->get_updated_html(); - // If the current theme is NOT a block theme, we need to set the background - // color & close button color to some default values because we can't get them - // from the Global Styles. - $background_color = wp_is_block_theme() ? esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) ) : 'white'; - $close_button_color = wp_is_block_theme() ? esc_attr( wp_get_global_styles( array( 'color', 'text' ) ) ) : 'black'; + // If the current theme does NOT have a `theme.json`, or the colors are not defined, + // we need to set the background color & close button color to some default values + // because we can't get them from the Global Styles. + $global_styles_color = wp_get_global_styles( array( 'color' ) ); + $has_background_color = ! empty( $global_styles_color['background'] ); + $has_text_color = ! empty( $global_styles_color['text'] ); + $background_color = esc_attr( ( wp_theme_has_theme_json() && $has_background_color ) ? $global_styles_color['background'] : '#fff' ); + $close_button_color = esc_attr( ( wp_theme_has_theme_json() && $has_text_color ) ? $global_styles_color['text'] : '#000' ); $close_button_icon = ''; $dialog_label = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' ); From 629f48e40f989c2292b5c223dfdd1702846ae50c Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Tue, 3 Oct 2023 16:56:09 +0200 Subject: [PATCH 4/7] Update logic to avoid unnecessary calls --- packages/block-library/src/image/index.php | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 28d86c7f8ca30a..3cc4dec242333f 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -255,6 +255,17 @@ function block_core_image_render_lightbox( $block_content, $block ) { // If the current theme does NOT have a `theme.json`, or the colors are not defined, // we need to set the background color & close button color to some default values // because we can't get them from the Global Styles. + $background_color = '#fff'; + $close_button_color = '#000'; + if ( wp_theme_has_theme_json() ) { + $global_styles_color = wp_get_global_styles( array( 'color' ) ); + if ( ! empty( $global_styles_color['background'] ) ) { + $background_color = esc_attr( $global_styles_color['background'] ); + } + if ( ! empty( $global_styles_color['text'] ) ) { + $close_button_color = esc_attr( $global_styles_color['text'] ); + } + } $global_styles_color = wp_get_global_styles( array( 'color' ) ); $has_background_color = ! empty( $global_styles_color['background'] ); $has_text_color = ! empty( $global_styles_color['text'] ); From a544d106905a8495249ada49ca433f620b2b0779 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Tue, 3 Oct 2023 18:51:07 -0500 Subject: [PATCH 5/7] Add style fixes --- packages/block-library/src/image/index.php | 2 +- packages/block-library/src/image/style.scss | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 3cc4dec242333f..5b1720b464238b 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -292,7 +292,7 @@ function block_core_image_render_lightbox( $block_content, $block ) { data-wp-on--mousewheel="actions.core.image.hideLightbox" data-wp-on--click="actions.core.image.hideLightbox" > -
$initial_image_content
diff --git a/packages/block-library/src/image/style.scss b/packages/block-library/src/image/style.scss index 60302956691629..707b33058a226c 100644 --- a/packages/block-library/src/image/style.scss +++ b/packages/block-library/src/image/style.scss @@ -171,7 +171,8 @@ } &:hover, - &:focus { + &:focus, + &:not(:hover):not(:active):not(.has-background) { background: none; border: none; } @@ -199,7 +200,8 @@ z-index: 5000000; &:hover, - &:focus { + &:focus, + &:not(:hover):not(:active):not(.has-background) { background: none; border: none; } From bbfa765d02e0664353c7d7f99ff154af743c6a4a Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Thu, 5 Oct 2023 09:27:11 +0200 Subject: [PATCH 6/7] Remove unnecessary code --- packages/block-library/src/image/index.php | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 5b1720b464238b..0f284b126e9495 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -266,11 +266,6 @@ function block_core_image_render_lightbox( $block_content, $block ) { $close_button_color = esc_attr( $global_styles_color['text'] ); } } - $global_styles_color = wp_get_global_styles( array( 'color' ) ); - $has_background_color = ! empty( $global_styles_color['background'] ); - $has_text_color = ! empty( $global_styles_color['text'] ); - $background_color = esc_attr( ( wp_theme_has_theme_json() && $has_background_color ) ? $global_styles_color['background'] : '#fff' ); - $close_button_color = esc_attr( ( wp_theme_has_theme_json() && $has_text_color ) ? $global_styles_color['text'] : '#000' ); $close_button_icon = ''; $dialog_label = $alt_attribute ? esc_attr( $alt_attribute ) : esc_attr__( 'Image' ); From 37a7fda518fec78eb92e1aff23b9818c9a1d4869 Mon Sep 17 00:00:00 2001 From: Mario Santos Date: Thu, 5 Oct 2023 09:27:46 +0200 Subject: [PATCH 7/7] Fix close button color --- packages/block-library/src/image/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/image/index.php b/packages/block-library/src/image/index.php index 0f284b126e9495..e62983b809a4c3 100644 --- a/packages/block-library/src/image/index.php +++ b/packages/block-library/src/image/index.php @@ -287,7 +287,7 @@ function block_core_image_render_lightbox( $block_content, $block ) { data-wp-on--mousewheel="actions.core.image.hideLightbox" data-wp-on--click="actions.core.image.hideLightbox" > -
$initial_image_content