Update: Include avatars on list view. (WordPress#63309)

Co-authored-by: jorgefilipecosta <jorgefilipecosta@git.wordpress.org> Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
huubl · Jul 10, 2024 · 9bb60a0 · 9bb60a0
1 parent e86275c
commit 9bb60a0
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 25 deletions.
diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js
@@ -169,7 +169,7 @@ function Author( { item, viewType } ) {
 	const withIcon = viewType !== LAYOUT_LIST;
 
 	return (
-		<HStack alignment="left" spacing={ 1 }>
+		<HStack alignment="left" spacing={ 0 }>
 			{ withIcon && imageUrl && (
 				<div
 					className={ clsx( 'page-templates-author-field__avatar', {

diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js
@@ -107,14 +107,13 @@ function Title( { item, viewType } ) {
 	);
 }
 
-function AuthorField( { item, viewType } ) {
+function AuthorField( { item } ) {
 	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 && (
+		<HStack alignment="left" spacing={ 0 }>
+			{ imageUrl && (
 				<div
 					className={ clsx( 'page-templates-author-field__avatar', {
 						'is-loaded': isImageLoaded,
@@ -127,7 +126,7 @@ function AuthorField( { item, viewType } ) {
 					/>
 				</div>
 			) }
-			{ withIcon && ! imageUrl && (
+			{ ! imageUrl && (
 				<div className="page-templates-author-field__icon">
 					<Icon icon={ icon } />
 				</div>

diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss
@@ -67,12 +67,12 @@
 	width: $grid-unit-30;
 	height: $grid-unit-30;
 	align-items: center;
-	justify-content: center;
+	justify-content: left;
 	display: flex;
 
 	img {
-		width: 20px;
-		height: 20px;
+		width: $grid-unit-20;
+		height: $grid-unit-20;
 		object-fit: cover;
 		opacity: 0;
 		transition: opacity 0.1s linear;
@@ -94,6 +94,7 @@
 	height: $grid-unit-30;
 
 	svg {
+		margin-left: -$grid-unit-05;
 		fill: currentColor;
 	}
 }

diff --git a/packages/edit-site/src/components/posts-app/posts-list.js b/packages/edit-site/src/components/posts-app/posts-list.js
@@ -230,7 +230,7 @@ function PostStatusField( { item } ) {
 	const label = status?.label || item.status;
 	const icon = status?.icon;
 	return (
-		<HStack alignment="left" spacing={ 1 }>
+		<HStack alignment="left" spacing={ 0 }>
 			{ icon && (
 				<div className="posts-list-page-post-author-field__icon-container">
 					<Icon icon={ icon } />
@@ -241,26 +241,22 @@ function PostStatusField( { item } ) {
 	);
 }
 
-function PostAuthorField( { item, viewType } ) {
-	const { text, icon, imageUrl } = useSelect(
+function PostAuthorField( { item } ) {
+	const { text, 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 withAuthorImage = viewType !== LAYOUT_LIST && imageUrl;
-	const withAuthorIcon = viewType !== LAYOUT_LIST && ! imageUrl;
 	const [ isImageLoaded, setIsImageLoaded ] = useState( false );
 	return (
-		<HStack alignment="left" spacing={ 1 }>
-			{ withAuthorImage && (
+		<HStack alignment="left" spacing={ 0 }>
+			{ !! imageUrl && (
 				<div
 					className={ clsx( 'page-templates-author-field__avatar', {
 						'is-loaded': isImageLoaded,
@@ -273,9 +269,9 @@ function PostAuthorField( { item, viewType } ) {
 					/>
 				</div>
 			) }
-			{ withAuthorIcon && (
+			{ ! imageUrl && (
 				<div className="page-templates-author-field__icon">
-					<Icon icon={ icon } />
+					<Icon icon={ authorIcon } />
 				</div>
 			) }
 			<span className="page-templates-author-field__name">{ text }</span>
@@ -471,11 +467,7 @@ export default function PostsList( { postType } ) {
 						value: id,
 						label: name,
 					} ) ) || [],
-				render: ( { item } ) => {
-					return (
-						<PostAuthorField viewType={ view.type } item={ item } />
-					);
-				},
+				render: PostAuthorField,
 			},
 			{
 				header: __( 'Status' ),

diff --git a/packages/edit-site/src/components/posts-app/style.scss b/packages/edit-site/src/components/posts-app/style.scss
@@ -76,7 +76,9 @@
 
 .posts-list-page-post-author-field__icon-container {
 	height: $grid-unit-30;
+	width: $grid-unit-30;
 	svg {
 		fill: currentColor;
+		margin-left: -$grid-unit-05;
 	}
 }