Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Try: Improve floats UI. #10085
This PR tries to improve the block UI on floated elements. It does a few things:
Screenshot. No side UI:
Improved mobile UI:
Min width for embeds:
Right floated toolbar positioning:
Left floated toolbar positioning:
referenced this pull request
Sep 21, 2018
It feels like bad UX to me to make it impossible to move a floated block. Perhaps if there were keyboard shortcuts for moving blocks I would not mind, but I wish there was some way to still move the floated blocks. In the Classic Editor, you would just click and drag an image to move it. Is there any reason why the same behavior could not be implemented in Gutenberg?
I don't necessarily disagree. But I also strongly subscribe to the idea of iteration. In that vein, this feels like a step forward compared to what's in 3.9, and also a step that doesn't preclude further improvements later on.
Drag and drop is, on principle, someting we consider an additive enhancement on top of other explicit mover controls. That is to say — it's not that we can't do it, it just has to be in addition to other features.
I do really like the idea of shortcuts for moving up or down, haven't we a separate ticket for this?
I'm pretty curious about this. I was playing around with this recently and didn't see any notable issues with having a block outline for floated content:
Is there any context on this in a previous ticket?
First off, I'm not against floats having outlines. If we can make it work, PRs will be fast-tracked ;)
Although I can't find the PR now (looked in my closed PRs because I'm pretty sure I removed them), I THINK it's related to the overall float refactors, which now use this method: https://codepen.io/joen/pen/YOZRWP
The overall idea is: the float container is not floated, but the figure inside is floated. Because by keeping the float container the same width as the main column. we can ensure that the figure floated inside aligns itself to this very main column, and allowing the main column to be constrained only by a max-width. The float container then collapses to zero pixels height, so that it's invisible. But it's still there to constrain the float to match the main column width.
By doing all that we can trivially add wide and fullwide images by simply removing the max-width on those blocks, and we don't have to resort to crazy vw units or calc statements.
Put it differently: if you can make it work with boundaries also on the frontend in the gutenberg starter theme or https://github.com/jasmussen/navi, then
That's right, but the way that we paint the block outlines right now, I can't think of a way to paint them around the floats, the way we do them.
But that doesn't mean it's not possible, and to be clear I'm not against them being there at all!