What?

Fixes a bug in Image blocks with the "expand on click" option enabled. The bug appears when an interactive image is removed from the DOM, e.g., when you navigate in a Query block with the "Reload full page" option disabled, and the setButtonStyles callback is triggered because of a load event.

Uncaught TypeError: Cannot read properties of null (reading 'currentSrc')
    at setButtonStyles (view.js:363:48)
    at wrapped (utils.ts:188:12)
    at wrappedFunction (hooks.tsx:269:28)
    at directives.tsx:571:7
    at Set.forEach (<anonymous>)
    at element.props.<computed> (directives.tsx:559:13)
    at HTMLImageElement.<anonymous> (props.js:169:11)

Why?

The error is visible in production. Also, now that the Content block is enabled inside a Query block with the "Reload full page" option disabled, this case is likely to happen.

How?

The bug fix checks if ref exists when calling the setButtonStyles callback. We need to do so because Preact doesn't remove load event listeners on images by default (see preactjs/preact#3141), and the load event could be dispatched multiple times for the same element if it has a srcset attribute.

The ideal way to solve this would be to handle this specific case inside the data-wp-on directive. However, this would require agreeing on the desired behavior first, as it would mean changing Preact's default behavior.

Testing Instructions

1. Add multiple posts with interactive images in them.
2. Disable the "Full page reload" option in the Query block of the homepage.
3. Visit the homepage.
4. Navigate to other pages by clicking on pagination links.
5. Without this bug fix, the error above should appear. Ensure no errors are displayed with the bug fix.