Plugin Directory: Use the shared favorite button for favoriting plugins

[ryelle]

This updates the single plugin page to use the Favorite block, and so that the buttons lined up correctly I've also switched the plugin action buttons (download, preview) to use button blocks as well. Download is now primary, with preview as an outline button, to prevent double primary buttons.

The focus state was also a little rough on the favorite block, so I've copied in the default focus styles from themes & patterns, which does update the style in the content as well (videos at the end to show before/after).

	Before	After
Favorited
Unfavorited

Focus states, before

https://github.com/user-attachments/assets/0e70b899-eae4-4bca-bcc5-1af0f3355621

Focus states, after

https://github.com/user-attachments/assets/b6665ad6-87c2-478c-8d26-a23a80be3d9e

To test

• Use a sandbox, be logged in
• Visit any plugin page
• The favorite button should appear next to the download button
• Click the button, it will trigger an API request but not reload the page
• The button should update to reflect the new favorite status
• Tab through the site, the focus state should be visible and match the text color
  • No visible focus on the screenshots or FAQs, but that's true on production too
• Download and Preview buttons should still work

If you're not logged in, the button is not visible.

[StevenDufresne]

I tested this on my sandbox. It works as expected. It's a bit slow to change states and doesn't have an indicator. Do you think we need a loading state?

[ryelle]

I tested this on my sandbox. It works as expected. It's a bit slow to change states and doesn't have an indicator. Do you think we need a loading state?

I think that's just the sandbox. Do you think it needs a loading state on the other sites? It's already in place on themes & patterns.

[ryelle]

I tried it out on themes again and it's pretty quick, but not quite instant. And it could probably use something for slower connections. What do you think of this fade animation?

https://github.com/user-attachments/assets/052851c6-ba61-437e-814b-22a9698241c8

That's using a delay to mimic a 2s load time. A faster example just barely has the fade, but it also adds a nice touch IMO:

https://github.com/user-attachments/assets/85728f80-e99f-4d37-b74f-0279b95ef5cd

[StevenDufresne]

That's a neat animation. 👍

I say we go for it!

[ryelle]

Committed in r13913.