Appender: fix outside-canvas styles (WordPress#66630)

Co-authored-by: ellatrix <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: stokesman <[email protected]>
ironprogrammer · Oct 31, 2024 · d8cc9a8 · d8cc9a8
1 parent f73888a
commit d8cc9a8
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git a/packages/block-editor/src/components/block-tools/style.scss b/packages/block-editor/src/components/block-tools/style.scss
@@ -57,6 +57,19 @@
 	}
 }
 
+// The black plus that shows up on the right side of an empty paragraph block,
+// or the initial appender that exists only on empty documents.
+.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter {
+	position: absolute;
+	top: 0;
+	right: 0;
+	line-height: 0;
+
+	&:disabled {
+		display: none;
+	}
+}
+
 // Sibling inserter / "inbetweenserter".
 .block-editor-block-list__empty-block-inserter,
 .block-editor-block-list__insertion-point-inserter {

diff --git a/packages/block-editor/src/components/default-block-appender/content.scss b/packages/block-editor/src/components/default-block-appender/content.scss
@@ -62,24 +62,12 @@
 	}
 }
 
-// The black plus that shows up on the right side of an empty paragraph block, or the initial appender
-// that exists only on empty documents.
-.block-editor-block-list__empty-block-inserter.block-editor-block-list__empty-block-inserter,
-.block-editor-default-block-appender .block-editor-inserter {
-	position: absolute;
-	top: 0;
-	right: 0;
-	line-height: 0;
-
-	&:disabled {
-		display: none;
-	}
-}
-
 
 /**
- * Fixed position appender.
- * These styles apply to all in-canvas inserters that exist inside nesting containers.
+ * Fixed position appender (right bottom corner).
+ *
+ * These styles apply to all in-canvas inserters. All in-canvas inserters always
+ * exist within a block.
  */
 
 .block-editor-block-list__block .block-list-appender {
@@ -96,6 +84,10 @@
 		line-height: 0;
 	}
 
+	.block-editor-inserter:disabled {
+		display: none;
+	}
+
 	.block-editor-default-block-appender {
 		height: $button-size-small;
 	}