Allow margins to collapse & refactor block toolbar #7365

jasmussen · 2018-06-19T10:49:45Z

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 p with a 20px margin next to a similar p will have only 20px margin between them, not 40px, because the two siblings collapse to whichever margin is the largest.

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 position: sticky;, the toolbar is part of the flow of the block itself. In this PR it uses translate to pull it out of the flow, meaning the block metrics do not have to account for the presence of the block toolbar or not. This is a nice refactor on its own, but it also makes the positioning more resilient and predictable.

Testing

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:

Test that the block toolbar that looks right on all blocks, including blocks like the spacer that do not have a block toolbar.
Test all blocks they look right, margin-wise.
Test in nested contexts blocks, test child blocks.
Test with editor styles.

It's okay that there are a few regressions with existing editor styles, the benefits outweigh any fixes that need to be made.

jasmussen · 2018-06-21T10:43:33Z

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.

aduth

Block toolbar is very misplaced in IE11

aduth · 2018-06-25T15:38:38Z

editor/components/block-list/style.scss

@@ -210,7 +209,8 @@
 	/**
 	 * Block outline layout
 	 */
-	.editor-block-list__block-edit {
+
+	 .editor-block-list__block-edit {


Mixed whitespace. Preceding space should be removed.

Nice catch, thank you.

jasmussen · 2018-06-26T07:51:02Z

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 @supports( position: sticky ) { ... } seems like a great way to target IE11 but not Edge, even for issues outside of position sticky. For example I might want to refactor the gallery hack that I made, to make things work in IE11, to use the above instead.

jasmussen · 2018-06-28T09:53:47Z

Rebased, and squashed to keep future rebases simpler. In a fixup'ed commit, https://github.com/WordPress/gutenberg/pull/7365/files#diff-00ebf096f7c483426f2a78d70d9cbd22R1003, I included a fix for a horizontal scrollbar regression introduced in #7225.

jasmussen · 2018-06-28T10:35:25Z

Unsure why Travis fails here. The tests pass.

tofumatt · 2018-06-28T10:36:39Z

That has been intermittently failing a lot. I've restarted it. 😢

tofumatt · 2018-07-04T11:18:31Z

npm install works for me so I'm guessing it's local to your install, and that failing travis test is… frequent and happening a lot. We'll need to look into it. 😢

jasmussen · 2018-07-04T11:19:56Z

To clarify, npm install is working fine for me. What isn't, is any image or embed. Try loading the demo content, I'm pretty sure you should see the same issue.

tofumatt · 2018-07-04T11:25:43Z

Shoot, sorry, I misread. You're right: I see that too...

tofumatt · 2018-07-04T11:30:07Z

As mentioned in Slack, this seems unrelated but a legit breakage: https://wordpress.slack.com/archives/C02QB2JS7/p1530703711000116

tofumatt

~~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.

🚢 … but maybe after we fix master just so we don't merge breaking builds 😉

tofumatt · 2018-07-04T11:05:39Z

editor/components/block-list/style.scss

+	.editor-default-block-appender__content,
+	.editor-block-list__block .editor-block-list__block-edit,
+	.editor-block-list__layout .editor-block-list__block .editor-block-list__block-edit,
+	.editor-block-list__layout .editor-default-block-appender .editor-default-block-appender__content { // Explicitly target nested blocks, as those need to override the preceeding rule.


Typo: "preceding". English is weird. I've pushed a fix 😄

tofumatt · 2018-07-04T11:34:40Z

As mentioned in Slack though: this is a great example of a PR that should include before/after screenshots. The differences are easy to spot visually but I found the lack of issue to make it unclear what I was testing for.

I need more coffee. Ignore me.

jasmussen · 2018-07-04T11:49:47Z

Thanks a bunch for the review. I'll wait for master to behave and then merge, possibly rebase first.

This PR refactors how the block toolbar is positioned. Because we use sticky, the toolbar is part of the flow of the block itself. In this PR it uses translate to pull it out of the flow, making the positioning more resilient. 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 `p` with a 20px margin next to a similar `p` will have only 20px margin between them, not 40px, because the two siblings collapse to whichever margin is the largest. By allowing margins on blocks to collapse, we can make it easier to theme the editor to look like the frontend.

- Fixed toolbar position on mobile. - Fixed toolbar position on desktop breakpoints - Fixed appender regression - Fixed issue with warning blocks having no hover or selected outlines. - Fixed positioning of ellipsis on wide blocks. - Fixed issue with full-wide gallery.

- Fixed a few typos and an issue with warnings. This will be revisited in a future patch also being worked on separately. - Fixed position of toolbar on wide and fullwide. - Fixed positioning of mover on wide and fullwide. - Fixed issue with additional margins in columns block. - Fixed issue with the invisible toolbar on the Column (singular) block breaking the layout. This also fixed an issue with the hover label and sibling inserter positioning on the column.

- Fixed a regression in IE. - Fixed the position of editor warning after the refactor.

jasmussen · 2018-07-04T16:59:44Z

Rebased. Images work now, and the rest does too.

How do we figure out if the travis failure is real? And otherwise, can we merge?

gziolo · 2018-07-05T09:51:31Z

How do we figure out if the travis failure is real? And otherwise, can we merge?

It would be very surprising if CSS changes would make any test fail. I retriggered another build.

gziolo · 2018-07-05T09:52:31Z

editor/components/block-list/style.scss

 	position: sticky;
 	z-index: z-index( '.editor-block-contextual-toolbar' );
 	white-space: nowrap;
 	text-align: left;
 	pointer-events: none;
-	height: $block-toolbar-height;
+	//height: $block-toolbar-height;


We should remove this line before merging.

Fixed, thanks. I suppose this triggered another test? :)

…itor explicitly

aduth · 2018-10-29T13:35:38Z

test/e2e/specs/adding-blocks.test.js

 	it( 'Should insert content using the placeholder and the regular inserter', async () => {
 		// Click below editor to focus last field (block appender)
-		await clickBelow( await page.$( '.editor-default-block-appender' ) );
+		await page.click( '.editor-writing-flow__click-redirect' );


This refactor may have made the test less effective at covering the expected behavior: #11168 (review)

What's the best way to enhance this test again? CC: @gziolo who graciously helped me with this.

Ooops, I wasn't aware of that :(

jasmussen added [Type] Enhancement A suggestion for improvement. General Interface Parts of the UI which don't fall neatly under other labels. Needs Testing Needs further testing to be confirmed. labels Jun 19, 2018

jasmussen self-assigned this Jun 19, 2018

jasmussen requested review from karmatosed, youknowriad, aduth, a team and mtias June 19, 2018 10:49

jasmussen force-pushed the try/allow-collapsing-margins-v3 branch 2 times, most recently from e312a64 to 96f11d4 Compare June 20, 2018 08:43

This was referenced Jun 21, 2018

Fix IE11 formatting toolbar visibility #7413

Merged

Fix issues with floats and the side UI on wide and fullwide #7223

Merged

jasmussen force-pushed the try/allow-collapsing-margins-v3 branch 2 times, most recently from 3f4e4b2 to 455cdae Compare June 21, 2018 10:03

jasmussen added this to the 3.2 milestone Jun 21, 2018

jasmussen force-pushed the try/allow-collapsing-margins-v3 branch 2 times, most recently from a9f293e to 7a6bf54 Compare June 25, 2018 07:23

aduth reviewed Jun 25, 2018

View reviewed changes

jasmussen requested a review from a team June 27, 2018 06:47

jasmussen mentioned this pull request Jun 28, 2018

Don't allow to start dragging blocks if a lock all exists #7225

Merged

jasmussen force-pushed the try/allow-collapsing-margins-v3 branch 2 times, most recently from 316a152 to ec4e9bc Compare June 28, 2018 09:52

jasmussen removed the Needs Testing Needs further testing to be confirmed. label Jun 29, 2018

jasmussen force-pushed the try/allow-collapsing-margins-v3 branch from ec4e9bc to ff7b820 Compare July 2, 2018 08:37

tofumatt approved these changes Jul 4, 2018

View reviewed changes

Joen Asmussen and others added 7 commits July 4, 2018 18:57

docs: Tweak comment in CSS

fc3186d

fix: Multi-block selection on mouse movement after mouseDown

18d20b5

Fix rebase issues, part 3.

dbe1ea1

- Fixed a regression in IE. - Fixed the position of editor warning after the refactor.

chore: Typo tweaks

ffb3f5d

jasmussen force-pushed the try/allow-collapsing-margins-v3 branch from 0d0576b to ffb3f5d Compare July 4, 2018 16:59

gziolo reviewed Jul 5, 2018

View reviewed changes

jasmussen and others added 2 commits July 5, 2018 11:53

Remove comment.

783cff9

Tests: Make adding blocks e2e test pass by refering the area below ed…

9e51819

…itor explicitly

gziolo merged commit 06a621d into master Jul 5, 2018

gziolo deleted the try/allow-collapsing-margins-v3 branch July 5, 2018 11:23

aduth mentioned this pull request Jul 5, 2018

Regression: Weird behavior with default appender, appears to create two blocks #7722

Closed

chrisvanpatten mentioned this pull request Jul 12, 2018

Incredibly difficult to select Column Block (container) #7919

Closed

aduth mentioned this pull request Jul 12, 2018

Columns Block: container block overlaps adjacent blocks #7766

Closed

chrisvanpatten mentioned this pull request Jul 16, 2018

Columns Block (beta): overlap issues due to collapsing margins #7988

Closed

aduth mentioned this pull request Jul 30, 2018

Blocks: Un-collapse Classic block margins #8308

Closed

jasmussen mentioned this pull request Jul 31, 2018

Try alternate fix for Classic toolbar #8314

Merged

aduth reviewed Oct 29, 2018

View reviewed changes

afercia mentioned this pull request Nov 25, 2018

Clicking Wide or Full alignment makes the Image block jump #12292

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow margins to collapse & refactor block toolbar #7365

Allow margins to collapse & refactor block toolbar #7365

jasmussen commented Jun 19, 2018

jasmussen commented Jun 21, 2018

aduth left a comment

aduth Jun 25, 2018

jasmussen Jun 26, 2018

jasmussen commented Jun 26, 2018

jasmussen commented Jun 28, 2018

jasmussen commented Jun 28, 2018

tofumatt commented Jun 28, 2018

tofumatt commented Jul 4, 2018

jasmussen commented Jul 4, 2018

tofumatt commented Jul 4, 2018

tofumatt commented Jul 4, 2018

tofumatt left a comment •

edited

Loading

tofumatt Jul 4, 2018

tofumatt commented Jul 4, 2018 •

edited

Loading

jasmussen commented Jul 4, 2018

jasmussen commented Jul 4, 2018

gziolo commented Jul 5, 2018

gziolo Jul 5, 2018

jasmussen Jul 5, 2018

aduth Oct 29, 2018

jasmussen Oct 30, 2018

gziolo Oct 30, 2018

Allow margins to collapse & refactor block toolbar #7365

Allow margins to collapse & refactor block toolbar #7365

Conversation

jasmussen commented Jun 19, 2018

Testing

jasmussen commented Jun 21, 2018

aduth left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasmussen commented Jun 26, 2018

jasmussen commented Jun 28, 2018

jasmussen commented Jun 28, 2018

tofumatt commented Jun 28, 2018

tofumatt commented Jul 4, 2018

jasmussen commented Jul 4, 2018

tofumatt commented Jul 4, 2018

tofumatt commented Jul 4, 2018

tofumatt left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tofumatt commented Jul 4, 2018 • edited Loading

jasmussen commented Jul 4, 2018

jasmussen commented Jul 4, 2018

gziolo commented Jul 5, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tofumatt left a comment •

edited

Loading

tofumatt commented Jul 4, 2018 •

edited

Loading