Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Lighter block DOM: contextual toolbar in popover #18779
Edit: I decided to break this down in more steps, so this PR now only focuses on the contextual toolbar.
This PR tries to use the
We already use
How has this been tested?
Types of changes
I love the purpose of this PR. Outside of making the DOM simpler (which vastly simplifies block editor block styling), it solves numerous issues where the toolbar is cropped in nested contexts, or just weirdly offset to the right. This is not counting all the other benefits you mention.
If we could get the PR to a state where basically everything looks the same in the branch as it does in master, just with cleaner DOM, this would be great to ship.
Future improvements could inform efforts in #18667.
Right, I'll work on making everything look the same.
Nice! One possible benefit of this change is that it could make #7962 easier to fix.
Some things I've noticed on this branch (I know it's WIP; just posting to point them out):
What a journey!
... and then shortly after:
You should get a medal.
There's a small remaining glitch with the toolbar that only happens in Chrome in some conditions. It happens when the content area is an odd number of pixels and as a result, in Chrome only, the reported block position and actual position have a difference of half a pixel, causing the toolbar position to be off by half a pixel.
Okay, I took everything for a last round of testing.
I ensured that:
If I missed anything, I’ll fix it in a follow-up PR.
To recap, this PR puts the block controls (contextual toolbar and movers) in a popover.
This PR introduces some unstable props on