Although it’s hidden within the features of the WordPress full site editing system (FSE), the block directory has been a part of the editor since Gutenberg’s early integration as the WordPress visual editor. The block directory is a way that new blocks can be discovered and used with a WordPress site.
This tutorial will walk you through how you can immediately use the block directory. In order to use the block directory, you will need to be logged in to your WordPress site as an administrator.
This tutorial uses WordPress version 6.0 and the Twenty Twenty-two theme.
What is the Block Directory?
The block directory is a part of the WordPress Plugin repository for single block plugins. The option for finding these blocks is built into the editors that you use in full site editing. And you can also visit the Plugins directory and specifically look for blocks.
These blocks are treated like plugins and can be managed through the Plugins section of the WordPress Administrator.
Using the Block Directory
To better understand using blocks and how the block directory can be very useful to you. Let’s step through a scenario where you’re building a WordPress site for a photographer.
You are creating posts to show the latest photos, but the photographer wants to minimize the scrolling that a viewer will go through when viewing the pictures.
Let’s build the Post first, then we’ll discuss how we can solve the photographer’s request.
How do we view multiple pictures in the same location without having to scroll down? One of the easiest ways to accomplish this is to use a slider or carousel. This way the picture remains in one place and there is still the option to see more.
To rebuild our current post we’re simply going to remove the current image block, then add a slider block.
Follow the steps below to see how this is done.
- Open your existing Post in the editor (if you’re not already there).
- Click on the existing image and look for the toolbar.
- When you find the toolbar, click the 3-vertical dots at the end of the toolbar. This will bring up a menu.
- Click on Remove image at the bottom of the menu.
- Next, we’re going to add the block to the area where the image block used to be. The easiest way to do this is to click on the block (of text) after the image. This will bring up the toolbar. Click on the 3-vertical dots on the toolbar.
- This time you’re going to click on the option labeled Insert before.
- This will create a space above the text and give you the + sign to add a block.
- Click on the + sign that you see. A pop-up menu will appear and there will be an option to Browse all at the bottom. Click on Browse all.
- This will open the left column showing all of the blocks that you currently have on your site. Search your blocks for a Slider block. Select the block if you have one already.
- If you do not have a Slider block, then this is where the Block Directory becomes useful. At the top of the column, click in the search box and type “Slider”.
- When you hit enter to search, your initial results will show that no blocks were found in your installed blocks. However, a few seconds after that you will see a list form under, “Available to install.” This list will include all blocks that could be found in the Block directory that match your search term.
- Select the Image Slider Block by WPDeveloper. If you don’t see this option then select another one. I have previously tested this block, and I know that it’s a great solution.
- Once you have selected the block, it will start to install. When it’s finished, the block will be labeled “Installed!” Additionally, the block will have been inserted in the correct location.
- Add the images you were going to add to the slider. You will see the option to select multiple images and create a new gallery. Click on create a new gallery when you have selected all the images to show in the slider.
- Once the images have been added, you can edit the gallery by adding captions or changing the order of the gallery by simply dragging the images into place.
- Click on Insert gallery. you should see the slider start to run.
You will notice that the pictures may not match the space very well. The best way to fix that is to select the Adaptive Height option. This will remove the empty space that we see in the screenshot above. - Click on Save Draft, Publish, or Update in the top right corner of the post editor to save your work!
This example shows the power of the Block Directory in that it provides a solution that did not exist in your current installation. Like using any WordPress plugin, you have extended the functionality of your website.
While these solutions are often free, make sure to take care and not overuse them. Like plugins, use too many of them and you could affect your site’s performance.
The WordPress community will continue to create custom blocks in the months and years to come. If you’re interested in doing a much deeper dive into understanding blocks and possibly developing your own, check out the Block Editor Handbook on the WordPress.org site.
Learn more about Full Site Editing in WordPress through our InMotion Hosting Support Center!
Learn more about the power of WordPress Themes and how they can simplify your website building and maintenance.
