Dimensions Panel: Inconsistent menu item positions

[aaronrobertshaw]

Description

Hovering padding or margin controls can result in the Dimensions Panel's menu items reordering.

This appears to be a regression introduced with the on hover visualizers for padding and margin in #44955.

Expected Behaviour

Menu items retain their position irrespective of what panel items are moused over. This was the behaviour in the commit prior to #44955 in 5a82cf5.

Actual Behaviour

The Cover block's menu items are reordered when the padding or margin controls are moused over.

cc/ @glendaviesnz

Step-by-step reproduction instructions

1. Edit a post and add a Cover block
2. Select the cover block and switch to the styles tab
3. Without hovering over any dimensions panel controls, open the panel's menu. Not the min-height controls position.
4. Close the panel's menu, hover the padding control (no other interaction required), re-open the panel's menu.
5. Note that the min-height control is now in a different position.

Screenshots, screen recording, code snippet

Before #44955	After #4955
Screen.Recording.2023-03-16.at.4.06.04.pm.mp4	Screen.Recording.2023-03-16.at.4.03.26.pm.mp4

Environment info

• WP 6.1
• Gutenberg: trunk

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

[glendaviesnz]

Not sure what is going on here. I suspect it is something to do with a rerender of this component, but not sure why that changes the order as the panelId remains consistent. It is not easy to work out from the code how these panel items are ordered currently. You might have more luck tracking down the issue @aaronrobertshaw with your knowledge about how these menu items are supposed to work.

[aaronrobertshaw]

The ToolsPanelItems register themselves. As you are rendering them into a SlotFill, those items will be in the order of the fills. Unfortunately, the order of fills isn't guaranteed, so we need to prevent unnecessary rerendering due to props changing.

There seems to be additional rerendering introduced by the on-hover callbacks. I have a vague memory of bringing up that rendering on the initial PR but I could be wrong.