Image block “Enlarge on click” throws JS error and locks page scrolling on first load

[mehrazmorshed]

When using the Image block with “Enlarge on click” enabled, the page becomes unscrollable after closing the lightbox, but only on the first page load. After a browser reload, the issue no longer occurs.

I investigated this myself and found a JavaScript console error coming from WordPress core, which prevents the scroll-unlock logic from running.

Steps to Reproduce

1. Open a page with large images using the Image block
2. Ensure “Enlarge on click” is enabled
3. Scroll down the page
4. Click an image to open it in the lightbox
5. Close the image
6. Try to scroll the page

Issue Source: https://wordpress.org/support/topic/enlarge-on-click-page-scroll-issue/

Screenshot:

[Mamaduka]

Thanks for contributing, @mehrazmorshed!

I'm unable to reproduce the issue with the Gutenberg plugin enabled. Can you confirm that you're testing this with WP 6.9 and without the Gutenberg plugin? Also, which browser are you using for testing? Just to ensure, it's not a browser-specific bug.

[mehrazmorshed]

Hi @Mamaduka,

I have reproduced this issue in another person's website while browsing in Mozilla Firefox.
The website uses WordPress v6.9 and the console says that the view.min.js file inside block-library creates the problem.

The website link is: https://work.ivanbachev.com/case-study-automatepro-monitor
(access code: BACH)

[Mamaduka]

Thanks, @mehrazmorshed!

Unfortunately, I don't see "Enlarge on click" enabled on any of the images on the linked page.

[mehrazmorshed]

It looks like he has turned off the feature which I suggested him.

Here is the full conversation: https://wordpress.org/support/topic/enlarge-on-click-page-scroll-issue/

I have opened a ticket in WordPress Core Trac: https://core.trac.wordpress.org/ticket/64450

I think, I should close the issue now.

[Mamaduka]

This is the correct place for Image block-related issues. I closed the Trac ticket.

[ivanbachev]

Thank you for your assistance @mehrazmorshed .

@Mamaduka here is a test page I created with the "Enlarge on click" enabled for the images.

https://work.ivanbachev.com/test/
password: TEST

(Ignore the rest of the pages, I've temporarily disabled the feature across my website)

[Mamaduka]

Thank you, @ivanbachev! I was able to reproduce the issue in Chrome and Firefox using incognito windows to ensure a fresh state. However, I cannot reproduce the same behavior locally.

Here's the code in question. @luisherranz, @DAreRodz, you might have a better idea why this might be failing.

gutenberg/packages/block-library/src/image/view.js

Lines 146 to 161 in f398e78

	// 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
	// milliseconds longer than the duration, otherwise a user may scroll
	// too soon and cause the animation to look sloppy.
	setTimeout( function () {
	// Delays before changing the focus. Otherwise the focus ring will
	// appear on Firefox before the image has finished animating, which
	// looks broken.
	state.currentImage.buttonRef.focus( {
	preventScroll: true,
	} );
	// Resets the current image id to mark the overlay as closed.
	state.currentImageId = null;
	}, 450 );

[mehrazmorshed]

Hello @ivanbachev, thanks for joining here.

Hi @Mamaduka, What I have found till now:

Error:

Uncaught TypeError: can't access property "focus",
r.currentImage.buttonRef is undefined

Source:
/wp-includes/js/dist/script-modules/block-library/image/view.min.js