WordPress Gutenberg is an editor that focuses on content blocks. While some have struggled with the learning curve, others adopted it right away.

Gutenberg Goodies: 7 Reasons to Embrace WordPress’s New Content Editor

This WordPress Gutenberg guide will introduce you to the many uses of content blocks.
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Table of Contents

Lori Ballen is a member of the Amazon Associates Program and earns money from qualifying purchases. Posts contain affiliate links that benefit Lori as well.

With Gutenberg, you create content in blocks that you can move around your posts and pages. Even if you’re unfamiliar with it, you should still embrace WordPress’s new content editor. Gutenberg offers several goodies that can help you create content for your website.

With Gutenberg, you create content in blocks that you can move around your posts and pages. Even if you're unfamiliar with it, you should still embrace WordPress's new content editor. Gutenberg offers several goodies that can help you create content for your website.

WordPress no longer uses the TinyMCE editor. The fifth major version of the content management system (CMS) introduced a new block-based content editor. Known as Gutenberg, it offers a completely different editing experience than that of the TinyMCE editor.

Because it’s such a drastic change, you may feel reluctant to use Gutenberg. WordPress previously used the TinyMCE editor for over a decade, so many webmasters are familiar with it. Gutenberg, on the other hand, has only been around for a few years.

Less Scrolling

You’ll spend more time creating content and less time scrolling when using Gutenberg. The old TinyMCE editor placed all formatting buttons on the top.

To format a section of text, you’d have to scroll to the top of the post or page where you’d find two rows of buttons. As a result, creating long-form content was often tedious.

The double-row formatting toolbar found at the top of the posts and pages has been removed in Gutenberg. Instead, WordPress’s new content editor automatically displays a single-row formatting toolbar directly over the block that you are currently editing.

When you select a block, the formatting toolbar will appear over it. You can then click the toolbar’s buttons to format some or all of the text in the block.


Drag and Drop Images

Gutenberg makes it easy to add images to posts and pages. Rather than manually uploading them, you can drag and drop images into WordPress’s new content editor. Just open the image folder on your computer and left-click the image that you want to add.

While holding left click, move your mouse cursor to Gutenberg so that it drags the image with it. Releasing left click will prompt Gutenberg to add the image to your post or page.

Dragging and dropping isn’t the only way you can add images in Gutenberg. You can add them by creating blocks as well.

Clicking “Enter” on your keyboard will create space for a new block. If you begin typing, Gutenberg will create a text block. To create an image block, click the plus sign and choose “Image” without typing any text.


Easier Embedding

You can effortlessly embed content into posts and pages using Gutenberg. WordPress’s new content editor features a block specifically for embedding. Just create a new embed block and enter the URL of the content that you want to embed.

Embedding was a chore with the TinyMCE editor. To embed a piece of content, you’d have to copy a snippet of code from the source and then add it to the post’s or page’s Hypertext Markup Language (HTML).

Gutenberg offers a simpler way to embed content. When you add the source’s URL to an embed block, it will automatically embed the content from that source.

Gutenberg supports embedded content from dozens of sources, some of which include: 

  • YouTube 
  • Facebook 
  • Twitter 
  • Vimeo 
  • Dailymotion 
  • Soundcloud 
  • Animoto 
  • Tumblr 
  • Slideshare 
  • Screencast 
  • Reddit 
  • Imgur 
  • Instagram 
  • Cloudup 

Wide and Full-Width Alignment

Gutenberg offers two new ways in which you can align content: wide and full width. These alternative new alignment options allow content pieces to break free of the blocks in which they are placed.

With wide alignment, the content will expand horizontally slightly beyond that of the block in which it’s placed.

With full-width alignment, the content will expand horizontally all the way across the post or page.

The TinyMCE editor only supported left, right and center alignment. Gutenberg doesn’t remove these traditional alignment options. Rather, it adds wide and full-width alignment as alternative options.

With that said, wide and full-width alignment isn’t supported by all themes. If you don’t see them in Gutenberg, you’ll need to either replace your website’s theme or modify the theme’s functions.php file.


Format Retention When Copying and Pasting

You don’t have to worry about losing formatting when copying content from an external source and pasting it into WordPress’s new content editor. Gutenberg retains formatting from most text editors to provide a seamless transition.

Whether you create content in Microsoft Word, Google Docs, Apple Pages or even Quip, you can paste it into Gutenberg without losing formatting.

If you’ve ever tried to copy and paste content using the TinyMCE editor, you may recall it stripping away formatting. WordPress’s old content editor would often remove headings, lists, bold text, italicized text and other formatting options, thereby forcing you to revise the pasted content before publishing it.

With Gutenberg, formatting is retained, so you can create content in an external text editor.


Mobile-Friendly Content Creation

Gutenberg allows you to create and content from a mobile device. It offers a mobile-friendly experience that’s easy to use on smartphones and tablets.

You can access Gutenberg using the official WordPress app to satisfy your website’s content needs on the go.

Keep in mind, Gutenberg’s mobile friendless doesn’t apply to the way in which content is displayed. Gutenberg only affects how you create and edit content; your website’s theme is ultimately what determines how the content is displayed.


