Ever since WordPress 5.0 was released in 2018 and WP first introduced the new Gutenberg editor, WP enthusiasts have been having the pleasure of using WordPress blocks.
WordPress blocks can be described as units (a text, an image, a video, a button, a widget, a table; over 90 blocks are available) that the Gutenberg editor introduced to help you create website content. Nowadays, thanks to the Full Site Editing features (FSE), you can use those units to build your entire website一from posts, pages, styles, and anything you want. All you need to do is place media within a block and use the drag-and-drop method to place that block anywhere on your website.
If you have just started using WordPress and want to learn more about the blocks, keep reading.
What do you get with WordPress blocks?
If you have heard of the Classic editor, or have had a chance to use it, you know that the old editor is impractical and that the Gutenberg editor took website building to the next level. There are two reasons why.
First, with Gutenberg editor and WordPress blocks, you get more customization options so you can expand your website’s functionality.
And second, WordPress blocks make everything quick and user-friendly. So, for example, nowadays, if you want to embed a YouTube video on your site, all you need to do is add a block and paste the YT’s URL. Back in the day, you had to customize the video content by editing HTML code. It wasn’t complicated per se, and you could learn to do so pretty quickly, but now you don’t have to go through any extra steps. The process of website creation is straightforward, with no hidden micro-steps.
Another thing that makes WordPress blocks and Gutenberg editor so superior to the Classic editor are reusable blocks and patterns.
Reusable blocks are like block templates that you can select from the block sidebar and place anywhere on your site. To find a reusable block, enter the Editor, click the plus icon at the top left corner and then Browse all. Open the Reusable tab, where you’ll find all your saved, reusable blocks.
Note: If you are wondering how to create a reusable block, follow these steps:
- Select the block you want to save.
- Click on the three-dot icon of the block toolbar.
- Click on Add to Reusable blocks option.
- Enter a name for the block and click Save.
Block patterns are pre-made patterns that developers and designers create. So, you can purchase a WordPress theme and find the pre-made patterns within the Patterns section. And the best thing is that you can use these patterns anywhere on your website.
We use block patterns in our FSE-ready themes. If you are interested in knowing which WordPress block patterns we use, check out this article.
What type of WordPress blocks are available in the Editor?
There are over 90 blocks available within the Editor, divided into six categories: text, media, design, widgets, theme, and embeds. Let’s go through each of these categories.
Text blocks
Text blocks allow you to add text elements to the website content. Some of the main text blocks available are:
- Paragraph
- Heading
- List
- Quote
- Pullquote
- Classic
- Preformatted
- Code
- Table
- Verse
Media blocks
Media blocks allow you to upload files to the media library and embed them in the content, using the blocks. There are seven media blocks available:
- Image
- Gallery
- Audio
- Cover
- File
- Media and text
- Video
Design blocks
Design blocks help you shape the content and how it will be presented to the website visitors. Eight design blocks are available:
- Buttons
- Columns
- Group
- Row
- More
- Page break
- Separator
- Spacer
Widgets blocks
Widgets blocks are the blocks you can insert anywhere on a page. As you’ll be able to see, you’ll use widget blocks mostly for the footer and sidebars. Here are the available widgets blocks:
- Archives
- Calendar
- Categories
- Custom HTML
- Latest comments
- Latest posts
- Page list
- RSS
- Search
- Shortcode
- Social icons
- Tag Cloud
Theme blocks
Theme blocks are, as the name suggests, blocks related to the theme. There are 23 theme blocks in total, and here’s a list of all theme blocks available:
- Navigation
- Site logo
- Site title
- Site tagline
- Header
- Footer
- Template part
- Login/out
- Post title
- Post excerpt
- Post featured image
- Post content
- Post author
- Post date
- Post categories
- Post tags
- Next post
- Previous post
Embeds blocks
Embeds blocks allow you to embed content easily by copying and pasting external URLs. Some of the embeds WordPress blocks available are:
- YouTube
- Video
- Spotify
- SoundCloud
Can you create your own WordPress blocks?
Sure! You can create custom blocks, a mixture of the core blocks, or entirely new ones.
You can find examples of custom blocks created by WordPress developers in the official Block Directory and insert them within your website.
How can you use blocks?
Using WordPress blocks is intuitive. You can do several primary operations with them, and we’ll go through them.
Adding a WordPress block
To add a new block, click the plus icon at the top left corner of the Editor’s interface to open the block inserter. Then, search for the block you want to add.
Another way to add a WordPress block is by typing slash (‘/’) and then the name of the block. Once you start typing, a list of blocks will appear, and you can use the up and down arrows to find and select the block you wish to insert on a page.
Customizing a WordPress block
To customize a block, click on the block to select it. Once you’ve selected the block, two main options for customizing WordPress blocks will appear.
The first one is the floating bar which includes basic settings and allows you to tweak a block quickly. The second is the Block settings in the sidebar. These settings vary from block to block and give you control over how that block functions.
Rearranging a WordPress block
There are two methods you can use to rearrange WordPress blocks.
First: if you need to move a block up or down a few spots, you can select the block and click the up or down arrow to move the block one or a few positions up or down.
Second: if you want more control over where you place the block, you can use the drag-and-drop to move the block anywhere on your page. Just select the block and the six-dot icon to activate the method. Then, start dragging the block to the new location.
Selecting multiple blocks
To select multiple blocks, click the mouse and drag it, as you would if you wanted to select multiple paragraphs in a text document.
Also, you can click on the first block you wish to select, hold Shift on the keyboard, and then click on the last block you want to select. All the blocks between the first and last one will be selected.
Grouping WordPress blocks together
If you want to customize multiple blocks, it might be a good idea to group them.
Here are the steps to grouping blocks:
- Click the plus icon at the top left corner to open the Block inserter.
- Add a new Group block.
- Click the plus icon within the Group block to add other blocks inside that Group block.
- Once you start editing the Group block settings, the blocks inside the Group will also be edited.
Note: You can move the Group block around, and blocks that are within the Group block will stay inside it.
Final thoughts
We hope this post helped you understand what WordPress blocks are and how easy it is to create a website with them.
If you have questions about creating a site using your Themes Kingdom theme, feel free to contact us一our support agent will get back to you ASAP.