Skip to content

Commit

Permalink
Fix columns to work with the new margins.
Browse files Browse the repository at this point in the history
  • Loading branch information
jasmussen committed Oct 24, 2019
1 parent 22c162b commit 6acfdd2
Showing 1 changed file with 8 additions and 12 deletions.
20 changes: 8 additions & 12 deletions packages/block-library/src/columns/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@
// Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere
// When using CSS grid, margins do not collapse on the container.
.wp-block-columns .editor-block-list__layout {
margin-left: 0;
margin-right: 0;

// This max-width is used to constrain the main editor column, it should not cascade into columns
.editor-block-list__block {
max-width: none;
Expand Down Expand Up @@ -74,25 +71,25 @@

// Beyond mobile, allow 2 columns.
@include break-small() {
flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2}));
flex-basis: calc(50% - (#{$grid-size-large}));
flex-grow: 0;
margin-left: $block-padding;
margin-right: $block-padding;
margin-left: 0;
margin-right: 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(even) {
margin-left: calc(#{$grid-size-large * 2} + #{$block-padding});
margin-left: calc(#{$grid-size-large * 2});
}
}

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

Expand Down Expand Up @@ -188,10 +185,9 @@ div.block-core-columns.is-vertically-aligned-bottom {
/**
* Add extra padding when the parent block is selected, for easier interaction.
*/
.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/columns"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/columns"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/column"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/column"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks {

[data-type="core/columns"].is-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks,
[data-type="core/columns"].has-child-selected > .block-editor-block-list__block-edit > [data-block] > div > .block-editor-inner-blocks {
padding: $block-padding;

// Negate this padding for the placeholder.
Expand Down

0 comments on commit 6acfdd2

Please sign in to comment.