Updated: Pages: Include avatar in Author field.

WordPress · Jul 4, 2024 · 8add9e0 · 8add9e0
1 parent 6273def
commit 8add9e0
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 39 deletions.
diff --git a/packages/edit-site/src/components/page-templates/author-field.js b/packages/edit-site/src/components/page-templates/author-field.js
@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import { Icon, __experimentalHStack as HStack } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { commentAuthorAvatar as authorIcon } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+/**
+ * Internal dependencies
+ */
+import { useAddedBy } from './hooks';
+import { LAYOUT_LIST } from '../../utils/constants';
+
+function BaseAuthorField( { viewType, text, icon, imageUrl } ) {
+	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
+	const withIcon = viewType !== LAYOUT_LIST;
+
+	return (
+		<HStack alignment="left" spacing={ 1 }>
+			{ withIcon && imageUrl && (
+				<div
+					className={ clsx( 'page-templates-author-field__avatar', {
+						'is-loaded': isImageLoaded,
+					} ) }
+				>
+					<img
+						onLoad={ () => setIsImageLoaded( true ) }
+						alt=""
+						src={ imageUrl }
+					/>
+				</div>
+			) }
+			{ withIcon && ! imageUrl && (
+				<div className="page-templates-author-field__icon">
+					<Icon icon={ icon } />
+				</div>
+			) }
+			<span className="page-templates-author-field__name">{ text }</span>
+		</HStack>
+	);
+}
+
+export function TemplateAuthorField( { item, viewType } ) {
+	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
+
+	return (
+		<BaseAuthorField
+			viewType={ viewType }
+			text={ text }
+			icon={ icon }
+			imageUrl={ imageUrl }
+		/>
+	);
+}
+
+export function PostAuthorField( { item, viewType } ) {
+	const { text, icon, imageUrl } = useSelect(
+		( select ) => {
+			const { getUser } = select( coreStore );
+			const user = getUser( item.author );
+			return {
+				icon: authorIcon,
+				imageUrl: user?.avatar_urls?.[ 48 ],
+				text: user?.name,
+			};
+		},
+		[ item ]
+	);
+	return (
+		<BaseAuthorField
+			viewType={ viewType }
+			text={ text }
+			icon={ icon }
+			imageUrl={ imageUrl }
+		/>
+	);
+}
diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
@@ -1,15 +1,8 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
 /**
  * WordPress dependencies
  */
 import {
-	Icon,
 	__experimentalText as Text,
-	__experimentalHStack as HStack,
 	VisuallyHidden,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
@@ -32,7 +25,7 @@ import { Async } from '../async';
 import Page from '../page';
 import { default as Link, useLink } from '../routes/link';
 import AddNewTemplate from '../add-new-template';
-import { useAddedBy } from './hooks';
+
 import {
 	TEMPLATE_POST_TYPE,
 	OPERATOR_IS_ANY,
@@ -44,6 +37,7 @@ import {
 import usePatternSettings from '../page-patterns/use-pattern-settings';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
+import { TemplateAuthorField } from './author-field';
 
 const { usePostActions } = unlock( editorPrivateApis );
 
@@ -103,36 +97,6 @@ function Title( { item, viewType } ) {
 	);
 }
 
-function AuthorField( { item, viewType } ) {
-	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
-	const { text, icon, imageUrl } = useAddedBy( item.type, item.id );
-	const withIcon = viewType !== LAYOUT_LIST;
-
-	return (
-		<HStack alignment="left" spacing={ 1 }>
-			{ withIcon && imageUrl && (
-				<div
-					className={ clsx( 'page-templates-author-field__avatar', {
-						'is-loaded': isImageLoaded,
-					} ) }
-				>
-					<img
-						onLoad={ () => setIsImageLoaded( true ) }
-						alt=""
-						src={ imageUrl }
-					/>
-				</div>
-			) }
-			{ withIcon && ! imageUrl && (
-				<div className="page-templates-author-field__icon">
-					<Icon icon={ icon } />
-				</div>
-			) }
-			<span className="page-templates-author-field__name">{ text }</span>
-		</HStack>
-	);
-}
-
 function Preview( { item, viewType } ) {
 	const settings = usePatternSettings();
 	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
@@ -312,7 +276,12 @@ export default function PageTemplates() {
 				id: 'author',
 				getValue: ( { item } ) => item.author_text,
 				render: ( { item } ) => {
-					return <AuthorField viewType={ view.type } item={ item } />;
+					return (
+						<TemplateAuthorField
+							viewType={ view.type }
+							item={ item }
+						/>
+					);
 				},
 				elements: authors,
 				width: '1%',

diff --git a/packages/edit-site/src/components/posts-app/posts-list.js b/packages/edit-site/src/components/posts-app/posts-list.js
@@ -40,6 +40,7 @@ import Media from '../media';
 import { unlock } from '../../lock-unlock';
 import { useEditPostAction } from '../dataviews-actions';
 import { usePrevious } from '@wordpress/compose';
+import { PostAuthorField } from '../page-templates/author-field';
 
 const { usePostActions } = unlock( editorPrivateApis );
 const { useLocation, useHistory } = unlock( routerPrivateApis );
@@ -395,6 +396,11 @@ export default function PostsList( { postType } ) {
 						value: id,
 						label: name,
 					} ) ) || [],
+				render: ( { item } ) => {
+					return (
+						<PostAuthorField viewType={ view.type } item={ item } />
+					);
+				},
 			},
 			{
 				header: __( 'Status' ),