WordPress blocks are individual design elements you can add to a web page using WordPress’ native drag-and-drop builder, called the “block editor” and sometimes “Gutenberg.”

Common blocks include Paragraph for body text, Heading for headings H1 through H6 and Image for images.

In this post, I share tips on how to use WordPress blocks.

What are WordPress Blocks? Overview

WordPress blocks are the individual content modules you insert onto a web page using WordPress’ built-in page builder, known as the “block editor.”

Related: How to Use the Block Editor in WordPress

When you add text, headings, images and other elements to a WordPress page these days, you’re using blocks.

The exceptions are WordPress sites that use page builders or the Classic Editor plugin.

Page builders like Elementor and Divi replace the native block editor in WordPress. Classic Editor replaces the block editor with the old TinyMCE WYISWYG editor WordPress used to have.

By creating pages with blocks (as opposed to the old editor), WordPress users have more customization options that do not require code to implement.

If you don’t see a block you need, try installing a third-party block plugin. These are collections that add additional blocks to your website, such as pricing tables, counters, opt-in forms, icon boxes and more.

Your theme might also add new blocks to your collection.

Default WordPress Blocks

Blocks are arranged into the following primary categories:

• Text – Blocks that add different types of text to your pages, mainly paragraph and headings.
• Media – Blocks that allow you to add other types of content, such as images, videos and audio files.
• Design – Page building blocks, such as rows, columns and buttons.
• Widgets – Miscellaneous blocks that add other functionalities to your web page, such as a search function, an interactive calendar or a functionality controlled by a shortcode.
• Embeds – A large collection of blocks that allow you to embed content from other sources, such as social media platforms.

Text Blocks

The default block in the block editor is the Paragraph block. When you begin typing on a new WordPress page, you’re trying in the Paragraph block. You can also add this block to your page manually.

The text in the Paragraph block inherits text styles set by your theme. Go to Appearance → Customize to control them.

You can also control the Paragraph block’s styles on a block-by-block basis using the block settings in the panel to the right of the block editor’s interface.

The Paragraph block has four style presets to choose from:

• Default – The default styles for the Paragraph block, which are styles inherited from your theme.
• Display – Enlarges the text size of the Paragraph block.
• Subtitle – Shrinks the line height of the Paragraph block.
• Annotation – Shrinks the text size of the Paragraph block and applies a thin border with rounded corners.

The Paragraph block inherits your theme’s text styles as well, including color and size, but you can customize the color, background and text size of individual blocks.

Font sizes have five presets from Small (S) to Extra Extra Large (XXL). Click the slider icon to set a custom font size.

The Dimensions section allows you to add padding and margins, but you can’t target specific devices with these settings, so it’s best to leave them alone so your body width for this individual block doesn’t appear too thin on mobile.

Use the Border settings to apply a border to your Paragraph block and the Radius settings to apply rounded corners.

If you’re ever unhappy with your settings, Undo (button or Ctrl/Cmd + Z) your changes, or click the three-dot menu associated with the settings you want to revert, and select Reset or Reset All.

Interact with the popup toolbar to change other styles, such as applying bold text or a link. Highlight the individual text you want to apply these settings to.

The Heading block is very similar, except you use the toolbar to change the heading level.

Media Blocks

Image Credits: Megan Clark, George Pagan III and Kat Med on Unsplash

You can add images to a WordPress page or post with the following media blocks:

• Image – Add images from your media library to your page.
• Gallery – Add multiple images from your media library, and display them in different styles.
• Media & Text – Add one image to your page, and display a short paragraph of text next to it.
• Cover – Add a large image to your web page, and display a text overlay or other type of block on top of it. Choose a solid background color instead of an image, if you wish.

Image Credits: Harrison Hargrave on Unsplash; Dr. Plants on YouTube

You can add an audio file with the Audio block, a video with the Video block and a downloadable file with the File block. However, you can also use these blocks to insert content from URLs, such as a YouTube URL.

Add alt text and captions to images as you upload them, or add them in the Image block itself.

Apply alt text to your image in the panel to right and a caption using the Caption button in the popup toolbar.

For best image quality, keep the aspect ratio at Original, and set the resolution to Full Size.

If image quality isn’t an issue, play with the aspect ratio settings until your image is the correct size for your purposes.

Click the Duotone button if you want to apply a unique style to your image by changing the color tones for shadows and highlights.

The popup toolbar also has buttons for a link to make your image clickable and text to add text overlay to it.

If you click the Crop button, you can adjust the image’s zoom level, aspect ratio and orientation (rotation).

Click Apply to apply any changes you make to your image.

Finally, change the shape to Rounded, if you wish, and apply padding, margins, borders and border radius settings in the Styles tab.

Design Blocks

Design blocks allow you to add additional functionalities to your web page:

• Accordion – An interactive element that allows you to hide content and only display it when the user clicks on the block’s title.
• Buttons – Interactive elements that trigger an action when clicked, typically navigating to a specific page.
• Columns – Lets you display blocks in multiple horizontal columns with the option to stack blocks in each column vertically.
• Group – Group multiple blocks together.
• Row – Display blocks horizontally.
• Stack – Stack blocks vertically.
• Grid – Arrange blocks in a grid layout.
• More – Lets you choose how much of your post’s content should display on archive pages. A “read more” link will display on archive pages instead of your entire content.
• Page Break – Separates your page into multiple pages. Content above the Page Break block will be Page 1. Users will have to click the number “2” to visit “Page 2” to read content below the Page Break block.
• Separator – Adds a horizontal line (or dots) between blocks to create a visual break.
• Spacer – Adds whitespace between blocks and allows you to customize the height.

When you add the Button block to a page, type on it to apply call-to-action text to it, such as “Buy Now” or “Download.”

The Button block has four widths depending on how far you want the button to stretch across the width of your page’s body (25% to 100%).

However, you can set the alignment of the block to Max Width to stretch it across the entire container and Full Width to stretch it from one edge of the page to the other.

Use the horizontal alignment setting in the popup toolbar to choose which side of the container to display the button on. This only works if the size is 75% or less.

Use the popup toolbar to apply a URL and text styles (bold or italic) as well.

Use the Styles tab in the panel to the right to choose different styles for your button, such as switching to an outlined button (instead of filled) and changing the background color.

To display a second button side by side with your original button, click on the Button block, and click the blue plus + symbol in the lower, right-hand corner of the block.

Finally, let’s go over how to use the Columns block since it’s a pretty important block that allows you to create advanced designs with the block editor.

When you first add the block to a page, you can choose from six different column layouts.

Each column becomes its own container, which you can add any block to.

To add a second block to a column, click the Select Parent Block: Columns button…

…then, click Add Block to add a second block to this column.

Hover over a block, and click Move Up or Move Down in the popup toolbar to rearrange blocks.

You can also drag them to a new spot. The Drag button is to the left of the Move Up/Down buttons.

Click the parent column block to apply styles to an individual column using the settings in the panel to the right.