Toolbars and inserters are displaced by editor chrome

[getdave]

In Firefox the Zoom Out mode toolbar can become detacthed from the sections when you activate the Blocks tab of the inserter.

https://github.com/user-attachments/assets/32af7962-37d2-4317-bfb0-4b38a5043558

 Reproduction steps

• Enable Zoom Out Mode experiment
• Site Editor -> Activate Zoom Out mode
• Select a "section"
• Open the inserter
• See the Zoom Out toolbar is misplaced until you hover over the block's in the canvas again.

[AhmarZaidi]

Hey 👋, I'd like to work on this issue.

I believe the reason toolbar is becoming detacthed is that the update function for it's position is dependent on the reference of the underlying block and that doesn't get updated when we toggle the inserter.

Here are the auto update options for the useFloating hook that is used by the toolbar. As we can see in the autoupdate options, it does update the toolbar position on scroll or resize and also on layoutshift. But the layout shift option only applies to the reference element.

Also, along with the zoom out toolbar, the add pattern button is also getting detached.

---

One solution to fix both the elements getting detached is to add MutationObserver on the parent div of the inserter (interface-interface-skeleton__body). I've tested that and it seems to work fine. The autoUpdate also adds MutationObserver and ResizeObservers under the hood.

Should we go with this approach?

[getdave]

@AhmarZaidi Thank you. Yes it would be great to have you contribute to this effort.

Please feel free to raise a PR with your proposed solution 👍

[AhmarZaidi]

Hey @getdave raised a PR for this issue here

[draganescu]

Despite improving anchoring #65627 does not fix this issue.

[draganescu]

65654 is a similar issue. I'll close it in favor of this one.

[ciampo]

While taking a look at #65981, I noticed these styles being applied to the iframe container. I noticed that the container is much wider than the available space, and margin-left and width are changed:

• the new values seem off, since they cause the container to go partially offscreen;
• they cause glitches with the scroll bar (see attached video);
• they are not as performant to animate as using CSS transform;
• they also seem to be related to the toolbar getting out of place when opening/closing the outline sidebar;

This is the scrollbar glitch mentioned above:

https://github.com/user-attachments/assets/83af887b-b789-4175-a680-36b0ae06bfa1

And this the bug described in this PR being fixed by disabling those margin-left and width styles:

https://github.com/user-attachments/assets/d1c59c2e-0ea0-4f94-bdbc-bef694e3baee

[draganescu]

@ciampo yes but disabling the margin and the width breaks the UI in the sense that opening more chrome results in the canvas shrinking more and more.

[ciampo]

yes but disabling the margin and the width breaks the UI in the sense that opening more chrome results in the canvas shrinking more and more.

I understand — what I'm suggesting is that maybe this bug could be fixed by tweaking the "resizing styles", in particular by making the iframe container as wide as the available width in the viewport (currently it's larger)

[kevin940726]

I agree with @ciampo that a more proper fix might be fixing the iframe's width. Currently, when enabling zoom-out, the scrollbar is hidden under the sidebar, making it inaccessible.

[kevin940726]

@ciampo How confident are you to try out a PR with the above change in https://github.com/WordPress/gutenberg/issues/65188#issuecomment-2403411506? Should we punt this to 6.8 or maybe 6.7.1 if that needs more work?

[draganescu]

We should fix this for 6.7 IMO. Will help with any PR @ciampo gets going and I am also ;ooking at whether fixing the issue with width/margin values (I think we need to keep them to preserve the UX) solves the problem in the issue here. Otherwise my PR adding an observer may be a good patch for a while. I'd hate to have UI displacement just ship in 6.7.

For the record just removing the styles reults in this

https://github.com/user-attachments/assets/df202a9e-3cf0-4b12-b8ef-f5718ff992ee

This causes that reflow which we're working hard to tweak into non existence as we speak.

[kevin940726]

Currently, when enabling zoom-out, the scrollbar is hidden under the sidebar, making it inaccessible.

This was reported in https://github.com/WordPress/gutenberg/issues/65595.

[draganescu]

The width of the container of the iframe is so big because it is preserving the size of the viewport as it was before zoom out. This enables the iframe to extend into it to 100% and this in turn makes the browser keep the same media queries active.

Attempting the same effect by applying margin and width to the iframe instead of the container does not fix the problem with UI displacement. Resizing the iframe fixes the problem with UI displacement, but breaks the feature. Scaling the iframe instead of the html keeps the iframe as wide as the workbench (gray area) which triggers media querries in zoom out when opening chrome.

Tested the refactor in #63390 and the UI displacement is still there.

[ciampo]

I'm going to timebox an effort, hopefully today or at the latest tomorrow

[getdave]

I'd hate to have UI displacement just ship in 6.7.

I think we need to meet this bar for quality for 6.7 👍 It's highly likely folks will encounter this UI glitch as they open/close the Patterns inserter.

Thanks to everyone for digging into this in such detail.