Fix Core Columns butting up against viewport on smaller screens #20589

getdave · 2020-03-02T15:41:59Z

On smaller screens, the Core Columns block butts up against the edges of the viewport (unless it has a background set) on both Editor and Frontend.

This PR aims to fix this by introducing left/right spacing around the Block on smaller viewports. This has to be handled differently between Editor and Frontend/Theme due to the way background padding is applied.

See screenshots below.

My feeling is that without this fix Core Columns looks broken on Themes that don't have specific CSS to add space on left/right. I feel that Core should try to avoid things looking "broken" by default.

I would, however, welcome some guidance and direction from those more experienced with the wider Themes ecosystem.

Also relates to Automattic/wp-calypso#39804.

How has this been tested?

Environment

This has been tested using the Gutenberg Starter Theme because it enqueues no Theme specific styles so we see the raw Block styles.

Note that on Twenty Twenty this fix is not needed because the block-editor-block-list__layout rules add space on left/right by default. However this is not the case for some Themes.

Instructions

Switch to "Code View" and paste in the following test Block definitions:

<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Align Wide<br></strong><em>Smoked salmon topped with crème fraîche, dill and capers<br></em>$15.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Pork Rillettes<br></strong><em>With quick pickle of dried apricots and pistachio crumble<br></em>$14.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Provençal Vegetable Tart<br></strong><em>With seasonal vegetables<br></em>$12.50</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"backgroundColor":"luminous-vivid-amber","textColor":"very-dark-gray","align":"wide"} -->
<div class="wp-block-columns alignwide has-background has-text-color has-luminous-vivid-amber-background-color has-very-dark-gray-color"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Align Wide + Background<br></strong><em>Smoked salmon topped with crème fraîche, dill and capers<br></em>$15.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Pork Rillettes<br></strong><em>With quick pickle of dried apricots and pistachio crumble<br></em>$14.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Provençal Vegetable Tart<br></strong><em>With seasonal vegetables<br></em>$12.50</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Align Default<br></strong><em>Smoked salmon topped with crème fraîche, dill and capers<br></em>$15.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Pork Rillettes<br></strong><em>With quick pickle of dried apricots and pistachio crumble<br></em>$14.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Provençal Vegetable Tart<br></strong><em>With seasonal vegetables<br></em>$12.50</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Align Full<br></strong><em>Smoked salmon topped with crème fraîche, dill and capers<br></em>$15.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Pork Rillettes<br></strong><em>With quick pickle of dried apricots and pistachio crumble<br></em>$14.00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph -->
<p><strong>Provençal Vegetable Tart<br></strong><em>With seasonal vegetables<br></em>$12.50</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:paragraph {"backgroundColor":"luminous-vivid-orange"} -->
<p class="has-background has-luminous-vivid-orange-background-color">Comparr to this please</p>
<!-- /wp:paragraph -->

Install the Gutenberg Starter Theme.
On master- resize screen to a small viewport
Notice how the Columns Block edge butt up against viewport.
Switch to this PR.
Resize screen again.
Notice how the Columns Block edges no longer butt up against viewport.

Do the same on both Editor and when viewing post on Frontend.

Screenshots

Before

After

Types of changes

Bug fix (non-breaking change which fixes an issue).

Could possibly break some Themes.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

…n smaller viewports

… smaller viewports

github-actions · 2020-03-02T15:46:35Z

Size Change: +114 B (0%)

Total Size: 865 kB

Filename	Size	Change
`build/block-library/editor-rtl.css`	7.43 kB	+31 B (0%)
`build/block-library/editor.css`	7.43 kB	+31 B (0%)
`build/block-library/style-rtl.css`	7.52 kB	+26 B (0%)
`build/block-library/style.css`	7.53 kB	+26 B (0%)

ℹ️ View Unchanged

