Use rich text hook for post title (#31569)

packages/block-editor/src/components/rich-text/style.scss

@@ -1,8 +1,4 @@
-.block-editor-rich-text__editable {
-	> p:first-child {
-		margin-top: 0;
-	}
-
+.rich-text {
 	[data-rich-text-placeholder] {
 		pointer-events: none;
 	}
@@ -24,6 +20,12 @@
 	}
 }
 
+.block-editor-rich-text__editable {
+	> p:first-child {
+		margin-top: 0;
+	}
+}
+
 // Captions may have lighter (gray) text, or be shown on a range of different background luminosites.
 // To ensure legibility, we increase the default placeholder opacity to ensure contrast.
 figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {

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

@@ -28,7 +28,7 @@ describe( 'Post Title block', () => {
 		await page.waitForSelector( '.edit-post-layout' );
 		const title = await page.$eval(
 			'.editor-post-title__input',
-			( element ) => element.value
+			( element ) => element.textContent
 		);
 		expect( title ).toEqual( 'Just tweaking the post title' );
 	} );

packages/e2e-tests/specs/editor/plugins/annotations.test.js

@@ -52,7 +52,7 @@ describe( 'Using Plugins API', () => {
 		 )[ 0 ];
 		await addAnnotationButton.click();
 		await page.evaluate( () =>
-			document.querySelector( '[contenteditable]' ).focus()
+			document.querySelector( '.wp-block-paragraph' ).focus()
 		);
 	}
 
@@ -91,7 +91,7 @@ describe( 'Using Plugins API', () => {
 	 * @return {Promise<string>} Inner HTML.
 	 */
 	async function getRichTextInnerHTML() {
-		const htmlContent = await page.$$( '*[contenteditable]' );
+		const htmlContent = await page.$$( '.wp-block-paragraph' );
 		return await page.evaluate( ( el ) => {
 			return el.innerHTML;
 		}, htmlContent[ 0 ] );
@@ -139,7 +139,7 @@ describe( 'Using Plugins API', () => {
 			await page.keyboard.type( 'D' );
 
 			await removeAnnotations();
-			const htmlContent = await page.$$( '*[contenteditable]' );
+			const htmlContent = await page.$$( '.wp-block-paragraph' );
 			const html = await page.evaluate( ( el ) => {
 				return el.innerHTML;
 			}, htmlContent[ 0 ] );

packages/e2e-tests/specs/editor/various/change-detection.test.js

@@ -331,7 +331,8 @@ describe( 'Change detection', () => {
 		// Verify that the title is empty.
 		const title = await page.$eval(
 			'.editor-post-title__input',
-			( element ) => element.innerHTML
+			// Trim padding non-breaking space
+			( element ) => element.textContent.trim()
 		);
 		expect( title ).toBe( '' );
 

packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -116,7 +116,7 @@ describe( 'Order of block keyboard navigation', () => {
 		await page.keyboard.press( 'Tab' );
 		await expect(
 			await page.evaluate( () => {
-				return document.activeElement.placeholder;
+				return document.activeElement.getAttribute( 'aria-label' );
 			} )
 		).toBe( 'Add title' );
 
@@ -168,7 +168,7 @@ describe( 'Order of block keyboard navigation', () => {
 		await pressKeyWithModifier( 'shift', 'Tab' );
 		await expect(
 			await page.evaluate( () => {
-				return document.activeElement.placeholder;
+				return document.activeElement.getAttribute( 'aria-label' );
 			} )
 		).toBe( 'Add title' );
 	} );

packages/e2e-tests/specs/editor/various/new-post.test.js

@@ -25,9 +25,12 @@ describe( 'new editor state', () => {
 			expect.stringContaining( 'post-new.php' )
 		);
 		// Should display the blank title.
-		const title = await page.$( '[placeholder="Add title"]' );
+		const title = await page.$( '[aria-label="Add title"]' );
 		expect( title ).not.toBeNull();
-		expect( title.innerHTML ).toBeFalsy();
+		// Trim padding non-breaking space
+		expect(
+			await title.evaluate( ( el ) => el.textContent.trim() )
+		).toBeFalsy();
 		// Should display the Preview button.
 		const postPreviewButton = await page.$(
 			'.editor-post-preview.components-button'
@@ -59,7 +62,7 @@ describe( 'new editor state', () => {
 		} );
 
 		expect( activeElementClasses ).toContain( 'editor-post-title__input' );
-		expect( activeElementTagName ).toEqual( 'textarea' );
+		expect( activeElementTagName ).toEqual( 'h1' );
 	} );
 
 	it( 'should not focus the title if the title exists', async () => {

packages/e2e-tests/specs/editor/various/preview.test.js

@@ -11,6 +11,7 @@ import {
 	publishPost,
 	saveDraft,
 	openPreviewPage,
+	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
 /** @typedef {import('puppeteer').Page} Page */
@@ -216,7 +217,10 @@ describe( 'Preview', () => {
 		await editorPage.bringToFront();
 
 		// Append bbbbb to the title, and tab away from the title so blur event is triggered.
-		await editorPage.type( '.editor-post-title__input', 'bbbbb' );
+		await editorPage.focus( '.editor-post-title__input' );
+		await pressKeyWithModifier( 'primary', 'a' );
+		await editorPage.keyboard.press( 'ArrowRight' );
+		await editorPage.keyboard.type( 'bbbbb' );
 		await editorPage.keyboard.press( 'Tab' );
 
 		// Save draft and open the preview page right after.

packages/e2e-tests/specs/editor/various/typewriter.test.js

@@ -21,9 +21,6 @@ describe( 'TypeWriter', () => {
 		// Create first block.
 		await page.keyboard.press( 'Enter' );
 
-		// Create second block.
-		await page.keyboard.press( 'Enter' );
-
 		const initialPosition = await getCaretPosition();
 
 		// The page shouldn't be scrolled when it's being filled.

packages/e2e-tests/specs/editor/various/writing-flow.test.js

@@ -289,29 +289,28 @@ describe( 'Writing Flow', () => {
 	it( 'should navigate native inputs vertically, not horizontally', async () => {
 		// See: https://github.com/WordPress/gutenberg/issues/9626
 
-		// Title is within the editor's writing flow, and is a <textarea>
-		await page.click( '.editor-post-title' );
+		await insertBlock( 'Shortcode' );
 
 		// Should remain in title upon ArrowRight:
 		await page.keyboard.press( 'ArrowRight' );
-		let isInTitle = await page.evaluate(
-			() => !! document.activeElement.closest( '.editor-post-title' )
+		let isInShortcodeBlock = await page.evaluate(
+			() => !! document.activeElement.closest( '.wp-block-shortcode' )
 		);
-		expect( isInTitle ).toBe( true );
+		expect( isInShortcodeBlock ).toBe( true );
 
 		// Should remain in title upon modifier + ArrowDown:
 		await pressKeyWithModifier( 'primary', 'ArrowDown' );
-		isInTitle = await page.evaluate(
-			() => !! document.activeElement.closest( '.editor-post-title' )
+		isInShortcodeBlock = await page.evaluate(
+			() => !! document.activeElement.closest( '.wp-block-shortcode' )
 		);
-		expect( isInTitle ).toBe( true );
+		expect( isInShortcodeBlock ).toBe( true );
 
 		// Should navigate into blocks list upon ArrowDown:
 		await page.keyboard.press( 'ArrowDown' );
-		const isInBlock = await page.evaluate(
-			() => !! document.activeElement.closest( '[data-type]' )
+		const isInParagraphBlock = await page.evaluate(
+			() => !! document.activeElement.closest( '.wp-block-paragraph' )
 		);
-		expect( isInBlock ).toBe( true );
+		expect( isInParagraphBlock ).toBe( true );
 	} );
 
 	it( 'should not delete surrounding space when deleting a word with Backspace', async () => {

packages/e2e-tests/specs/experiments/template-part.test.js

@@ -292,6 +292,9 @@ describe( 'Template Part', () => {
 			const confirmTitleButton = await page.waitForSelector(
 				confirmTitleButtonSelector
 			);
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.press( 'Tab' );
+			await page.keyboard.type( 'Create New' );
 			await confirmTitleButton.click();
 
 			const newTemplatePart = await page.waitForSelector(
@@ -314,10 +317,8 @@ describe( 'Template Part', () => {
 			);
 			await chooseExistingButton.click();
 			const preview = await page.waitForSelector(
-				'.block-editor-block-preview__content iframe'
+				'[aria-label="Create New"]'
 			);
-			expect( preview ).toBeTruthy();
-
 			await preview.click();
 			await page.waitForSelector( activatedTemplatePartSelector );
 			const templatePartContent = await page.waitForXPath(

packages/editor/src/components/post-title/index.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import TextareaAutosize from 'react-autosize-textarea';
 import classnames from 'classnames';
 
 /**
@@ -12,10 +11,10 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { decodeEntities } from '@wordpress/html-entities';
 import { ENTER } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { VisuallyHidden } from '@wordpress/components';
-import { useInstanceId } from '@wordpress/compose';
 import { pasteHandler } from '@wordpress/blocks';
 import { store as blockEditorStore } from '@wordpress/block-editor';
+import { __unstableUseRichText as useRichText } from '@wordpress/rich-text';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -29,7 +28,6 @@ import { store as editorStore } from '../../store';
 const REGEXP_NEWLINES = /[\r\n]+/g;
 
 export default function PostTitle() {
-	const instanceId = useInstanceId( PostTitle );
 	const ref = useRef();
 	const [ isSelected, setIsSelected ] = useState( false );
 	const { editPost } = useDispatch( editorStore );
@@ -94,17 +92,20 @@ export default function PostTitle() {
 		editPost( { title: newTitle } );
 	}
 
+	const [ selection, setSelection ] = useState( {} );
+
 	function onSelect() {
 		setIsSelected( true );
 		clearSelectedBlock();
 	}
 
 	function onUnselect() {
 		setIsSelected( false );
+		setSelection( {} );
 	}
 
-	function onChange( event ) {
-		onUpdate( event.target.value.replace( REGEXP_NEWLINES, ' ' ) );
+	function onChange( value ) {
+		onUpdate( value.replace( REGEXP_NEWLINES, ' ' ) );
 	}
 
 	function onKeyDown( event ) {
@@ -174,24 +175,39 @@ export default function PostTitle() {
 			'has-fixed-toolbar': hasFixedToolbar,
 		}
 	);
-	const decodedPlaceholder = decodeEntities( placeholder );
+	const decodedPlaceholder =
+		decodeEntities( placeholder ) || __( 'Add title' );
+	const { ref: richTextRef } = useRichText( {
+		value: title,
+		onChange,
+		placeholder: decodedPlaceholder,
+		selectionStart: selection.start,
+		selectionEnd: selection.end,
+		onSelectionChange( newStart, newEnd ) {
+			setSelection( ( sel ) => {
+				const { start, end } = sel;
+				if ( start === newStart && end === newEnd ) {
+					return sel;
+				}
+				return {
+					start: newStart,
+					end: newEnd,
+				};
+			} );
+		},
+		__unstableDisableFormats: true,
+		preserveWhiteSpace: true,
+	} );
 
+	/* eslint-disable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-interactions */
 	return (
 		<PostTypeSupportCheck supportKeys="title">
 			<div className={ className }>
-				<VisuallyHidden
-					as="label"
-					htmlFor={ `post-title-${ instanceId }` }
-				>
-					{ decodedPlaceholder || __( 'Add title' ) }
-				</VisuallyHidden>
-				<TextareaAutosize
-					ref={ ref }
-					id={ `post-title-${ instanceId }` }
-					className="editor-post-title__input"
-					value={ title }
-					onChange={ onChange }
-					placeholder={ decodedPlaceholder || __( 'Add title' ) }
+				<h1
+					ref={ useMergeRefs( [ richTextRef, ref ] ) }
+					contentEditable
+					className="editor-post-title__input rich-text"
+					aria-label={ decodedPlaceholder }
 					onFocus={ onSelect }
 					onBlur={ onUnselect }
 					onKeyDown={ onKeyDown }
@@ -201,4 +217,5 @@ export default function PostTitle() {
 			</div>
 		</PostTypeSupportCheck>
 	);
+	/* eslint-enable jsx-a11y/heading-has-content, jsx-a11y/no-noninteractive-element-interactions */
 }

packages/editor/src/components/post-title/style.scss

@@ -1,75 +1,6 @@
 .editor-post-title {
 	position: relative;
 
-	.editor-post-title__input {
-		display: block;
-		width: 100%;
-		margin: 0;
-		box-shadow: none;
-		background: transparent;
-		transition: border 0.1s ease-out, box-shadow 0.1s linear;
-		@include reduce-motion("transition");
-		padding: #{ $block-padding + 5px } 0;
-		word-break: keep-all;
-
-		// Inherit the styles set by the theme.
-		font-family: inherit;
-		color: inherit;
-
-		// Stack borders on mobile.
-		border: $border-width solid transparent;
-		border-left-width: 0;
-		border-right-width: 0;
-		border-radius: 0;
-
-		// Include transparent outline for Windows High Contrast mode.
-		outline: $border-width solid transparent;
-
-		@include break-small() {
-			border-width: $border-width;
-		}
-
-		// Match h1 heading.
-		font-size: 2.44em;
-		font-weight: 800;
-		line-height: 1.4;
-
-		&::-webkit-input-placeholder {
-			color: $dark-gray-placeholder;
-		}
-
-		&::-moz-placeholder {
-			color: $dark-gray-placeholder;
-			// Override Firefox default.
-			opacity: 1;
-		}
-
-		&:-ms-input-placeholder {
-			color: $dark-gray-placeholder;
-		}
-
-		.is-dark-theme & {
-			&::-webkit-input-placeholder {
-				color: $light-gray-placeholder;
-			}
-
-			&::-moz-placeholder {
-				opacity: 1; // Necessary because Firefox reduces this from 1.
-				color: $light-gray-placeholder;
-			}
-
-			&:-ms-input-placeholder {
-				color: $light-gray-placeholder;
-			}
-		}
-
-		&:focus {
-			border: $border-width solid transparent;
-			outline: $border-width solid transparent;
-			box-shadow: none;
-		}
-	}
-
 	&.is-focus-mode .editor-post-title__input {
 		opacity: 0.5;
 		transition: opacity 0.1s linear;