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
Allow margins to collapse & refactor block toolbar #7365
The primary purpose of this PR is to allow margins to collapse.
When two margins meet, and no borders or paddings are present, they collapse. I.e. a
By allowing margins on blocks to collapse, we can make it easier to theme the editor to look like the frontend, by making margins behave the same.
This PR also refactors how the block toolbar is positioned. Because we use
Because this is a rather large change to a visible part of the editor, it needs a good amount of testing. The gold standard is that the editor in this branch should look no different than the editor in master.
So please test on all breakpoints, test the frontend and backend, test with fixed toolbar and contextual toolbar:
It's okay that there are a few regressions with existing editor styles, the benefits outweigh any fixes that need to be made.
requested review from
Jun 19, 2018
This was referenced
Jun 21, 2018
This has been rebased, and I feel like it's in solid shape for wider testing, and I think we should get it in 3.2. Aside from the code cleanliness and benefits this has for editor-themers, the way the block outlines and toolbar are painted now are more resilient. Because it's hard to explain, here are two GIFs.
Here, I am adjusting the margins on the block content itself, in master, where margins do not collapse:
Note how the block toolbar does not correctly position itself according to the adjusted margins.
Here's from the branch that allows collapsing margins:
Note how changing just one margin on the block content doesn't do anything — because they collapse so the remaining margin is still there. Also notice how when the other margin is changed, the outlines and block toolbar correctly position themselves.
Addressed feedback. Fixed the whitespace (nice catch, it shows up as a dot in VS code, I should've seen it but somehow missed it), and made it work in IE again. I hadn't properly rebased for Brandon's fix earlier, but now it works:
Noting also for others as well as myself, that
referenced this pull request
Jun 28, 2018
Rebased, and squashed to keep future rebases simpler. In a
referenced this pull request
Jul 2, 2018
Hi @jasmussen, thank you for this changes. I confirm it solves a regression introduced during the refactoring to the block hover area.
Okay, so I fixed a ton of issues that propped up after the columns merge and the fix to the mouse movement regression. So many that I think this needs another deep dive into the code. Can you take a look, @tofumatt? Thanks.
I left comments for each fix in each commit.
Once again tests pass for me with
Also, in master and this branch, every image is broken for me, even after an
But given that's also in master, I'm guessing it's unrelated to this branch.
As mentioned in Slack, this seems unrelated but a legit breakage: https://wordpress.slack.com/archives/C02QB2JS7/p1530703711000116
I like this a lot more, it feels more like a real, empty canvas (and more like the old editor) with the tighter margins. I have no idea what I'm on about and I think that's an unrelated change. I see what this is doing now. All good. More coffee needed.
I think we need to sort out that image bug but as mentioned it's not related to this PR and seems to be happening in master.