Filename	Size	Change
`build/a11y/index.js`	1.01 kB	0 B
`build/annotations/index.js`	3.43 kB	0 B
`build/api-fetch/index.js`	3.39 kB	0 B
`build/autop/index.js`	2.58 kB	0 B
`build/blob/index.js`	620 B	0 B
`build/block-directory/index.js`	6.02 kB	0 B
`build/block-directory/style-rtl.css`	760 B	0 B
`build/block-directory/style.css`	760 B	0 B
`build/block-editor/index.js`	105 kB	0 B
`build/block-editor/style-rtl.css`	10.5 kB	0 B
`build/block-editor/style.css`	10.5 kB	0 B
`build/block-library/index.js`	116 kB	0 B
`build/block-library/theme-rtl.css`	669 B	0 B
`build/block-library/theme.css`	671 B	0 B
`build/block-serialization-default-parser/index.js`	1.65 kB	0 B
`build/block-serialization-spec-parser/index.js`	3.1 kB	0 B
`build/blocks/index.js`	57.6 kB	0 B
`build/components/index.js`	191 kB	0 B
`build/components/style-rtl.css`	15.5 kB	0 B
`build/components/style.css`	15.5 kB	0 B
`build/compose/index.js`	5.76 kB	0 B
`build/core-data/index.js`	10.5 kB	0 B
`build/data-controls/index.js`	1.03 kB	0 B
`build/data/index.js`	8.22 kB	0 B
`build/date/index.js`	5.37 kB	0 B
`build/deprecated/index.js`	772 B	0 B
`build/dom-ready/index.js`	568 B	0 B
`build/dom/index.js`	3.06 kB	0 B
`build/edit-post/index.js`	90.9 kB	0 B
`build/edit-post/style-rtl.css`	8.53 kB	0 B
`build/edit-post/style.css`	8.53 kB	0 B
`build/edit-site/index.js`	4.63 kB	0 B
`build/edit-site/style-rtl.css`	2.51 kB	0 B
`build/edit-site/style.css`	2.51 kB	0 B
`build/edit-widgets/index.js`	4.42 kB	0 B
`build/edit-widgets/style-rtl.css`	2.59 kB	0 B
`build/edit-widgets/style.css`	2.58 kB	0 B
`build/editor/editor-styles-rtl.css`	325 B	0 B
`build/editor/editor-styles.css`	327 B	0 B
`build/editor/index.js`	44.6 kB	0 B
`build/editor/style-rtl.css`	4.01 kB	0 B
`build/editor/style.css`	4 kB	0 B
`build/element/index.js`	4.45 kB	0 B
`build/escape-html/index.js`	733 B	0 B
`build/format-library/index.js`	7.6 kB	0 B
`build/format-library/style-rtl.css`	502 B	0 B
`build/format-library/style.css`	502 B	0 B
`build/hooks/index.js`	1.92 kB	0 B
`build/html-entities/index.js`	622 B	0 B
`build/i18n/index.js`	3.48 kB	0 B
`build/is-shallow-equal/index.js`	710 B	0 B
`build/keyboard-shortcuts/index.js`	2.3 kB	0 B
`build/keycodes/index.js`	1.68 kB	0 B
`build/list-reusable-blocks/index.js`	2.99 kB	0 B
`build/list-reusable-blocks/style-rtl.css`	226 B	0 B
`build/list-reusable-blocks/style.css`	226 B	0 B
`build/media-utils/index.js`	4.85 kB	0 B
`build/notices/index.js`	1.57 kB	0 B
`build/nux/index.js`	3.02 kB	0 B
`build/nux/style-rtl.css`	616 B	0 B
`build/nux/style.css`	613 B	0 B
`build/plugins/index.js`	2.54 kB	0 B
`build/primitives/index.js`	1.49 kB	0 B
`build/priority-queue/index.js`	780 B	0 B
`build/redux-routine/index.js`	2.84 kB	0 B
`build/rich-text/index.js`	14.3 kB	0 B
`build/server-side-render/index.js`	2.54 kB	0 B
`build/shortcode/index.js`	1.7 kB	0 B
`build/token-list/index.js`	1.27 kB	0 B
`build/url/index.js`	4 kB	0 B
`build/viewport/index.js`	1.61 kB	0 B
`build/warning/index.js`	1.14 kB	0 B
`build/wordcount/index.js`	1.18 kB	0 B

_{compressed-size-action}

aduth · 2020-03-02T17:36:46Z

For prioritization' sake, do you have a sense whether this is a regression of recent changes to the column(s) block(s) in #19515 or #20169?

jeryj · 2020-03-02T21:58:10Z

When I check using the gutenberg starter theme, my editor preview isn't as nicely aligned as your screenshot:

As a potential help in figuring out why that is, my master doesn't even show the yellow/orange-ish background at all. The alignment on the full-width does butt up against the side of the window though:

jeryj

I'm not sure if I tested correctly due to my screenshots being different from yours. Some more eyes on it would be good. If mine ends up not being right I'll remove the change request. Otherwise it's just two tiny comment spelling corrections 👍

jeryj · 2020-03-02T21:59:57Z

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

+// on larger viewports where width handles this. Specificity overide required to
+// overide generic `.entry-content *` rule


overide should be override

jeryj · 2020-03-02T22:01:59Z

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

+// on larger viewports where width handles this. Specificity overide required to
+// overide generic `.entry-content *` rule


overide should be override

jeryj · 2020-03-02T22:04:02Z

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

+		@include break-xlarge() {
+			padding-left: 0;
+			padding-right: 0;
+		}


It looks like if it's an align-full block, that this padding applies, making it butt up against the window on the front-end:

