Block Library: Fix JS Error in Avatar Block #41354

manzurahammed · 2022-05-25T20:14:04Z

This PR fixed the issue of #41308

github-actions · 2022-05-25T20:14:38Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @manzurahammed! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

rudlinkon · 2022-05-26T07:34:47Z

@ajitbohra please review it.

cbravobernal · 2022-05-26T08:51:46Z

packages/block-library/src/avatar/hooks.js

+		return {
+			src: defaultAvatar,
+			minSize: 24,
+			maxSize: 96,


Thanks for the PR!

Here, maxSize will be different than the value we got from getAvatarSizes( sizes )

function getAvatarSizes( sizes ) { const minSize = sizes ? sizes[ 0 ] : 24; const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96; const maxSizeBuffer = Math.floor( maxSize * 2.5 ); return { minSize, maxSize: maxSizeBuffer, }; }

So if Avatar is disabled, it will appear with no errors, but with different size maximum value than if Avatar is enabled on discussion settings.

cbravobernal · 2022-05-26T08:54:54Z

packages/block-library/src/avatar/hooks.js

+			src: defaultAvatar,
+			minSize: 24,
+			maxSize: 96,
+			alt: authorDetails.name,


Suggested change

alt: authorDetails.name,

alt: authorDetails

? // translators: %s is the Author name.

sprintf( __( '%s Avatar' ), authorDetails?.name )

: __( 'Default Avatar' ),

cbravobernal · 2022-05-26T09:32:56Z

packages/block-library/src/avatar/hooks.js

@@ -76,14 +76,23 @@ export function useUserAvatar( { userId, postId, postType } ) {
 		},
 		[ postType, postId, userId ]
 	);
+	const defaultAvatar = useDefaultAvatar();
+	if ( authorDetails && ! authorDetails?.avatar_urls ) {
+		return {


If we do a return if this condition applies, we may skip some checks we make after, assuming that sizes or avatar URLs may not be null on the code after this return.

yes, great findings.

Agreed with @c4rl0sbr4v0
Good Job @manzurahammed

Let me know if you need any help here 😄

@c4rl0sbr4v0 please discuss it with other reviewers and make it resolved, thank you for your effort.

thanks, @c4rl0sbr4v0 for your information. will inform you after doing this.

👋 Hey @rudlinkon, any updates on this? 😄 I'd like to get this merged soon so we can include it in WP 6.0.1.

If you don't find the time currently to apply the changes that @c4rl0sbr4v0 suggested, that's fine -- just let us know and we'll take care of them 😄

@ockham thank you for your reminder, actually, I'm a little bit busy now. @manzurahammed brother could you have a look please?

Hi, @ockham Could you check, please.
I have pushed a new commit

Thanks @rudlinkon and @manzurahammed!

Looking pretty good! I just rebased to fix unit tests which were failing due to an outdated dependency. Let's see if they pass now 🤞

manzurahammed · 2022-05-26T11:06:18Z

@c4rl0sbr4v0 thanks for the tip 😁 done in 579698f

Use defaultAvatar image instead of original image of user for prevent js error.This error occurred when Display Avatar unchecked from Setting->Discussion

cbravobernal

LGTM!

* Fix JS Error in Avatar Block Use defaultAvatar image instead of original image of user for prevent js error.This error occurred when Display Avatar unchecked from Setting->Discussion * fix the author name issue * Fix JS linting issue

adamziel · 2022-06-21T13:50:54Z

I just cherry-picked this PR to the wp/6.0 branch to get it included in the next release: 0730c96

manzurahammed requested a review from ajitbohra as a code owner May 25, 2022 20:14

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label May 25, 2022

gziolo added [Type] Bug An existing feature does not function as intended [Package] Block library /packages/block-library [Block] Avatar Affects the Avatar Block labels May 25, 2022

gziolo changed the title ~~Fix JS Error in Avatar Block~~ Block Library: Fix JS Error in Avatar Block May 25, 2022

gziolo requested review from michalczaplinski, cbravobernal, ockham and DAreRodz May 26, 2022 07:38

cbravobernal requested changes May 26, 2022

View reviewed changes

cbravobernal reviewed May 26, 2022

View reviewed changes

ockham mentioned this pull request May 31, 2022

Comments blocks backports and fixes: Tracking issue #41451

Closed

10 tasks

cbravobernal mentioned this pull request Jun 7, 2022

Avatar block: error on loading if Avatars are disabled on Settings #41577

Closed

github-actions bot assigned cbravobernal Jun 7, 2022

github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jun 7, 2022

manzurahammed added 3 commits June 14, 2022 22:16

Fix JS Error in Avatar Block

d0537cd

Use defaultAvatar image instead of original image of user for prevent js error.This error occurred when Display Avatar unchecked from Setting->Discussion

fix the author name issue

33589a9

Fix JS linting issue

8e33093

ockham force-pushed the fix/avatar-block-js-error branch from fa6aeb8 to 8e33093 Compare June 14, 2022 20:17

cbravobernal approved these changes Jun 15, 2022

View reviewed changes

cbravobernal merged commit 177e774 into WordPress:trunk Jun 15, 2022

cbravobernal added the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Jun 15, 2022

github-actions bot added this to the Gutenberg 13.5 milestone Jun 15, 2022

This was referenced Jun 15, 2022

Avatar block throws encountered error if the Avatar Display turned off from the Discussion settings #41308

Closed

Fix avatar image issue #41313

Closed

adamziel removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Jun 21, 2022

priethor removed the [Status] In Progress Tracking issues with work in progress label Jan 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Block Library: Fix JS Error in Avatar Block #41354

Block Library: Fix JS Error in Avatar Block #41354

manzurahammed commented May 25, 2022

github-actions bot commented May 25, 2022

rudlinkon commented May 26, 2022

cbravobernal May 26, 2022

cbravobernal May 26, 2022

cbravobernal May 26, 2022

rudlinkon May 26, 2022

nhrrob May 26, 2022

cbravobernal May 30, 2022

rudlinkon May 30, 2022

rudlinkon May 30, 2022

ockham Jun 10, 2022

rudlinkon Jun 10, 2022 •

edited

Loading

manzurahammed Jun 12, 2022

ockham Jun 14, 2022

manzurahammed commented May 26, 2022

cbravobernal left a comment

adamziel commented Jun 21, 2022

-			alt: authorDetails.name,
+			alt: authorDetails
+				? // translators: %s is the Author name.
+				  sprintf( __( '%s Avatar' ), authorDetails?.name )
+				: __( 'Default Avatar' ),

Block Library: Fix JS Error in Avatar Block #41354

Block Library: Fix JS Error in Avatar Block #41354

Conversation

manzurahammed commented May 25, 2022

github-actions bot commented May 25, 2022

rudlinkon commented May 26, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rudlinkon Jun 10, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

manzurahammed commented May 26, 2022

cbravobernal left a comment

Choose a reason for hiding this comment

adamziel commented Jun 21, 2022

rudlinkon Jun 10, 2022 •

edited

Loading