Basic Blocks Overview

With WordPress’s new editor, Gutenberg, every piece of content on your site will be contained in a “block;” blocks can be used modularly to build posts and pages that look the way you want them to even if you don’t know any code.

If you’re familiar with WordPress, a lot of the blocks will probably work relatively intuitively for you; if you’re not, you can still pick things up pretty quickly after getting a quick primer.

This piece will cover the most basic, bare-bones blocks that you’ll find in most any WordPress back end; depending on your site’s theme, you may have some custom blocks as well. We’ll go over what each block is called, what it does, and some brief notes on how best to use to them (or how not to use them).

Basic Blocks

We’ll start with the absolute most basic blocks that will form the foundation of each of your posts and pages.

Title/Heading

Pretty self explanatory: this block is used when your piece has sections that need titles. You have multiple sizes to pick from, ordered by most important, H1, usually down to H4 or H5. For example, in this article, my title (“Basic Blocks Overview”) is an H1 tag; the header of this section, “Basic Blocks,” is in an H2 tag, and the subheaders of this section, like “Title/Heading” (above) and “Paragraph” (below), are in H3 tags.

A note here: these classifications are structural, not aesthetic. That is, if you think H2 is too big for your first subtitle, don’t just skip to H3 simply because it’s smaller. H2 should be reserved specifically for second-level headings; H3 should be reserved for third, and so on. If you pick and choose based on looks alone, you could set yourself up for some screwy-looking stuff if you ever change your site’s theme in the future (there are also accessibility reasons not to do this; you can learn more about that here if you’re interested).

Paragraph

This is another easy one: use this block for chunks of plain text.

In the Gutenberg editor, paragraph blocks will automatically be created when you hit Return or Enter after finishing a paragraph. If for some reason you want multiple paragraphs in a single block, just hold down the Shift key while pressing Return or Enter.

Image

Any time you want to add a still image to a page or post, this is the block. This is where you can start getting pretty creative with all the options you have for how your images will fit into your piece.

Just click below your image to add a caption

Once your image is in place, you’ll get a menu of image block settings. You can center the image block, align it left or right and let the text flow around it, or make it full-width, so it will run the entire width of the user’s screen and get maximum impact.

For non-full-width images, you can resize them by clicking and dragging; this is especially useful for playing with left- and right-aligned images, when you may want the text wrapped around the imge block in a certain way.

Switching up the way you use images on a page does a lot to make everything look more interesting, especially when you need to break up a long article or add context and meaning to a page with lots of different bits of information.

When you want multiple images to display together, you don’t need to use multiple image blocks, just a single gallery block. Here again you have a lot of options you can explore for how this can look.

The theme of your site will affect what kinds of gallery options you have, but generally speaking, you’ve got carousels (a row of images, where the user clicks or swipes to scroll sideways through the gallery, like the one below), stacked (where the images are stacked in a vertical row), and masonry, where the images fit together in a grid. Masonry galleries will automatically shift and change depending on how many images you add.

Gallery blocks have some additional options that image blocks don’t; you can assign background colors or images, play with rounded corners, add filters, and more. You’ll find all of those in the block settings tab on the right-hand side of your screen.

List

If you have a list in your post, you can easily format it by putting it into a list block. Whether you’re on WordPress or not, lists come in one of two flavors: ordered (where each list item is numbered sequentially) and unordered (where each list item is marked simply with a bullet point). You’ll control that option, as well as indentation, in the menu on the list block itself.

Table of Contents

This block will go through your post and use the headings and subheadings to automatically generate a table of contents for your post. This is great when your post is really long (like this one!)