jasmussen

Thank you! This improves things, but I don't think it's the right fix, and I think the regression was potentially due to #17877 — sorry about that.

Specifically if I inspect, the margins look correct a great deal of the way down:

So what makes the text butt out like that?

This rule:

That margin-left: -14px (probably -$block-padding in the code) looks like a remnant of when it was necessary to compensate for the left/right margins that have been refactored.

And then I git pulled. The above is no longer accurate it seems. So, master is different now, possibly due to improvements in #20597.

Now the text only buts out if the columns block is full-wide, and then honestly it seems expected? Because it does so on desktop breakpoints also:

To phrase it differently, there was definitely an issue, but the issue has either changed or even become obsolete overnight. Let me know what you think of master.

getdave · 2020-03-03T09:39:06Z

For prioritization' sake, do you have a sense whether this is a regression of recent changes to the column(s) block(s) in #19515 or #20169?

@aduth I'm afraid I don't. However, there's a lot of changes to widths and spacing in those PRs so it could be they caused this. I might try testing altering a few of those properties (esp. margin changes) to see if that caused it.

I would also say that's it is extremely easy to introduce this kind of regression given the number of variants (Editor, Frontend, different Themes...etc). Not sure how we solve or guard against this...

getdave · 2020-03-03T09:44:41Z

To phrase it differently, there was definitely an issue, but the issue has either changed or even become obsolete overnight. Let me know what you think of master.

@jasmussen Thanks for this. I've pulled master this morning and (testing as per instructions above) it's all fixed!

I'm still concerned this issue could be prevalent on certain Themes so I'll dig into that, but for now I'm happy to close this out. 🎉

jasmussen · 2020-03-03T09:57:34Z

Yep. There was a dev-note attached to the margin change, but it is unfortunate that it had to happen. The silver-lining is, however, that the margin math is vastly simpler now.

getdave added 2 commits March 2, 2020 15:31

Editor: fix non full width columns butting up against viewport edge o…

a95e91c

…n smaller viewports

Theme: fix non full width columns butting up against viewport edge on…

07f9831

… smaller viewports

getdave added the [Block] Columns Affects the Columns Block label Mar 2, 2020

getdave requested review from jeryj, jasmussen and aduth March 2, 2020 15:42

getdave requested review from ajitbohra, jorgefilipecosta, Soean and talldan as code owners March 2, 2020 15:42

getdave self-assigned this Mar 2, 2020

getdave mentioned this pull request Mar 2, 2020

SPT: Menu template butting up against viewport sides on smaller screens Automattic/wp-calypso#39804

Closed

getdave requested a review from kjellr March 2, 2020 15:48

jeryj requested changes Mar 2, 2020

View reviewed changes

jasmussen requested changes Mar 3, 2020

View reviewed changes

getdave closed this Mar 3, 2020

nielslange mentioned this pull request Mar 5, 2020

Full-width blocks touching browser edges #20646

Closed

aduth deleted the fix/columns-butting-up-against-viewport branch March 5, 2020 14:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix Core Columns butting up against viewport on smaller screens #20589

Fix Core Columns butting up against viewport on smaller screens #20589

getdave commented Mar 2, 2020 •

edited

Loading

github-actions bot commented Mar 2, 2020

aduth commented Mar 2, 2020

jeryj commented Mar 2, 2020

jeryj left a comment

jeryj Mar 2, 2020

jeryj Mar 2, 2020

jeryj Mar 2, 2020

jasmussen left a comment

getdave commented Mar 3, 2020

getdave commented Mar 3, 2020 •

edited

Loading

jasmussen commented Mar 3, 2020

		// on larger viewports where width handles this. Specificity overide required to
		// overide generic `.entry-content *` rule

Fix Core Columns butting up against viewport on smaller screens #20589

Fix Core Columns butting up against viewport on smaller screens #20589

Conversation

getdave commented Mar 2, 2020 • edited Loading

How has this been tested?

Environment

Instructions

Screenshots

Before

After

Types of changes

Checklist:

github-actions bot commented Mar 2, 2020

aduth commented Mar 2, 2020

jeryj commented Mar 2, 2020

jeryj left a comment

Choose a reason for hiding this comment

jeryj Mar 2, 2020

Choose a reason for hiding this comment

jeryj Mar 2, 2020

Choose a reason for hiding this comment

jeryj Mar 2, 2020

Choose a reason for hiding this comment

jasmussen left a comment

Choose a reason for hiding this comment

getdave commented Mar 3, 2020

getdave commented Mar 3, 2020 • edited Loading

jasmussen commented Mar 3, 2020

getdave commented Mar 2, 2020 •

edited

Loading

getdave commented Mar 3, 2020 •

edited

Loading