From 53ed4c3f6b5564276c3d0996447ad7f62a76a748 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 15 Nov 2018 10:13:53 +0100 Subject: [PATCH 1/5] Columns: Improve margins, column child block, mobile. This PR aims to further improve the columns block, and improving a number of aspects and addressing recent feedback. - It fixes an issue where fullwide columns had uneven margins, both left, center and right. Fixes #11869. - It fixes a specificity issue with toolbar and breadcrumb positioning that bled into all child blocks. - It improves the layout of individual column blocks, and fixes the toolbar positioning. This fixes feedback in https://github.com/WordPress/gutenberg/issues/7766#issuecomment-438337294. - It improves fullwide columns and how they appear on mobile. Aside from that it simplifies the code a bit, and removes a couple of redundant overrides that were better fixed elsewhere. --- .../block-library/src/columns/editor.scss | 94 +++++++------------ packages/block-library/src/columns/style.scss | 18 +--- .../src/components/block-list/style.scss | 10 +- 3 files changed, 38 insertions(+), 84 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 7b269d0dd9a0a..c39fc53ee49c5 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -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; } } @@ -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; @@ -46,46 +48,33 @@ // 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 { + 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; - } - - > .editor-block-list__block-edit::before { - top: 0; - right: 0; - bottom: 0; - left: 0; - } - - > .editor-block-list__block-edit > .editor-block-list__breadcrumb { - top: 0; - right: 0; - } + margin-left: $block-padding; + margin-right: $block-padding; } // Responsiveness: Show at most one columns on mobile. @@ -101,27 +90,11 @@ // 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) > .editor-block-list__block-edit { - padding-left: 0; - } - - &:nth-child(even) > .editor-block-list__block-edit { - padding-right: 0; + &:nth-child(odd) { + margin-right: $grid-size-large * 2; } - } - - @include break-medium() { - &:not(:first-child) > .editor-block-list__block-edit { - padding-left: $grid-size-large; - } - - &:not(:last-child) > .editor-block-list__block-edit { - padding-right: $grid-size-large; + &:nth-child(even) { + margin-left: $grid-size-large * 2; } } } @@ -147,6 +120,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 > * { pointer-events: all; } diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 6a7aed4971d8b..929a4278905c0 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -25,25 +25,11 @@ // 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; - } - } - - @include break-medium() { - &:not(:first-child) { - padding-left: $grid-size-large; - } - - &:not(:last-child) { - padding-right: $grid-size-large; + margin-left: $grid-size-large * 2; } } } diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss index 09a492374bdae..879e47b7a2cb5 100644 --- a/packages/editor/src/components/block-list/style.scss +++ b/packages/editor/src/components/block-list/style.scss @@ -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; } @@ -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; From 446b738f75bfabc94d8961364307cfd407f53508 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 15 Nov 2018 16:52:34 +0100 Subject: [PATCH 2/5] Fix issue with more than 2 columns. --- packages/block-library/src/columns/editor.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index c39fc53ee49c5..bba8c86c3a3f2 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -97,6 +97,16 @@ margin-left: $grid-size-large * 2; } } + + @include break-small() { + &:not(:first-child) { + margin-left: $grid-size-large * 2; + } + + &:not(:last-child) { + margin-right: $grid-size-large * 2; + } + } } } } From dbe522564f92f01c6183d5d68405862d05363106 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 15 Nov 2018 17:24:59 +0100 Subject: [PATCH 3/5] Prevent columns from growing wider than their set width. --- packages/block-library/src/columns/editor.scss | 6 ++++++ packages/block-library/src/columns/style.scss | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index bba8c86c3a3f2..bcc88f80ff519 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -77,6 +77,12 @@ margin-right: $block-padding; } + // Prevent the columns from growing wider than their distributed sizes. + min-width: 0; + + // Prevent long unbroken words from overflowing. + word-break: break-all; + // Responsiveness: Show at most one columns on mobile. flex-basis: 100%; diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 929a4278905c0..5b6a1dd289cea 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -22,6 +22,12 @@ 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; + // 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() { From d67d7d5b59e07b5f93ca06428b7c9bb198ef1b5d Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 15 Nov 2018 17:51:19 +0100 Subject: [PATCH 4/5] Use break-word for better word breaks. --- packages/block-library/src/columns/editor.scss | 3 ++- packages/block-library/src/columns/style.scss | 3 ++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index bcc88f80ff519..db8b558c4a85a 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -81,7 +81,8 @@ min-width: 0; // Prevent long unbroken words from overflowing. - word-break: break-all; + word-break: break-word; // For back-compat. + overflow-wrap: break-word; // New standard. // Responsiveness: Show at most one columns on mobile. flex-basis: 100%; diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 5b6a1dd289cea..0608c943c82ba 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -26,7 +26,8 @@ min-width: 0; // Prevent long unbroken words from overflowing. - word-break: break-word; + 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. From c67b5c80354930d1d3de14f1afe8200ad75c34a2 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 15 Nov 2018 18:08:21 +0100 Subject: [PATCH 5/5] Copy editor style to frontend. --- packages/block-library/src/columns/style.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 0608c943c82ba..90c61ea5acb0f 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -38,5 +38,13 @@ &:nth-child(even) { margin-left: $grid-size-large * 2; } + + &:not(:first-child) { + margin-left: $grid-size-large * 2; + } + + &:not(:last-child) { + margin-right: $grid-size-large * 2; + } } }