diff --git a/packages/edit-site/src/components/page-templates/author-field.js b/packages/edit-site/src/components/page-templates/author-field.js new file mode 100644 index 00000000000000..082a70301ed52c --- /dev/null +++ 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 ( + + { withIcon && imageUrl && ( +
+ setIsImageLoaded( true ) } + alt="" + src={ imageUrl } + /> +
+ ) } + { withIcon && ! imageUrl && ( +
+ +
+ ) } + { text } +
+ ); +} + +export function TemplateAuthorField( { item, viewType } ) { + const { text, icon, imageUrl } = useAddedBy( item.type, item.id ); + + return ( + + ); +} + +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 ( + + ); +} diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index 0e4d7db5a25b6c..9460aeb9c5ed24 100644 --- 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 ( - - { withIcon && imageUrl && ( -
- setIsImageLoaded( true ) } - alt="" - src={ imageUrl } - /> -
- ) } - { withIcon && ! imageUrl && ( -
- -
- ) } - { text } -
- ); -} - 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 ; + return ( + + ); }, 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 index cf9b6f43ef9cf1..5d8227c5005877 100644 --- 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 ( + + ); + }, }, { header: __( 'Status' ),