Implement the new Gravatar profile block

[wellyshen]

Description

The new Gravatar profile block is in the temporary new-block folder, It will replace the existing block folder before it's released

• [x] Implement the new Gravatar profile block in the editor ( #20 )
• [x] Implement the new Gravatar profile block in the frontend ( #21 )
• [x] Implement the style settings (e.g. colors, border radius, etc.) for the block ( #22 )
• [x] Implement API loading and error states for the block ( #23 )
• [x] (Extra) Make TypeScript works

Test Instructions

• Check out this PR
• Install the plugin by following this doc
• Uncomment this line of code and then rebuild the block
• You will see the new block in the inserter menu:

• Add the block and save it, you will see it works in the editor and the frontend view:
  • Unedited information should not be shown
  • Hidden verified accounts should not be displayed

Editor	View

• Try to change the user's email and then save the post, the block should work as expected:

https://github.com/user-attachments/assets/494e2fad-ebfd-4159-a311-4c843a9acbf8

• Try to remove UI elements and then save the post, the block should work as expected:

https://github.com/user-attachments/assets/af0deade-40d0-4f83-84c9-3bcc4c306e52

• Try to custom the colors and then save the post, the block should work as expected:

https://github.com/user-attachments/assets/d0c3932c-8000-40b9-b423-9157315ba5f3

• Try to custom the border and shadow and then save the post, the block should work as expected:

https://github.com/user-attachments/assets/332e1fa5-a840-464f-9abc-07fd906310a7

• (Edge case) Edit a pure template (not page is loaded), e.g. Appearance > Editor > Templates > Blog Home or Appearance > Editor > Patterns > Footer. Try to add the block to the template, you will see it works in the editor and the frontend view:
  • The author's email isn't available when editing a template for the first time. So we use the first user's email as fallback

Editor	View

[wellyshen]

I installed the new packages and built the plugin, but on adding a block I get this: I guess some styles aren't loading? It looks ok on the front-end though.

I have double-checked by:

• Creating a new atomic site
• Running yarn build
• Using rsync to sync the plugin to the site
• Verifying that the CSS files have been successfully loaded in the editor:

I'm not sure if that's a cache issue. Would it help if you re-install the plugin or clear the browser / Edge cache (/wp-admin/options-general.php?page=edge-cache)? If not, do you know how I can reproduce this issue?

BTW, we will replace the existing block with the new one before releasing to users. We could also double check this issue then.

On the front-end my verified WP account has a link of /[object%20Object]. It works fine on Gravatar.

I will fix this issue through the Gravatar end ( 109081-gh-Automattic/gravatar )

Regarding adding rel="noreferrer" and target="_blank" to all the rendered links, I wonder if we want to do this? If I'm adding a Gravatar card to a page I kind of want the links to work normally and pass along any referrer. Maybe this should be an option?

I have removed the rel="noreferrer". I kept the links opening in other tabs (as we did for the hovercards), so users can still browse the site or blog.

[johngodley]

Ok, the problem seems to be related to the chosen theme. If I use the default Twenty Twenty Four or Twenty Twenty Three the block is displayed correctly, but if I use any other theme it isn't.

I also noticed that, for me anyway, it seems to be loading the CSS files twice:

[wellyshen]

Ok, the problem seems to be related to the chosen theme. If I use the default Twenty Twenty Four or Twenty Twenty Three the block is displayed correctly, but if I use any other theme it isn't.

@johngodley I’ve tried to prevent the block's styles from being overridden by the default theme styles. Please take a look, and if the styles are still broken, let me know which theme you're using, and I’ll investigate further.

I also noticed that, for me anyway, it seems to be loading the CSS files twice:

Gutenberg loads block CSS styles from two locations: the HTML head of the page and the head of the iframe. This also happens with older blocks, so I assume it's just how Gutenberg handles loading CSS files.

Page doc's head	Iframe's head

[wellyshen]

Thank you for the review, also fix the style issue in the 2017 theme.