Fix: Vertical toolbar placement in Zoom Out mode

[AhmarZaidi]

What?

This PR fixes the issue #65188
It updates the Popover component (used by the zoom out toolbar) to observe changes in the .interface-interface-skeleton__body element and trigger position updates accordingly.
The .interface-interface-skeleton__body element is the parent div of the inserter.

Why?

The current implementation does not update the popover toolbar's position when the inserter menu is opened in the zoom out mode. This PR ensures that the popover toolbar's position is updated correctly when layout changes occur to the parent inserter.

How?

• Added a MutationObserver to observe changes in the parent div of the inserter.
• Updated the whileElementsMounted function (which updates the toolbar's position relative to the reference element) to include the parent div of the inserter as a reference for useFloating.

Testing Instructions

1. Enable experimental zoom out mode from Gutenberg settings.
2. Open a post or page.
3. Insert a block or select an existing block.
4. Enter zoom out mode.
5. Verify if the floating toolbar is present, if not select a block again.
6. Now open the inserter menu (+ icon in the top left).
7. Verify that the floating toolbar is not getting detached from the block.

Testing Instructions for Keyboard

1. Enable experimental zoom out mode from Gutenberg settings.
2. Open a post or page.
3. Insert a block or select an existing block.
4. Enter zoom out mode using tab to go to the zoom but button (top right).
5. Verify if the floating toolbar is present, if not select a block again.
6. Now open the inserter menu using tab key to navigate keyboard (+ icon in the top left).
7. Verify that the floating toolbar is not getting detached from the block.

Screenshots or screencast

Before:

After:

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @AhmarZaidi! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: AhmarZaidi <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: ciampo <[email protected]>
Co-authored-by: getdave <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[getdave]

Thanks for the PR. Will look to review 👍

[getdave]

@WordPress/gutenberg-components you are probably well placed to advise on this PR.

[tyxla]

Usually, we shouldn't work directly with DOM. Have you considered using a ref instead?

[tyxla]

The Popover component is part of @wordpress/components's API. interface-interface-skeleton__body is declared within InterfaceSkeleton, which is part of @wordpress/interface.

However, @wordpress/components does not know about @wordpress/interface at all, nor it should care about the inserter, so tracking mutations of an unknown, unrelated to Popover element doesn't make much sense.

If this is the right fix, it likely needs to be part of InterfaceSkeleton's implementation, or the inserter, and not part of Popover's internals.

I'm not convinced this is the right fix, anyway. This looks like something that should be resolved within floating-ui, cc @ciampo and @jsnajdr who know its internals better than me.

[ciampo]

Yup, Marin is right. The @wordpress/components package shouldn't be aware of the @wordpress/interface package (since it's part of the Gutenberg app), and can't be tightly coupled to any of its references.

We should look for another way to fix this.

My gut feeling tells me that the bug is currently caused by popover anchor updates not being tracked correctly and used to re-render the popover.

[AhmarZaidi]

Hey @ciampo & @tyxla,
Thanks for the review!

I understand now that interface-interface-skeleton__body is part of @wordpress/interface and code from @wordpress/components should not interact/depend on it.

The popover toolbar ref points to the currently selected block div, so that appears to be set correctly but as mentioned by @ciampo, the block div does not register layout changes when the inserter is toggled, thus it's not updating the position of toolbar.

Since, the inserter is added to the interface-interface-skeleton__body, I added a mutation observer to it. It works but it's not the right solution. I have also tested putting layoutShift to true but that doesn't seem to work.

gutenberg/packages/components/src/popover/index.tsx

Line 292 in 2a80118

layoutShift: false,

Will explore more in the suggested direction to find another fix for this issue.

[jeryj]

Should this get closed now that the vertical toolbar has been replaced with the default block toolbar?