From 86364cc83d914a545fd7ba38c4e7824d862ad98f Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 30 Jun 2021 11:18:47 +0200 Subject: [PATCH 1/3] Try: Refactor appender margin. --- .../components/block-list-appender/style.scss | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss index ebfeb4c0b090c..a93b3d7c007ce 100644 --- a/packages/block-editor/src/components/block-list-appender/style.scss +++ b/packages/block-editor/src/components/block-list-appender/style.scss @@ -10,26 +10,31 @@ max-width: none; } - // Add a little left margin when used horizontally. - // The right margin should be set to auto, so as to not shift layout in flex containers. - margin: 0 auto 0 $grid-unit-10; - - // ... unless it's the only child. - &:first-child { - margin-left: 0; - } - .block-editor-default-block-appender { margin: $grid-unit-10 0; } - // Animate appearance. + // Add an explicit left margin of zero and auto right margin + // to work in horizontal flex containers. + margin: 0 auto 0 0; + + // Black square plus appender. .block-list-appender__toggle { padding: 0; + + // Animate appearance. opacity: 1; transform: scale(1); transition: all 0.1s ease; @include reduce-motion("transition"); + + // The black square button should have a little left margin in horizontal containers. + margin-left: $grid-unit-10; + } + + // Cancel any left margin if the black plus is the only child. + &:first-of-type .block-list-appender__toggle { + margin-left: 0; } } From d099fe3ab7290564bf32497fcaaf76a230d6edef Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 30 Jun 2021 13:10:54 +0200 Subject: [PATCH 2/3] Expand comment. --- .../src/components/block-list-appender/style.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss index a93b3d7c007ce..b257123597526 100644 --- a/packages/block-editor/src/components/block-list-appender/style.scss +++ b/packages/block-editor/src/components/block-list-appender/style.scss @@ -14,8 +14,9 @@ margin: $grid-unit-10 0; } - // Add an explicit left margin of zero and auto right margin - // to work in horizontal flex containers. + // Add an explicit left margin of zero and auto right margin to work in horizontal + // flex containers. Without it, a "space-between"-like effect from two auto margins + // will cause the black plus to sit in the center of what space is left. margin: 0 auto 0 0; // Black square plus appender. From 64c2cbb9f732fd50a2957865d49df0c134dcafb8 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Thu, 1 Jul 2021 11:27:31 +0200 Subject: [PATCH 3/3] Add clarifying comment. --- .../src/components/block-list-appender/style.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list-appender/style.scss b/packages/block-editor/src/components/block-list-appender/style.scss index b257123597526..5079df7cdadbe 100644 --- a/packages/block-editor/src/components/block-list-appender/style.scss +++ b/packages/block-editor/src/components/block-list-appender/style.scss @@ -33,7 +33,10 @@ margin-left: $grid-unit-10; } - // Cancel any left margin if the black plus is the only child. + // Cancel any left margin if the black plus sits alone in the container. + // `first-of-type` is used instead of `first-child` as the element is not always the only + // element in the "empty" container. For example the empty navigation block state has a + // zero-width placeholder state that is meant to help correctly size the dimensions. &:first-of-type .block-list-appender__toggle { margin-left: 0; }