Masonry block with lazy-loaded images

[Kevin-Hamilton]

Description

The Masonry block appears to have issues when images are being lazy loaded. I believe a possible fix is to modify here:

otter-blocks/src/blocks/frontend/masonry/index.js

Line 42 in 7cc5ac9

window.Macy({

to add a recalculate on image load, like so:

		let m = window.Macy({
			container: targetContainer,
			trueOrder: false,
			waitForImages: false,
			margin,
			columns,
			breakAt: {
				1200: Math.min( columns, 4 ),
				840: Math.min( columns, 3 ),
				740: Math.min( columns, 2 ),
				640: Math.min( columns, 1 )
			}
		});
		m.runOnImageLoad(function () {
			m.recalculate(true);
		}, true);

Step-by-step reproduction instructions

Use a masonry block on a gallery of images which are lazy loaded. The container will get set to an unreasonable height and all the images will be placed at the bottom. Resizing the browser will trigger a recalc and fix the layout. OR, scrolling to the bottom will trigger the remaining images to load and then the container will recalc.

Screenshots, screen recording, code snippet or Help Scout ticket

No response

Environment info

No response

Is the issue you are reporting a regression

No

[JohnPixle]

@HardeepAsrani I removed this from Triage, feel free to prioritise as you see fit ✌🏻
Thanks @Kevin-Hamilton !