From fc61a8a56c25a243f833910b2822ddfcd0626771 Mon Sep 17 00:00:00 2001
From: Andrew Serong <andrewserong@users.noreply.github.com>
Date: Fri, 22 Jan 2021 17:28:19 +1100
Subject: [PATCH] Hide Add Title placeholder text in the post title within the
 preview

---
 .../components/block-layout-preview.js        | 31 ++++++++++---------
 .../styles/starter-page-templates-editor.scss |  5 +++
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/components/block-layout-preview.js b/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/components/block-layout-preview.js
index 45fdfdd5e5096..078a9053a6778 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/components/block-layout-preview.js
+++ b/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/components/block-layout-preview.js
@@ -89,25 +89,28 @@ const BlockLayoutPreview = ( {
 	 * See: https://github.com/WordPress/gutenberg/pull/20609/
 	 */
 	useEffect( () => {
-		if ( ! title ) {
-			return;
-		}
+		// Perform update next render, as the post title input field may not yet be available.
+		setTimeout( () => {
+			if ( ! title ) {
+				return;
+			}
 
-		const previewBody = document.querySelector( `.${ className }` );
+			const previewBody = document.querySelector( `.${ className }` );
 
-		if ( ! previewBody ) {
-			return;
-		}
+			if ( ! previewBody ) {
+				return;
+			}
 
-		const templateTitle = previewBody.querySelector(
-			'.editor-post-title .editor-post-title__input'
-		);
+			const templateTitle = previewBody.querySelector(
+				'.editor-post-title .editor-post-title__input'
+			);
 
-		if ( ! templateTitle ) {
-			return;
-		}
+			if ( ! templateTitle ) {
+				return;
+			}
 
-		templateTitle.value = title;
+			templateTitle.value = title;
+		}, 0 );
 	}, [ recomputeBlockListKey ] );
 
 	// Scroll the preview to the top when the blocks change.
diff --git a/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss b/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
index 5f89332c7a9c2..9e1d34dcc9959 100644
--- a/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
+++ b/apps/editing-toolkit/editing-toolkit-plugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss
@@ -409,6 +409,11 @@ body.admin-bar:not( .is-fullscreen-mode ) .page-template-modal-screen-overlay {
 		margin: 0;
 	}
 
+	// Hide page title placeholder.
+	.editor-post-title__input::placeholder {
+		color: transparent !important;
+	}
+
 	// Hide inserter/appender.
 	.block-list-appender,
 	.block-editor-inserter {