Design Handoff: Block Installation Flow

[melchoyce]

Prototype Link

---

Block Library

For the first round of this project, the default Block Library view will remain unchanged. We won't provide any suggestions prior to search yet, but should plan on trying it out in the future.

Search

Suggestions start being shown on search.

If you search for a block and there are no results within your Block Library, we search through the Block Directory to find related results:

No blocks found in your library. We did find these blocks available for download:

We pick the top three results from the Block Directory, and present those within the search results. The block card shows:

• The block icon, as you'd see it in the Block Library
• Block name
• Rating value & number of ratings
• "Add" button
• Active installations
• Last updated
• Author information:
  • Name
  • How many blocks they have for download in the directory
  • The average rating of all of their blocks combined
  • Their average support response time

This might not be the best information to show, but let's start with it and then test and get feedback in a code prototype.

After the top three results, we show a "Browse More Blocks" button which runs the search query in a new tab in the full Block Directory. (We'll obviously need to build the directory first, so this could be excluded from v1 if we want to ship without a full directory.)

When you hover over a search result, we open a preview panel. This pattern is taken directly from how Styles work. The block should be able to provide a filled-in preview of the block.

Add Block

This is where it gets interesting. When you add a block, we install it behind-the-scenes.

If the loading isn't instantaneous, we need to provide a loading state. I think this is something we can natively do in Gutenberg? Doesn't really matter if it looks different, just needs some native Gutenberg indication that something is loading.

As soon as the block loads in the editor, you're able to start filling out placeholders and customizing settings, ideally even if the block itself is still installing. CK mentioned to me this might be possible.

At any point up to now, if you decide "this block isn't for me" and remove it from your post or page, we silently uninstall the block so you don't end up with a messy graveyard of blocks you didn't use.

Note: The block outline is dashed to indicate this is a new block.

Pre-Publish

If you have the pre-publish panel enabled, we show you a summary of all new blocks added to this post/page. It just shows the block icon, name, author, and an external link to more details (the full block listing) in the Block Directory.

There are a couple more states to explore — what happens if you don't have permissions to install blocks? What happens if an installation fails? — that I'll add to new issues. If anyone thinks of anything else I've forgotten, please let me know.

[ck-lee]

Pull Request for the block editor: WordPress/gutenberg#16524 in progress.

[MelinEdo]

Hey, I 've been at Contribution day at WordCamp Brighton and have some feedback on adding blocks to posts.

Ideas on User Permissions:

• There should be an option for each user (when being created) whether they should have permission to add block templates or not.
• Technically it should be allowed for all users but admins should be able to control who has the permissions to have control over design. Otherwise it could be chaotic.

Adding LISTICLE block to Posts

While searching blocks you see ‘common blocks’ it will be good to have ‘additional(other?) blocks’ suggested below the grey line. Right now even though I’ve typed ‘list’ , ‘listicle is still not appeared as a suggestion.
https://www.evernote.com/l/AArqXJhZXnxCep7hSAXRXMZBeApdscBPWv0

2. This view may be too overwhelming, especially if there are 2 blocks with similar names, maybe they need to be a condensed version of this view and expand if the user wants to see those details.
   Suggested condensed view (icon+name, star rating, short sentence, add button)

If the suggestions come up on the search earlier on (like suggested above), it may not need the description in italic.

https://www.evernote.com/l/AAr-czaKWCFCC5Ulu212bPcNnXhx4DckTPAB

3. Once installed ‘listicle’ comes up. I’m not sure if the wording ‘layout elements’ feels right.

https://www.evernote.com/l/AAoyAynU5dFARKwMb2dwTup4N2KN-_rwmsI

Adding BOXER block to Posts

1. Same feedback as above.
2. Padding below the grey box.
   https://www.evernote.com/l/AAom4iuCEfJJKoHKZYiZ76at39qmj0wXVtQ

[ck-lee]

Thank you for your feedback, @MelinEdo. I find these early feedbacks very valuable when implementing the feature.

I will see what we can do to help make the block search and results view more intuitive and less overwhelming. This is an interesting design challenge. It is like squeezing an app store into a tiny menu here.

Good catch on the padding below the grey box. I will fix them.

Let me know if you have any other thoughts too.

[MelinEdo]

Thank you @ck-lee . Happy to hear feedback is useful. I can see the challange here for sure!

I'll keep an eye out here to see the revised designs :)
Good luck with it all

[MichaelArestad]

I'm closing this as it has been implemented and there is already further iteration currently in progress.