Intro to the WordPress Block Directory


An introduction to the Block Directory. In this brief workshop with Angela Jin from the WordPress Community team, you’ll learn what the Block Directory is, how to find it, and how to use it to enhance your posts and pages.

This workshop is part of the Intro to Publishing with the Block Editor series.

Learning outcomes

  1. Understand what the Block Directory is.
  2. Learn how to access the Block Directory, search for and download new Blocks.
  3. Learn how to manage downloaded Blocks on your site.

Comprehension questions

  1. What is the Block Directory, and how do you search for new Blocks?
  2. What are two different ways of accessing the Block Directory?
  3. How do you manage new Blocks that you’ve downloaded?

Transcript

Hello, and welcome to the next lesson in our introduction to publishing with the Block Editor. My name is Angela and I’m a community organizer sponsored by Automattic. If you’re watching this, you may either already know or be interested in learning that this video is part of a series of workshops and lessons about how to publish with the Block Editor. In this video, we’ll be focusing on how to use the Block Directory. If you are new to using the Block Editor, I recommend starting with the intro workshop, which covers what the editor is, and more specifically what the Block Editor is, what blocks are, and how to use them to create a post or page. You can find links to the series in the description of this video. If you’re already familiar with the Block Editor, or have already seen the previous video, awesome, this video will now introduce you to the Block Directory and how to use it. Let’s go!

Before we dive into the Block Directory, if you’ve seen our first video in this series, you might notice that something looks a little bit different. The WordPress software is continuously evolving and being iterated upon. And in our last video, the most recent version of WordPress was 5.4 point two. In this new video, we’re using WordPress 5.5, which as you can see includes some changes to the user experience in the Block Editor. However, while the visuals might look different, all the concepts are still the same. blocks are still blocks. And we can still combine them to create seamless holistic posts and pages. And we still use the inserter to add new blocks to our posts and pages. Let’s do a super quick refresher as that’s also a nice introduction to the Block Directory. For our new post, we can add a title.

And we can select blocks just like we usually would. Paragraph block for instance is a pretty common one that we like to use.

You can format and you can also add images.

We can easily add a block by clicking on this button in the top left corner of our screen, we can search for a block or we can browse through this menu.

While the Block Editor comes with a sizable number of useful blocks, there are definitely instances where you might be looking for a block with some more specific functionalities. The good news is that just like plugins and themes, you can add blocks to your site to endlessly extend it. This is where the Block Directory comes in handy. After the Block Editor became the default WordPress editor, one of the next priority projects was to build a wordpress.org directory for discovering blocks and a way to seamlessly install them. That project known as the Block Directory, was included in the latest WordPress update 5.5 which is the version that we are using today. The most seamless way to use the Block Directory is in the Block Editor itself. Let’s walk through an example.

With my travel blog, if I eventually get a followers, I might want to let them know when my next trip will be.

In this case, I keep my followers excited with a countdown clock. When I searched for that block, I learned that I don’t have that block in my library. In this case, click on browse all or click on the inserter button in the top toolbar on your post for a page to search for more options. This searches the full Block Directory and gives me some options for what I’m looking for. I can see the name of the block, a description of the block, who authored it, how many active installations there currently are when the block was last updated, and I can even see how many other blocks the author has written. This is all super helpful information for picking the block I want. From this menu, I can also add a block simply by clicking the Add block button. This installs the block immediately to your website, and you can begin using it right away.

Take some time to explore the Block Directory to see what blocks are available to you. For example, if you have a photography blog, you might be interested in a slider. If you have an e commerce site, you might want to block that shows the price perhaps you have a site for a professional service and you want to display some testimonials. The possibilities are endless. Let’s go back to our travel blog.

My next trip is going to be a week from now. So I just select the date and look at the block go. Now that my post is ready, all I need to do is click on publish and then confirm and Tada. My post is now live. To see the blocks that have been installed on your site, visit your dashboard and click on plugins. Here you can see which blocks you have installed and manage them just as he would manage plugins. Another way to explore the Block Directory is to visit this site. Here you can browse and explore all the current blocks available and download ones you want to upload to your site. people continue to develop blocks so you can expect this Block Directory to grow quickly. In fact, if you want to learn how to build your own blocks, check out the Learn WordPress workshop that introduces you to Gutenberg block development. And that’s our workshop. For today. We’ve just covered what the Block Directory is and how you can access and use it to help extend the functionality of your site. It’s a great resource for adding extra features, especially for specialized or commercial sites.

As a reminder, blocks continue to be created and added to the directory all the time. So keep exploring and experimenting with your site. See what you can create!

Workshop Details



Presenters

Angela Jin
@angelasjin

An inveterate volunteer, Angela has a longstanding passion for building strong, inclusive communities. She joined Automattic in 2018 as a community organizer for the WordPress open source project, and adores working with WordPress communities around the world. Originally from Seattle, Washington, Angela is currently trying out Madrid, Spain, where she delights in learning Spanish, exploring by eating, and reading a good book.