Columns: Improve margins, column child block, mobile. #11904

jasmussen · 2018-11-15T11:02:20Z

This PR aims to further improve the columns block, and improving a number of aspects and addressing recent feedback.

It fixes an issue where fullwide columns had uneven margins, both left, center and right. Fixes Alignfull columns block side margins are not equal. #11869.
It fixes a specificity issue with toolbar and breadcrumb positioning that bled into all child blocks.
It improves the layout of individual column blocks, and fixes the toolbar positioning. This fixes feedback in Columns Block: container block overlaps adjacent blocks #7766 (comment).
It improves fullwide columns and how they appear on mobile.
It further extends the "soft passthrough" concept by fixing an edgecase where the column block was still clickable. The column block is still keyboard accessible, and accessible via the block traversal tool. And as noted, it now has the correct dimensions and toolbar positioning.

Aside from that it simplifies the code a bit, and removes a couple of redundant overrides that were better fixed elsewhere.

Worth noting — a fullwide columns block is still not perfectly 1:1 representative of what it will look like on the frontend, as is noted in https://github.com/WordPress/gutenberg/compare/improve/columns?expand=1#diff-49ac41bc72e24e343a451fe254801c0fR16. This is in order to make room for the side UI (movers on child blocks), and I expect us to still revisit this at some point.

This PR has been tested using RTL language, on mobile and desktop breakpoints, in vanilla editor styles and in TwentyNineteen.

GIF:

jasmussen · 2018-11-15T11:03:19Z

@youknowriad I don't know whether to put this in 4.4 milestone or 4.5 — one one hand it would be good to get this in, but on the other hand I don't know how urgent it is, and I know that 4.4 is due right now, so I'll let you milestone this.

youknowriad · 2018-11-15T11:05:11Z

If it's merged it'll become 4.4 :)

youknowriad · 2018-11-15T11:05:55Z

packages/editor/src/components/block-list/style.scss

@@ -808,10 +808,10 @@
 	}

 	// Don't do it for wide elements, this causes a horizontal scrollbar.
