Mel Choyce-Dwan 8:33 pm on June 7, 2019
Tags: block directory ( 9 ), block library ( 5 )

Block Library: Mockups & Prototype

This is an update to the Block Library project that’s in-progress. Feedback has been taking place on GitHub and in Figma. My thanks to all the folks who have chimed in to help improve these mockups!

Prototype

A screenshot from the Figma file, for illustrative purposes. — Figma: Source File / Prototype

Installing a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.

Installing a third-party block from the block directory, via the block inserter

Search Results

If you search for a block, but nothing installed in your block library shows up, you’re presented with third-party blocks that show the block icon, title, author, and rating. Pressing on a block brings up more details.

Details

The Details screen is similar to the pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party cards we see in the Plugin Directory. It’s an abridged version of the block information, showing icon, title, author, star rating, and description. (This would ideally use the short description that plugins provide for cards.)

“More Details” would bring you to the full details screen in the Block Directory, and “Add” inserts the block into your content.

Installation

Once the block is inserted into your content, WordPress would ideally start silently installing it in the background while you fill in placeholders and change settings. If you change your mind and decide this block doesn’t work for you, WordPress would deactivate and delete the block when you remove it from your content so you don’t end up with a junk drawer of discarded blocks in your library.

What happens if your installation fails

In some cases, the installation won’t work — for example, if your internet cuts out while trying to install the block. In these cases, WordPress needs a way to recover from that error. This flow explores when a block isn’t able to be silently installed.

Pre-Publish

If you have the pre-publish panel enabled, you’ll see another reminder that you’ve added new blocks to your site, and another Details link that’ll take you into the Block Directory, in case you want to review it again.

Next Steps

