Menu
iThemes
WordPress Security, Backups & Maintenance
  • Products
    • iThemes Security Pro
    • BackupBuddy
    • iThemes Sync
    • Why buy from iThemes?
  • Bundles
    • Essentials Bundle
    • Solid Foundations
    • Customer Spotlights
  • Resources
    • Blog
    • WordPress 101 Tutorials
    • WordPress Ebooks
    • Weekly WordPress Vulnerability Report
    • The Ultimate Guide to Starting a Web Design Business
  • Training
    • Upcoming Webinars
    • Free Webinar Library
    • Premium Courses
    • Become a Member
    • Member Login
  • Support
    • Documentation
    • Get Help
    • Product Updates
    • Upgrade Policy
    • Contact
    • Our Mission: Make People’s Lives Awesome
  • Log In
WordPress News and Updates from iThemes
Categories
  • Product Updates
  • WordPress Backup
  • WordPress Block Editor
  • WordPress Ecommerce
  • WordPress for Freelancers
  • WordPress Security
  • WordPress Tutorials
  • WPprosper

WordPress Gutenberg Blocks Explained

Written by iThemes Editorial Team on November 15, 2018

Last Updated on November 12, 2019

WordPress Gutenberg blocks are a totally new way to edit posts and pages in WordPress. Beginning with WordPress 5.0, every WordPress user will need to learn how to use WordPress Gutenberg blocks. In this tutorial, we explain how the new blocks work with the new Gutenberg WordPress Editor.

Before we go any further, you should check out our WordPress Gutenberg Ultimate Guide. That post and ebook covers information that this how-to will assume you already know. The Classic Editor plugin will only be officially supported until December 31, 2021, so you can only delay the inevitable for so long.

Personally, I love using the new editor, and I think you are going to enjoy learning how to use WordPress Gutenberg’s block concept to build pages and posts on your sites.

What are WordPress Gutenberg Blocks?

wordpress-gutenberg-block-types

Gutenberg blocks allow you to insert a specific type of content into your post and then edit them independently of the other blocks. Using just a click and a drag of a mouse, you can completely reorganize the structure a post or page. Another bonus? Blocks allow you to create rich posts without needing to know any code.

The 10 WordPress Gutenberg Common Blocks

1. Lists

Add a list to your page or post using the List block.

Block Options

wordpress gutenberg blocks

  1. Convert to an unordered list.
  2. Convert to an ordered list.
  3. Outdent list item.
  4. Indent list item.

On a numbered list you can indent and convert a list item to create a mixed list.

WordPress Gutenberg List

2. Paragraph

Use the Paragraph block to add a new paragraph.

Block Options

  1. Align Left
  2. Align Center
  3. Align Right
  4. Bold
  5. Italic
  6. Link
  7. Strikethrough
  8. Text Settings
  9. Background Color
  10. Text Color

The Gutenberg Editor allows you to easily and quickly make basic text modifications. You can change the font size but using the preconfigured small, normal, medium, large and huge.

You can also set the font size using the pixels.

The Color Settings allow you to make important text standout without leaving the editor or adding your own CSS.

Change Gutenberg Blocks Text Color

3. Heading

Use the Heading block to add a heading to your post.

  1. Select Heading Size
  2. Text Formatting
  3. Heading Size
  4. Align Text

4. File

Using a FIle block, you can create a link to view the file or create a button to download the file.

  1. Transform Block Type
  2. Align Left
  3. Align Center
  4. Align Right
  5. Wide Width
  6. Full Width
  7. Edit File
  8. Text Link Settings
  9. Download Button Settings

WordPress Gutenberg Blocks File

5. Quote

The Quote block allows you to easily add a quote and citation to your page or post.

  1. Quote Alignment
  2. Text Formatting
  3. Quote Styles

The Quote block settings allow you to choose the style and align the block to your liking.

6. Gallery

Create a gallery from a group of images.

  1. Gallery Alignment
  2. Edit Gallery
  3. Set the Number of Columns
  4. Crop Images Toggle

The Gallery block allows you to drag and drop pictures onto your page or post and the Gutenberg editor will auto create a Gallery for you.

The Edit Gallery option lets add captions or new images and rearrange the order of the images.

The Crop Images toggle will attempt to crop the images to make thumbnails the same size, which can have a less than desirable result. When using the Gallery block, you will want to add images that share a similar dimension.

7. Image

Add an image to your post.

  1. Align Image
  2. Edit Image
  3. Alternative Text
  4. Select Image Size
  5. Choose Custom Image Size
  6. Link Settings

Now you can add an image without entering your Medial Libray, drag and drop the image straight into your post.

Gutenberg Block Image

You can click the Edit Image option if you need to change the image being displayed. You can also set the Alt Text for the image without leaving the editor.

When adding an image, you can choose one of the three auto-formatted sizes, Thumbnail, Medium or Full.

image-size

You can also use the Image Dimension settings to set a custom Width and Height for the image.

