From b2fd801981287fbded091f69d7bf7ead630b8b0c Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Thu, 4 Jul 2024 18:27:45 +0100 Subject: [PATCH 1/4] Updated: Pages: Include avatar in Author field. --- .../components/page-templates/author-field.js | 82 +++++++++++++++++++ .../src/components/page-templates/index.js | 47 ++--------- .../src/components/posts-app/posts-list.js | 6 ++ 3 files changed, 96 insertions(+), 39 deletions(-) create mode 100644 packages/edit-site/src/components/page-templates/author-field.js 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 0000000000000..082a70301ed52 --- /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 5ba29d25a432f..461800bb05737 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 ); @@ -101,36 +95,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' ); @@ -310,7 +274,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 cf9b6f43ef9cf..5d8227c500587 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' ), From 64a7dedf24c5f59262a349b44a1cff8b080921f8 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Mon, 8 Jul 2024 16:58:49 +0100 Subject: [PATCH 2/4] Include alt text --- .../edit-site/src/components/page-templates/author-field.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/page-templates/author-field.js b/packages/edit-site/src/components/page-templates/author-field.js index 082a70301ed52..039f0f61b2b22 100644 --- a/packages/edit-site/src/components/page-templates/author-field.js +++ b/packages/edit-site/src/components/page-templates/author-field.js @@ -10,6 +10,8 @@ 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'; +import { __ } from '@wordpress/i18n'; + /** * Internal dependencies */ @@ -30,7 +32,7 @@ function BaseAuthorField( { viewType, text, icon, imageUrl } ) { > setIsImageLoaded( true ) } - alt="" + alt={ __( 'Author avatar' ) } src={ imageUrl } /> From 0c08128d31fc04dbfde897ec82c7aee38f136ec0 Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Mon, 8 Jul 2024 17:13:48 +0100 Subject: [PATCH 3/4] Dont change template --- .../components/page-templates/author-field.js | 84 ------------------- .../src/components/page-templates/index.js | 47 +++++++++-- .../src/components/posts-app/posts-list.js | 53 +++++++++++- 3 files changed, 90 insertions(+), 94 deletions(-) delete mode 100644 packages/edit-site/src/components/page-templates/author-field.js diff --git a/packages/edit-site/src/components/page-templates/author-field.js b/packages/edit-site/src/components/page-templates/author-field.js deleted file mode 100644 index 039f0f61b2b22..0000000000000 --- a/packages/edit-site/src/components/page-templates/author-field.js +++ /dev/null @@ -1,84 +0,0 @@ -/** - * 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'; -import { __ } from '@wordpress/i18n'; - -/** - * 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={ __( 'Author avatar' ) } - 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 461800bb05737..5ba29d25a432f 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -1,8 +1,15 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + /** * WordPress dependencies */ import { + Icon, __experimentalText as Text, + __experimentalHStack as HStack, VisuallyHidden, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; @@ -25,7 +32,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, @@ -37,7 +44,6 @@ 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 ); @@ -95,6 +101,36 @@ 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' ); @@ -274,12 +310,7 @@ 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 5d8227c500587..56fcf23e500ba 100644 --- a/packages/edit-site/src/components/posts-app/posts-list.js +++ b/packages/edit-site/src/components/posts-app/posts-list.js @@ -1,7 +1,16 @@ +/** + * External dependencies + */ +import clsx from 'clsx'; + /** * WordPress dependencies */ -import { Button, __experimentalHStack as HStack } from '@wordpress/components'; +import { + Button, + __experimentalHStack as HStack, + Icon, +} from '@wordpress/components'; import { __, sprintf } from '@wordpress/i18n'; import { useEntityRecords, store as coreStore } from '@wordpress/core-data'; import { decodeEntities } from '@wordpress/html-entities'; @@ -17,6 +26,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; import { useSelect, useDispatch } from '@wordpress/data'; import { DataViews } from '@wordpress/dataviews'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; +import { commentAuthorAvatar as authorIcon } from '@wordpress/icons'; /** * Internal dependencies @@ -40,7 +50,6 @@ 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 ); @@ -208,6 +217,46 @@ function getItemId( item ) { return item.id.toString(); } +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 ] + ); + const withIcon = viewType !== LAYOUT_LIST; + const [ isImageLoaded, setIsImageLoaded ] = useState( false ); + return ( + + { withIcon && imageUrl && ( +
+ setIsImageLoaded( true ) } + alt={ __( 'Author avatar' ) } + src={ imageUrl } + /> +
+ ) } + { withIcon && ! imageUrl && ( +
+ +
+ ) } + { text } + + ); +} + export default function PostsList( { postType } ) { const [ view, setView ] = useView( postType ); const history = useHistory(); From aabc47df8664e6eba089efb3279b16983048e33b Mon Sep 17 00:00:00 2001 From: Jorge Costa Date: Tue, 9 Jul 2024 09:50:27 +0100 Subject: [PATCH 4/4] improve conditions --- packages/edit-site/src/components/posts-app/posts-list.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) 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 56fcf23e500ba..c4ee030173092 100644 --- a/packages/edit-site/src/components/posts-app/posts-list.js +++ b/packages/edit-site/src/components/posts-app/posts-list.js @@ -230,11 +230,13 @@ function PostAuthorField( { item, viewType } ) { }, [ item ] ); - const withIcon = viewType !== LAYOUT_LIST; + + const withAuthorImage = viewType !== LAYOUT_LIST && imageUrl; + const withAuthorIcon = viewType !== LAYOUT_LIST && ! imageUrl; const [ isImageLoaded, setIsImageLoaded ] = useState( false ); return ( - { withIcon && imageUrl && ( + { withAuthorImage && (
) } - { withIcon && ! imageUrl && ( + { withAuthorIcon && (