The design team will look at creating tests for this (or testing it out themselves) during the WCEU Contributor Day; look for a recap on this p2 afterwards.
Between now and then, the prototype will continue to be open for feedback and iteration. I’d like to have all feedback for round one of testing in by Wednesday, June 19th, so I have time to iterate before WCEU.
You can comment with feedback here, or directly in Figma, if you’re a part of our team account (You can ask for access in #design).

#block-directory, #block-library

Mel Choyce 8:33 pm on June 7, 2019

@tellyworth @ck3lee
- ck3lee 12:21 am on June 10, 2019
  Nice one, @melchoyce! I like the general flow of searching and adding a new blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. to a post, especially the notice on the side panel to install a new block when the user hits publish. This improves the current overall experience of users who just want to test drive a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party because the flow of searching and installing a plugin is now quite separated from the editor.
  
  I’m keen to hear more from you. My thoughts and questions:
   * Is there an opportunity to help users discover uninstalled blocks even without typing on the search? Or showing more uninstalled blocks even if there are some matching results?
  - Would users care whether the blocks are installed or not? Is it necessary to show more differentiation between them on the search or editor? Or it doesn’t really matter?
  - I think there is a risk where the “Add block” button/panel can end up doing too much for a small panel. What do you think?
  - Mel Choyce 12:56 pm on June 10, 2019
    
    Is there an opportunity to help users discover uninstalled blocks even without typing on the search? Or showing more uninstalled blocks even if there are some matching results?
    
    I think there can be opportunities, but for this first round, we should keep the project tightly scoped.
    
    Would users care whether the blocks are installed or not? Is it necessary to show more differentiation between them on the search or editor? Or it doesn’t really matter?
    
    For some users, especially more WP-savvy power users, definitely. I don’t think the search results text is enough of a distraction to make it harder beginner users, but I’ll test this.
    
    I think there is a risk where the “Add blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.” button/panel can end up doing too much for a small panel. What do you think?
    
    Yeah, we talked about this in the Details issue — we’ll need to limit the amount of content in that presented. PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party cards show a short description; can we use that for the block details?
    - ck3lee 10:35 pm on June 10, 2019
      
      Thank you for sharing the info! I always find it helpful to know designer’s thought process.
      
      PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party cards show a short description; can we use that for the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. details?
      
      Yeah, I don’t see why not.
      
      Overall I think it is technically feasible to implement the design. (I’m not familiar with the block editor, though). I supposed the challenge will be building a simple and effective search UXUX UX is an acronym for User Experience - the way the user uses the UI. Think ‘what they are doing’ and less about how they do it. within the small panel. And somehow injecting the one or more Block JavaScripts for Preview. Should be fun…
wingo5315 4:27 am on June 8, 2019

I like the look of this mock-up of the BlockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. Library experience. However, I think that the “Published Post!” text should be displayed at the top so the user can see it easier than if it just appeared on the bottom left.
- Mel Choyce 3:39 pm on June 8, 2019
  
  That’s the new “snackbar” component, introduced in https://github.com/WordPress/gutenberg/pull/15594
Gerasimos Tsiamalos 12:05 pm on June 9, 2019

Hi @melchoyce

This looks great, thank you for working on this. Just a quick question. We currently have a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party in the repo with multiple blocks. Based on this flow, should we break it apart and create multiple plugins, one per blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.? Just asking because with the proposed flow, plugins featuring multiple blocks won’t take advantage of the immediate use of a block through the inserter.

Also, I’m a bit skeptical about the maintainability / code reuse in our blocks. CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks share one code base but if we have to create a plugin for each block that won’t be the case with plugins. It will be a nightmare to maintain.

I’d love your thoughts on this 🙂
- Mel Choyce 4:56 pm on June 9, 2019
  
  Hey Gerasimos, the current plan is to have the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. library focus on installing one block at time. There’s a more thorough look at the technical side here, including a bunch of discussion: https://make.wordpress.org/meta/2019/03/08/the-block-directory-and-a-new-type-of-plugin/
  
  cc @tellyworth ^
  - Gerasimos Tsiamalos 8:50 am on June 11, 2019
    
    Hi @melchoyce
    
    Got it. Thank you 🙂
Top 11:40 am on June 10, 2019

Nice mockups shared with us…
Jonny Harris 11:52 am on June 10, 2019

So under the hood, when you add a third party blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience., does that install a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party? If so, this screen would and should only be available to some user. Has the permissions model been thought of here?
- Mel Choyce 12:43 pm on June 10, 2019
  
  Yup — if you don’t have the right permissions, you’d get a “no blocks found” message without any search results, like you’d see in the blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. library now.
Matt Mullenweg 7:36 pm on June 13, 2019

I’m loath to add a new top-level menu, but since we’ll be able to retire a few when we get blocks everywhere, a blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. menu item (could also be under plugins) could be a great place to have a place to see what blocks you have, learn about each one, see what posts and pages each block is used in, and install or uninstall blocks (and related plugins). Think of it as being primarily educational, an expanded version of what we will do an abbreviated / tweet-sized version inline.
- Mel Choyce 6:06 pm on June 15, 2019
  
  For the menu structure, maybe something like:
  - tristup 12:04 pm on June 28, 2019
    
    Its good to have inside the Appearance Menu.
Mel Choyce 7:24 pm on June 18, 2019
Saw @matt in person last week, and a chance to talk over these mockups. Here are some notes from that conversation:
- Add reusable blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. preview to the Block Library so you can preview before trying.
- Challenging for users to pick “which slider” to use.
- We need to add some more information and reassurances to help guide people to the right blocks.
- Are there any other useful heuristics for picking blocks?
  - Think about other kinds of metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. information — for example rating stars, but instead, for how many people are using the block.
  - Can we improve on the author information? So show their # of plugins, and their plugins’ average ratings.
  - Can we make suggestions based on what else people have installed? (V2 feature)
  - How often is the block updated?
  - # of contributors.
  - # of open issues.
  - # active installs.
- Only show 2–3 cards, but display a lot more metadata to help people decide which block to install.
- Launch more of an inline directory experience — “zooming in and out.”
- Ability to show block counts/blocks in use.
- Show disabled blocks in search results.
Can anyone else think of good metadata to help people pick which block to install?