From ce87aa5c3bd1df9331ad615ff5933bee95973417 Mon Sep 17 00:00:00 2001 From: Ricardo Artemio Morales Date: Fri, 30 Jun 2023 08:48:42 -0500 Subject: [PATCH] Remove lookup for external image full dimensions If a user uses an external image, then we only know one set of dimensions, and we can use those dimensions from the image in the content for the lightbox. This commit adds logic to handle that scenario. --- lib/block-supports/behaviors.php | 5 ++--- .../block-library/src/image/view-interactivity.js | 14 ++++++++++++-- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/lib/block-supports/behaviors.php b/lib/block-supports/behaviors.php index 5f6c72e52199e..a18700a588410 100644 --- a/lib/block-supports/behaviors.php +++ b/lib/block-supports/behaviors.php @@ -97,9 +97,8 @@ function gutenberg_render_behaviors_support_lightbox( $block_content, $block ) { $img_uploaded_srcset = wp_get_attachment_image_srcset( $block['attrs']['id'] ); } else { $img_uploaded_src = $z->get_attribute( 'src' ); - $img_dimensions = wp_getimagesize( $img_uploaded_src ); - $img_width = $img_dimensions[0]; - $img_height = $img_dimensions[1]; + $img_width = 'none'; + $img_height = 'none'; $img_uploaded_srcset = ''; } diff --git a/packages/block-library/src/image/view-interactivity.js b/packages/block-library/src/image/view-interactivity.js index 441810a9f2270..e0fd68646964b 100644 --- a/packages/block-library/src/image/view-interactivity.js +++ b/packages/block-library/src/image/view-interactivity.js @@ -202,8 +202,18 @@ store( { } ); function setZoomStyles( imgDom, context, event ) { - let targetWidth = context.core.image.targetWidth; - let targetHeight = context.core.image.targetHeight; + // Typically, we use the image's full-sized dimensions. If those + // dimensions have not been set (i.e. an external image with only one size), + // the image's dimensions in the lightbox are the same + // as those of the image in the content. + let targetWidth = + context.core.image.targetWidth !== 'none' + ? context.core.image.targetWidth + : event.target.nextElementSibling.naturalWidth; + let targetHeight = + context.core.image.targetHeight !== 'none' + ? context.core.image.targetHeight + : event.target.nextElementSibling.naturalHeight; // Since the lightbox image has `position:absolute`, it // ignores its parent's padding, so we need to set padding here