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 {