Extract title to fields package

WordPress · Nov 12, 2024 · 4348bd5 · 4348bd5
1 parent d2bc9ea
commit 4348bd5
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 61 deletions.
diff --git a/packages/core-data/src/entity-types/settings.ts b/packages/core-data/src/entity-types/settings.ts
@@ -22,6 +22,10 @@ declare module './base-entity-records' {
 			 * The ID of the page that should be displayed on the front page
 			 */
 			page_on_front: number;
+			/**
+			 * The ID of the page that should display the latest posts
+			 */
+			page_for_posts: number;
 			/**
 			 * Site title.
 			 */

diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js
@@ -7,12 +7,12 @@ import clsx from 'clsx';
  * WordPress dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
 import {
 	featuredImageField,
 	slugField,
 	parentField,
 	passwordField,
+	titleField,
 } from '@wordpress/fields';
 import {
 	createInterpolateElement,
@@ -138,63 +138,10 @@ function usePostFields() {
 	const { records: authors, isResolving: isLoadingAuthors } =
 		useEntityRecords( 'root', 'user', { per_page: -1 } );
 
-	const { frontPageId, postsPageId } = useSelect( ( select ) => {
-		const { getEntityRecord } = select( coreStore );
-		const siteSettings = getEntityRecord( 'root', 'site' );
-		return {
-			frontPageId: siteSettings?.page_on_front,
-			postsPageId: siteSettings?.page_for_posts,
-		};
-	}, [] );
-
 	const fields = useMemo(
 		() => [
 			featuredImageField,
-			{
-				label: __( 'Title' ),
-				id: 'title',
-				type: 'text',
-				getValue: ( { item } ) =>
-					typeof item.title === 'string'
-						? item.title
-						: item.title?.raw,
-				render: ( { item } ) => {
-					const renderedTitle =
-						typeof item.title === 'string'
-							? item.title
-							: item.title?.rendered;
-
-					let suffix = '';
-					if ( item.id === frontPageId ) {
-						suffix = (
-							<span className="edit-site-post-list__title-badge">
-								{ __( 'Homepage' ) }
-							</span>
-						);
-					} else if ( item.id === postsPageId ) {
-						suffix = (
-							<span className="edit-site-post-list__title-badge">
-								{ __( 'Posts Page' ) }
-							</span>
-						);
-					}
-
-					return (
-						<HStack
-							className="edit-site-post-list__title"
-							alignment="center"
-							justify="flex-start"
-						>
-							<span>
-								{ decodeEntities( renderedTitle ) ||
-									__( '(no title)' ) }
-							</span>
-							{ suffix }
-						</HStack>
-					);
-				},
-				enableHiding: false,
-			},
+			titleField,
 			{
 				label: __( 'Author' ),
 				id: 'author',
@@ -333,7 +280,7 @@ function usePostFields() {
 			},
 			passwordField,
 		],
-		[ authors, frontPageId, postsPageId ]
+		[ authors ]
 	);
 
 	return {

diff --git a/packages/fields/src/actions/utils.ts b/packages/fields/src/actions/utils.ts
@@ -34,10 +34,10 @@ export function getItemTitle( item: Post ) {
 	if ( typeof item.title === 'string' ) {
 		return decodeEntities( item.title );
 	}
-	if ( 'rendered' in item.title ) {
+	if ( item.title && 'rendered' in item.title ) {
 		return decodeEntities( item.title.rendered );
 	}
-	if ( 'raw' in item.title ) {
+	if ( item.title && 'raw' in item.title ) {
 		return decodeEntities( item.title.raw );
 	}
 	return '';

diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts
@@ -1,6 +1,6 @@
-export { default as slugField } from './slug';
-export { default as titleField } from './title';
-export { default as orderField } from './order';
 export { default as featuredImageField } from './featured-image';
+export { default as slugField } from './slug';
 export { default as parentField } from './parent';
 export { default as passwordField } from './password';
+export { default as titleField } from './title';
+export { default as orderField } from './order';
diff --git a/packages/fields/src/fields/title/index.ts b/packages/fields/src/fields/title/index.ts
@@ -9,13 +9,16 @@ import { __ } from '@wordpress/i18n';
  */
 import type { BasePost } from '../../types';
 import { getItemTitle } from '../../actions/utils';
+import TitleView from './title-view';
 
 const titleField: Field< BasePost > = {
 	type: 'text',
 	id: 'title',
 	label: __( 'Title' ),
 	placeholder: __( 'No title' ),
 	getValue: ( { item } ) => getItemTitle( item ),
+	render: TitleView,
+	enableHiding: false,
 };
 
 export default titleField;
diff --git a/packages/fields/src/fields/title/title-view.tsx b/packages/fields/src/fields/title/title-view.tsx
@@ -0,0 +1,63 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+import { decodeEntities } from '@wordpress/html-entities';
+import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { Settings } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import { getItemTitle } from '../../actions/utils';
+
+const TitleView = ( { item }: { item: BasePost } ) => {
+	const { frontPageId, postsPageId } = useSelect( ( select ) => {
+		const { getEntityRecord } = select( coreStore );
+		const siteSettings: Settings | undefined = getEntityRecord(
+			'root',
+			'site',
+			'',
+			undefined
+		);
+		return {
+			frontPageId: siteSettings?.page_on_front,
+			postsPageId: siteSettings?.page_for_posts,
+		};
+	}, [] );
+
+	const renderedTitle = getItemTitle( item );
+
+	let suffix;
+	if ( item.id === frontPageId ) {
+		suffix = (
+			<span className="edit-site-post-list__title-badge">
+				{ __( 'Homepage' ) }
+			</span>
+		);
+	} else if ( item.id === postsPageId ) {
+		suffix = (
+			<span className="edit-site-post-list__title-badge">
+				{ __( 'Posts Page' ) }
+			</span>
+		);
+	}
+
+	return (
+		<HStack
+			className="edit-site-post-list__title"
+			alignment="center"
+			justify="flex-start"
+		>
+			<span>
+				{ decodeEntities( renderedTitle ) || __( '(no title)' ) }
+			</span>
+			{ suffix }
+		</HStack>
+	);
+};
+
+export default TitleView;