Try: Remove/refactor complex left/right block margins

[jasmussen]

Every block, specifically .block-editor-block-list__block, has had paddings left and right to increase the hoverable area to invoke the up/down mover. This padding is then compensated for by a deeper container with negative left and right margins.

Since the mover control is now only visible on-select, those negative margins are no longer necessary.

This PR refactors/removes those negative margins. This drastically simplifies the CSS of the block list component, and should make it easier for themes to get good results when they style the editor.

This is a work in progress. When done it needs to not land in 5.3, and it will need a dev-note when ready because unfortunately it is likely to break a number of existing editor styles. For example it breaks the off-set column and wide/full-wide styles in TwentyNineteen. The good news is that it should be easy to fix by removing a ton of hacky TwentyNineteen editor CSS.

Things to test when the PR becomes ready for review:

• Test primarily and first on a theme that does not style the editor.
• Test master and this branch and both should look identical.
• Test wide and fullwide and look for no horizontal scrollbars.
• Test every block that features nesting, notably Cover, Columns, Group.

While this PR is ready for review, it needs a lot of testing, and given its post-5.3 destination, I wouldn't call it urgent.

However the code quality is drastically improved, and there's lots of red to be found, so it's definitely worth it.

[youknowriad]

Nice PR, seems to work well but when I tried the widgets screen, it was empty. I wonder if a rebase should fix it or maybe there's something else?

[jasmussen]

I'll try a rebase. Given it's CSS only (albeit quite extensive CSS), it shouldn't make the widget screen break.

[youknowriad]

LGTM

[jasmussen]

Wow, that went easier than I'd expected :)

Thank you for the review. I think I'll still want a few more eyes on it — it is unfortunately likely to require quite a few editor styles to need adjustments.

[jasmussen]

Rebased. One of the reasons this needs more eyes is that it does affect editor styles. Here's TwentyNineteen:

I'll try and prepare a patch for that, shouldn't be hard. But it's little things where the previous left and right margins were compensated for, in a way that's no longer necessary.

[mapk]

Looks good. I tested on FF with several blocks.

I used to see extra padding in the Inspector like this:

But now it all looks good! Thanks for simplifying this!

[jasmussen]

Thanks Mark for testing, and thanks everyone else for also testing. It's important to get many eyes on this, not just to test that it's good, but also to raise awareness of the change happening, so that if/when subsequent issues pop up, there's a chance you know why they're happening and where they originated :)

Anyone know why the tests are failing? Given the depth of the changes it could definitely be legitimate failures, so would appreciate insights by anyone who has the time to look.

[jasmussen]

Suggested dev note:

In <a href="https://github.com/WordPress/gutenberg/pull/17877">17877</a> a change was made to how blocks are laid out in the block editor. Previously, every block would come with padding built in, left and right, and negative margins to compensate. These margins and paddings have been refactored away. This should drastically simplify the CSS necessary to style blocks, for block developers and for WordPress themers wanting to style the editor.

The refactor may cause issues in existing block or editor styles that have compensated for the previous margins/paddings. If your block or editor style looks off, a likely fix is to remove the styles used to compensate.

[youknowriad]

I think the test failure is unrelated, I restarted the job to see.

[jasmussen]

Rebased and squashed, just to keep it simpler to shepard along.

I've also tested image floats, and they work well here.

[jasmussen]

I restored a rule for the title block that I had deemed unnecessary. But resting it fixes the issue with TwentyNineteen, and therefore very probably a ton of other themes, so in doing so it makes this PR more resilient and less risky.

I also included a todo in the CSS: c104127 — we will revisit that area regardless if/when the Title becomes a block.

I did a bunch of testing in themes, and it's looking good:

Astra:

Vanilla:

A bunch of the Twenty themes:

TwentyTwenty, notably, looks delightful:

With all this, I'm feeling much more calm about merging this. It still needs a dev note, and it would still be good to go out in the next Gutenberg plugin so themers and block devs can be aware of this early.

[jasmussen]

Rebased, squashed, and would appreciate insights on when's a good time to merge this.

For the record I'm seeing two issues this PR has caused for TwentyNineteen:

The line before the Title isn't flush:

Fullwide is broken:

This is only in TwentyNineteen, not in any of the other ones, and it's becasue that theme compensated for the margins this PR removes. I will push a PR to twentyninteen once this one is merged.

[jasmussen]

Rebased this again, also to see if that makes the tests pass. If not, I could use some help to figure out if there's a legitimate test failure. @gziolo if you have time?

[gziolo]

Rebased this again, also to see if that makes the tests pass. If not, I could use some help to figure out if there's a legitimate test failure. @gziolo if you have time?

Travis seems to be happy about your work. It should be given that this PR adds only visual changes applied through CSS styles. I guess this is good to go based on the previous approvals.

[jasmussen]

Woop! I guess it's merge time.

It will require a patch to TwentyNineteen, so I'll probably put this on my schedule for tomorrow, merge then patch twentynineteen. Thanks!

[jasmussen]

I have created https://core.trac.wordpress.org/ticket/48526 to address the issues introduced in TwentyNineteen by this patch.

The dev note for this patch is in #17877 (comment).

I'm merging now and hopefully we can get the core patch in shortly after 5.3.

[diegohaz]

I think there may be a styling issue introduced by these changes.

1. Create a Table block
2. Change its alignment to full width
3. Check mobile screen