Table of contents

  1. Basic Blocks
    1. Title/Heading
      1. Paragraph
        1. Image
          1. Gallery
            1. List
              1. Table of Contents
              2. Beautifying Blocks
                1. Cover Image
                  1. Quote
                    1. Pullquote
                      1. Separator
                        1. Spacer
                          1. Columns
                            1. Verse
                            2. “I’m a Web Developer!” Blocks
                              1. Buttons
                                1. Media and Text
                                  1. A Good Block for Important Information
                                  2. Tables
                                    1. Code
                                      1. Custom HTML
                                        1. Latest Posts
                                          1. Categories
                                            1. Shortcode
                                            2. Embeddables

                                              Beautifying Blocks

                                              Now we’ll go over the blocks that are all about style. These blocks will help take your posts and pages to the next level, and do things that simply weren’t possible before if you didn’t know how to code.

                                              Cover Image

                                              While regular image blocks are what you’ll use for images in the body of your post or page, cover image blocks are specifically designed for images that you’ll use with your headers and subheaders. With most themes, the biggest difference is that you can put text directly over the image, like this:

                                              Learning About Blocks Makes Me Tired…

                                              Like image blocks, you can control things like opacity and overlay with in your block settings menu on the right. And, like image blocks, you can use the menu on the block itself to make your cover image wide-width or full-width, or align it to one side.

                                              For extra fancy points, use that block settings menu to toggle your cover image to “fixed background.” That will make it so that the background image stays in place while the rest of the page scrolls. Here’s how our cover image block looks if I make it full-width and toggle the fixed background:

                                              …But I’m a Trooper!

                                              Cover image blocks are suprisingly powerful little things, so make use of them!

                                              Quote

                                              A quote block is used when you have a quotation that’s longer than a couple lines in your post or page. It’s slightly different than a pullquote, which we’ll get into next.

                                              Your theme will probably have a couple different sizes available for quote blocks, and they’ll be pre-formatted with a specific spot for your citation. Here’s a regular-sized quote block; your theme may have a “large” size or other variants as well:

                                              They will not criminalise us, rob us of our true identity, steal our individualism, depoliticise us, churn us out as systemised, institutionalised, decent law-abiding robots. Never will they label our liberation struggle as criminal.

                                              Bobby Sands

                                              Pullquote

                                              While quote blocks are used for a quote that’s part of the flow of the piece, a pullquote block is used when you want to highlight a quote from somewhere else in your piece – you see this done a lot in magazines.

                                              Like quote blocks, your pullquote block options will vary depending on your site’s theme and settings.

                                              Separator

                                              A line to separate sections! Your theme will determine what options you have here.

                                              Spacer

                                              Spacer does just that, adds spaces between blocks. This is a tricky one because as your site evolves and the theme changes, the spaces could grow or shrink in relation to the rest of your content, and potentially look weird. Your developer may even ask you specifically not to use them. If you do use them, you can control the size in the sidebar menu.

                                              Columns

                                              Columns of blocks! This will most commonly be used for text and images. You can use the sidebar menu to change settings like the number of columns.

                                              You’ll also have the menus for each block within the columns; it all depends on where you click.

                                              I’m another paragraph block in a column block. I need to be longer than the middle block so I don’t look all weird on the page, so my font is larger.

                                              I’m a paragraph block and an image in a column block.

                                              I’m another paragraph block in a column block. I need to be longer than the middle block so I don’t look all weird on the page, so here I am, saying a bunch of stuff.

                                              Verse

                                              In Gutenberg, hitting “Enter” starts a new block. As you can imagine, this makes text that has a lot of line breaks — such as a poem or lyrics — annoying to do. That’s why this block exists. Here’s an excerpt of a poem in a verse block:

                                              W O M A N - Nikki Giovanni
                                              she wanted to be a blade
                                              of grass amid the fields
                                              but he wouldn't agree
                                              to be a dandelion

                                              she wanted to be a robin singing
                                              through the leaves
                                              but he refused to be
                                              her tree

                                              “I’m a Web Developer!” Blocks

                                              Buttons

                                              Use the Button block to spiff up a link, particularly a call to action like “Join Now” or “Apply Here.” You have a few styling options with buttons; just make sure the text is super readable against the background color.

                                              As always, your button options will change with your theme. You can change its alignment just like a text or image block as well.

                                              Call to Action!

                                              Media and Text

                                              A Good Block for Important Information

                                              The Media and Text block, like the Column block, is made up of other blocks; an image on one side, and text and button blocks on the other.

                                              Like a column block, you have settings both for the internal blocks, and the Media and Text block as a whole. You can make the outer and inner blocks full-width, change alignment, etc with the menus on the blocks themselves. Click and drag the image to change its size.

                                              You can use a background color – like the gray background here – to really set it apart.

                                              Tables

                                              Yes, I’m a broken record: your options here will change with your theme. Tables are great for displaying data; if you’re not really using a lot of numberical data on your site, you’ll rarely use this (if ever), so we’re just gonna keep rolling to the next block in our list.

                                              Code

                                              Displaying code in blocks is tricky for the same reason that verse is: a lot of line breaks. Most casual users of WordPress won’t ever use this, but here’s how it looks:

                                              {
                                                  "glossary": {
                                                      "title": "example glossary",
                                              		"GlossDiv": {
                                                          "title": "S",
                                              			"GlossList": {
                                                              "GlossEntry": {
                                                                  "ID": "SGML",
                                              					"SortAs": "SGML",
                                              					"GlossTerm": "Standard Generalized Markup Language",
                                              					"Acronym": "SGML",
                                              					"Abbrev": "ISO 8879:1986",
                                              					"GlossDef": {
                                                                      "para": "A meta-markup language, used to create markup languages such as DocBook.",
                                              						"GlossSeeAlso": ["GML", "XML"]
                                                                  },
                                              					"GlossSee": "markup"
                                                              }
                                                          }
                                                      }
                                                  }
                                              }

                                              Custom HTML

                                              This block may become outdated soon; it’s a place to put code that you wrote to do something that no existing block can do. You might use it to embed forms, for example.

                                              The reason it might be outdated soon is that Gutenberg is so powerful that there are already custom blocks for, say, embedding an Action Network petition. But in the absence of that, this works!

                                              Latest Posts

                                              This handy little thing will automatically gather your latest posts and display them as a clickable list. A great thing to have on a page to make sure your visitors can see everything you have on offer.

                                              This block will automatically update as you add new posts, and you can change options (such as how many posts it displays) in the sidebar menu. Here’s ours:

                                              Categories

                                              Similar to Latest Posts. This grabs a list of clickable categories to guide your users around your site. Here’s ours:

                                              Shortcode

                                              Similar to Custom HTML, but WordPress-specific, and also totally outdated.

                                              Basically, shortcode allows users to execute code within a WordPress page, post, or widget without actually writing code. With the advent of Gutenberg, you shouldn’t need this at all: just find the block that does the thing you want to do. If you’re curious, here’s more.

                                              Embeddables

                                              You won’t use 90% of these, but worth covering. These are blocks specifically designed for you to embed things like YouTube videos or tweets without hunting down embed codes. Just select the block you want and it will propmt you to enter a URL, and boom!

                                              There are Embed blocks for a ton of sites, most of which, again, you will never use. Here’s a partial list:

                                              • Twitter
                                              • YouTube
                                              • Facebook
                                              • Instagram
                                              • WordPress
                                              • SoundCloud
                                              • Spotify
                                              • Imgur
                                              • Flickr
                                              • Vimeo
                                              • Animoto
                                              • Cloudup
                                              • CollegeHumor
                                              • Dailymotion
                                              • Funny or Die
                                              • Hulu
                                              • Issuu
                                              • Kickstarter
                                              • Mixcloud
                                              • Photobucket
                                              • Polldaddy
                                              • Reddit
                                              • ReverbNation
                                              • Screencast
                                              • Scribd
                                              • Slidshare
                                              • Speaker Deck
                                              • TED
                                              • Tumblr
                                              • VideoPress
                                              • Vine

                                              The list above doesn’t cover all possible blocks in Gutenberg, because they’re changing every day; it likely won’t even cover all the blocks you have available to you, because of the whole “depends on your theme” thing. But this should be enough to give you a sense of how this all works and what the possibilities are.

                                              Your web developer is a great source for questions about Gutenberg, especially if you have an idea for something you’d like to do that you can’t find in your existing selection of blocks.

                                              They’ll also likely be adding custom blocks, or whole new collections of blocks made by other developers; feel free to ask to get updates when anthing changes!