Version 1 Prototype of the WordPress Admin Block Directory Announced

Mel Choyce-Dwan shared the first version of the WordPress admin block directory prototype the design team has been working on. The goal is to bring the block directory to the admin in WordPress 5.5, which is currently set for August 2020 on the roadmap. The post also outlines reusable components that can be used in other areas of the admin in the long term.

The Figma prototype is available for those who want to give it a test run. It is important to remember that this is an early version and many things can change by the time the block directory lands in WordPress.

The prototype was built after feedback from the first round of concepts shared in July on the Make Design blog.

For this admin project to be successful, WordPress plugin developers will need to start submitting blocks to the block directory on WordPress.org. At the moment, there are only 10 blocks listed. Getting in early will give block authors an edge on the competition. The block directory has a few additional guidelines beyond normal plugins that authors should review.

About Blocks Screen

Screenshot of the About Blocks screen prototype for WordPress.
About Blocks admin screen.

The About Blocks screen is the primary blocks admin screen. It appears to be an informational page with resources for users to learn more about using blocks on their sites. It also has links to development resources for designing and building blocks.

Making this information directly available, especially to users, would be a smart decision if it makes it into the final design. As we move toward an entirely new way to build websites with WordPress, it is important to provide learning tools to users. This seemed to be one of the missing components when the block editor first launched in core. If done right, it could ease the burden on new users and old users who are transitioning to the new editor.

The above screenshot also shows the new admin screen header proposal. 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. I am a fan of the generous use of whitespace and extra information.

Add Blocks Screen

Screenshot of the Add Blocks screen prototype for WordPress.
Add Blocks screen.

The add blocks screen is similar to 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 various sections, such as “Blocks We Love” and “Popular Tags.”

One of the more interesting sections of this page is the “Top Authors” list. This concept would be a great way to give recognition to block authors who are building useful blocks for the community.

There is also a “Recent Blocks” section near the bottom of the page. I would rather see a top tab for that. It feels a bit buried in the current design. New plugin and theme authors already struggle to break into popular lists. Recently-added blocks should be higher up the page or have a dedicated tab/page to showcase them a bit more.

Installed Blocks Screen

Screenshot of the Installed Blocks screen prototype for WordPress.
Installed Blocks screen.

The block installation screen is similar to the existing installed plugins screen in core and lists all of the blocks that are installed. There are also active and inactive tabs. Improvements here are primarily around list table design. On the whole, they are minor adjustments, but the look of the tables is much nicer. Can we have this in core, across the board, now?

A new element is the “Instances” column, which lists the number of times a block has been used on the site. By clicking the number, you are taken to a new screen that lists the posts the block has been used in. It also displays the instances for each post. This would be a useful feature for deciding whether to deactivate or remove a block.

Side note to this: I have worked on numerous projects in the past where I was doing cleanup and attempting to figure out if a plugin, especially those with shortcodes, were in use on the site. Showing the instances count for blocks is brilliant.

Manage Blocks Screen

Screenshot of the Manage Blocks screen prototype for WordPress.
Manage Blocks screen.

Plugins such as EditorsKit have had built-in block management for a while. However, this feature feels like it should be in core WordPress. There are numerous core blocks that some users will likely never use. Having the ability to hide them from the block inserter will reduce clutter and make it easier to find the blocks they need.

The block management screen will allow users to activate or deactivate any specific block on their website. Like the block installation screen, it also displays the number of instances a block is in use.

Reusable Blocks Screen

Screenshot of the Reusable Blocks screen prototype for WordPress.
Reusable Blocks screen.

The reusable blocks screen is already available in WordPress. It does not currently have an admin menu link, so it is not easily discoverable. You can view it by going to the yoursite.com/wp-admin/edit.php?post_type=wp_block URL or clicking the “Manage All Reusable Blocks” link under the “Reusable” tab in the block inserter.

This screen allows users to manage blocks that are stored for reuse within multiple posts. Like the installation and management screens, the prototype displays an instances column for tracking how often the block has been used.

