Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Design Handoff: Block Installation Flow #10
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.
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:
We pick the top three results from the Block Directory, and present those within the search results. The block card shows:
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.
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.
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.
Hey, I 've been at Contribution day at WordCamp Brighton and have some feedback on adding blocks to posts.
Ideas on User Permissions:
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.
If the suggestions come up on the search earlier on (like suggested above), it may not need the description in italic.
Adding BOXER block to Posts
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.