Replace the post title component with the post title block

WordPress · Oct 21, 2020 · f174617 · f174617
1 parent bea03ab
commit f174617
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 168 deletions.
diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js
@@ -209,6 +209,8 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 				[
 					navigation,
 					navigationLink,
+					postTitle,
+					postContent,
 
 					// Register Full Site Editing Blocks.
 					...( __experimentalEnableFullSiteEditing
@@ -220,8 +222,6 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								query,
 								queryLoop,
 								queryPagination,
-								postTitle,
-								postContent,
 								postAuthor,
 								postComment,
 								postCommentAuthor,

diff --git a/packages/block-library/src/post-content/edit.js b/packages/block-library/src/post-content/edit.js
@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useSelect } from '@wordpress/data';
 import { useBlockProps } from '@wordpress/block-editor';
 
 /**
@@ -13,19 +12,11 @@ import PostContentInnerBlocks from './inner-blocks';
 export default function PostContentEdit( {
 	context: { postId: contextPostId, postType: contextPostType },
 } ) {
-	const { id: currentPostId, type: currentPostType } = useSelect(
-		( select ) => select( 'core/editor' ).getCurrentPost() ?? {}
-	);
 	const blockProps = useBlockProps();
 
 	// Only render InnerBlocks if the context is different from the active post
 	// to avoid infinite recursion of post content.
-	if (
-		contextPostId &&
-		contextPostType &&
-		contextPostId !== currentPostId &&
-		contextPostType !== currentPostType
-	) {
+	if ( contextPostId && contextPostType ) {
 		return (
 			<div { ...blockProps }>
 				<PostContentInnerBlocks

diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
@@ -6,12 +6,13 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useEntityProp } from '@wordpress/core-data';
 import {
 	AlignmentToolbar,
 	BlockControls,
 	InspectorControls,
 	useBlockProps,
+	PlainText,
 } from '@wordpress/block-editor';
 import {
 	ToolbarGroup,
@@ -33,31 +34,35 @@ export default function PostTitleEdit( {
 } ) {
 	const TagName = 0 === level ? 'p' : 'h' + level;
 
-	const post = useSelect(
-		( select ) =>
-			select( 'core' ).getEditedEntityRecord(
-				'postType',
-				postType,
-				postId
-			),
-		[ postType, postId ]
+	const [ title, setTitle ] = useEntityProp(
+		'postType',
+		postType,
+		'title',
+		postId
 	);
+	const [ link ] = useEntityProp( 'postType', postType, 'title', postId );
 
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
 	} );
 
-	if ( ! post ) {
-		return null;
-	}
+	let titleElement = (
+		<PlainText
+			tagName={ TagName }
+			placeholder={ __( 'No Title' ) }
+			{ ...blockProps }
+			value={ title }
+			onChange={ setTitle }
+			__experimentalVersion={ 2 }
+		/>
+	);
 
-	let title = post.title || __( 'Post Title' );
 	if ( isLink ) {
-		title = (
-			<a href={ post.link } target={ linkTarget } rel={ rel }>
-				{ title }
+		titleElement = (
+			<a href={ link } target={ linkTarget } rel={ rel }>
+				{ titleElement }
 			</a>
 		);
 	}
@@ -109,7 +114,7 @@ export default function PostTitleEdit( {
 					) }
 				</PanelBody>
 			</InspectorControls>
-			<TagName { ...blockProps }>{ title }</TagName>
+			{ titleElement }
 		</>
 	);
 }
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	PostTitle,
-	VisualEditorGlobalKeyboardShortcuts,
-} from '@wordpress/editor';
+import { VisualEditorGlobalKeyboardShortcuts } from '@wordpress/editor';
 import {
 	WritingFlow,
 	Typewriter,
@@ -43,9 +40,6 @@ function VisualEditor() {
 				<CopyHandler>
 					<WritingFlow>
 						<ObserveTyping>
-							<div className="edit-post-visual-editor__post-title-wrapper">
-								<PostTitle />
-							</div>
 							<BlockList />
 						</ObserveTyping>
 					</WritingFlow>