-	&[data-align="full"] .editor-block-contextual-toolbar {
+	/*&[data-align="full"] .editor-block-contextual-toolbar {


Is this meant to be removed?

Yes, sorry about that.

That rule was needed at one point, but appears to have been refactored out. There's a lot of cleanup in this PR. I pushed a fix to remove it.

jasmussen · 2018-11-15T11:14:23Z

To expand a little on this:

Worth noting — a fullwide columns block is still not perfectly 1:1 representative of what it will look like on the frontend, as is noted in https://github.com/WordPress/gutenberg/compare/improve/columns?expand=1#diff-49ac41bc72e24e343a451fe254801c0fR16. This is in order to make room for the side UI (movers on child blocks), and I expect us to still revisit this at some point.

We could simply decide that a full-wide block has margin left and right, both on the frontend and in the backend, just like how we are deciding that it should have spacing between the columns. This would serendipitously fix any side UI issues. For now I've avoided this.

ZebulanStanphill · 2018-11-15T15:03:39Z

@jasmussen

We could simply decide that a full-wide block has margin left and right, both on the frontend and in the backend, just like how we are deciding that it should have spacing between the columns. This would serendipitously fix any side UI issues. For now I've avoided this.

That seems like cheating our way to a "fix". It doesn't actually solve the problem, because what if you have a theme that makes the full-width blocks actually be 100% width?

kjellr · 2018-11-15T15:17:26Z

We could simply decide that a full-wide block has margin left and right, both on the frontend and in the backend, just like how we are deciding that it should have spacing between the columns. This would serendipitously fix any side UI issues. For now I've avoided this.

FWIW, I think this is the best way forward. Columns full of images look great when they're full-width, but any text-based ones bleed into the edges. I'd rather Gutenberg added margins by default, and theme authors manually overrode that on the front end if for some reason they'd prefer to.

That would:

Ensure that by default, text-based columns have the margins they need.
Bring greater consistency between the front and back end.

jasmussen · 2018-11-15T15:27:30Z

The fullwide margin change would probably be something to do separately from this PR, just to keep things focused. I suspect phase 2 will rethink aspects here as well, so maybe keep those changes for that round of improvements, and accept the visual disconnect for now.

youknowriad

Let's get it in

jasmussen · 2018-11-15T15:55:11Z

So, in testing this extra thoroughly, I noticed a regression with more than 2 columns which I fixed in 42be6c2.

While not a huge change, it is a change since the review. Here are screenshots:

Testing everything yet again for a final sanity check.

jasmussen · 2018-11-15T16:05:45Z

Sadly, I've discovered in additional testing that this needs a little more time in the oven. Thanks all.

jasmussen · 2018-11-15T16:29:09Z

Thanks to @kjellr for helping me test this.

We discovered an issue — this is also present in master — where if you typeareallylongwordlikethisbutultrasuperlong in a column, that word would be unbroken, and the column would grow.

This issue was not very visible if you used few columns. But as soon as you're at more than 3 columns with varied content, the issue became clear:

This was fixed by adding the following to each individual column:

// Prevent the columns from growing wider than their distributed sizes.
min-width: 0;

// Prevent long unbroken words from overflowing.
word-break: break-word;

Result editor:

Frontend:

I have tested this in Firefox and Safari and Chrome, and it seems to be solid.

This PR aims to further improve the columns block, and improving a number of aspects and addressing recent feedback. - It fixes an issue where fullwide columns had uneven margins, both left, center and right. Fixes #11869. - It fixes a specificity issue with toolbar and breadcrumb positioning that bled into all child blocks. - It improves the layout of individual column blocks, and fixes the toolbar positioning. This fixes feedback in #7766 (comment). - It improves fullwide columns and how they appear on mobile. Aside from that it simplifies the code a bit, and removes a couple of redundant overrides that were better fixed elsewhere.

kjellr

This is looking good. Aside from the issues that were raised (and subsequently fixed) above, I haven't found anything that'd hold this back.

I've tested on Mac OS 10.14, with Chrome 70.0.3538.102 and FF 63.0.1. Using both the Twenty Nineteen + Gutenberg Starter themes.

I'm able to select column block, columns, and child blocks using the keyboard.
I'm able to select just the column block and child blocks using the mouse.
alignwide column block looks much better on small screens than it did before.
Frontend looks good.
All toolbars work in my testing.
I'm able to multi-select blocks within a column
The columns block works as expected when it's empty.
Typing averylongwordthatgoesonforever in a column no longer breaks everything.

youknowriad · 2018-11-15T17:26:45Z

packages/block-library/src/columns/editor.scss

@@ -147,6 +137,7 @@
 	}
 }

-:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit .editor-inner-blocks {
+// This selector re-enables clicking on any child of a column block.
+:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit .editor-block-list__layout > * {


Do we really need all this specificity

youknowriad · 2018-11-15T17:27:08Z

packages/block-library/src/columns/editor.scss

@@ -46,47 +48,41 @@
 			// The Column block is a child of the Columns block and is mostly a passthrough container.
 			// Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins.
 			// @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way.
-			margin-top: -$block-padding - $block-padding;
-			margin-bottom: -$block-padding - $block-padding;
+			> .editor-block-list__block-edit > div > .editor-inner-blocks {


Weird to rely on > div > can't we have a className or something?

youknowriad · 2018-11-15T17:27:54Z

Thanks for your work @kjellr and @jasmussen I'm including this in the release. Let's follow-up if we catch any regression.

mtias · 2018-11-15T19:11:31Z

Thanks for continuing to refine this.

jasmussen · 2018-11-16T08:10:40Z

Thanks so much for all the help yesterday. I will continue to monitor any issues that relate to this block and the refactor, but structurally I'm very happy to have this in.

slimmilkduds · 2018-11-16T08:23:44Z

Just tried 4.4, I really like the refinements from this pr ❤️

StaggerLeee · 2018-11-16T14:06:09Z

Columns Block should be done as majority of visual theme editors do it. Not to be done according to how it looks on front-end, and trying to replicate same look in editor.

Just find some visual editor you favor, and take inspiration from it.

jasmussen added the [Type] Enhancement A suggestion for improvement. label Nov 15, 2018

jasmussen self-assigned this Nov 15, 2018

jasmussen requested review from youknowriad and a team November 15, 2018 11:02

jasmussen requested a review from kjellr November 15, 2018 11:03

youknowriad reviewed Nov 15, 2018

View reviewed changes

youknowriad added this to the 4.5 milestone Nov 15, 2018

youknowriad approved these changes Nov 15, 2018

View reviewed changes

youknowriad modified the milestones: 4.5, 4.4 Nov 15, 2018

jasmussen modified the milestones: 4.4, 4.5 Nov 15, 2018

jasmussen added the [Status] In Progress Tracking issues with work in progress label Nov 15, 2018

jasmussen removed the [Status] In Progress Tracking issues with work in progress label Nov 15, 2018

jasmussen added 3 commits November 15, 2018 17:33

Fix issue with more than 2 columns.

446b738

Prevent columns from growing wider than their set width.

dbe5225

jasmussen force-pushed the improve/columns branch from 7be98f8 to dbe5225 Compare November 15, 2018 16:33

jasmussen added 2 commits November 15, 2018 17:51

Use break-word for better word breaks.

d67d7d5

Copy editor style to frontend.

c67b5c8

kjellr approved these changes Nov 15, 2018

View reviewed changes

youknowriad reviewed Nov 15, 2018

View reviewed changes

youknowriad modified the milestones: 4.5, 4.4 Nov 15, 2018

youknowriad merged commit 46ebefa into master Nov 15, 2018

youknowriad deleted the improve/columns branch November 15, 2018 17:28

mtias mentioned this pull request Nov 15, 2018

Clarify Status of Columns for Release #10560

Closed

jasmussen mentioned this pull request Nov 16, 2018

Columns UI is still buggy and confusing #11159

Closed

mtias mentioned this pull request Nov 21, 2018

Reusable Block: "Save" button inaccessible with any device #11519

Closed

designsimply mentioned this pull request Dec 9, 2018

Remove unintentional right-margin on last odd-item. #12199

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Columns: Improve margins, column child block, mobile. #11904

Columns: Improve margins, column child block, mobile. #11904

jasmussen commented Nov 15, 2018

jasmussen commented Nov 15, 2018

youknowriad commented Nov 15, 2018

youknowriad Nov 15, 2018

jasmussen Nov 15, 2018

jasmussen commented Nov 15, 2018

ZebulanStanphill commented Nov 15, 2018

kjellr commented Nov 15, 2018

jasmussen commented Nov 15, 2018

youknowriad left a comment

jasmussen commented Nov 15, 2018

jasmussen commented Nov 15, 2018

jasmussen commented Nov 15, 2018

kjellr left a comment

youknowriad Nov 15, 2018

youknowriad Nov 15, 2018

youknowriad commented Nov 15, 2018

mtias commented Nov 15, 2018

jasmussen commented Nov 16, 2018

slimmilkduds commented Nov 16, 2018

StaggerLeee commented Nov 16, 2018 •

edited

Loading

Columns: Improve margins, column child block, mobile. #11904

Columns: Improve margins, column child block, mobile. #11904

Conversation

jasmussen commented Nov 15, 2018

jasmussen commented Nov 15, 2018

youknowriad commented Nov 15, 2018

youknowriad Nov 15, 2018

Choose a reason for hiding this comment

jasmussen Nov 15, 2018

Choose a reason for hiding this comment

jasmussen commented Nov 15, 2018

ZebulanStanphill commented Nov 15, 2018

kjellr commented Nov 15, 2018

jasmussen commented Nov 15, 2018

youknowriad left a comment

Choose a reason for hiding this comment

jasmussen commented Nov 15, 2018

jasmussen commented Nov 15, 2018

jasmussen commented Nov 15, 2018

kjellr left a comment

Choose a reason for hiding this comment

youknowriad Nov 15, 2018

Choose a reason for hiding this comment

youknowriad Nov 15, 2018

Choose a reason for hiding this comment

youknowriad commented Nov 15, 2018

mtias commented Nov 15, 2018

jasmussen commented Nov 16, 2018

slimmilkduds commented Nov 16, 2018

StaggerLeee commented Nov 16, 2018 • edited Loading

StaggerLeee commented Nov 16, 2018 •

edited

Loading