From ffc80efc04462b4d31176814618d23cf53bd00a4 Mon Sep 17 00:00:00 2001 From: Mapk Date: Wed, 21 Aug 2019 16:38:43 -0700 Subject: [PATCH 1/2] Reduce the padding around the sibling inserter icon so that the icon doesn't interfere with other UI elements. Kind of fixes #16646. I wanted to try a delay on the inserter, but animating the display attribute in CSS isn't possible. I think that's why the Inserter uses the opacity instead, but opacity still takes up space even when opacity is set to 0. --- packages/block-editor/src/components/block-list/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index afdbcf7297714..32034919b8601 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -860,12 +860,12 @@ // Show a clickable plus. .block-editor-inserter__toggle { - margin-top: -8px; border-radius: 50%; color: $blue-medium-focus; background: $white; - height: $block-padding * 2 + 8px; - width: $block-padding * 2 + 8px; + height: $block-padding * 2; + width: $block-padding * 2; + padding: 4px; &:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: none; From c3ffb12bf0956f00a3f0b99176c20e20fef63955 Mon Sep 17 00:00:00 2001 From: Mapk Date: Wed, 21 Aug 2019 18:52:00 -0700 Subject: [PATCH 2/2] Switched hard coded padding number to existing variable. --- packages/block-editor/src/components/block-list/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-list/style.scss b/packages/block-editor/src/components/block-list/style.scss index 32034919b8601..8d9c70a4b2887 100644 --- a/packages/block-editor/src/components/block-list/style.scss +++ b/packages/block-editor/src/components/block-list/style.scss @@ -865,7 +865,7 @@ background: $white; height: $block-padding * 2; width: $block-padding * 2; - padding: 4px; + padding: $grid-size-small; &:not(:disabled):not([aria-disabled="true"]):hover { box-shadow: none;