Gutenberg Block Library Provides a Searchable Index of Individual Blocks

An avalanche of blocks is pouring into the WordPress ecosystem ahead of Gutenberg’s inclusion in core. A few block collections, such as Atomic Blocks, Stackable, and CoBlocks, can be found on WordPress.org, but it’s not easy to search the individual blocks they contain. Other collections and standalone blocks are spread across the web. WordPress theme developer Danny Cooper has built a centralized library of Gutenberg blocks that are currently available to extend the new editor.

The library loads blocks into a grid with infinite scroll. It is searchable, so visitors can easily find individual blocks that are part of a collection. Blocks are also tagged, which makes it possible to compare a group of similar blocks. Individual listings display screenshots of the block in action and its settings panel, as well as a link to the author and a link to download.

The Gutenberg Block Library currently has more than four dozen blocks. Visitors and block creators can submit a block that is missing from the library.

Cooper is the owner of Olympus Themes, a small collection of free and commercial niche-focused WordPress themes. He has also created his own blocks collection called Editor Blocks, which focuses on blocks for business sites. His corresponding Editor Blocks theme is available for free on WordPress.org with support for all the business blocks.

“As a theme developer I’d been waiting for a way to build themes in a way where what you see on the backend matches what you will see on the frontend,” Cooper said. “That can be achieved to some extent using the Customizer, but it’s hard to craft more than one complex page using that method.”

Cooper comes from a PHP/jQuery background and said he didn’t have a strong enough understanding of ES6, Webpack, Babel, React to create Gutenberg blocks right away. The learning curve was a little steep but after getting a handle on the basics he is now able to make small contributions to the Gutenberg project.

“It felt like I was hitting a brick wall every five minutes when I started,” he said. “Zac Gordon’s course helped me get past that stage. The #core-editor slack channel was a big help too. Other than that I just studied the code of the core blocks and used Google. As my knowledge increased I’ve tried to reach out by submitting bug reports to other Block Libraries and making minor contributions to the Gutenberg project on Github.”

WordPress.org may be able to benefit from a centralized block library in the future, as people will be frequently searching for blocks after Gutenberg lands in core. Cooper said if WordPress.org had a library like this it might even be possible to find and install blocks from inside Gutenberg.

“I could build a block that searches my library but it wouldn’t be able to install them as most are part of a ‘collection,'” Cooper said. “I’m not sure if in the future the ‘collections’ will continue to grow or people will move towards releasing individual blocks.”

In the meantime, the Gutenberg Block Library provides a helpful resource for early adopters. Browsing through the listings, it’s exciting to see the variety of block functionality that the community is creating. Users who fully embrace Gutenberg in WordPress 5.0 will find dozens of blocks (and perhaps hundreds by that time) available for the new editor, if they know where to look.

9 Comments


  1. This is a really cool idea! It would be great to see this or something similar adopted into the WP admin so you can search for blocks like you do plugins or themes. Kudos to Danny!

    Report


  2. ๐Ÿ™Œ That’s a nice collection of Blocks. Good stuff Dany. Arranging them in this way is quite helpful, only if there was a way to pick and choose and use just the blocks you need. I’m thinking a blocks manager.

    ๐Ÿค”I just went through the source code of all of the ~60 listed blocks and except for two blocks (which were probably created too early) about 55 blocks a whopping 97% of them were created with my zero-config starter-kit create-guten-block.

    ๐Ÿ˜‡If anything, it’s a testament to how much WordPress community needs help with tooling, if 9 out of 10 developers are choosing CGB to make a Gutenberg block, maybe it’s time we invest time in Developer Experience and developer-tooling.

    Peace! โœŒ๏ธ

    Report


    1. You are right, Paulo. But my goal isnโ€™t just to pull every block possible. I manually test and screenshot them to ensure they work too. Some blocks I test are already broken due to changes in newer Gutenberg versions since they were released.

      Report


  3. WordPress.org may be able to benefit from a centralized block library in the future

    I’m curious – do you see this as a different library to the plugin directory, or an evolution of the existing .org plugin directory?

    Or perhaps putting it a different way… Right now, our concept of “block” may be different to our concept of what makes a “plugin”… but long term, are they the same thing?

    Report

Comments are closed.