No Going Back

WordPress developers are committed to Gutenberg. While some webmasters who use the CMS have petitioned for the return of the TinyMCE editor, developers say they will continue to use Gutenberg as the default content editor.

They’ll likely improve it by adding new features, but WordPress developers aren’t ditching Gutenberg. Gutenberg is here to stay.

There’s a plugin available to use WordPress’s now-retired TinyMCE editor. Known as Classic Editor, it replaces Gutenberg with the TinyMCE editor. Unfortunately, Classic Editor will only be officially supported until the end of 2021.

Switching from the TinyMCE editor to Gutenberg can be overwhelming, but it’s well worth learning. You’ll be able to create content faster and more efficiently with WordPress’s new editor. Besides, Gutenberg isn’t all that confusing; it’s just different.

Gutenberg Tutorial

WordPress Gutenberg is an editor that focuses on content blocks. While some have struggled with the learning curve, others adopted it right away.

My personal favorite element of WordPress Gutenberg is the ability to save a block for use later. Make one update to that block and every page that contains that block is also updated.

This WordPress Gutenberg guide will introduce you to the many uses of content blocks.

The structured data blocks from YOAST Elements are also very powerful when considering seo.

To insert a block, find the plus sign on the dashboard. It will appear when you hit enter or return to add a new section.

If you don’t see the plus sign, you may need to go to Settings to activate blocks.

When you first click to add a content block, you’ll see the common ones you are used to in the classic editor. Once you begin using the blocks, your most-used will appear at the top.

If you want to delete a block that you added, simply click the 3 dots to the right and choose delete.

Moving Content Blocks

Moving content blocks around the page is very easy. Each has a drag and drop feature as well as arrows that move it up or down one position at a time. Simply click on your block and find the up and down arrow to the left. The middle dots provides the drag and drop option.

Moving content blocks around the page is very easy. Each has a drag and drop feature as well as arrows that move it up or down one position at a time. Simply click on your block and find the up and down arrow to the left. The middle dots provides the drag and drop option.

Saving a Content Block

After you add a content block that you would like to save, click on the 3 dots in the upper right-hand corner of the block. Choose the option add to reusable blocks. When you want to use a reusable block, you can search by keyword or open all reusable blocks.

After you add a content block that you would like to save, click on the 3 dots in the upper right-hand corner of the block. Choose the option add to reusable blocks. When you want to use a reusable block, you can search by keyword or open all reusable blocks.

FAQS Structured Data Block

When your blog post is ranking well on Google, adding a YOAST structured data block such as FAQS can improve your snippet (preview) on the SERP (Search Engine Results Page).

Here’s what a snippet on a SERP looks like when it is a basic preview and is not a rich snippet.

Here's what a snippet on a SERP looks like when it is a basic preview and is not a rich snippet.

Here is a snippet when it appears on the SERP a rich snippet with the FAQ structured data block.

Here is a snippet when it appears on the SERP a rich snippet with the FAQ structured data block.

Steps

  1. Build a website that is focused on a niche
  2. Create a blog post or page that ranks on page one of Google’s search engine result page [SERP]
  3. Add the YOAST plugin to your website
  4. On your blog post or web page, click the + to add a content block (this is a WordPress  Gutenberg feature)
  5. Choose the faq structured data content block that is populated by YOAST
  6. Make an expansive list of unique frequently asked questions that would be valuable to the visitor.

How-To Structured Data Block

Also through YOAST is the How-To Structured data block. This would be great for a recipe or step by step tutorial. It can result in a rich snippet on the Search Engine Results Page as well.

Also through YOAST is the How-To Structured data block. This would be great for a recipe or step by step tutorial. It can result in a rich snippet on the Search Engine Results Page as well.

Button Block

Another content block favorite is the BUTTON Block which allows you to add a call to action button to your post and page. You can change the background and text color as well as the button style.

Click the 3 dots in the upper right-hand corner, and save for re-use. Remember, if you save a block as re-usable and then you edit on any page and save, it will update every page where you used that block unless you save it as another block name.

You can find the Button Block under Layout Elements. Add your text to the colored background and then click to add a URL that will redirect the user when they click it.

If you are using a lead magnet software such as optinmonster, lead pages, Convert Kit, or KEAP Infusionsoft, you can use the link and it will pop up when they click the button.

Separator

The separator is a simple and short link that divides blocks. You can find it in the layout elements. If you like another plugin or style, you can add that and Gutenberg will offer it inside the content blocks.

For example, a divider with back to top can be added with the Shortcodes Ultimate Plugin. Simply add the shortcode to an HTML content block or paragraph block, and then save as a reusable block called “Divider”.


Sample code from Shortcodes Ultimate:

The separator is a simple and short link that divides blocks. You can find it in the layout elements. If you like another plugin or style, you can add that and Gutenberg will offer it inside the content blocks. For example, a divider with back to top can be added with the Shortcodes Ultimate Plugin. Simply add the shortcode to an HTML content block or paragraph block, and then save as a reusable block called "Divider".

