In this workshop, you will learn how to find, install and edit new blocks on your site. The Block Directory will help you to enhance your pages and posts without leaving your editing location.

Learning outcomes

• Search the Block Directory
• Evaluate Blocks from the Directory
• Add a new Block
• Find the freshly installed Block in the Admin Dashboard Plugins listing

Comprehension questions

1. What are the benefits of the Block Directory?
2. Can you you use the Block Directory if you dont’ have permission to add or install plugins?
3. What will you do if you can’t find a block you are looking for in the Block Editor Library or Block Directory?

Transcript

Hi and welcome back to Learn WordPress. Today we are going to look at how we can utilise the Block Directory. But before we look at the Block Directory, we need to talk about the Block Editor. Using the Block Editor is an effective way to create modern multimedia-heavy layouts by inserting and combining blocks, adding patterns and of course using the Block Directory, and today we’ll take a closer look at how the Block Directory can help you discover and install new blocks on your website. So the Block Editor might not have the block you’re looking for. But the great news is just like plugins and themes, you can add blocks to your site to endlessly extend it. And this is where the Block Directory comes to the rescue. You can search for variety of blocks to meet your needs. From pricing menus, maps, book reviews, testimonials, and even charts. In essence, the Block Directory searches for free WordPress block plugins, which you’ll be able to install and activate without leaving your current editing location. At the end of this workshop, you’ll be able to search the Block Directory, evaluate blocks, add a new block, and also find the installed blocks in your Plugins listing.

So let’s go and explore the Block Directory and look at how we can practically use it. I’ve created a page about wellbeing and firstly, I’m going to use the Block Editor to add a Gallery block. So once you click on the Inserter, click on Gallery, and then upload the pictures from your Media Library or directly from your computer. I am going to select the two images and create a gallery and insert it into my page. And now you can change the alignment and I will change it to full-width. Secondly, I’m going to scroll down, click on the Inserter again and insert a Paragraph block. And here you can type or paste your content. Now you may go ahead and edit your text using the toolbar. I’m going to put ‘healthy lifestyle’ in bold. Then I will go up to the images in my Gallery block and I will use the Sidebar Settings to change the appearance of my images to be more rounded. You may also use the Sidebar Settings to make other changes as you see fit. Now I would like to insert an accordion-type block to reveal information when a user wants to read more. But as you can see, there are no results found. And this is where we can rely on the Block Directory.

You can click on the Inserter top left and type in ‘accordion.’ And when you press Enter, you will see all the available block plugins. And when you hover over the block plugin, you will see the star ratings and how many reviews it received. If you click on the Inserter within your page to look for a block plugin, you have to click on “Browse all’ to gain access to the Directory. So I’m going to type in ‘accordion’ again and then once I click on the Block plugin, it will directly install and insert itself into my page. You may then proceed in editing the information to meet your requirements. Now, the three topics I want visitors to read more about when they visit my website is firstly, ‘Nutrition.’ Secondly, ‘Training.’ And then last but not the least, ‘Mental Wellbeing.’ And once you have edited your headings and your content, you can see how your accordion opens and closes for the reader. Next, I would like to add an InfoBox to grab the reader’s attention and direct them to other important content on my page, if they were to be interested. So once I have clicked on the Inserter, I will type in ‘infoBox.’ And again, once I click on the Block plugin, it will automatically install and insert itself into my page. And now we can start editing. The title of my InfoBox is going to be ‘The Secret’ and I am going to change the subtext to say ‘How do you stay motivated?” To edit the ‘Learn More’ button go to your Sidebar Settings and click on Style. Make your way down to ‘Button’ and once you are here you can add a link and if you wanted to, you can change the text.

Lastly, you can even add something like a Flipbox to reveal information when the visitor hovers over it. I am going to type in ‘Flipbox’ and then in no time 1, 2, 3 you will be able to start editing your content. I will make my way to the Sidebar Settings and under Flip Content I will change the front title to say, “How much exercise is needed to burn off a donut?” And I’m going to leave the Front Content empty. And then on the flip side, I will change the Back Title to the shocking truth ’30 minutes.’ And I will also leave the Back Content empty, and then once the visitors hover over the question, they will see the answer on the other side of the card. Before we look at one more example, let us make our way to the Plugins area as this is where your Block plugins are also kept. Let’s view the details of the InfoBox Block plugin. If you scroll down, you will see some extra information. And at the top, you can read about installation, frequently asked questions and changelog.

Finally, I am going to create an ‘About Page.’ And as you can see, I have already added a photo, text and some social links. But I would also like to add a testimonial for visitors to see some feedback from our clients. So I will click on the Inserter and type in ‘Testimonials.’ So as you can see, there is no block available. So I will go ahead and install the Testimonial Block plugin. And once inserted, I can start editing. Firstly, I will change the image to the person who of course wrote the comment. Secondly, you can change the name and add the company they work for. So John Doe works for a company called Foreverblue. And once you’ve changed that information, you can also add the feedback in the quoted text above. And to end off I am going to add a Timeline Block plugin to visually display the history of the company or the product. And once the Block plugin is installed, you can start editing and telling your story. As you will see, you can go as far back as you wish, you even have the choice of adding an image. And if you click on add new story, you will be able to create more content and plot your journey.

If you can’t find a Block plugin with in the Block Directory, you can always return to the Plugins area on your dashboard and find what you are searching for there. So for example, let’s say you are looking for a Live Chat plugin. You might not find it in the Directory, but you will find it if you add new and search under Plugins. And remember to keep an eye out for new Block plugins because the directory will keep expanding. So enjoy exploring the Block Directory and visit Learn WordPress for more workshops and training material.