From 46ebefadaa848736f68dd08eaee6e1111b9d040f Mon Sep 17 00:00:00 2001 From: Joen Asmussen Date: Thu, 15 Nov 2018 18:28:12 +0100 Subject: [PATCH] Columns: Improve margins, column child block, mobile. (#11904) * 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. * Fix issue with more than 2 columns. * Prevent columns from growing wider than their set width. * Use break-word for better word breaks. * Copy editor style to frontend. --- .../block-library/src/columns/editor.scss | 99 +++++++++---------- packages/block-library/src/columns/style.scss | 21 ++-- .../src/components/block-list/style.scss | 10 +- 3 files changed, 58 insertions(+), 72 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 7b269d0dd9a0a..db8b558c4a85a 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,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 { + 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%; @@ -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; } } } @@ -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 > * { pointer-events: all; } diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 6a7aed4971d8b..90c61ea5acb0f 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -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; } } } 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;