Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#5411 closed enhancement (fixed)

Plugin Directory: Improve display of available blocks

Reported by: ryelle's profile ryelle Owned by: ryelle's profile ryelle
Milestone: Priority: normal
Component: Plugin Directory Keywords: has-patch


If a plugin offers blocks, those are displayed on the single plugin page in the "Blocks" section. Currently this shows a simple list with the block's name (slug) and human-friendly title.

We could also show…

  • Block icons
  • Block descriptions
  • Screenshots from running the block e2e tests?

Attachments (6)

Screen Shot 2020-09-02 at 4.36.10 PM.png (18.2 KB) - added by ryelle 4 years ago.
Screen Shot 2020-09-02 at 4.52.31 PM.png (63.4 KB) - added by ryelle 4 years ago.
5411-wip.diff (2.6 KB) - added by ryelle 4 years ago.
Screenshot_2020-09-10 Web Vitals Block.png (256.3 KB) - added by ryelle 4 years ago.
blocks.jpg (511.6 KB) - added by michaelarestad 4 years ago.
states.jpg (173.7 KB) - added by michaelarestad 4 years ago.

Download all attachments as: .zip

Change History (15)

4 years ago

#1 @ryelle
4 years ago

5411-wip.diff is a first-pass/prototype of adding the icon & description. Could use a designer's input :)

The screenshots above are WooCommerce, with a lot of blocks but we can't identify the icon or descriptions, and "Web Vitals", which does load the icon & description.

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.

4 years ago

#3 @michaelarestad
4 years ago

@ryelle can you add screenshots? I haven't actually worked out how to test this locally. Yet.

4 years ago

4 years ago

#4 @michaelarestad
4 years ago

@ryelle Here's an initial pass at it. I also uploaded a mock with potential states. I'm still iterating as I'm not super happy with the no icon/no description state using the above pattern. That said, it's probably okay for a v1.

Source figma page:

Last edited 4 years ago by michaelarestad (previous) (diff)

This ticket was mentioned in PR #20 on WordPress/ by ryelle.

4 years ago

  • Keywords has-patch added

Blocks with and icon and description:

This block provides an SVG icon, so it's colorful:

List of blocks, no descriptions

No block icon:

#6 @ryelle
4 years ago

I've attached a PR with the changes, there are screenshots of a few different cases there. The only divergence from the mockups is that I went with the dashicons "block" icon, since I don't think we have a good way to drop in the new icons on

#7 @michaelarestad
4 years ago

I would add a 2px border to the plugin icons. Other than that, this looks good.

#8 @ryelle
4 years ago

  • Owner set to ryelle
  • Resolution set to fixed
  • Status changed from new to closed

In 10440:

Plugin Directory: Show available block names, icons, and descriptions.

Props michael-arestad for design.
Fixes #5411.

Note: See TracTickets for help on using tickets.