Users can import and export reusable blocks. It will be interesting to see if more WordPress users start sharing their block creations with others once this screen has better exposure or if it will be something people simply use to copy blocks from site to site.

9 responses to “Version 1 Prototype of the WordPress Admin Block Directory Announced”

  1. This is so cool and we need it so bad. Don’t wait until August, just throw it into WordPress 5.3.3 and release it tomorrow.

  2. It is incredible πŸ™ŒπŸ» how the π—ͺπ—Όπ—Ώπ—±π—½π—Ώπ—²π˜€π˜€ team is concentrating so much in π—šπ˜‚π˜π—²π—»π—―π—²π—Ώπ—΄ that there is no choice but to migrate there, the block directory will be something that will trigger πŸš€ the π‘π‘™π‘œπ‘π‘˜ 𝑝𝑙𝑒𝑔𝑖𝑛𝑠.

    I am very eager to know the 𝑛𝑒𝑀 π‘π‘™π‘œπ‘π‘˜π‘  that will be created thanks to this great initiative. πŸ’«

  3. Hurrah!

    I have sites with additional blocks as plugins, which is instinctively the wrong place for them; they don’t modify my site, they modify the content on my site. Of course, their authors will need to resubmit their plugins as blocks as it’s a different directory, but it’ll aid discovery and be much tidier in Admin.

  4. “Those who cannot remember the past are condemned to repeat it.”

    One of my deepest concerns with this Project is we’re doing exactly the above right now, yet again.

    From what I know and have seen myself, we have yet to perform a true reflection of the Plugin / Widget marketspace in order to identify potential issues we’ll face with Blocks and its eventual marketspace.

    As Nick observes, waiting until August to launch this is an unrealistic and unambitious goal to set when we simultaneously promote a world of MVPs and continuous deployment via the power of WordPress.

    I believe we have tried to do usability testing for Gutenberg at a major WordCamp if I remember correctly; I have yet to see a concrete analysis of the resulting information, nor further information about what happened with these tests beyond the day of testing. At this point in time, we may want to retrospect to see if we were asking the correct questions in order to help improve not just the end product, but our OWN process.

    What I have seen, however, is Accessibility, Diversity, and Ethics concerns continually dismissed – or worse, further alienation at WordCamps of those who champion these rights. I’ve personally seen a strong person in power outright dismiss questions voiced by a different sex, then do it again, and again. This attitude makes me not want to even press Submit on these very words.

    Without full transparency of communications and efforts, our volunteer workforce will dry up quickly. We cannot wait for August to do what we know is right. It does begin at the Source. Let’s not make the same mistakes this time.

  5. There’s a lot to like here, though I’m still troubled by the directory submission rules that are fairly stringently not allowing for any sort of promotional link or defined up-sell of any kind so as not to “disrupt the flow”.

    More often than not these days, people don’t have as much free time to invest in coding just for the fun of it. I speak mainly of myself, but I have the notion that while WordPress is still grounded pretty firmly in Open Source (not a bad thing), it’s been the open markets that have allowed it to grow as much as it has. I don’t think it’s wrong to allow people the opportunity (within reason) to make something back off their hard work should they choose. Donations are non-viable in my experience as the vast majority of humanity are way cheaper than they would like to admit.

    Nowadays, the digital arms race of features means fewer and fewer pure open source approaches for plugins make sense and freemium is a new norm even if it’s treated like a dirty word.

    Without any sort of up-sell channel (rule-defined or element defined in blocks), we aren’t going to see the plethora that we are hoping for, nor in some cases the quality that could be brought in by people working professionally on a block plugin. The time to define these up-sell and link options is right now.

    Reading through some of the comments on the Make announcement and I was struck by a sort of quiet hypocrisy: This is all Open Source, but people are only allowed to do things so far as WE allow them.

    Where WordPress started and where it is now are two separate points in time. I hope the Open Source community and the marketplaces can find a way to co-exist here in order to really rev up the platform for the future.

  6. It’s quite confusing to have both Blocks and Manage screen. Are they for the same purpose?

    I understand that the Blocks screen is for block plugin management, but from user perspective, it’s still confusing.

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: