@wordpress/block-library 8.19.6 → 8.20.1

package/src/cover/test/edit.native.js

@@ -11,6 +11,8 @@ import {
 	within,
 	getBlock,
 	openBlockSettings,
+	setupMediaPicker,
+	setupPicker,
 } from 'test/helpers';
 
 /**
@@ -68,6 +70,13 @@ const COLOR_GRAY = '#abb8c3';
 const GRADIENT_GREEN =
 	'linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%)';
 
+const MEDIA_OPTIONS = [
+	'Choose from device',
+	'Take a Photo',
+	'Take a Video',
+	'WordPress Media Library',
+];
+
 // Simplified tree to render Cover edit within slot.
 const CoverEdit = ( props ) => (
 	<SlotFillProvider>
@@ -127,6 +136,35 @@ describe( 'when no media is attached', () => {
 	} );
 } );
 
+describe( 'when no media is attached and overlay color is set', () => {
+	it( 'adds image', async () => {
+		const media = {
+			type: 'image',
+			id: 2000,
+			url: 'https://test.files.wordpress.com/local-image-1.mp4',
+		};
+		const { mediaPickerCallback } = setupMediaPicker();
+		const screen = await initializeEditor( {
+			initialHtml: COVER_BLOCK_SOLID_COLOR_HTML,
+		} );
+		const { getByText } = screen;
+		const { selectOption } = setupPicker( screen, MEDIA_OPTIONS );
+
+		// Get block
+		const coverBlock = await getBlock( screen, 'Cover' );
+		fireEvent.press( coverBlock );
+
+		// Open block settings
+		await openBlockSettings( screen );
+
+		fireEvent.press( getByText( 'Add image or video' ) );
+		selectOption( 'WordPress Media Library' );
+		await mediaPickerCallback( media );
+
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+} );
+
 describe( 'when an image is attached', () => {
 	it( 'edits the image', async () => {
 		const screen = render(

package/src/embed/test/index.native.js

@@ -138,7 +138,12 @@ const mockEmbedResponses = ( mockedResponses ) => {
 
 async function mockOtherResponses( { path } ) {
 	if ( path.startsWith( '/wp/v2/themes' ) ) {
-		return [ { theme_supports: { 'responsive-embeds': true } } ];
+		return [
+			{
+				stylesheet: 'test-theme',
+				theme_supports: { 'responsive-embeds': true },
+			},
+		];
 	}
 
 	if ( path.startsWith( '/wp/v2/block-patterns/patterns' ) ) {

package/src/embed/wp-embed-preview.js

@@ -4,7 +4,7 @@
 import { useMergeRefs, useFocusableIframe } from '@wordpress/compose';
 import { useRef, useEffect, useMemo } from '@wordpress/element';
 
-/** @typedef {import('@wordpress/element').WPSyntheticEvent} WPSyntheticEvent */
+/** @typedef {import('react').SyntheticEvent} SyntheticEvent */
 
 const attributeMap = {
 	class: 'className',

package/src/footnotes/block.json

@@ -4,7 +4,7 @@
 	"name": "core/footnotes",
 	"title": "Footnotes",
 	"category": "text",
-	"description": "",
+	"description": "Display footnotes added to the page.",
 	"keywords": [ "references" ],
 	"textdomain": "default",
 	"usesContext": [ "postId", "postType" ],

package/src/html/edit.js

@@ -8,7 +8,13 @@ import {
 	PlainText,
 	useBlockProps,
 } from '@wordpress/block-editor';
-import { ToolbarButton, Disabled, ToolbarGroup } from '@wordpress/components';
+import {
+	ToolbarButton,
+	Disabled,
+	ToolbarGroup,
+	VisuallyHidden,
+} from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -19,6 +25,8 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 	const [ isPreview, setIsPreview ] = useState();
 	const isDisabled = useContext( Disabled.Context );
 
+	const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' );
+
 	function switchToPreview() {
 		setIsPreview( true );
 	}
@@ -27,8 +35,13 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 		setIsPreview( false );
 	}
 
