Post Content: Update placeholder when editing template

packages/block-library/src/post-content/edit.js

@@ -15,6 +15,8 @@ import {
 	store as coreStore,
 } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
+import { Placeholder } from '@wordpress/components';
+
 /**
  * Internal dependencies
  */
@@ -104,25 +106,18 @@ function Content( props ) {
 	);
 }
 
-function Placeholder( { layoutClassNames } ) {
+function PostContentPlaceholder( { layoutClassNames } ) {
 	const blockProps = useBlockProps( { className: layoutClassNames } );
 	return (
 		<div { ...blockProps }>
-			<p>
-				{ __(
-					'This is the Content block, it will display all the blocks in any single post or page.'
-				) }
-			</p>
-			<p>
-				{ __(
-					'That might be a simple arrangement like consecutive paragraphs in a blog post, or a more elaborate composition that includes image galleries, videos, tables, columns, and any other block types.'
-				) }
-			</p>
-			<p>
-				{ __(
-					'If there are any Custom Post Types registered at your site, the Content block can display the contents of those entries as well.'
-				) }
-			</p>
+			<Placeholder
+				className="wp-block-post-content__placeholder"
+				withIllustration
+			>
+				<p>
+					{ __( 'This block will be replaced with your content.' ) }
+				</p>
+			</Placeholder>
 		</div>
 	);
 }
@@ -157,7 +152,7 @@ export default function PostContentEdit( {
 					layoutClassNames={ layoutClassNames }
 				/>
 			) : (
-				<Placeholder layoutClassNames={ layoutClassNames } />
+				<PostContentPlaceholder layoutClassNames={ layoutClassNames } />
 			) }
 		</RecursionProvider>
 	);

packages/block-library/src/post-content/editor.scss

@@ -1,4 +1,21 @@
-// Disable text selection in the post content placeholder.
-.wp-block-post-content.wp-block-post-content {
-	user-select: none;
+.wp-block-post-content__placeholder {
+	&.has-illustration::before {
+		background: none;
+		border: 1px solid currentColor;
+	}
+
+	.components-placeholder__illustration {
+		opacity: 0.1;
+	}
+
+	.components-placeholder__fieldset {
+		align-self: center;
+		font-family: inherit;
+		font-size: inherit;
+
+		p {
+			font-family: inherit;
+			font-size: inherit;
+		}
+	}
 }

test/e2e/specs/site-editor/pages.spec.js

@@ -23,10 +23,10 @@
 		.getByRole( 'document', {
 			name: 'Block: Content',
 		} )
-		.getByRole( 'document', {
-			name: 'Empty block; start writing or type forward slash to choose a block',
+		.getByRole( 'button', {
+			name: 'Start blank',
 		} )
 		.click();
 
 	// Insert into Page Content using default block.
 	await editor.canvas
@@ -124,9 +124,7 @@
 			editor.canvas.getByRole( 'document', {
 				name: 'Block: Content',
 			} )
-		).toContainText(
-			'This is the Content block, it will display all the blocks in any single post or page.'
-		);
+		).toContainText( 'This block will be replaced with your content.' );
 		await expect(
 			page.locator(
 				'role=button[name="Dismiss this notice"i] >> text="Editing template. Changes made here affect all posts and pages that use the template."'