From 50ddef38a3ab42c39f446229ec47e0461a680c8d Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Fri, 11 Oct 2024 16:36:50 +0400 Subject: [PATCH 1/2] Style to prevent Layout shift when placeholder is clicked --- .../src/components/default-block-appender/content.scss | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/block-editor/src/components/default-block-appender/content.scss b/packages/block-editor/src/components/default-block-appender/content.scss index 51e0b4381a15d5..5aa544dbcbbf32 100644 --- a/packages/block-editor/src/components/default-block-appender/content.scss +++ b/packages/block-editor/src/components/default-block-appender/content.scss @@ -158,6 +158,15 @@ } } +// Prevent appender layout shift when default placeholder is clicked and replaced with insertDefaultBlock( undefined, rootClientId ); +.is-root-container.wp-block-post-content-is-layout-flow .block-list-appender { + + p.block-editor-default-block-appender__content { + margin-block-start: 0; + margin-block-end: 0; + } +} + .block-editor-default-block-appender__content { cursor: text; } From 44d6fa257596ddbeeb76b4d5c176113138035e2f Mon Sep 17 00:00:00 2001 From: Vrishabhsk Date: Mon, 14 Oct 2024 11:37:05 +0400 Subject: [PATCH 2/2] Refactor style placement to target block-appender__content specifically --- .../components/default-block-appender/content.scss | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/packages/block-editor/src/components/default-block-appender/content.scss b/packages/block-editor/src/components/default-block-appender/content.scss index 5aa544dbcbbf32..9ca2e6c5c028ce 100644 --- a/packages/block-editor/src/components/default-block-appender/content.scss +++ b/packages/block-editor/src/components/default-block-appender/content.scss @@ -24,6 +24,11 @@ .block-editor-default-block-appender__content { // Set the opacity of the initial block appender to the same as placeholder text in an empty Paragraph block. opacity: 0.62; + + // The following prevent user agent styles from applying margins to the appender's inner paragraph. + // Prevents Layout shift in the editor when single post's content block's inner block content width is unset. + margin-block-start: 0; + margin-block-end: 0; } // In "constrained" layout containers, the first and last paragraphs have their margins zeroed out. @@ -158,15 +163,6 @@ } } -// Prevent appender layout shift when default placeholder is clicked and replaced with insertDefaultBlock( undefined, rootClientId ); -.is-root-container.wp-block-post-content-is-layout-flow .block-list-appender { - - p.block-editor-default-block-appender__content { - margin-block-start: 0; - margin-block-end: 0; - } -} - .block-editor-default-block-appender__content { cursor: text; }