Try a simpler spacing setup for gallery items #10027

jasmussen · 2018-09-19T09:12:20Z

The stock gallery features white gutters between items. Currently in master, every item has an even 8px margin all around. We then compensate for this, left and right, of the gallery, to make sure items in the gallery align correctly with text width above and below the gallery.

This PR attempts a different approach. It sets only the right and bottom margin on gallery items, and then unsets the right margin on the rightmost item in each row.

This is a little more complex in the rules that are output, but it solves the issue presented here: #9670 (comment)

Let me know your thoughts. The columns markup itself is a little more complex, but the gallery itself is easier to style for themes, as it no longer uses negative margins.

If we like this, we'll need to test for IE as well.

By the way I noticed this:

It looks like when the gallery block has no alignment, an "alignundefined" is applied.

CC: @SofiaSousa

The stock gallery features white gutters between items. Currently in `master`, every item has an even 8px margin all around. We then compensate for this, left and right, of the gallery, to make sure items in the gallery align correctly with text width above and below the gallery. This PR attempts a different approach. It sets only the right and bottom margin on gallery items, and then unsets the right margin on the rightmost item in each row. This is a little more complex in the rules that are output, but it solves the issue presented here: #9670 (comment) Let me know your thoughts.

SofiaSousa · 2018-09-19T10:17:52Z

It solves my problem in the preview mode, no horizontal scroll anymore 👍

jasmussen · 2018-09-19T11:24:19Z

@kjellr I could use your CSS sanity check on this one. Thanks.

tofumatt

It looks like a lot of the CSS here needs to be removed rather than commented, but I tested things in IE 11 and they seemed okay.

I couldn't reproduce the alignundefined class, but that seems a separate issue anyway… if you can reproduce it consistently please do file a bug and I'll take a look, it'd think the fix would be straightforward.

tofumatt · 2018-09-19T11:52:26Z

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

 // Allow gallery items to go edge to edge.
