From 4370b73b8d700722520d1e600fb9009024ea31b4 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 8 May 2020 10:46:21 +0200 Subject: [PATCH 1/3] Try: Remove canvas padding. This PR removes the 14px on mobile, 36px on desktop breakpoints padding that is applied to the root container. In the previous iteration of the editor, this padding was necessary to: - on mobile, show the 14px block border that sat 14px outside of the selected block. - on desktop breakpoints, show both the 14px block padding, and make room for the side UI (movers) Because both of those elements are no longer present, we can remove this padding. --- .../src/components/block-list/style.scss | 28 ------------------- .../src/components/visual-editor/style.scss | 11 +------- packages/editor/src/editor-styles.scss | 8 ++++++ 3 files changed, 9 insertions(+), 38 deletions(-) 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 From 32d0b0cb398f02e2d4dd2ebd7631645c3f943a1c Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 22 Jun 2020 10:26:17 +0200 Subject: [PATCH 2/3] Update snapshot. --- .../editor/various/__snapshots__/rtl.test.js.snap | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/rtl.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/rtl.test.js.snap index 19b4e8c305acc2..a8b94682a45963 100644 --- a/packages/e2e-tests/specs/editor/various/__snapshots__/rtl.test.js.snap +++ b/packages/e2e-tests/specs/editor/various/__snapshots__/rtl.test.js.snap @@ -8,11 +8,11 @@ exports[`RTL should arrow navigate 1`] = ` exports[`RTL should arrow navigate between blocks 1`] = ` " -

٠
١

+

٠

-

٠
١
٢

+


١١٠

٢

" `; @@ -24,7 +24,11 @@ exports[`RTL should merge backward 1`] = ` exports[`RTL should merge forward 1`] = ` " -

٠١

+

٠

+ + + +

" `; From 6e0ff309138ea3310094b86e426e58f9d2bd5cb1 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 22 Jun 2020 10:44:04 +0200 Subject: [PATCH 3/3] Try: Fix test. --- packages/e2e-tests/specs/editor/various/typewriter.test.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/e2e-tests/specs/editor/various/typewriter.test.js b/packages/e2e-tests/specs/editor/various/typewriter.test.js index 2661d69acd9055..a4ed30951220b5 100644 --- a/packages/e2e-tests/specs/editor/various/typewriter.test.js +++ b/packages/e2e-tests/specs/editor/various/typewriter.test.js @@ -21,6 +21,9 @@ describe( 'TypeWriter', () => { // Create first block. await page.keyboard.press( 'Enter' ); + // Create second block. + await page.keyboard.press( 'Enter' ); + const initialPosition = await getCaretPosition(); // The page shouldn't be scrolled when it's being filled. @@ -118,8 +121,11 @@ describe( 'TypeWriter', () => { await page.keyboard.press( 'Enter' ); // Create second block. await page.keyboard.press( 'Enter' ); + // Create third block. + await page.keyboard.press( 'Enter' ); // Move to first block. await page.keyboard.press( 'ArrowUp' ); + await page.keyboard.press( 'ArrowUp' ); const initialPosition = await getCaretPosition();