Make the post title block editable (#27240)

Co-authored-by: ntsekouras <[email protected]>

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

@@ -6,12 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	AlignmentToolbar,
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
+	PlainText,
 } from '@wordpress/block-editor';
 import {
 	ToolbarGroup,
@@ -42,6 +43,7 @@ export default function PostTitleEdit( {
 			),
 		[ postType, postId ]
 	);
+	const { editEntityRecord } = useDispatch( 'core' );
 
 	const blockProps = useBlockProps( {
 		className: classnames( {
@@ -53,11 +55,33 @@ export default function PostTitleEdit( {
 		return null;
 	}
 
-	let title = post.title || __( 'Post Title' );
+	const { title, link } = post;
+
+	let titleElement = (
+		<PlainText
+			tagName={ TagName }
+			placeholder={ __( 'No Title' ) }
+			value={ title }
+			onChange={ ( value ) =>
+				editEntityRecord( 'postType', postType, postId, {
+					title: value,
+				} )
+			}
+			__experimentalVersion={ 2 }
+			{ ...( isLink ? {} : blockProps ) }
+		/>
+	);
+
 	if ( isLink ) {
-		title = (
-			<a href={ post.link } target={ linkTarget } rel={ rel }>
-				{ title }
+		titleElement = (
+			<a
+				href={ link }
+				target={ linkTarget }
+				rel={ rel }
+				onClick={ ( event ) => event.preventDefault() }
+				{ ...blockProps }
+			>
+				{ titleElement }
 			</a>
 		);
 	}
@@ -109,7 +133,7 @@ export default function PostTitleEdit( {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			<TagName { ...blockProps }>{ title }</TagName>
+			{ titleElement }
 		</>
 	);
 }

packages/e2e-tests/specs/experiments/blocks/post-title.test.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	activateTheme,
+	createNewPost,
+	insertBlock,
+	pressKeyWithModifier,
+	saveDraft,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'Post Title block', () => {
+	beforeAll( async () => {
+		await activateTheme( 'twentytwentyone-blocks' );
+	} );
+
+	afterAll( async () => {
+		await activateTheme( 'twentytwentyone' );
+	} );
+
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	it( 'Can edit the post title', async () => {
+		// Create a block with some text that will trigger a list creation.
+		await insertBlock( 'Post Title' );
+
+		// Select all of the text in the post title block.
+		await pressKeyWithModifier( 'primary', 'a' );
+
+		// Create a second list item.
+		await page.keyboard.type( 'Just tweaking the post title' );
+
+		await saveDraft();
+		await page.reload();
+		await page.waitForSelector( '.edit-post-layout' );
+		const title = await page.$eval(
+			'.editor-post-title__input',
+			( element ) => element.value
+		);
+		expect( title ).toEqual( 'Just tweaking the post title' );
+	} );
+} );

packages/edit-site/src/components/editor/index.js

@@ -140,22 +140,15 @@ function Editor() {
 				const {
 					__experimentalGetTemplateInfo: getTemplateInfo,
 				} = select( 'core/editor' );
-				entitiesToSave.forEach( ( { kind, name, key } ) => {
+				entitiesToSave.forEach( ( { kind, name, key, title } ) => {
 					const record = getEditedEntityRecord( kind, name, key );
-
-					if ( 'postType' === kind && name === 'wp_template' ) {
-						const { title } = getTemplateInfo( record );
-						return editEntityRecord( kind, name, key, {
-							status: 'publish',
-							title,
-						} );
+					if ( kind === 'postType' && name === 'wp_template' ) {
+						( { title } = getTemplateInfo( record ) );
 					}
-
-					const edits = record.slug
-						? { status: 'publish', title: record.slug }
-						: { status: 'publish' };
-
-					editEntityRecord( kind, name, key, edits );
+					editEntityRecord( kind, name, key, {
+						status: 'publish',
+						title: title || record.slug,
+					} );
 				} );
 			}
 			setIsEntitiesSavedStatesOpen( false );