From df3e79a602d277d2752ea8ab2293d4cf24e75e14 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 26 Mar 2020 10:18:20 +0100 Subject: [PATCH] Restore previous way of adding block-layout padding --- packages/base-styles/_variables.scss | 2 +- .../components/block-list/root-container.js | 7 +++- .../src/components/block-list/style.scss | 30 ++++++++++++++ .../src/components/visual-editor/index.js | 4 +- .../src/components/visual-editor/style.scss | 40 +++++++++---------- .../src/components/widget-area/style.scss | 5 --- 6 files changed, 58 insertions(+), 30 deletions(-) diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss index 404e8b25c87aef..099d53817829b8 100644 --- a/packages/base-styles/_variables.scss +++ b/packages/base-styles/_variables.scss @@ -75,7 +75,7 @@ $block-toolbar-height: $grid-unit-60; $mobile-block-toolbar-height: 44px; $block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size. $block-spacing: 4px; // Vertical space between blocks. -$block-side-ui-width: 28px; // Width of the movers/drag handle UI. +$block-side-ui-width: $button-size; // Width of the movers/drag handle UI. $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block. $block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint. $block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group) diff --git a/packages/block-editor/src/components/block-list/root-container.js b/packages/block-editor/src/components/block-list/root-container.js index 1ca09351851667..72783ad80c5f61 100644 --- a/packages/block-editor/src/components/block-list/root-container.js +++ b/packages/block-editor/src/components/block-list/root-container.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -85,7 +90,7 @@ function RootContainer( { children, className, hasPopover = true }, ref ) { { hasPopover ? : null }
diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index d54c9710f210a1..b2c7f75b853438 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -118,6 +118,7 @@ */ .block-editor-block-list__layout { + position: relative; // The primary indicator of selection in text is the native selection marker. // When selecting multiple blocks, we provide an additional selection indicator. @@ -630,3 +631,32 @@ .is-dragging-components-draggable .components-tooltip { display: none; } + + +// Add side padding for the canvas, currently edit-post-visual-editor. +// 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. +.block-editor-block-list__layout.is-root-container { + padding-left: $block-padding; + padding-right: $block-padding; + + @include break-small() { + padding-left: $block-side-ui-width; + padding-right: $block-side-ui-width; + } +} + +.block-editor-block-list__layout.is-root-container { + // Full-wide. (to account for the padddings added above) + > .block-editor-block-list__block[data-align="full"], + > .block-editor-block-list__block.alignfull { + margin-left: -$block-padding; + margin-right: -$block-padding; + + @include break-small() { + margin-left: -$block-side-ui-width; + margin-right: -$block-side-ui-width; + } + } +} diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index b34d8a1375b66c..9929a6699674f3 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -39,7 +39,9 @@ function VisualEditor() { - +
+ +
diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 113eda49df0545..acdf055d22faa1 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -42,31 +42,27 @@ margin-right: auto; } -.edit-post-visual-editor .editor-post-title { - // Center. - margin-left: auto; - margin-right: auto; - - // Apply default block margin below the post title. - // This ensures the first block on the page is in a good position. - // This rule can be retired once the title becomes an actual block. - margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style. -} - -// Add side padding for the canvas, currently edit-post-visual-editor. -// 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. -.edit-post-visual-editor { +// Ideally this wrapper div is not needed but if we waant to match the positionning of blocks +// .block-editor-block-list__layout and block-editor-block-list__block +// We need to have two DOM elements. +.edit-post-visual-editor__post-title-wrapper { + // This padding is needed to match the block root container padding padding-left: $block-padding; padding-right: $block-padding; - // Full-wide. (to account for the padddings added above) - .block-editor-block-list__block[data-align="full"], - .block-editor-block-list__block.alignfull { - margin-left: -$block-padding; - margin-right: -$block-padding; + @include break-small() { + padding-left: $block-side-ui-width; + padding-right: $block-side-ui-width; } - position: relative; + .editor-post-title { + // Center. + margin-left: auto; + margin-right: auto; + + // Apply default block margin below the post title. + // This ensures the first block on the page is in a good position. + // This rule can be retired once the title becomes an actual block. + margin-bottom: ($block-padding * 2) + $block-spacing; // This matches 2em in the vanilla style. + } } diff --git a/packages/edit-widgets/src/components/widget-area/style.scss b/packages/edit-widgets/src/components/widget-area/style.scss index 2f1160bd17c77b..248f5d4e4ff856 100644 --- a/packages/edit-widgets/src/components/widget-area/style.scss +++ b/packages/edit-widgets/src/components/widget-area/style.scss @@ -2,11 +2,6 @@ max-width: $widget-area-width; margin: 0 auto 30px; - // Reduce padding inside widget areas - .block-editor-block-list__layout { - padding-left: $block-side-ui-width + $block-padding; - padding-right: $block-side-ui-width + $block-padding; - } // By default the default block appender inserter has a negative position, // but given that on the widget screen we have 0 padding we need to remove the negative position. .block-editor-default-block-appender .block-editor-inserter,