From 22c162b853b519c02f269dd17e5c6a9c11b81b7f Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 10 Oct 2019 10:51:15 +0200 Subject: [PATCH] Refactor horizontal margins further. This moves the padding that is necessary for the side UI on thin viewports to the editing canvas wrapper, rather than on each individual block. --- packages/base-styles/_variables.scss | 2 +- .../src/components/block-list/style.scss | 39 +++++++------------ .../src/components/visual-editor/style.scss | 5 ++- 3 files changed, 19 insertions(+), 27 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 652be4700ff22a..75234bd5fb7795 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -41,7 +41,7 @@ $shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2); // Editor Widths $sidebar-width: 280px; -$content-width: 610px; // For the visual width, subtract 30px (2 * $block-padding + 2px borders). This comes to 580px, which is optimized for 70 characters. +$content-width: 580px; // This is optimized for 70 characters. // Block UI $border-width: 1px; diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 264a8e65e0d8da..02e4b29948d8ae 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -38,27 +38,24 @@ * General Post Content Layout */ -// Add side padding for blocks that are immediate descendants of post_content. +// Add side padding for the main block container, currently post_content. // The purpose of this padding is to ensure that on small viewports, there is // room for the block border that sits 14px ($block-padding) offset from the -// block footprint. -// This side padding may be worth revisiting as more block areas than -// post_content are explored. Maybe it can be moved to .editor-styles-wrapper -// instead, for a more agnostic experience. -// If that happens, this entire section can be removed/refactored. -.block-editor-block-list__layout .block-editor-block-list__block { - padding-left: $block-padding + $border-width; - padding-right: $block-padding + $border-width; +// block footprint, as well as the side-UI. +.block-editor-block-list__layout { + padding-left: $block-padding; + padding-right: $block-padding; + + // Beyond the mobile breakpoint, compensate for side UI. + @include break-small() { + padding-left: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2; + padding-right: $block-padding + $block-side-ui-width + $block-padding + $border-width * 2; + } // Don't propogate that padding to nested blocks. .block-editor-block-list__layout { - // Compensate for side UI. padding-left: 0; padding-right: 0; - - // Compensate for block padding. - margin-left: -$block-padding - $border-width; - margin-right: -$block-padding - $border-width; } } @@ -565,8 +562,8 @@ } > .block-editor-block-list__block-edit { - margin-left: -$block-padding - $border-width; - margin-right: -$block-padding - $border-width; + margin-left: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width; + margin-right: -$block-padding - $block-padding - $block-side-ui-width - $border-width - $border-width; } > .block-editor-block-list__block-edit::before { @@ -643,10 +640,8 @@ } // Left side UI. - &.is-multi-selected > .block-editor-block-mover, - > .block-editor-block-list__block-edit > .block-editor-block-mover { - padding-right: $block-side-ui-clearance; - + > .block-editor-block-list__block-edit > .block-editor-block-mover, + &.is-multi-selected > .block-editor-block-mover { // Position for top level blocks. left: -$block-side-ui-width - $block-side-ui-clearance - $block-padding - $border-width - $grid-size; @@ -656,10 +651,6 @@ display: block; } } - - &.is-multi-selected > .block-editor-block-mover { - left: -$block-side-ui-width - $block-side-ui-clearance - $grid-size; - } } diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 99822847cb8c20..aa6b5e39ab8232 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -71,10 +71,11 @@ } // Stretch to mimic outline padding on desktop. + // Note that we can't target the textarea as it can't be stretched. @include break-small() { > div { - margin-left: -$block-side-ui-clearance; - margin-right: -$block-side-ui-clearance; + margin-left: -$block-padding - $block-side-ui-clearance; + margin-right: -$block-padding - $block-side-ui-clearance; } } }