Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
Feb 1, 2019
14 changes: 4 additions & 10 deletions packages/block-library/src/columns/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
// Responsiveness: Allow wrapping on mobile.
flex-wrap: wrap;

@include break-small() {
@include break-medium() {
flex-wrap: nowrap;
}

Expand Down Expand Up @@ -89,30 +89,24 @@

// Beyond mobile, allow 2 columns.
@include break-small() {
flex-basis: 50%;
flex-basis: calc(50% - #{$grid-size-large} - #{$block-padding * 1.5});
flex-grow: 0;
}

// Add space between columns. Themes can customize this if they wish to work differently.
// This has to match the same padding applied in style.scss.
// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
@include break-small() {
&:nth-child(odd) {
margin-right: $grid-size-large * 2;
}
&:nth-child(even) {
margin-left: $grid-size-large * 2;
Copy link

@drdogbot7 drdogbot7 Jan 29, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

EDITED b/c my initial fix was wrong.
Column gutters are too narrow in editor view compared to frontend. I think you need to do (2 * $grid-size-large) + $block-padding here to account for the negative margins added by the editor. See #12816.

image

}
}

@include break-small() {
// When columns are in a single row, add space before all except the first.
@include break-medium() {
&:not(:first-child) {
margin-left: $grid-size-large * 2;
}

&:not(:last-child) {
margin-right: $grid-size-large * 2;
}
}
}
}
Expand Down
28 changes: 12 additions & 16 deletions packages/block-library/src/columns/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,41 +10,37 @@
}

.wp-block-column {
flex: 1;
flex-grow: 1;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this property is necessary since we are setting the width to 100% below.

margin-bottom: 1em;

// Responsiveness: Show at most one columns on mobile.
flex-basis: 100%;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we change this to width:100%; we accomplish the same thing and make it easier to override.

(content < width < flex-basis)


// Beyond mobile, allow 2 columns.
@include break-small() {
flex-basis: 50%;
flex-grow: 0;
}

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

// Prevent long unbroken words from overflowing.
word-break: break-word; // For back-compat.
overflow-wrap: break-word; // New standard.

// Add space between columns. Themes can customize this if they wish to work differently.
// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
@include break-small() {
&:nth-child(odd) {
margin-right: $grid-size-large * 2;
}

// Beyond mobile, allow 2 columns.
flex-basis: calc(50% - #{$grid-size-large});
flex-grow: 0;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

flex-grow:0; isn't necessary here, if we remove flex-grow:1; above.


// Add space between the 2 columns. Themes can customize this if they wish to work differently.
// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
&:nth-child(even) {
margin-left: $grid-size-large * 2;
}
}

@include break-medium() {

// When columns are in a single row, add space before all except the first.
&:not(:first-child) {
margin-left: $grid-size-large * 2;
}

&:not(:last-child) {
margin-right: $grid-size-large * 2;
}
}
}