• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPArena

WPArena

WPArena is a premium online resource site of WordPress and is focused on providing excellent WordPress Tutorials, Guides, Tips, and Collections.

  • News
    • Opinion
  • Tutorials
  • Reviews
    • Themes
    • Plugins
  • Comparisons
  • Collections
    • Education Themes
    • Genesis Child Themes
    • Best Responsive Themes
    • Medical WordPress Themes
    • Finance & Business Themes
    • Crowdfunding Themes
  • Resources
    • Inspiration
  • Services
WPArena » Guides
Guides

How to use the new WordPress post editor

Avatar of Editorial Staff Editorial Staff Updated: November 4, 2020

Gutenberg WordPress Update
FacebookTweetPinLinkedInEmailPrint

If you’ve ever used WordPress as either a personal blogging platform or a flexible solution to meet the needs for your company’s online presence, you know how easy this tool is to work with.

But for those of you weaned on the WordPress 4.x iterations, the upgrade to the new 5.x releases might be a bit of a shock to the system. Instead of that tried-and-true TinyMCE WYSIWYG (What You See Is What You Get) editor, WordPress has opted for a completely new take on the post editor.

This new editor, called Gutenberg, takes a very different approach to how you create and edit posts with WordPress. And although it might seem a bit overwhelming at first, the new editor was created with absolute simplicity and modularity in mind. With this new tool, everyone can create fantastic WordPress entries quickly.

Why the change?

First and foremost, why did WordPress make such a dramatic change in its editor? The decision was made to go with an editor that is more visual in nature, such that those who are less technically inclined wouldn’t have any trouble building a website.

With Gutenberg, the creation of posts migrated from text boxes to blocks. The previous editor ran on a PHP/HTML/CSS platform and did not allow for a visual editing experience. TinyMCE was a text-based editor, and unless the user had coding experience, the customization of pages and posts was nearly impossible. You were limited in what you could do, because of the less-than-flexible editor.

With TinyMCE, you created a post with a title and a body. You could add images and videos inline, and that was about it. You couldn’t customize the layout of the post or page. You were locked in.

With Gutenberg, you are in control of how the page or post is laid out. By breaking everything into blocks, you decide where each block goes and what each of them contains. It’s flexible and far superior to the original editor.

But how do you use it? Let’s find out.

How to use Gutenberg

Remember, it’s all about blocks. Whether you’re creating a post or a page, you do so block by block. When you go to create a new post, you’ll find a default title block (which is required) already there (Figure 1).

gutenberg guide 1
Created with GIMP

The default title block in Gutenberg.

Type the title for your new post and then click anywhere outside of that block to reveal the Add Block button (Figure 2).

gutenberg post editing
Created with GIMP

We can now add a new block to the post.

Click the + button to reveal the block selector (Figure 3).

gutenberg post edit styles
Created with GIMP

The Gutenberg block selector.

It is important that you get to know the block selector. If you scroll through the listings within, you’ll find the blocks have been categorized by:

  • Most used – the blocks you use most.
  • Common blocks – such as paragraph, image, list, contact forms, heading, and quote.
  • Formatting – such as custom HTML, code, classic, preformatted, and table.
  • Layout Elements – such as page break, buttons, columns, group, and separator.
  • Widgets – for various plugins you’ve installed.
  • Embeds – such as Twitter, Youtube, Facebook, Instagram, and Spotify.

You might also find other categories, from plugins such as Atomic Blocks and WooCommerce. This will depend on how much customization you’ve done to your WordPress site, especially if you’ve hired an application development company to create a custom plugin for your site.

From that menu of blocks, select what you want to add next, and it will appear, ready for you to add content to the block (Figure 4).

editing a post
Created with GIMP

We’ve added a Paragraph block to the post.

One interesting aspect of the Paragraph block reveals itself when you hit the return key (or copy/paste a multi-paragraph section of text). As you can see, in Figure 5, the three paragraphs copied and pasted as a Paragraph block actually appears as three individual blocks.

gutenberg post editing
Created with GIMP

A multi-block copy and paste job.

By separating the copy/paste into individual blocks, it makes it possible to do things like move each block around, give each block unique formatting and even duplicate blocks.

Once you’ve added that block, click the + button again to add another block. You can even hover your mouse over a block to reveal the Add Block button, so you can add new blocks between existing blocks (Figure 6).

gutenberg post editing
Created with GIMP

Adding a new block between existing blocks.

You could select to add an Image block between existing blocks. To do that, hover your mouse over the top block and click the + button. Select image from the Common Blocks section and then either click the Upload, Media Library, or Insert from the URL button to add your image (Figure 7).

gutenberg post editing
Created with GIMP

Adding an image block from within Gutenberg.

Continue on, adding blocks in this same fashion. Once you’ve added the last block, and are happy with your post or page, click the Publish button in the upper right corner, and your post is ready for public consumption.

Conclusion

You don’t have to fear the new WordPress Gutenberg editor. Although this new method of creating posts is drastically different than the previous editor, you won’t just find it easier to use, but exponentially more flexible – once you get the hang of it, that is.

This post was orginally published on: April 17, 2020 and was updated on: November 4, 2020.

Related Tags: Gutenberg

FacebookTweetPinLinkedInEmailPrint

Related Stories

  • Launching Your First Blog In 2023: Actionable “How To” Guide

    Launching Your First Blog In 2023: Actionable “How To” Guide

  • 11 Easy Tips A Beginner Should Know When Creating An Online Portfolio

    11 Easy Tips A Beginner Should Know When Creating An Online Portfolio

  • Your Guide to Blogger Outreach: How-To and What You Should Know

    Your Guide to Blogger Outreach: How-To and What You Should Know

Avatar of Editorial Staff

Editorial Staff

Editorial Staff at WPArena is a team of WordPress experts led by Jazib Zaman. Page maintained by Jazib Zaman.

Reader Interactions

Share Your Thoughts Cancel reply

Before submitting your comment, we kindly ask that you read our comment policy. Your email address will remain confidential and will not be published or shared anywhere. If you subscribe, you will receive notifications regarding new comments.

Primary Sidebar

Social Media Sites as E-Commerce Stores

Social Media Sites That Work as Effective E-commerce Stores

A person using a MacBook

How Can You Take Your IT Career To The Next Level?

Recent Topics

  • 27 Top SEO Companies in the World
  • 12 Ways To Monetize Your WordPress Blog
  • Comparing the Best Employee Engagement Software in the Market
  • Stellar Converter for OST Review: Best Tool for OST to PST Conversion
  • How To Use WordPress as an eCommerce Store

Footer

Top

  • Services
  • Our Themes
  • Facebook
  • Twitter
  • Linkedin

Reviews

  • Beaver Builder Review
  • Beaver Themer Review
  • WP User Frontend Pro
  • Ninja Forms Review
  • MemberPress Review

More Reviews »

Resources

  • Best WordPress Plugins
  • WordPress Permalinks Structure
  • Email Management System
  • Envato Free Files
  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact

Copyright © 2023 · All Rights Reserved · WPArena is a Project of TechAbout LLC.
We are not affiliated with Automattic or WordPress.

  • Advertise
  • Write for us
  • Disclosure
  • Terms
  • Privacy
  • Contact
Share this ArticleLike this article? Email it to a friend!

Email sent!