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.

Sign up for GitHub

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

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

Merged
merged 5 commits into from
Nov 15, 2018
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
53ed4c3
Columns: Improve margins, column child block, mobile.
jasmussen Nov 15, 2018
446b738
Fix issue with more than 2 columns.
jasmussen Nov 15, 2018
dbe5225
Prevent columns from growing wider than their set width.
jasmussen Nov 15, 2018
d67d7d5
Use break-word for better word breaks.
jasmussen Nov 15, 2018
c67b5c8
Copy editor style to frontend.
jasmussen Nov 15, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
99 changes: 45 additions & 54 deletions packages/block-library/src/columns/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,17 @@
}
}

// Fullwide: show margin left/right to ensure there's room for the side UI
// This is not a 1:1 preview with the front-end where these margins would presumably be zero
// @todo this could be revisited, by for example showing this margin only when the parent block was selected first
// Then at least an unselected columns block would be an accurate preview
.editor-block-list__block[data-align="full"] .wp-block-columns .editor-block-list__layout {
&:first-child {
margin-left: $block-side-ui-width + $block-side-ui-clearance;
}
&:last-child {
margin-right: $block-side-ui-width + $block-side-ui-clearance;
// Fullwide: show margin left/right to ensure there's room for the side UI.
// This is not a 1:1 preview with the front-end where these margins would presumably be zero.
// @todo This could be revisited, by for example showing this margin only when the parent block was selected first.
// Then at least an unselected columns block would be an accurate preview.
.editor-block-list__block[data-align="full"] .wp-block-columns > .editor-inner-blocks {
padding-left: $block-padding;
padding-right: $block-padding;

@include break-small() {
padding-left: $block-padding + $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance;
padding-right: $block-padding + $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance;
}
}

Expand All @@ -34,10 +35,11 @@
// Responsiveness: Allow wrapping on mobile.
flex-wrap: wrap;

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

// Adjust the individual column block.
> [data-type="core/column"] {
display: flex;
flex-direction: column;
Expand All @@ -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 {
Copy link
Contributor

Choose a reason for hiding this comment

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

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

margin-top: -$block-padding - $block-padding;
margin-bottom: -$block-padding - $block-padding;
}

> .editor-block-list__block-edit {
margin-top: 0;
margin-bottom: 0;
}

// Extend the passthrough concept to the block paddings, which we zero out.
> .editor-block-list__block-edit::before {
left: 0;
right: 0;
}
> .editor-block-list__block-edit > .editor-block-contextual-toolbar {
margin-left: -$border-width;
}

// On mobile, only a single column is shown, so match adjacent block paddings.
padding-left: 0;
padding-right: 0;
margin-left: -$block-padding;
margin-right: -$block-padding;
@include break-small () {
padding-left: $block-padding;
padding-right: $block-padding;
margin-right: inherit;
// Every .editor-block-list__block has auto-left/right margins, which centers columns.
// Since they aren't centered on the front-end, we explicitly set a zero left margin here.
margin-left: 0;
}

@include break-small() {
> .editor-block-list__block-edit > .editor-block-contextual-toolbar {
top: $block-toolbar-height - $border-width;
transform: translateY(-$block-toolbar-height - $border-width);
margin-left: -$grid-size-large - $border-width;
}
margin-left: $block-padding;
margin-right: $block-padding;
}

> .editor-block-list__block-edit::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
// Prevent the columns from growing wider than their distributed sizes.
min-width: 0;

> .editor-block-list__block-edit > .editor-block-list__breadcrumb {
top: 0;
right: 0;
}
}
// Prevent long unbroken words from overflowing.
word-break: break-word; // For back-compat.
overflow-wrap: break-word; // New standard.

// Responsiveness: Show at most one columns on mobile.
flex-basis: 100%;
Expand All @@ -101,27 +97,21 @@
// 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() {
> .editor-block-list__block-edit {
padding-left: $grid-size-large;
padding-right: $grid-size-large;
&:nth-child(odd) {
margin-right: $grid-size-large * 2;
}

&:nth-child(odd) > .editor-block-list__block-edit {
padding-left: 0;
}

&:nth-child(even) > .editor-block-list__block-edit {
padding-right: 0;
&:nth-child(even) {
margin-left: $grid-size-large * 2;
}
}

@include break-medium() {
&:not(:first-child) > .editor-block-list__block-edit {
padding-left: $grid-size-large;
@include break-small() {
&:not(:first-child) {
margin-left: $grid-size-large * 2;
}

&:not(:last-child) > .editor-block-list__block-edit {
padding-right: $grid-size-large;
&:not(:last-child) {
margin-right: $grid-size-large * 2;
}
}
}
Expand All @@ -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 > * {
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we really need all this specificity

pointer-events: all;
}
21 changes: 11 additions & 10 deletions packages/block-library/src/columns/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,28 +22,29 @@
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() {
padding-left: $grid-size-large;
padding-right: $grid-size-large;

&:nth-child(odd) {
padding-left: 0;
margin-right: $grid-size-large * 2;
}

&:nth-child(even) {
padding-right: 0;
margin-left: $grid-size-large * 2;
}
}

@include break-medium() {
&:not(:first-child) {
padding-left: $grid-size-large;
margin-left: $grid-size-large * 2;
}

&:not(:last-child) {
padding-right: $grid-size-large;
margin-right: $grid-size-large * 2;
}
}
}
10 changes: 2 additions & 8 deletions packages/editor/src/components/block-list/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -430,8 +430,8 @@

// Full-wide
&[data-align="full"] {
// Position hover label on the right
> .editor-block-list__block-edit .editor-block-list__breadcrumb {
// Position hover label on the right for the top level block.
> .editor-block-list__block-edit > .editor-block-list__breadcrumb {
right: 0;
}

Expand Down Expand Up @@ -807,12 +807,6 @@
margin-left: $block-padding + $border-width;
}

// Don't do it for wide elements, this causes a horizontal scrollbar.
&[data-align="full"] .editor-block-contextual-toolbar {
margin-left: -$block-padding - $block-side-ui-width;
margin-right: -$block-padding - $block-side-ui-width;
}

// Reset pointer-events on children.
.editor-block-contextual-toolbar > * {
pointer-events: auto;
Expand Down