Try: Hide tip from multiple paragraphs, version 1.

This one revisits work from #27995 (comment).
WordPress · Feb 8, 2021 · ef9cf15 · ef9cf15
1 parent 201ccbc
commit ef9cf15
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 0 deletions.
diff --git a/packages/block-library/src/paragraph/edit.js b/packages/block-library/src/paragraph/edit.js
@@ -167,6 +167,7 @@ function ParagraphBlock( {
 								'Empty block; start writing or type forward slash to choose a block'
 						  )
 				}
+				data-empty={ content ? false : true }
 				placeholder={
 					placeholder ||
 					__( 'Start writing or type / to choose a block' )

diff --git a/packages/block-library/src/paragraph/editor.scss b/packages/block-library/src/paragraph/editor.scss
@@ -2,3 +2,21 @@
 .block-editor-block-list__block[data-type="core/paragraph"].has-drop-cap:focus {
 	min-height: auto !important;
 }
+
+// Hide multiple sequential paragraphs.
+.block-editor-block-list__block[data-empty="true"] {
+	[data-rich-text-placeholder] {
+		opacity: 1;
+		transition: opacity 0.1s linear;
+		@include reduce-motion("transition");
+	}
+}
+.block-editor-block-list__block[data-empty="true"] + .block-editor-block-list__block[data-empty="true"] {
+	[data-rich-text-placeholder] {
+		opacity: 0;
+	}
+
+	&:hover [data-rich-text-placeholder] {
+		opacity: 1;
+	}
+}