Here’s a closer at the Common Blocks in the new Gutenberg editor for WordPress.
You can watch the video below or read along. For these examples, I’ve installed a testing site with no plugins and only the default Twenty Nineteen theme installed. I’ve also installed some test data from WPTest.io and the WordPress Codex.
Common blocks in WordPress Gutenberg
Paragraph
The Paragraph block is your basic block of text. It comes with a few controls such as size setting, adding a drop cap (as seen here), and setting the background and text color.
Keep in mind that the new editor treats each paragraph as a separate block. This is different from how many page builder tools treat multiple paragraphs as a single piece of content. For example, this paragraph has a blue background and is distinct from the previous paragraph with the drop cap.
Heading
Heading blocks are HTML heading tags. From the editor, the most common ones are H2 to H4, but you can select any from H1 to H6 if you want to. If you use the Block sidebar on the right, you can also set anchor tags, which will allow you to place links to specific headings on your page.
List
Lists only really have two options:
- unordered lists
- ordered lists
Unfortunately, there’s no option to have description or definition lists.
Image
The Image block allows you to insert single images. You can modify the size, caption and links within the Block sidebar.
You also have the ability to set the image to wide width or full width, which will depend on what theme you’re using. Above, I used the Wide Width setting for a screenshot of one of my favorite Nintendo games.
Quote
“The Quote block allows you to put in a quote with a citation. Two styles are available: regular and large.”
Aaron Tweeton
Gallery
The Gallery block allows you to insert multiple images inside a block. Below is an example showing some coffee labels I designed for fun a few years ago.
I don’t believe the options are as robust as the previous WordPress editor, particularly if you were using JetPack, but you are able to create a simple gallery. By default, the gallery images won’t link to anything, so if you click on the images, nothing will happen. Even if you set the gallery to link to the media file, there’s no “Lightbox” interface that you might expect, at least not with the default theme or minimal plugins.
Audio
The Audio block allows you to add audio files such as MP3s to your post. In the Block sidebar, you can control autoplay, looping and preloading.
Cover
The Cover block allows you to place an image with overlaid text and color.
From the Block sidebar you can set a fixed background (which will sort of give a parallax effect), and adjust the background color.
File
The File block allows you to create a link for users to download any file in your Media Library. This could be handy if you want visitors to download a PDF.
Video
The Video block allows you to place a video you’ve uploaded to your Media Library. Below I’ve included a video that’s a converted 300×250 ad from Adobe Flash.
This is not the same as embedding a video from a third-party site such as Vimeo or YouTube. From the Block sidebar, you can set playback and audio settings.
So that’s a quick look at the Common blocks available in the new WordPress editor. Next time, we’ll take a look at the Formatting blocks that are available.