Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Post Author Block: Show avatar placeholder and size control when no context #47211

Closed
wants to merge 3 commits into from
Closed

Post Author Block: Show avatar placeholder and size control when no context #47211

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4e27883
Post Author Block: Show default avatar placeholder and size control
t-hamano Jan 17, 2023
4b5988e
Refactoring
t-hamano Jan 20, 2023
9d1b047
Merge branch 'trunk' into fix/post-author-avatar
t-hamano Dec 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 33 additions & 20 deletions packages/block-library/src/post-author/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
InspectorControls,
RichText,
useBlockProps,
store as blockEditorStore,
} from '@wordpress/block-editor';
import {
ComboboxControl,
Expand All @@ -30,14 +31,19 @@ const AUTHORS_QUERY = {
per_page: 100,
};

const DEFAULT_AVATAR_SIZES = [ 24, 48, 96 ].map( ( size ) => ( {
value: size,
label: `${ size } x ${ size }`,
} ) );
Comment on lines +34 to +37
Copy link
Contributor Author

@t-hamano t-hamano Jan 17, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default value is hard-coded, but the avatar size retrieved by the REST API has a filter hook.

Therefore, if the consumer has changed the size variation on the hook, it may not match the default variation. However, there does not appear to be an endpoint to directly retrieve the result of the rest_get_avatar_sizes() function.

Perhaps we could solve this by making the size resizable, like a regular avatar block.

If you have a better way to do this, please let me know.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that the more similar the blocks are, the easier it will be for the users.


function PostAuthorEdit( {
isSelected,
context: { postType, postId, queryId },
attributes,
setAttributes,
} ) {
const isDescendentOfQueryLoop = Number.isFinite( queryId );
const { authorId, authorDetails, authors } = useSelect(
const { authorId, authorDetails, authors, defaultAutorUrl } = useSelect(
( select ) => {
const { getEditedEntityRecord, getUser, getUsers } =
select( coreStore );
Expand All @@ -46,30 +52,41 @@ function PostAuthorEdit( {
postType,
postId
)?.author;
const { getSettings } = select( blockEditorStore );
const { avatarURL } =
getSettings().__experimentalDiscussionSettings;

return {
authorId: _authorId,
authorDetails: _authorId ? getUser( _authorId ) : null,
authors: getUsers( AUTHORS_QUERY ),
defaultAutorUrl: avatarURL,
};
},
[ postType, postId ]
);

const { editEntityRecord } = useDispatch( coreStore );

const { textAlign, showAvatar, showBio, byline, isLink, linkTarget } =
attributes;
const avatarSizes = [];
const authorName = authorDetails?.name || __( 'Post Author' );
if ( authorDetails?.avatar_urls ) {
Object.keys( authorDetails.avatar_urls ).forEach( ( size ) => {
avatarSizes.push( {
const {
textAlign,
avatarSize,
showAvatar,
showBio,
byline,
isLink,
linkTarget,
} = attributes;
const avatarSizes = authorDetails?.avatar_urls
? Object.keys( authorDetails.avatar_urls ).map( ( size ) => ( {
value: size,
label: `${ size } x ${ size }`,
} );
} );
}
} ) )
: DEFAULT_AVATAR_SIZES;
const authorName = authorDetails?.name || __( 'Post Author' );
const avatarUrl = authorDetails?.avatar_urls
? authorDetails.avatar_urls[ avatarSize ]
: defaultAutorUrl;

const blockProps = useBlockProps( {
className: classnames( {
Expand Down Expand Up @@ -131,7 +148,7 @@ function PostAuthorEdit( {
<SelectControl
__nextHasNoMarginBottom
label={ __( 'Avatar size' ) }
value={ attributes.avatarSize }
value={ avatarSize }
options={ avatarSizes }
onChange={ ( size ) => {
setAttributes( {
Expand Down Expand Up @@ -179,16 +196,12 @@ function PostAuthorEdit( {
</BlockControls>

<div { ...blockProps }>
{ showAvatar && authorDetails?.avatar_urls && (
{ showAvatar && (
<div className="wp-block-post-author__avatar">
<img
width={ attributes.avatarSize }
src={
authorDetails.avatar_urls[
attributes.avatarSize
]
}
alt={ authorDetails.name }
width={ avatarSize }
src={ avatarUrl }
alt={ authorDetails?.name || '' }
/>
</div>
) }
Expand Down
Loading