Fix regression with appender. (#9782)

* Fix regression with appender. This PR is a hotfix for a small regression introduced in #9735. Basically the empty "Write your story" placeholder had no top margin, and jumped when clicked. This PR fixes that. * Add comments, and fix for inbetween appender also.
WordPress · Sep 11, 2018 · e7f2803 · e7f2803
1 parent 406dc2c
commit e7f2803
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 16 deletions.
diff --git a/edit-post/components/visual-editor/style.scss b/edit-post/components/visual-editor/style.scss
@@ -89,22 +89,31 @@
 	}
 }
 
-.edit-post-visual-editor .editor-default-block-appender {
-	// Default to centered and content-width, like blocks
-	max-width: $content-width;
-	margin-left: auto;
-	margin-right: auto;
-	position: relative;
+.edit-post-visual-editor {
+	.editor-default-block-appender {
+		// Default to centered and content-width, like blocks
+		max-width: $content-width;
+		margin-left: auto;
+		margin-right: auto;
+		position: relative;
+
+		&[data-root-client-id=""] .editor-default-block-appender__content:hover {
+			// Outline on root-level default block appender is redundant with the
+			// WritingFlow click redirector.
+			outline: 1px solid transparent;
+		}
 
-	&[data-root-client-id=""] .editor-default-block-appender__content:hover {
-		// Outline on root-level default block appender is redundant with the
-		// WritingFlow click redirector.
-		outline: 1px solid transparent;
+		@include break-small() {
+			.editor-default-block-appender__content {
+				padding: 0 $block-padding;
+			}
+		}
 	}
 
-	@include break-small() {
-		.editor-default-block-appender__content {
-			padding: 0 $block-padding;
-		}
+	// Ensure that the height of the first appender, and the one between blocks, is the same as text.
+	.editor-block-list__block[data-type="core/paragraph"] p[data-is-placeholder-visible="true"] + p,
+	.editor-default-block-appender__content {
+		height: $empty-paragraph-height / 2;
+		line-height: $editor-line-height;
 	}
 }
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
@@ -138,8 +138,8 @@
 	}
 
 	// Adjust the spacing of the appender, or the first block, to sit near the title.
-	> .editor-default-block-appender > .editor-default-block-appender__content,
-	> .editor-block-list__block:first-child > .editor-block-list__block-edit {
+	.editor-default-block-appender > .editor-default-block-appender__content,
+	.editor-block-list__block:first-child > .editor-block-list__block-edit {
 		margin-top: $block-padding - $block-spacing / 2;
 	}