Extract author to fields package

WordPress · Nov 13, 2024 · ec9bb04 · ec9bb04
1 parent 201f6a7
commit ec9bb04
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 60 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
@@ -16,50 +11,10 @@ import {
 	commentStatusField,
 	titleField,
 	dateField,
+	authorField,
 } from '@wordpress/fields';
-import { useMemo, useState } from '@wordpress/element';
-import { commentAuthorAvatar as authorIcon } from '@wordpress/icons';
-import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useEntityRecords, store as coreStore } from '@wordpress/core-data';
-
-function PostAuthorField( { item } ) {
-	const { text, imageUrl } = useSelect(
-		( select ) => {
-			const { getUser } = select( coreStore );
-			const user = getUser( item.author );
-			return {
-				imageUrl: user?.avatar_urls?.[ 48 ],
-				text: user?.name,
-			};
-		},
-		[ item ]
-	);
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-	return (
-		<HStack alignment="left" spacing={ 0 }>
-			{ !! imageUrl && (
-				<div
-					className={ clsx( 'page-templates-author-field__avatar', {
-						'is-loaded': isImageLoaded,
-					} ) }
-				>
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt={ __( 'Author avatar' ) }
-						src={ imageUrl }
-					/>
-				</div>
-			) }
-			{ ! imageUrl && (
-				<div className="page-templates-author-field__icon">
-					<Icon icon={ authorIcon } />
-				</div>
-			) }
-			<span className="page-templates-author-field__name">{ text }</span>
-		</HStack>
-	);
-}
+import { useMemo } from '@wordpress/element';
+import { useEntityRecords } from '@wordpress/core-data';
 
 function usePostFields() {
 	const { records: authors, isResolving: isLoadingAuthors } =
@@ -70,23 +25,12 @@ function usePostFields() {
 			featuredImageField,
 			titleField,
 			{
-				label: __( 'Author' ),
-				id: 'author',
-				type: 'integer',
+				...authorField,
 				elements:
 					authors?.map( ( { id, name } ) => ( {
 						value: id,
 						label: name,
 					} ) ) || [],
-				render: PostAuthorField,
-				sort: ( a, b, direction ) => {
-					const nameA = a._embedded?.author?.[ 0 ]?.name || '';
-					const nameB = b._embedded?.author?.[ 0 ]?.name || '';
-
-					return direction === 'asc'
-						? nameA.localeCompare( nameB )
-						: nameB.localeCompare( nameA );
-				},
 			},
 			statusField,
 			dateField,

diff --git a/packages/fields/README.md b/packages/fields/README.md
@@ -14,6 +14,10 @@ npm install @wordpress/fields --save
 
 <!-- START TOKEN(Autogenerated API docs) -->
 
+### authorField
+
+Author field for BasePost.
+
 ### commentStatusField
 
 Comment status field for BasePost.

diff --git a/packages/fields/package.json b/packages/fields/package.json
@@ -57,6 +57,7 @@
 		"@wordpress/warning": "*",
 		"change-case": "4.1.2",
 		"client-zip": "^2.4.5",
+		"clsx": "2.1.1",
 		"remove-accents": "^0.5.0"
 	},
 	"peerDependencies": {

diff --git a/packages/fields/src/fields/author/author-view.tsx b/packages/fields/src/fields/author/author-view.tsx
@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { commentAuthorAvatar as authorIcon } from '@wordpress/icons';
+import { __experimentalHStack as HStack, Icon } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import type { User } from '@wordpress/core-data';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+
+function AuthorView( { item }: { item: BasePost } ) {
+	const { text, imageUrl } = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+			let user: User | undefined;
+			if ( !! item.author ) {
+				user = getEntityRecord( 'root', 'user', item.author );
+			}
+			return {
+				imageUrl: user?.avatar_urls?.[ 48 ],
+				text: user?.name,
+			};
+		},
+		[ item ]
+	);
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	return (
+		<HStack alignment="left" spacing={ 0 }>
+			{ !! imageUrl && (
+				<div
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt={ __( 'Author avatar' ) }
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ ! imageUrl && (
+				<div className="page-templates-author-field__icon">
+					<Icon icon={ authorIcon } />
+				</div>
+			) }
+			<span className="page-templates-author-field__name">{ text }</span>
+		</HStack>
+	);
+}
+
+export default AuthorView;
diff --git a/packages/fields/src/fields/author/index.tsx b/packages/fields/src/fields/author/index.tsx
@@ -0,0 +1,32 @@
+/**
+ * WordPress dependencies
+ */
+import type { Field } from '@wordpress/dataviews';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import type { BasePost } from '../../types';
+import AuthorView from './author-view';
+
+const authorField: Field< BasePost > = {
+	label: __( 'Author' ),
+	id: 'author',
+	type: 'integer',
+	elements: [],
+	render: AuthorView,
+	sort: ( a, b, direction ) => {
+		const nameA = a._embedded?.author?.[ 0 ]?.name || '';
+		const nameB = b._embedded?.author?.[ 0 ]?.name || '';
+
+		return direction === 'asc'
+			? nameA.localeCompare( nameB )
+			: nameB.localeCompare( nameA );
+	},
+};
+
+/**
+ * Author field for BasePost.
+ */
+export default authorField;
diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts
@@ -7,3 +7,4 @@ export { default as passwordField } from './password';
 export { default as statusField } from './status';
 export { default as commentStatusField } from './comment-status';
 export { default as dateField } from './date';
+export { default as authorField } from './author';
diff --git a/packages/fields/src/types.ts b/packages/fields/src/types.ts
@@ -23,6 +23,14 @@ interface Links {
 	[ key: string ]: { href: string }[] | undefined;
 }
 
+interface Author {
+	name: string;
+}
+
+interface Embedded {
+	author?: Author[];
+}
+
 export interface BasePost extends CommonPost {
 	comment_status?: 'open' | 'closed';
 	excerpt?: string | { raw: string; rendered: string };
@@ -39,6 +47,8 @@ export interface BasePost extends CommonPost {
 	permalink_template?: string;
 	date?: string;
 	modified?: string;
+	author?: number;
+	_embedded?: Embedded;
 }
 
 export interface Template extends CommonPost {