Open ndiego opened 4 hours ago
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
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.
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
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.
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
Screenshots, screen recording, code snippet
No response
Environment info
Please confirm that you have searched existing issues in the repo.
Please confirm that you have tested with all plugins deactivated except Gutenberg.
Please confirm which theme type you used for testing.