8. Cover Image

The Cover Image allows you to set the image that will be used for your blog post.

cover-image-block

  1. Align Image
  2. Align Text
  3. Change Image Used for Cover block
  4. Toggle Fixed Background On and Off
  5. Overlay Color
  6. Background Opacity

Depending on the theme you are using, a cover image will be displayed along with your post, making it more inviting to potential readers.

You can use the Overlay settings to select the overlay color and choose the overlay’s opacity.

9. Audio

Insert an audio clip into your post.
wp-blocks-audio

  1. Align Audio Block
  2. Edit Audio Block
  3. Toggle Autoplay and Loop On and Off
  4. Preload Options

The Preload option allows you to control what is preloaded for people visiting the site.

wp-audio-preload-options

10. Video

Add a video to your post.

wp-blocks-video

  1. Align Video
  2. Change Video
  3. Toggle Autoplay, Loop, Mute, and Playback Controls On and Off
  4. Choose The Preload Options
  5. Add a Poster Image for the Video

The 7 WordPress Gutenberg Formatting Blocks

1. Custom HTML

Are you not finding exactly what you need in a WordPress Gutenberg Block? Use the Custom HTML block to add your HTML to the site.

wp-gutenberg-blocks-html

  1. View the HTML block
  2. Preview your HTML

wp-blocks-html-preview

2. Pull Quote

Add a Pull Quote to draw attention to an excerpt from the post.

wp-blocks-pull-quote

  1. Align Pull Quote
  2. Format Text
  3. Choose Pull Quote Style
  4. Select Pull Quote Color
  5. Select Text Color

WordPress Gutenberg Pull Quote Block

3. Classic Editor

Use the classic WYSIWYG editor.

classic editor block

4. Table

Add a table to your page or post.

Table Block

  1. Align Table
  2. Modify Table
  3. Format Text
  4. Choose Table Style
  5. Toggle Fixed Width Cells On and Off
  6. Choose Number of Rows and Columns and Create Table
  7. Created Table

When you add a Table block, you will need to choose the desired number of columns and rows before creating the table.

modify-table-block

You will still be able to add and remove columns and rows after the table is created.

5. Verse

Add a verse from a poem or song to your site.

verse block

  1. Align Verse Block
  2. Format Text

verse frontend

6. Code

Add a code block to a post or page.

code block

Here is what the code snippet will look like to your visitors.

code block

7. Preformatted

Add Preformatted text to your site.

Preformatted

Here is the Preformatted block on the front end of your site.

preformatted frontend

The 7 WordPress Gutenberg Layout Elements Blocks

1. Spacer

Add some white space between blocks.

Spacer Block

Slide the spacer block up and down to get the desired amount of white space between blocks.

some space

More Space

more space

2. Column

Organize content using the Column block.

column block

  1. Align Columns Block
  2. Format Text
  3. Adjust Font Size and Enable Drop Cap
  4. Adjust the Text and Background Color

3. More

Create a teaser on your Home or Blog page for a post.

more block

  1. Choose if you want the Tease text to show in the actual post.

This is what you will see on the blog page

blog page

And here is what you will see on the post’s page when the Hide Teaser option is toggled on.

blog view

4. Button

Add a call to action with a Button block.

button block

  1. Align Button
  2. Format Text
  3. Select Button Style
  4. Choose Text and Background Color

You can add a URL to the button to create a link.

5. Media Text

MediaText block

  1. Toggle Between Wide Width and Full Width
  2. Show Media on Right or Left of Text
  3. Change Image or Video
  4. Toggle Stacking for Mobile and Add Alt Text to Image
  5. Change Background Color

Use the slider to change the amount of real estate that the media or text use. Select the text box to adjust font-size and color.

WordPress Gutenberg Media Text Block

6. Page Break

Separate a post into pages.

Page Break

7. Separator

Create a break between ideas or sections with a horizontal separator.

separator block

The 5 WordPress Gutenberg Widget Blocks

1. Latest Posts

You can add a widget with links to recent posts using the Latest Post block.
posts block

  1. Align Widget
  2. Display Posts Using Lists or Grids
  3. Choose How to Order Posts
  4. Select Post Category to Display
  5. Number of Post to Display
  6. Toggle Post Date On and Off

2. Shortcode

Add an existing plugin’s shortcode using the Shortcode block.

shortcode block

3. Archives.

Add a widget with a link to your site’s archives.

archive block

  1. Align Widget
  2. Toggle Dropdown and Post Counts On and Off

4. Categories

Add a widget linking to Post categories.

categories block

  1. Align Widget
  2. Display Settings

5. Comments

Display a widget with the most recent comments with the Comments block.

comment block

  1. Align Widget
  2. Display Settings

34 WordPress Gutenberg Embed Blocks

