From 452d3b07a420e5b66d5c182a69f99c102a0af23e Mon Sep 17 00:00:00 2001 From: Andrew Serong <14988353+andrewserong@users.noreply.github.com> Date: Wed, 6 Nov 2024 19:09:41 +1100 Subject: [PATCH] Fix Paragraph appender layout shift (building on 66061) (#66779) * Style to prevent Layout shift when placeholder is clicked * Refactor style placement to target block-appender__content specifically * Remove no longer needed rules --------- Co-authored-by: Vrishabhsk Co-authored-by: andrewserong Co-authored-by: ramonjd Co-authored-by: aaronrobertshaw Co-authored-by: jasmussen --- .../default-block-appender/content.scss | 17 ++++------------- 1 file changed, 4 insertions(+), 13 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 e2009daa7358c..71ede90d25c0c 100644 --- a/packages/block-editor/src/components/default-block-appender/content.scss +++ b/packages/block-editor/src/components/default-block-appender/content.scss @@ -24,20 +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; - } - - // In "constrained" layout containers, the first and last paragraphs have their margins zeroed out. - // In the case of this appender, it needs to apply those same rules to avoid layout shifts. - // Such shifts happen when the bottom margin of the Title block has been set to less than the default 1em margin of paragraphs. - :where(body .is-layout-constrained) &, - :where(.wp-site-blocks) & { - > :first-child { - margin-block-start: 0; - margin-block-end: 0; - } - // Since this appender will only ever appear on an entirely empty document, we don't account for last-child. - // This is also because it will never be the last child, the block inserter that sits in this appender is the last child. + // The following prevents user agent styles from applying margins to the appender's inner paragraph. + // This in turn prevents layout shift due to layout styles removing margins from first and last children. + margin-block-start: 0; + margin-block-end: 0; } // Dropzone.