diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 932115b43f7604..aecb8fff5b9611 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -694,31 +694,3 @@ .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. -// These paddings and margins are removed from the BlockPreview component's style -// Any change need to be reflected there. -.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; - } - - // Full-wide. (to account for the paddings added above) - > .wp-block[data-align="full"] { - 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/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 7c658842aecc90..7fbdb83e29988a 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -45,19 +45,10 @@ height: 0; } -// Ideally this wrapper div is not needed but if we waant to match the positionning of blocks +// Ideally this wrapper div is not needed but if we want to match the positioning 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; - - @include break-small() { - padding-left: $block-side-ui-width; - padding-right: $block-side-ui-width; - } - .editor-post-title { // Center. margin-left: auto; diff --git a/packages/editor/src/editor-styles.scss b/packages/editor/src/editor-styles.scss index ff0da03879940d..84dda6f9289591 100644 --- a/packages/editor/src/editor-styles.scss +++ b/packages/editor/src/editor-styles.scss @@ -13,8 +13,16 @@ body { font-size: $editor-font-size; line-height: $editor-line-height; color: $dark-gray-primary; + padding: 10px; } +// For full-wide blocks, we compensate for these 10px. +.block-editor-block-list__layout.is-root-container > .wp-block[data-align="full"] { + margin-left: -10px; + margin-right: -10px; +} + + /* Headings */ // These follow a Major Third type scale // https://type-scale.com/?size=16&scale=1.250&text=A%20Visual%20Type%20Scale&font=Noto%20Serif&fontweight=600