Making WordPress.org

Opened 8 months ago

Closed 5 months ago

Last modified 5 months ago

#5411 closed enhancement (fixed)

Plugin Directory: Improve display of available blocks

Reported by: ryelle Owned by: 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 8 months ago.
Screen Shot 2020-09-02 at 4.52.31 PM.png (63.4 KB) - added by ryelle 8 months ago.
5411-wip.diff (2.6 KB) - added by ryelle 8 months ago.
Screenshot_2020-09-10 Web Vitals Block.png (256.3 KB) - added by ryelle 7 months ago.
blocks.jpg (511.6 KB) - added by michaelarestad 7 months ago.
states.jpg (173.7 KB) - added by michaelarestad 7 months ago.

Download all attachments as: .zip

Change History (15)

8 months ago

#1 @ryelle
8 months 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.

7 months ago

#3 @michaelarestad
7 months ago

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

#4 @michaelarestad
7 months 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: https://www.figma.com/file/dHtjHdh8lZm0DinGKP8MmT/Block-Directory?node-id=777%3A0

Last edited 7 months ago by michaelarestad (previous) (diff)

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

7 months 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
7 months 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 wp.org.

#7 @michaelarestad
6 months ago

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

#8 @ryelle
5 months 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.