How to seamlessly discover & install blocks with Block Directory?

Well throughout the year 2018, especially after Gutenberg, was introduced the questions about a better way to discover blocks and organization started, and people in the community started a Gutenberg cloud initiative exploring the ways to share blocks across different Content Management Systems. At WordCamp US (2018) Matt Mullenweg announced the nine priority projects for 2019 and the Block Directory is one of them.

The Block Directory will impact Gutenberg and WordPress in some incredible ways. Let us know more about what it is, how we will use it and how plug-in developers can have their single blocks listed & much more. Let’s walk through the prototypes and explain it all from the user’s point of view.

Block directory is a section within the Plugin Directory that contains only Single Block Plugins.

Highlights:

• It will be separate from the main plugin directory
• As per the Block Registration RFC Single Block Plugins will be searchable by block name and description.
• A simplified version of the plugin page layout will be probably used
• An API endpoint will be there to help the block searching process by name and description
• To get included in the Block Directory requires following the rules for Single Block Plugins.
• Regular plugins search with the block name and description will be possible
• Registration of as many regular plugins will be an easy process as they are not required to follow the same rules as of the Single Block Plugins.
• Inclusion of back-end code, wp-admin, UI and so on can be continuously done.

 
Searching a new block within your block insertor gets easier and gives you more options. So, once you select it, you can utilize it in your posts. It is downloaded to the webpage in the background. On the off chance that you choose not to utilize it, it will be uninstalled.

 
Block Directory to be released with WordPress 5.5

The targeted version for the Block Directory in WordPress 5.5, scheduled to be released in August 2020. Earlier versions were the part of the Experiments in the Gutenberg plugin release in between.

The block directory, the design portion has three parts

1. Install Blocks directly from the editor

If you are searching for a block and it’s not installed on your website, you will be getting a no blocks found message, but block directory will find the top blocks which can be previewed, check them out, and when you drop them into your page or post you can customize them. You don’t have to worry about the installation process, and you don’t have to worry about getting rid of it if you decide not to use this block.

2. Block Directory in the WP Admin 

One of the big goals with the directory is that when you download a block, it’s only one block at a time. For instance, you might like the container block then you might think testimonials blocks are good. But to get any of these blocks you will have to download the entire suite of blocks. With the block directory, you can focus on one thing at a time and so when you are downloading a block, you’re just downloading that one block.

3. Block Management Screens

A kind of WP-Admin managed screen which helps in seeing all the blocks that you’ve installed, managing all the blocks you have on your site and hiding certain blocks.

Building the new Block Directory in wp-admin presents us with a couple of opportunities to redesign certain existing patterns and turn them into reusable components. When we revisit future admin pages, we’ll have these components available to replace the older patterns.

The design:

The design of the Block Inserter within Gutenberg has gone through detailed explorations and iterations. The installation flow has been handed off for implementation.

About Blocks Screen

• The About Blocks screen is the primary blocks admin screen
• The page title is followed by a short description of what the screen is about.
• Followed the intro are action links on the left and meta-type links on the right.

 Add Blocks Screen

• The add blocks screen is like the current new plugin screen in the WordPress admin.
• The primary “Featured” tab (the tab opened when first visiting the screen) is broken down into several sections, such as “Blocks We Love” and “Popular Tags.”

Installed Blocks Screen

• The block installation screen is like the existing installed plugins screen in core and lists all the blocks that are installed.
• Active and inactive tabs.
• Improvements primarily around list table design.

Manage Block Screen

• Allow users to activate or deactivate any specific block on their website.
• It also displays the number of instances a block is in use.

Reusable Blocks Screen

• The reusable blocks screen does not currently have an admin menu link, so it is not easily discoverable.
• Allows users to manage blocks that are stored for reuse within multiple posts.
• Users can import and export reusable blocks.

Specifications for Plugin Developers for adding blocks to the Block Directory

The idea that these blocks should be JavaScript only, with no server-side rendering, is a sort of necessary technical limitation to stick to for the initial implementation. Getting this seamless installation to happen when you have a lot of server-side code is just much more complicated.

Pushing people towards doing more of the single blocks is the major goal and a user should be able to search by an author and then see all the blocks by those authors. If you did want to download a couple of different blocks they’re offering, you can do it that way. It is going to be a lot of good curation and smart UI decisions.

There are announcements from several Block collection plugins like Guteblock and Atomic blocks about their plans to launch individual blocks in the block directory. WordPress Repository is already flooded with numerous individual blocks now. The upcoming block directory will be helpful for the customers to select the appropriate block effortlessly.