WordPress content is added to the editor screen using content blocks. Each block displays a specific type of content in a consistent manner, such as text, video, or an image. This means that any time you add a Paragraph Block, the contents of that block will look the same as every other paragraph on your website: the font-size and color of every paragraph will be the same, as will the spacing. Blocks allow content to have a consistent look and style throughout the website.
Blocks for every type of content
When you look at the number of block choices, there are a lot. For text alone, there are nearly a dozen blocks. Most users won’t need to use all the available blocks, but it’s important to know which ones to use in a given situation. You’ll notice that when browsing through the many blocks, they are divided into categories:
WordPress Block Categories
- Text—pretty much anything using the written word
- Media–images, video, and files
- Design–formatting and arranging blocks
- Widgets–legacy features used by WordPress
- Theme–dynamic content that is applied programmatically
- Embeds–content from other sources, such as YouTube
- AIM Blocks–blocks we’ve built just for you
Building Content with Blocks
Let’s make a blank page to see how to use blocks. When you click Add Page on the left admin sidebar, you’ll see the Add Title prompt at the top of the page, so you begin by adding the page’s title. Now you’ll be faced with a blank canvas, the editor where blocks are added for content. You’ll see that an empty block position is ready for you. The message “type / to choose block” is followed by the “add block” link, which is a black box with a white cross in the middle. To get started, click the “add block” link, which activates a pop-up menu of recently used blocks, a search field (where you can type in the name of the block you want to use) or the “Browse All” button. Clicking “Browse All” opens a menu to the left that is populated with all the available blocks for your use. (You’ll also see links for “Patterns” and “Media”, but you can ignore them for now.)
Choose a block
The very first block in the Test category is “Paragraph”, which you’ll probably use more than any other block, so let’s click on that to see what happens. Well, nothing seems to happen, that’s because the default block is the paragraph block. That means you can start writing straightaway. If, instead, you want to begin your content with a headline, you could click on the Heading block. Doing so will add the empty Heading block to your editor. Once an empty text block is in the editor, simply click in the block and begin writing. You can also copy and paste text from another source, such as MS Word or an email. Once you’ve added content into your block, you’ll want to save it. In the toolbar at the top of the editor is a “Save draft” link and “Publish” button. If you save a draft version of the page, it won’t be visible to website visitors until you publish it. We’ll dig into publishing and navigation in a different article.
Different types of content blocks
Using the text blocks is simple since the content is just the written word. But much of the content you want to display may be visual in the form of images, galleries, and videos. For instance, when you browse the block library and click on Image (the first option in the Media category) instead of a blank text block, you have a series of three buttons for selecting the source of the image file. The Upload option asks you to upload an image from your computer. The Media Library button will open up the Media Library, which contains all the media files that have been uploaded previously to the website. Finally, the insert from URL option allows you to bring in an image that is already published online that has a unique URL or web address. (Be aware that you should only publish images that are your own or that you have the right to publish.) Once you’ve selected the image to add to your page, it will appear in the editor. You’ll notice that when you add the image, a set of options appears in the right sidebar. These controls help you set the size, aspect ratio, borders, alt text description, and other things, which we’ll cover in an article about using the Image Block. For now, let’s move on to the Design category to see how we might arrange our blocks.
Designing with blocks
The Design category contains a wide range of blocks, some with a very specific purpose, like the Button Block, and others that are used to contain blocks and help shape the layout of content on the page, such as the Group Block and Columns Block. Group and Columns Blocks are useful because they can include any other block added inside them so you can create rows and stacks of content. These blocks also contain a variety of options, such as adding backgrounds, borders, padding, rounded edges, and much more to help you create arrangements of content that are meaningful and attractive. For instance, you can add an image as a background to a group that contains a headline, paragraph text, and a button to create a self-contained call-to-action. You can learn more about designing with Group and Columns Blocks in their own article. Another useful block is the Spacer, which allows you to create vertical spaces between blocks, which helps readability and style.
AIM Blocks
The AIM Blocks category is available only to AIM clients using the Corgi theme. (Woof!) We’ve created specialized blocks to give our clients greater design freedom and to provide specialized functions not found elsewhere. Some AIM clients will have additional blocks that we’ve created just for their use, such as our FDOne clients who have a full set of blocks that pertain specifically to fire department websites. Some of the AIM Blocks are used to create theme elements, like the navigation menus, while others, like the Public Messages Block, allow you to display groups of messages in a desired location. Still other AIM Blocks create special effects, such as content that fades in when the page scrolls to their position. Special effects can add panache, but more importantly, they can draw the visitor’s eye to an important feature or message. AIM Blocks are also an integral part of our development process, allowing us to create pages and features consistently and in a timely manner.
Block Options
Many blocks include a set of options for customizing the content. Once you’ve clicked on a block to highlight it, the block’s options can appear both in the top toolbar of the editor and in the right sidebar. In the right sidebar, you’ll see two links at the top of the sidebar: Page and Block. If you’ve highlighted a block, the Block link should be active and you will see the options available to customize the selected block. For the Paragraph Block, the sidebar options include Styles, Color, Typography, Dimensions, Border, and Advanced. The Top Toolbar options include arrows to move the paragraph up or down in the order of blocks, an alignment option, bold, italic, and link controls. An additional dropdown set of options include Footnotes, Highlights, and several additional options not commonly used.
In contrast, for the Group Block (which acts as a container for other blocks) you’ll find two sets of options. The first set is activated when you highlight the block, and a gear icon represents it. The second set is for styling, and it is represented by a half-filled circle icon. The first set of options include standard, row, column, and grid controls, a control to set the Group Block width to the default page content width, a Position control to make the block Sticky (so it doesn’t move from its position, and the Advanced option (for adding anchors and extra style selectors used by programmers). If you click on the circle icon for the second set of options, you’ll see a Styles section at the top, which contains a set of width selections by percentages. You can click on the carrot icon to the right of the Style section panel to close the panel. The next section is for Colors, including text and background. Keep in mind that you can also apply text color on content blocks that are inside the Group Block. Other controls are to add a Background, the Typography panel that includes size, font, font-weight, line-height, letter spacing, italic, and letter case. After that are the Dimension controls for Padding, Margin, Block Spacing, and Minimum Height. Then comes the Border and Shadow controls.
The Useful List View
One of the handiest tools in the editor is the List View. To activate it, look in the the top toolbar for a three stepped lines. Click that icon and a vertical list of blocks appears, shown in order along with their hierarchy, indicated by a right-pointing arrow. Clicking on an arrow will reveal all the blocks that are contained within the parent block. For instance, a Group Block can contain any other type of block. When you highlight a block in the List View by clicking on it, the block in the editor will also be highlighted with a blue outline. You’ll also see an Option link to the right of the title of every block in the List View. Click on the three vertical dots and you will see the options, which include: Copy, Cut, Duplicate, Add before, Add after, Copy styles, Paste styles, Group, Ungroup, Lock, Rename, Create Pattern, and Delete. We’ll cover all these options in a separate Block Options post.
Optional Views
Look for the Options link (the three vertical buttons) in the top right corner of the editor and click it to reveal another set of options for the editor. Here you’ll find the options for displaying the Top toolbar or selecting various editing modes. You can also switch to a Code Editor, but we suggest only doing so if you have a pretty good knowledge of both HTML and WordPress coding standards. You’ll also find additional links that may include extra plugin controls, preferences, help functions, and some other options, such as Manage patterns.
Patterns & Media
We’ll cover Patterns & Media in another post, but since we’re introducing a lot of block functionality in this post, we should provide a quick mention of these editor options. The Patterns link opens up your library of Patterns, which are preset groups of blocks with the styling already setup for you. Patterns are one of the most incredibly useful tools in WordPress, as they allow you to create complex groups of content, such as a biography section, and save it for future use. At AIM, we use Patterns for all sorts of default elements to help our clients get started, such as page patterns to make it easy to create a new page in a standard style that is part of the website’s design. Patterns can be stored in categories to make then easy to find and apply. As for Media, if you click that option you’ll have several further options, including Images, Videos, and Openverse. Images and Videos refer to your own Media Library, so you can search through your stuff while you’re editing a post. Openverse searches through libraries accessible to WordPress for open source images. We recommend using your own visual assets whenever possible, but some imagery is used less for information and more as a visual filler, and these images can be useful in that role.
One Final Overview of the WordPress Blocks & Editor
If you haven’t worked with WordPress in the past five years, this new block editor system may seem pretty radical. The fact is that it opens up creativity by allowing authors to create without having to worry about styling details. All the basic styling work has been done behind the scenes. And yet, in those cases where you want to add some style variation, the controls exist for that, and they’re simple to understand. At AIM, we’ve tried to add useful features over and above those included with standard WordPress. But one of our strengths as a partner in your webdesign journey is that we excel at creating special solutions, from one-click patterns that make it easy for you to create new content to highly specialized functions that enhance your operations.