Block toolbar position in 6.7 can shift unexpectedly

[ndiego]

Description

This issue is likely the same one displayed in #65872

Changes were made in 6.7 that adjusted the positioning of the block toolbar. I have not yet been able to identify the PR, but the following videos demonstrate the situation. I used a WIP branch of the Icon Block in the videos below, but you can experience the same issue using the public preview with 6.7 applied. The toolbar will bounce up and down when you click the rotate button in the toolbar.

Block toolbar in 6.6

The toolbar does not move.

https://github.com/user-attachments/assets/da2426bf-2e3c-40a8-9457-3836238b0bec

Block toolbar in 6.7

The toolbar bounces around.

https://github.com/user-attachments/assets/80e6f2f8-1366-4934-95cc-625c61f87fb3

Step-by-step reproduction instructions

1. Preview the Icon Block using the public preview with 6.7
2. The preview will open the Editor with the WordPress icon added to the page. Click on the W icon and rotate it using the button in the block toolbar.
3. Notice the toolbar bounces up and down.
4. Switch to 6.6 and notice that the toolbar remains fixed.

Screenshots, screen recording, code snippet

No response

Environment info

• WordPress 6.7 RC1

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

• [x] Yes

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

• [x] Yes

Please confirm which theme type you used for testing.

• [x] Block
• [ ] Classic
• [ ] Hybrid (e.g. classic with theme.json)
• [ ] Not sure

[t-hamano]

I was able to reproduce the problem too:

https://github.com/user-attachments/assets/302f2a1e-81dd-4558-8839-1ea9fd4a0bb4

@ramonjd @andrewserong @aaronrobertshaw I think this issue is related to the one we addressed in #66188 😅 Is there a good approach to solving this? I suspect this is because a transition is applied to the icon, and the rectangle is recalculated while the element is rotating.

@ndiego This may be a temporary solution, but disabling transitions seems to prevent this issue from occurring:

https://github.com/user-attachments/assets/df6d4955-c031-48c4-8a90-d4ccbb6297ca

[ramonjd]

I think this issue is related to the one we addressed in https://github.com/WordPress/gutenberg/pull/66188 😅 Is there a good approach to solving this? I suspect this is because a transition is applied to the icon, and the rectangle is recalculated while the element is rotating.

Yeah, it looks like the toolbar is trying to sit on top of the block, using the block's rect values as a guide.

This is normally a good thing as it ensures the controls do not cover the block's contents.

https://github.com/user-attachments/assets/745f8d6f-9911-4966-8549-608a79b11703

But it can be pronounced where the height and width change rapidly:

https://github.com/user-attachments/assets/ae4d7239-4d6b-46b1-aea2-8e8476d58682

I'm not quite sure what to do here. I don't believe there's a reliable way to detect transitions.

[t-hamano]

This is normally a good thing as it ensures the controls do not cover the block's contents.

Yes, the block toolbar shift is odd, but the behavior itself seems to follow the expected specifications.

Here's a video that shows the issue in a more clear way:

https://github.com/user-attachments/assets/ff6def5a-4df4-448f-ad0b-94f83e4a0e68

[aaronrobertshaw]

Just a quick passing thought: could we check whether the block's overflow is hidden/clipped and adjust calculations around the children to suit? Similar to the approach to balance scrollable content with content positioned outside the parent block in https://github.com/WordPress/gutenberg/pull/66188. It might only mitigate some of the issue but that could be enough in the short term 🤷

I haven't had a chance to play with the code yet, so I could be on the wrong track, feel free to disregard this.