diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index cf9411a6caeea..b5abfa377ef91 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -173,7 +173,7 @@ function Author( { item, viewType } ) { const withIcon = viewType !== LAYOUT_LIST; return ( - + { withIcon && imageUrl && (
- { withIcon && imageUrl && ( + + { imageUrl && (
) } - { withIcon && ! imageUrl && ( + { ! imageUrl && (
diff --git a/packages/edit-site/src/components/page-templates/style.scss b/packages/edit-site/src/components/page-templates/style.scss index eb4f7430b24e5..dea5b8aac833a 100644 --- 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 index 1eb8b4c77655c..4ef9c5ce99523 100644 --- 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 ( - + { 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 ( - - { withAuthorImage && ( + + { !! imageUrl && (
) } - { withAuthorIcon && ( + { ! imageUrl && (
- +
) } { text } @@ -471,11 +467,7 @@ export default function PostsList( { postType } ) { value: id, label: name, } ) ) || [], - render: ( { item } ) => { - return ( - - ); - }, + 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 index e7b262fed3bf9..9a86887c01e32 100644 --- 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; } }