Cover Block

The Cover Block allows you to add a featured photo to the top of the blog with a Text Overlay.

WordPress Gutenberg

The Cover Block allows you to add a featured photo to the top of the blog with a Text Overlay.

Media and text blocks

If you are learning how to start a blog, you are in the right place. Here, you'll learn how to start a blog, how to grow the blog, and how to build a tribe that follows your blog and supports your brand and business.

This is an example of the Media and Text Block. Here, you can insert an image and then type coordinating text in the box next to it. This keeps it nicely aligned rather than trying to wrap text in the classic editor.

This is what the Media Text Block Looks like before you add the content.

This is what the Media Text Block Looks like before you add the content.

Embed Block

For your many embedded objects such as Youtube Videos, Google Maps, Facebook posts and so forth, the embed block might be a good option.

The HTML block usually works fine for this as well and depending on your theme, may even work better. There’s a list of acceptable embeds here.

For your many embedded objects such as Youtube Videos, Google Maps, Facebook posts and so forth, the embed block might be a good option. The HTML block usually works fine for this as well and depending on your theme, may even work better. There's a list of acceptable embeds here.

Table

Oh, baby, this is a GOOD one. While Tablepress is a free Plugin with advanced options, the Gutenberg Table is very easy to use. You can save it to your reusable blocks as well! Remember, when you edit it once, save it, and everywhere you have used the table will update!

WordPress ThemeWho’s it For?
Academy ProCoaches, online courses
Foodie ProFood Bloggers
Refined ThemeLifestyle Bloggers, Beauty Fashion
This is what the table looks like when you first begin. You can easily add Rows and columns after as well. Simply click on the Edit Table option. The best part is that you can save it and use it anywhere you want to drop it in as a content block!

Columns Block

Now, you can create various styles of columns. In the example below, I use 3 columns. Each block in the column uses content blocks. So you can line up 3 tables, 3 paragraphs, 3 images, 3 buttons, or a combination of Blocks.

With Canva it's easy to remove a background from a photo. Simply add a photo to your new design, click effects, and then Remove Background. Yep, it's that easy.
Link Whisper Review
Now, you can create various styles of columns. In the example below, I use 3 columns. Each block in the column uses content blocks. So you can line up 3 tables, 3 paragraphs, 3 images, 3 buttons, or a combination of Blocks.

List Block

Easily drop in the List Content Block for a numbered or bulleted list. You’ll find this in common blocks.

  • Idea one
  • Idea Two
  • Idea Three

Heading Block

The heading block allows you to use your headings to start a new paragraph. Your H2 is the most common and then from there, you can choose H3, and H4. You can also change a heading to paragraph or another style if you should choose. You are not locked into that style.


The Gallery will allow you to drop in several images to allow someone to browse.


Quotes Block

This is a Sample of quote

Lori Ballen

This is a Sample of a Large Quote

Lori Ballen

Latest Posts Content Block

Another personal favorite, Latest Posts allows you to drop in a content block consisting of related posts by category.

You’ll use the right side column after entering the content block to customize the category and how they are sorted. You can choose to include the date or not. You can choose to show a preview or title only.

All of this is in the right column when you click on the posts block.

FAQS

How do I Activate WordPress Gutenberg Content Blocks?

1. Make sure you have the latest update of WordPress
2. In WordPress, go to Settings, and then Writing and use the toggle to select content blocks
3. Alternatively, you can add the Gutenberg WordPress PlugIn if you can’t update your theme

Are All WordPress Websites and Themes Gutenberg Friendly?

No. In fact, some WordPress developers don’t run Gutenberg at all. You’ll want to choose a Gutenberg friendly WordPress Developer and or Theme. I’m a fan of Studiopress Themes on Genesis Framework. This theme is called Refined.

I updated a blog post to Gutenberg and now Can’t See My Content, What Did I Do?

Most likely, you have left behind some piece of the old post that was on the classic editor. The classic editor and Gutenberg blocks will not work together. Go through line by line and see if you can find that last piece of the classic editor.

How Can I Get More Content Blocks?

Many themes and WordPress Plugins will include items that appear in your content blocks menu. YOAST is a good example. In addition, you can actually purchase Gutenberg Block Add-Ons.

About Lori Ballen

I teach bloggers how to grow their blog, and make money through multiple streams of income. From affiliate marketing, to building courses, I share 7 income stream strategies through blogging.

Categories

Ready, Set, Grow

Hi! I’m Lori Ballen. I help content creators grow and monetize their channels. Are You Ready to Grow? Subscribe to receive my ebooks, video guides, and trainings.

How to Use WordPress

What is the difference between a page and a post?

If you’re going to have a blog, you’ll mostly be working in the Posts area of your WordPress dashboard. Posts are your actual blog posts. View them as articles in a newspaper. When you publish a new one, the last one gets pushed down and the new one is at the top and the most recent.

Read More »
Scroll to Top
Receive the latest news

How to Make 6-Figures As a Blogger

Weekly Marketing Tips, Videos, Event Invites, Software Reviews and Coupons.