Making WordPress.org

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
Cc:

Description

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)

@ryelle
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.

@michaelarestad
4 years ago

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

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

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


4 years ago
#5

  • Keywords has-patch added

Blocks with and icon and description:

https://i0.wp.com/user-images.githubusercontent.com/541093/92979579-2f40c380-f461-11ea-9241-591db93325b6.png

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

https://i0.wp.com/user-images.githubusercontent.com/541093/92979577-2ea82d00-f461-11ea-9000-bc008b61b1cd.png

List of blocks, no descriptions

https://i0.wp.com/user-images.githubusercontent.com/541093/92979578-2f40c380-f461-11ea-944d-91124bb33bcc.png

No block icon:

https://i0.wp.com/user-images.githubusercontent.com/541093/92979681-6dd67e00-f461-11ea-850d-c7bbdf310cc3.png

https://meta.trac.wordpress.org/ticket/5411

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

#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.