+	const blockProps = useBlockProps( {
+		className: 'block-library-html__edit',
+		'aria-describedby': isPreview ? instanceId : undefined,
+	} );
+
 	return (
-		<div { ...useBlockProps( { className: 'block-library-html__edit' } ) }>
+		<div { ...blockProps }>
 			<BlockControls>
 				<ToolbarGroup>
 					<ToolbarButton
@@ -48,10 +61,17 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 				</ToolbarGroup>
 			</BlockControls>
 			{ isPreview || isDisabled ? (
-				<Preview
-					content={ attributes.content }
-					isSelected={ isSelected }
-				/>
+				<>
+					<Preview
+						content={ attributes.content }
+						isSelected={ isSelected }
+					/>
+					<VisuallyHidden id={ instanceId }>
+						{ __(
+							'HTML preview is not yet fully accessible. Please switch screen reader to virtualized mode to navigate the below iFrame.'
+						) }
+					</VisuallyHidden>
+				</>
 			) : (
 				<PlainText
 					value={ attributes.content }

package/src/html/preview.js

@@ -8,6 +8,7 @@ import {
 } from '@wordpress/block-editor';
 import { SandBox } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
 
 // Default styles used to unset some of the styles
 // that might be inherited from the editor style.
@@ -32,7 +33,12 @@ export default function HTMLEditPreview( { content, isSelected } ) {
 
 	return (
 		<>
-			<SandBox html={ content } styles={ styles } />
+			<SandBox
+				html={ content }
+				styles={ styles }
+				title={ __( 'Custom HTML Preview' ) }
+				tabIndex={ -1 }
+			/>
 			{ /*
 				An overlay is added when the block is not selected in order to register click events.
 				Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it

package/src/image/image.js

@@ -377,8 +377,6 @@ export default function Image( {
 	const lightboxChecked =
 		!! lightbox?.enabled || ( ! lightbox && !! lightboxSetting?.enabled );
 
-	const lightboxToggleDisabled = linkDestination !== 'none';
-
 	const dimensionsControl = (
 		<DimensionsTool
 			value={ { width, height, scale, aspectRatio } }
@@ -557,14 +555,6 @@ export default function Image( {
 										lightbox: { enabled: newValue },
 									} );
 								} }
-								disabled={ lightboxToggleDisabled }
-								help={
-									lightboxToggleDisabled
-										? __(
-												'“Expand on click” scales the image up, and can’t be combined with a link.'
-										  )
-										: ''
-								}
 							/>
 						</ToolsPanelItem>
 					) }

package/src/image/index.php

@@ -9,20 +9,17 @@
  * Renders the `core/image` block on the server,
  * adding a data-id attribute to the element if core/gallery has added on pre-render.
  *
- * @param array    $attributes The block attributes.
- * @param string   $content    The block content.
- * @param WP_Block $block      The block object.
- *
- * @return string The block content with the data-id attribute added.
+ * @param  array    $attributes The block attributes.
+ * @param  string   $content    The block content.
+ * @param  WP_Block $block      The block object.
+ * @return string Returns the block content with the data-id attribute added.
  */
 function render_block_core_image( $attributes, $content, $block ) {
-	if ( false === stripos( $content, '<img' ) ) {
-		return '';
-	}
 
 	$processor = new WP_HTML_Tag_Processor( $content );
+	$processor->next_tag( 'img' );
 
-	if ( ! $processor->next_tag( 'img' ) || null === $processor->get_attribute( 'src' ) ) {
+	if ( $processor->get_attribute( 'src' ) === null ) {
 		return '';
 	}
 
@@ -34,60 +31,57 @@ function render_block_core_image( $attributes, $content, $block ) {
 		$processor->set_attribute( 'data-id', $attributes['data-id'] );
 	}
 
+	$lightbox_enabled  = false;
 	$link_destination  = isset( $attributes['linkDestination'] ) ? $attributes['linkDestination'] : 'none';
 	$lightbox_settings = block_core_image_get_lightbox_settings( $block->parsed_block );
 
-	$view_js_file_handle = 'wp-block-image-view';
-	$script_handles      = $block->block_type->view_script_handles;
+	// If the lightbox is enabled and the image is not linked, flag the lightbox to be rendered.
+	if ( isset( $lightbox_settings ) && 'none' === $link_destination ) {
 
-	/*
-	 * If the lightbox is enabled and the image is not linked, add the filter
-	 * and the JavaScript view file.
-	 */
-	if (
-		isset( $lightbox_settings ) &&
-		'none' === $link_destination &&
-		isset( $lightbox_settings['enabled'] ) &&
-		true === $lightbox_settings['enabled']
-	) {
+		if ( isset( $lightbox_settings['enabled'] ) && true === $lightbox_settings['enabled'] ) {
+			$lightbox_enabled = true;
+		}
+	}
+
+	// If at least one block in the page has the lightbox, mark the block type as interactive.
+	if ( $lightbox_enabled ) {
 		$block->block_type->supports['interactivity'] = true;
+	}
 
-		if ( ! in_array( $view_js_file_handle, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file_handle ) );
-		}
+	// Determine whether the view script should be enqueued or not.
+	$view_js_file = 'wp-block-image-view';
+	if ( ! wp_script_is( $view_js_file ) ) {
+		$script_handles = $block->block_type->view_script_handles;
 
-		/*
-		 * This render needs to happen in a filter with priority 15 to ensure
-		 * that it runs after the duotone filter and that duotone styles are
-		 * applied to the image in the lightbox. We also need to ensure that the
-		 * lightbox works with any plugins that might use filters as well. We
-		 * can consider removing this in the future if the way the blocks are
-		 * rendered changes, or if a new kind of filter is introduced.
-		 */
-		add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
-	} else {
-		/*
-		 * Remove the filter and the JavaScript view file if previously added by
-		 * other Image blocks.
-		 */
-		remove_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15 );
 		// If the script is not needed, and it is still in the `view_script_handles`, remove it.
-		if ( in_array( $view_js_file_handle, $script_handles, true ) ) {
-			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file_handle ) );
+		if ( ! $lightbox_enabled && in_array( $view_js_file, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_diff( $script_handles, array( $view_js_file ) );
+		}
+		// If the script is needed, but it was previously removed, add it again.
+		if ( $lightbox_enabled && ! in_array( $view_js_file, $script_handles, true ) ) {
+			$block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file ) );
 		}
 	}
 
+	if ( $lightbox_enabled ) {
+		// This render needs to happen in a filter with priority 15 to ensure that it
+		// runs after the duotone filter and that duotone styles are applied to the image
+		// in the lightbox. We also need to ensure that the lightbox works with any plugins
+		// that might use filters as well. We can consider removing this in the future if the
+		// way the blocks are rendered changes, or if a new kind of filter is introduced.
+		add_filter( 'render_block_core/image', 'block_core_image_render_lightbox', 15, 2 );
+	}
+
 	return $processor->get_updated_html();
 }
 
 /**
- * Adds the lightboxEnabled flag to the block data.
+ * Add the lightboxEnabled flag to the block data.
  *
  * This is used to determine whether the lightbox should be rendered or not.
  *
- * @param array $block Block data.
- *
- * @return array Filtered block data.
+ * @param  array $block Block data.
+ * @return array        Filtered block data.
  */
 function block_core_image_get_lightbox_settings( $block ) {
 	// Get the lightbox setting from the block attributes.
@@ -119,61 +113,43 @@ function block_core_image_get_lightbox_settings( $block ) {
 }
 
 /**
- * Adds the directives and layout needed for the lightbox behavior.
- *
- * @param string $block_content Rendered block content.
- * @param array  $block         Block object.
+ * Add the directives and layout needed for the lightbox behavior.
  *
- * @return string Filtered block content.
+ * @param  string $block_content        Rendered block content.
+ * @param  array  $block                Block object.
+ * @return string                Filtered block content.
  */
 function block_core_image_render_lightbox( $block_content, $block ) {
-	/*
-	 * If it's not possible that an IMG element exists then return the given
-	 * block content as-is. It may be that there's no actual image in the block
-	 * or it could be that another plugin already modified this HTML.
-	 */
-	if ( false === stripos( $block_content, '<img' ) ) {
-		return $block_content;
-	}
-
 	$processor = new WP_HTML_Tag_Processor( $block_content );
 
 	$aria_label = __( 'Enlarge image' );
 
-	/*
-	 * If there's definitely no IMG element in the block then return the given
-	 * block content as-is. There's nothing that this code can knowingly modify
-	 * to add the lightbox behavior.
-	 */
-	if ( ! $processor->next_tag( 'img' ) ) {
-		return $block_content;
-	}
-
 	$alt_attribute = $processor->get_attribute( 'alt' );
 
-	// An empty alt attribute `alt=""` is valid for decorative images.
-	if ( is_string( $alt_attribute ) ) {
+	if ( null !== $alt_attribute ) {
 		$alt_attribute = trim( $alt_attribute );
 	}
 
-	// It only makes sense to append the alt text to the button aria-label when the alt text is non-empty.
 	if ( $alt_attribute ) {
 		/* translators: %s: Image alt text. */
 		$aria_label = sprintf( __( 'Enlarge image: %s' ), $alt_attribute );
 	}
+	$content = $processor->get_updated_html();
 
 	// Currently, we are only enabling the zoom animation.
 	$lightbox_animation = 'zoom';
 
-	// Note: We want to store the `src` in the context so we
-	// can set it dynamically when the lightbox is opened.
+	// We want to store the src in the context so we can set it dynamically when the lightbox is opened.
+	$z = new WP_HTML_Tag_Processor( $content );
+	$z->next_tag( 'img' );
+
 	if ( isset( $block['attrs']['id'] ) ) {
 		$img_uploaded_src = wp_get_attachment_url( $block['attrs']['id'] );
 		$img_metadata     = wp_get_attachment_metadata( $block['attrs']['id'] );
 		$img_width        = $img_metadata['width'];
 		$img_height       = $img_metadata['height'];
 	} else {
-		$img_uploaded_src = $processor->get_attribute( 'src' );
+		$img_uploaded_src = $z->get_attribute( 'src' );
 		$img_width        = 'none';
 		$img_height       = 'none';
 	}
@@ -184,7 +160,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 		$scale_attr = false;
 	}
 
-	$w = new WP_HTML_Tag_Processor( $block_content );
+	$w = new WP_HTML_Tag_Processor( $content );
 	$w->next_tag( 'figure' );
 	$w->add_class( 'wp-lightbox-container' );
 	$w->set_attribute( 'data-wp-interactive', true );
@@ -204,8 +180,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 						"imageCurrentSrc": "",
 						"targetWidth": "%s",
 						"targetHeight": "%s",
-						"scaleAttr": "%s",
-						"dialogLabel": "%s"
+						"scaleAttr": "%s"
 					}
 				}
 			}',
@@ -213,34 +188,31 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 			$img_uploaded_src,
 			$img_width,
 			$img_height,
-			$scale_attr,
-			__( 'Enlarged image' )
+			$scale_attr
 		)
 	);
 	$w->next_tag( 'img' );
 	$w->set_attribute( 'data-wp-init', 'effects.core.image.setCurrentSrc' );
 	$w->set_attribute( 'data-wp-on--load', 'actions.core.image.handleLoad' );
 	$w->set_attribute( 'data-wp-effect', 'effects.core.image.setButtonStyles' );
-	$w->set_attribute( 'data-wp-effect--setStylesOnResize', 'effects.core.image.setStylesOnResize' );
 	$body_content = $w->get_updated_html();
 
 	// Wrap the image in the body content with a button.
 	$img = null;
 	preg_match( '/<img[^>]+>/', $body_content, $img );
-
-	$button =
-		$img[0]
-		. '<button
-			type="button"
-			aria-haspopup="dialog"
-			aria-label="' . esc_attr( $aria_label ) . '"
-			data-wp-on--click="actions.core.image.showLightbox"
-			data-wp-style--width="context.core.image.imageButtonWidth"
-			data-wp-style--height="context.core.image.imageButtonHeight"
-			data-wp-style--left="context.core.image.imageButtonLeft"
-			data-wp-style--top="context.core.image.imageButtonTop"
-		></button>';
-
+	$button       =
+				'<button
+					type="button"
+					aria-haspopup="dialog"
+					aria-label="' . esc_attr( $aria_label ) . '"
+					data-wp-on--click="actions.core.image.showLightbox"
+					data-wp-style--width="context.core.image.imageButtonWidth"
+					data-wp-style--height="context.core.image.imageButtonHeight"
+					data-wp-style--left="context.core.image.imageButtonLeft"
+					data-wp-style--top="context.core.image.imageButtonTop"
+				>
+				</button>'
+				. $img[0];
 	$body_content = preg_replace( '/<img[^>]+>/', $button, $body_content );
 
 	// We need both a responsive image and an enlarged image to animate
@@ -248,7 +220,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	// image is a copy of the one in the body, which animates immediately
 	// as the lightbox is opened, while the enlarged one is a full-sized
 	// version that will likely still be loading as the animation begins.
-	$m = new WP_HTML_Tag_Processor( $block_content );
+	$m = new WP_HTML_Tag_Processor( $content );
 	$m->next_tag( 'figure' );
 	$m->add_class( 'responsive-image' );
 	$m->next_tag( 'img' );
@@ -264,7 +236,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
 	$m->set_attribute( 'data-wp-style--object-fit', 'selectors.core.image.lightboxObjectFit' );
 	$initial_image_content = $m->get_updated_html();
 
-	$q = new WP_HTML_Tag_Processor( $block_content );
+	$q = new WP_HTML_Tag_Processor( $content );
 	$q->next_tag( 'figure' );
 	$q->add_class( 'enlarged-image' );
 	$q->next_tag( 'img' );
@@ -280,32 +252,24 @@ 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 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'] );
-		}
-	}
+	$background_color = esc_attr( wp_get_global_styles( array( 'color', 'background' ) ) );
 
 	$close_button_icon  = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="15" height="15" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg>';