The WordPress Gutenberg blocks also make it easy to embed links from a ton of different sources. There are currently 34 embeds officially supported, we aren’t going to cover each embed individually as they will typically behave the same way. However, we will list the embed blocks that are currently available.

  • WordPress
  • Embed
  • YouTube
  • Spotify
  • Screencast
  • Twitter
  • Facebook
  • Instagram
  • SoundCloud
  • Flickr
  • Vimeo
  • Animoto
  • Cloudup
  • CollegeHumor
  • Dailymotion
  • Funny or Die
  • Hulu
  • Imgur
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Photobucket
  • Polldaddy
  • Reddit
  • ReverbNation
  • Scribd
  • Slideshare
  • SmugMug
  • Speaker Deck
  • TED
  • Tumblr
  • VideoPress
  • WordPress.tv

Bonus: 7 Gutenberg Editor Shortcuts

I always like adding keyboard shortcuts to my workflow, they can reduce the time it takes to finish a post.

Shortcode Mac Linux/Windows
Display Shortcut Cmd+Option+H Shift+Alt+H
Show/Hide the Settings Sidebar Shift+Cmd+, Ctrl+Shift+,
Open the Block Navigation Menu Ctrl+Option+O Shift+Alt+O
Navigate to the Next Section of the Editor Ctrl+` or
Shift+Options+N
Ctrl+`
or Shift+Alt+N
Navigate to the Previous Section
of the Editor
Ctrl+Shift+` or
Shift+Option+P
Ctrl+Shift+` or
Shift+Alt+P
Navigate to the Nearest Toolbar Option+F10 Alt+F10
Switch between Visual Editor and Code Editor Cmd+Shift+Option+M Ctrl+Shift+Alt+M

WordPress Gutenberg Blocks Wrap Up

WordPress 5.0 has a huge selection of blocks available for you to use in the new editor but expect to see new block types in the future. WordPress has created the Block API to allow third-party developers to create their own blocks. I am excited to see what the WordPress community can create!

Download the Free Ebook: The Ultimate Guide to WordPress 5.0 and The Gutenberg Editor

In this guide, we cover everything you need to know about Gutenberg.

Contents:

  • Introduction to WordPress 5.0
  • Before You Update to WordPress 5.0
  • What is Gutenberg?
  • Why Overhaul the WordPress Editor?
  • What Happens to the Classic Editor?
  • Introducing Blocks
  • What Blocks Are Included?
  • Getting to Know the Gutenberg Editor Menu
  • Document Settings
  • Gutenberg Block Menu Options
  • More Gutenberg Options
  • Gutenberg Keyboard Shortcuts
  • More WordPress Resources

Download the PDF

iThemes Team
iThemes Editorial Team

Each week, the team at iThemes team publishes new WordPress tutorials and resources, including the Weekly WordPress Vulnerability Report. Since 2008, iThemes has been dedicated to helping you build, maintain, and secure WordPress sites for yourself or for clients. Our mission? Make People’s Lives Awesome.

Share via:

  • Facebook
  • Twitter
  • LinkedIn
  • More
Other related posts
common wordpress errors
How to Fix Common WordPress Errors
WordPress White Screen of Death
The WordPress White Screen of Death: A Guide to Recovery
why-wordpress
Why WordPress? 15 Reasons to Use WordPress
manage-wordpress
How to Manage WordPress Sites: 75 Tasks To Keep Your Site Running Smoothly

Comments

  1. David DeFino says:
    November 15, 2018 at 10:46 am

    Well… there seems to be nothing Gutenberg can do that wasn’t simpler in the old editor… This is just making something harder for the sake of change

    Reply

Respond

Click here to cancel reply.

Get updates on new themes & plugins plus special discounts

About iThemes

  • Contact Us
  • Website Accessibility Statement
  • Sitemap

Resources

  • Blog
  • Documentation
  • WordPress Tutorials
  • Free WordPress Ebooks
  • Free Webinar Library
  • Free Upcoming Webinars
  • iThemes Training
  • Affiliates

Customers

  • Member Panel Login
  • Support
  • FAQs
  • Upgrade Policy
  • Licensing
  • Terms and Conditions
  • Refund Policy

Top Products

  • BackupBuddy
  • iThemes Security Pro
  • iThemes Sync
  • Restrict Content Pro
  • WPComplete
  • WordPress Plugins
  • Content Upgrades
  • WordPress Landing Page Plugin
  • BackupBuddy Stash

iThemes Media LLC Copyright © 2023 All rights reserved | Privacy Policy

A Liquid Web Brand © 2022 All Rights Reserved.

Get the Weekly WordPress Vulnerability Report

Vulnerable WordPress plugins and themes are the #1 reason WordPress sites get hacked, but keeping track of every new plugin and theme vulnerability is hard work. Get the weekly WordPress Vulnerability Report delivered right to your inbox to help keep your website secure.

Get the Report
Share via
Facebook
Twitter
LinkedIn
Mix
Email
Print
Copy Link
Powered by Social Snap
Copy link
CopyCopied
Powered by Social Snap