Grid block doesn't adopt to Zoom out view

[bph]

Description

When using a pattern with a grid block of images on a page, and then switch to zoom out view, the grid expands outside the Zoom out space and also breaks it from a subsequent section on the page.

Step-by-step reproduction instructions

1. Use Twenty-Twenty Five theme
2. Create a new page
3. Add the Galleries > Instagram grid block
4. Save the page
5. Use the toogle button to Zoom out.

Screenshots, screen recording, code snippet

Screen.Recording.2024-10-08.at.16.22.38.mov

Environment info

• WordPress 6.7-beta2-59195
• Twenty-Twenty-Five
• Google Chrome Version 129.0.6668.90
• MacOS Sonoma 14.5

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[bph]

The only Grid setting that works well with the zoom out mode is when I set it to Manuell.

[bph]

A longer video of me testing different grid block settings in available on Cloudup
https://cloudup.com/cYSG-xVQzs4

[MaggieCabrera]

Let's look into this when #65814 gets merged, I think it improves it a lot

[bph]

I tested #65814 via Playground and it is definitely an improvement. The only quirk seems to remain are the grid lines still expanding the zoom space but the images in the grid stay inside the white background. Tested both wide align and no align. See screenshot

[aaronrobertshaw]

I was about to report that I couldn't replicate this after #65998 was merged but before posting I did spot a flash of the grid visualizer extending beyond what it should in the video below around the 30 second mark.

Screen.Recording.2024-10-11.at.4.38.47.pm.mp4

The edge case in that video seemed to be when I was randomly clicking and double clicking around on the grid pattern.

Following that further I think I found a way to reliably replicate the issue.

1. Add instagram grid pattern
2. Drag select an image within the block
3. Engage zoom out view
4. Click into the grid pattern
5. Note the grid visualizer is present

Screen.Recording.2024-10-11.at.5.07.35.pm.mp4

I've run out of time to dig deeper but maybe there's something we could do around tightening up when the grid block's visualizer is shown?

[talldan]

Maybe it's best to hide the visualizer in zoomed out view, seems like you can't fully interact with the grid anyway, so it's not much help.

[MaggieCabrera]

Maybe it's best to hide the visualizer in zoomed out view, seems like you can't fully interact with the grid anyway, so it's not much help.

that sounds reasonable to me