+	$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' );
 
 	$lightbox_html = <<<HTML
         <div data-wp-body="" class="wp-lightbox-overlay $lightbox_animation"
             data-wp-bind--role="selectors.core.image.roleAttribute"
-            data-wp-bind--aria-label="selectors.core.image.dialogLabel"
+            aria-label="$dialog_label"
             data-wp-class--initialized="context.core.image.initialized"
             data-wp-class--active="context.core.image.lightboxEnabled"
             data-wp-class--hideAnimationEnabled="context.core.image.hideAnimationEnabled"
-            data-wp-bind--aria-modal="selectors.core.image.ariaModal"
+            data-wp-bind--aria-hidden="!context.core.image.lightboxEnabled"
+            aria-hidden="true"
+            data-wp-bind--aria-modal="context.core.image.lightboxEnabled"
+            aria-modal="false"
             data-wp-effect="effects.core.image.initLightbox"
             data-wp-on--keydown="actions.core.image.handleKeydown"
             data-wp-on--touchstart="actions.core.image.handleTouchStart"
@@ -318,7 +282,7 @@ function block_core_image_render_lightbox( $block_content, $block ) {
                 </button>
                 <div class="lightbox-image-container">$initial_image_content</div>
 				<div class="lightbox-image-container">$enlarged_image_content</div>
-                <div class="scrim" style="background-color: $background_color" aria-hidden="true"></div>
+                <div class="scrim" style="background-color: $background_color"></div>
         </div>
 HTML;
 
@@ -326,7 +290,7 @@ HTML;
 }
 
 /**
- * Ensures that the view script has the `wp-interactivity` dependency.
+ * Ensure that the view script has the `wp-interactivity` dependency.
  *
  * @since 6.4.0
  *

package/src/image/style.scss

@@ -154,8 +154,6 @@
 
 .wp-lightbox-container {
 	position: relative;
-	display: flex;
-	flex-direction: column;
 
 	button {
 		border: none;
@@ -171,13 +169,6 @@
 			outline: 5px auto -webkit-focus-ring-color;
 			outline-offset: 5px;
 		}
-
-		&:hover,
-		&:focus,
-		&:not(:hover):not(:active):not(.has-background) {
-			background: none;
-			border: none;
-		}
 	}
 }
 
@@ -195,23 +186,11 @@
 
 	.close-button {
 		position: absolute;
-		top: calc(env(safe-area-inset-top) + 16px); // equivalent to $grid-unit-20
-		right: calc(env(safe-area-inset-right) + 16px); // equivalent to $grid-unit-20
+		top: calc(env(safe-area-inset-top) + 20px);
+		right: calc(env(safe-area-inset-right) + 20px);
 		padding: 0;
 		cursor: pointer;
 		z-index: 5000000;
-		min-width: 40px; // equivalent to $button-size-next-default-40px
-		min-height: 40px; // equivalent to $button-size-next-default-40px
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		&:hover,
-		&:focus,
-		&:not(:hover):not(:active):not(.has-background) {
-			background: none;
-			border: none;
-		}
 	}
 
 	.lightbox-image-container {

package/src/image/view.js

@@ -105,10 +105,7 @@ store(
 						context.core.image.scrollDelta = 0;
 
 						context.core.image.lightboxEnabled = true;
-						setStyles(
-							context,
-							event.target.previousElementSibling
-						);
+						setStyles( context, event );
 
 						context.core.image.scrollTopReset =
 							window.pageYOffset ||
@@ -230,17 +227,7 @@ store(
 					roleAttribute: ( { context } ) => {
 						return context.core.image.lightboxEnabled
 							? 'dialog'
-							: null;
-					},
-					ariaModal: ( { context } ) => {
-						return context.core.image.lightboxEnabled
-							? 'true'
-							: null;
-					},
-					dialogLabel: ( { context } ) => {
-						return context.core.image.lightboxEnabled
-							? context.core.image.dialogLabel
-							: null;
+							: '';
 					},
 					lightboxObjectFit: ( { context } ) => {
 						if ( context.core.image.initialized ) {
@@ -250,7 +237,7 @@ store(
 					enlargedImgSrc: ( { context } ) => {
 						return context.core.image.initialized
 							? context.core.image.imageUploadedSrc
-							: 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
+							: '';
 					},
 				},
 			},
@@ -341,15 +328,6 @@ store(
 							context.core.image.imageButtonHeight = offsetHeight;
 						}
 					},
-					setStylesOnResize: ( { state, context, ref } ) => {
-						if (
-							context.core.image.lightboxEnabled &&
-							( state.core.image.windowWidth ||
-								state.core.image.windowHeight )
-						) {
-							setStyles( context, ref );
-						}
-					},
 				},
 			},
 		},
@@ -374,7 +352,7 @@ store(
  * @param {Object} context - An Interactivity API context
  * @param {Object} event - A triggering event
  */
-function setStyles( context, ref ) {
+function setStyles( context, event ) {
 	// The reference img element lies adjacent
 	// to the event target button in the DOM.
 	let {
@@ -382,8 +360,9 @@ function setStyles( context, ref ) {
 		naturalHeight,
 		offsetWidth: originalWidth,
 		offsetHeight: originalHeight,
-	} = ref;
-	let { x: screenPosX, y: screenPosY } = ref.getBoundingClientRect();
+	} = event.target.nextElementSibling;
+	let { x: screenPosX, y: screenPosY } =
+		event.target.nextElementSibling.getBoundingClientRect();
 
 	// Natural ratio of the image clicked to open the lightbox.
 	const naturalRatio = naturalWidth / naturalHeight;