Hide Add Title placeholder text in the post title within the preview

Automattic · Feb 5, 2021 · fc61a8a · fc61a8a
1 parent d7ccfd5
commit fc61a8a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/...lkit-plugin/starter-page-templates/page-template-modal/components/block-layout-preview.js b/...lkit-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/...ugin/starter-page-templates/page-template-modal/styles/starter-page-templates-editor.scss b/...ugin/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 {