Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design Handoff: Block Installation Flow #10

melchoyce opened this issue Jul 5, 2019 · 4 comments


Copy link

commented Jul 5, 2019

Prototype Link

Block Library

Desktop_ Add

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.


Suggestions start being shown on search.

Desktop_ 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.)

Desktop_ Search_ Hover

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.

Desktop_ Loading

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.

Desktop_ Preview_ Placeholder

Desktop_ Preview_ Filled out

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.


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


This comment has been minimized.

Copy link

commented Jul 11, 2019

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


This comment has been minimized.

Copy link

commented Aug 18, 2019

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.

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

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

Adding BOXER block to Posts

  1. Same feedback as above.
  2. Padding below the grey box.

This comment has been minimized.

Copy link

commented Aug 20, 2019

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.


This comment has been minimized.

Copy link

commented Aug 20, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
4 participants
You can’t perform that action at this time.