diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js index 041a3b4fa02f6..ca8e143ca2772 100644 --- a/packages/block-library/src/post-content/edit.js +++ b/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 (
-

- { __( - 'This is the Content block, it will display all the blocks in any single post or page.' - ) } -

-

- { __( - '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.' - ) } -

-

- { __( - 'If there are any Custom Post Types registered at your site, the Content block can display the contents of those entries as well.' - ) } -

+ +

+ { __( 'This block will be replaced with your content.' ) } +

+
); } @@ -157,7 +152,7 @@ export default function PostContentEdit( { layoutClassNames={ layoutClassNames } /> ) : ( - + ) } ); diff --git a/packages/block-library/src/post-content/editor.scss b/packages/block-library/src/post-content/editor.scss index 626774697aec5..55b923cb284c7 100644 --- a/packages/block-library/src/post-content/editor.scss +++ b/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; + } + } } diff --git a/test/e2e/specs/site-editor/pages.spec.js b/test/e2e/specs/site-editor/pages.spec.js index 9c582c5edb397..0b87ba9baac24 100644 --- a/test/e2e/specs/site-editor/pages.spec.js +++ b/test/e2e/specs/site-editor/pages.spec.js @@ -23,8 +23,8 @@ async function addPageContent( editor, page ) { .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(); @@ -124,9 +124,7 @@ test.describe( 'Pages', () => { 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."'