-.gutenberg .wp-block-gallery:not(.components-placeholder) {
+/*.gutenberg .wp-block-gallery:not(.components-placeholder) {


This should be removed, right?

🤦‍♂️ right yes thanks.

tofumatt · 2018-09-19T12:03:50Z

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

 			}
 		}
 	}

+	// Unset right margins.
+	@for $j from 1 through 8 {


Why 1 through 8?

The other for loop starts at 3 because 1 and 2 have their own explicit rules for mobile, and 3 columns and up is for above mobile breakpoints anyway.

But the rules to remove the right margin on the rightmost tile applies across the spectrum, i.e. from 1 up to and including 8 columns.

Might be good to add a comment then, stating that 8 columns is the max or something because that wasn't clear to me 😄

jasmussen · 2018-09-19T12:08:46Z

Thanks for the IE sanity check 💕

jasmussen · 2018-09-19T13:06:31Z

I couldn't reproduce the alignundefined class, but that seems a separate issue anyway… if you can reproduce it consistently please do file a bug and I'll take a look, it'd think the fix would be straightforward.

Completely agree that's separate. I can reproduce it consistently though, it's only in the editor, and it appears to be benign, so it's not saved for the post itself:

Remove debug comments. Sorry, long day. Clarify comments.

talldan · 2018-09-19T14:37:48Z

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

 	}

 	&.columns-1 .blocks-gallery-image,
 	&.columns-1 .blocks-gallery-item {
-		width: calc(100% / 1 - 16px);
+		width: calc(100% / 1);


Is calc(100% / 1) the same as 100%?

Yes, I think it was written this way to mimic the other column math in near context... sort of like when we use $border-width instead of 1px just to make the math more easily digestible.

I'm fine with changing this if you like?

Ok, I thought it was either that or some kind of CSS hack. It's probably best to change it, but it's very very minor 😄

talldan · 2018-09-20T11:23:51Z

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

 	@include break-small {
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } .blocks-gallery-image,
 			&.columns-#{ $i } .blocks-gallery-item {
-				width: calc(100% / #{ $i } - 16px);
+				width: calc((100% / #{ $i }) - (#{ $grid-size-large } * #{ $i }));


I had a test, and the items are too small at column sizes 4 and above. When I choose 4 columns I actually end up with 7 items in a row.

This calculation doesn't seem right. For every item we subtract margin * columnCount. However, each item only has a static unchanging margin of $grid-size-large. The margin doesn't increase for an individual item when there are more columns. Changing the line to this fixes things:

width: calc((100% / #{ $i }) - #{ $grid-size-large });

The same applies for the other calculations, it works fine without $grid-size-large being multiplied.

Solid, this fixed it. Ack went a little fast there:

CC: @kjellr thanks this fixes your issue too.

talldan · 2018-09-20T11:40:31Z

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

 			}
 		}
 	}

+	// Unset the right margin on every rightmost gallery item to ensure center balance.
+	@for $j from 1 through 8 {


I think even though this is scss, I still prefer giving variables a proper name like $column-count. As far as I know, sass has block scope, so it shouldn't cause an issue.

talldan · 2018-09-20T11:43:12Z

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

 	.blocks-gallery-image,
 	.blocks-gallery-item {
-		margin: 8px;
+		// Add space between thumbnails, and unset right most thumbnails later.
+		margin: 0 $grid-size-large $grid-size-large 0;


I think we could take advantage of aliasing $grid-size-large to make things more readable. Maybe something like $item-margin.

I would like to address/discuss this separately. We already have an $item-spacing variable of 10px that I'd like to retire in favor of a grid unit. But the overall idea is to introduce a visual grid to all of Gutenberg that should make things align better — so I would prefer we can keep the term "grid" as part of it.

talldan · 2018-09-20T11:48:27Z

I'm definitely in favour of this approach, I think trying to only apply margin to the bottom and/or right is a constraint that results in cleaner css. 👍

kjellr · 2018-09-20T15:25:49Z

I like this approach too. Just a couple issues I've noticed during testing:

I'm seeing spacing issues with galleries that have 5 or more items in 4 or more rows (These persist on the front end too, and sound like they're related to @talldan's comment above):

When things drop to two columns on mobile, it looks like every second row's right margin is missing:

SofiaSousa · 2018-09-20T17:52:18Z

Guys, it was just a mathematical question. First subtract the margins total, then divide by the number of columns.

& .blocks-gallery-image,
& .blocks-gallery-item {
    width: calc((100% - #{ $grid-size-large }) / 2);
}

@for $i from 3 through 8 {
    &.columns-#{ $i } .blocks-gallery-image,
    &.columns-#{ $i } .blocks-gallery-item {
        width: calc((100% - #{ $grid-size-large } * #{ $i - 1 }) / #{ $i });
    }
}

jasmussen · 2018-09-21T07:25:30Z

Thank you @SofiaSousa you were right there was something off with the math. But I believe I've fixed it now!

SofiaSousa · 2018-09-21T08:38:27Z

Yep, I've tried with chrome, safari, and firefox and it looks correct, thanks 👍

kjellr · 2018-09-21T12:33:27Z

This is working great on large screens! 💯

(Please ignore this if you're already aware, but) I'm still seeing issues at mobile breakpoints. For example, this is a 3-col gallery with 4 items, as seen on a small screen:

talldan · 2018-09-21T14:28:09Z

It looks like the margin reset is still being applied to every nth item for the mobile fallback. That's a bit of a tricky one to solve.

SofiaSousa · 2018-09-21T14:58:47Z

Still think math is not totally correct:

calc((100% / 2) - #{ $grid-size-large })

is not the same of

calc((100% - #{ $grid-size-large }) / 2)

With a practical example, assuming 100% is 580px:

580/2-16 = 274
(580-16)/2 = 282

Now, the columns width only looks right because of the flex-wrap: 1.

The width of a column is the total width less the total of margin between columns divide by the number of columns.

the total width = 100%
the total of margin = margin size * number of spaces
number of spaces = number of columns - 1

column width = (100% - (margin size * number of columns - 1)) / number of columns

When colunms = 2

width = (100% - 16px) / 2

When colunms = 3

width = (100% - 32px) / 3

So my solution would be something like this:

Removing right margin of the last column (for 1 or 2 columns)

// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
& .blocks-gallery-image,
& .blocks-gallery-item {
    width: calc((100% - #{ $grid-size-large }) / 2);

    &:nth-child(odd){            
         margin-right: 0;
    }
}

&.columns-1 .blocks-gallery-image,
&.columns-1 .blocks-gallery-item {
    width: 100%;
    margin-right: 0;
}

Setting right margin for all items
Finally, only apply n columns margin rules beyond mobile viewports

// Beyond mobile viewports, we allow up to 8 columns.
@include break-small {
    @for $i from 3 through 8 {
        &.columns-#{ $i } .blocks-gallery-image,
        &.columns-#{ $i } .blocks-gallery-item {
            width: calc((100% - #{ $grid-size-large } * #{ $i - 1 }) / #{ $i });
            margin-right: 16px;
        }
    }

    // Unset the right margin on every rightmost gallery item to ensure center balance.
    @for $column-count from 1 through 8 {
        &.columns-#{ $column-count } .blocks-gallery-image:nth-of-type(#{ $column-count }n),
        &.columns-#{ $column-count } .blocks-gallery-item:nth-of-type(#{ $column-count }n) {
            margin-right: 0;
        }
    }
}

…at mobile breakpoints Co-authored-by: Sofia Sousa <[email protected]>

talldan · 2018-09-21T15:27:58Z

@SofiaSousa Thanks! that works well for me. I've pushed the CSS from your comment in a commit. @kjellr - are you able to retest? I had a quick test and couldn't spot any issues.

kjellr · 2018-09-21T17:16:03Z

@kjellr - are you able to retest? I had a quick test and couldn't spot any issues.

Looks good in Gutenberg!

I think that latest update needs to get pushed to the font-end styles too though:

jasmussen · 2018-09-24T08:12:26Z

Hmm @kjellr I'm not seeing that issue on the front-end. Which theme is this? Also the rules should be output on the frontend since they're in style.scss. Cache issue? Otherwise let me know how to reproduce. Thanks for testing.

talldan · 2018-09-24T11:21:13Z

Also looks good to me in the front-end 👍

kjellr · 2018-09-24T12:33:11Z

Very odd! I'm still seeing the error. It doesn't seem like a caching bug, since it's happening in every browser I try — even after changing themes and creating brand new galleries. Here's what I'm doing:

Open a new post
Add a gallery with two items (screenshot)
Publish, and view on the front end (screenshot)

Those screenshots are in Safari 12.0 (using the Twenty Seventeen theme), but I'm seeing the same in Chrome + FF, too. 🤔

jasmussen · 2018-09-25T08:09:14Z

I still can't reproduce. Tried Safari, tried Twenty Seventeen. This is so weird.

Try this:

git checkout master
git pull
git branch -D try/gallery-margins-refactor
git checkout try/gallery-margins-refactor
npm run dev

It's sort of a nuclear way to delete the branch, pull it fresh and try it again. My only thought is you have some cache ghost or an old version of the branch.

SofiaSousa · 2018-09-25T09:00:46Z

I have try/gallery-margin-refactor last changes and also got this for a 2 columns gallery:

This is chrome but the same happens on safari or firefox. And it happens because of this rule:

.wp-block-gallery .blocks-gallery-image:nth-child(odd), 
.wp-block-gallery .blocks-gallery-item:nth-child(odd) {
    margin-right: 0;
}

@SofiaSousa

Props @SofiaSousa

jasmussen · 2018-09-25T09:43:03Z

You were right! I could reproduce it with a gallery of 2 items, and removing that rule fixed it. Thank you!

SofiaSousa · 2018-09-25T09:53:25Z

@jasmussen

I'm sorry guy, but you can't simply remove that rule, it's needed for mobile.

:nth-child(odd) should be replaced by &:nth-of-type(even).

jasmussen · 2018-09-25T09:57:26Z

I'm sorry guy, but you can't simply remove that rule, it's needed for mobile.

Haha, sorry — It seemed to work for me in mobile in quick testing, but I've now tested with additional configurations and breakpoints. Added your revised rule. Thank you. Good for final round of testing?

SofiaSousa · 2018-09-25T11:51:13Z

Well, it's looking nice in safari, firefox and chrome for me, but more people should test, just in case :)

kjellr

This is working great for me now. Thanks, everyone!

mtias · 2018-09-25T13:50:40Z

Nice work here all, it was fun reading the history :)

#10027 introduced a small bug where the last item in a gallery jumps around when a user is in the process of adding a caption. This is due to a `:nth-last-child(2)` style rule that is applied to a gallery when it has an `is-selected` class, but not an `is-typing` class. This PR modifies that rule to include the `is-typing` class and remove the jump.

jasmussen self-assigned this Sep 19, 2018

jasmussen requested a review from a team September 19, 2018 09:12

jasmussen added the Needs Design Feedback Needs general design feedback. label Sep 19, 2018

tofumatt reviewed Sep 19, 2018

View reviewed changes

tofumatt requested a review from a team September 19, 2018 12:04

Clean up the mess.

90d0808

Remove debug comments. Sorry, long day. Clarify comments.

talldan reviewed Sep 19, 2018

View reviewed changes

Address feedback.

e87089c

talldan reviewed Sep 20, 2018

View reviewed changes

Joen Asmussen added 2 commits September 21, 2018 09:07

Address feedback.

42d3e93

Bugfix.

8ea5725

jasmussen removed the Needs Design Feedback Needs general design feedback. label Sep 21, 2018

jasmussen added this to the 4.0 milestone Sep 21, 2018

jasmussen added the [Type] Enhancement A suggestion for improvement. label Sep 21, 2018

Adjust gallery css layout math, and ensure margin is reset correctly …

a620ead

…at mobile breakpoints Co-authored-by: Sofia Sousa <[email protected]>

gziolo mentioned this pull request Sep 24, 2018

Gallery: Use space-between instead of negative margins #9670

Closed

4 tasks

Fix odd rule

1c24a11

Props @SofiaSousa

Add fixed rule

ec58508

kjellr self-requested a review September 25, 2018 12:50

kjellr approved these changes Sep 25, 2018

View reviewed changes

jasmussen merged commit 3f36aba into master Sep 25, 2018

jasmussen deleted the try/gallery-margins-refactor branch September 25, 2018 13:29

kjellr mentioned this pull request Sep 27, 2018

Fix gallery margin while typing #10221

Merged

simison mentioned this pull request Dec 3, 2018

Tiled gallery: Fix infinite loop left/right block align Automattic/wp-calypso#29017

Merged

designsimply mentioned this pull request Jan 10, 2019

Gallery Block: Gallery not being properly displayed/rendered in Edge #13270

Closed

Try a simpler spacing setup for gallery items #10027

Try a simpler spacing setup for gallery items #10027

Conversation

jasmussen commented Sep 19, 2018

SofiaSousa commented Sep 19, 2018

jasmussen commented Sep 19, 2018

tofumatt left a 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jasmussen commented Sep 19, 2018

jasmussen commented Sep 19, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan Sep 20, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan Sep 20, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan Sep 20, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

talldan commented Sep 20, 2018

kjellr commented Sep 20, 2018

SofiaSousa commented Sep 20, 2018 • edited Loading

jasmussen commented Sep 21, 2018

SofiaSousa commented Sep 21, 2018

kjellr commented Sep 21, 2018

talldan commented Sep 21, 2018

SofiaSousa commented Sep 21, 2018 • edited Loading

talldan commented Sep 21, 2018

kjellr commented Sep 21, 2018

jasmussen commented Sep 24, 2018

talldan commented Sep 24, 2018

kjellr commented Sep 24, 2018 • edited Loading

jasmussen commented Sep 25, 2018

SofiaSousa commented Sep 25, 2018

jasmussen commented Sep 25, 2018

SofiaSousa commented Sep 25, 2018

jasmussen commented Sep 25, 2018

SofiaSousa commented Sep 25, 2018

kjellr left a comment

Choose a reason for hiding this comment

mtias commented Sep 25, 2018

talldan Sep 20, 2018 •

edited

Loading

talldan Sep 20, 2018 •

edited

Loading

talldan Sep 20, 2018 •

edited

Loading

SofiaSousa commented Sep 20, 2018 •

edited

Loading

SofiaSousa commented Sep 21, 2018 •

edited

Loading

kjellr commented Sep 24, 2018 •

edited

Loading