WordPress Gutenberg Step by Step July 25, 2018

Gutenberg E02: The new Gutenberg edit post screen

Jim Zarkadas

3 min read
Share
Image for Gutenberg E02: The new Gutenberg edit post screen

In the second episode of our Gutenberg Editor series, we are going to break down the new Gutenberg Editor interface. We will compare the old edit post screen with the new one, and show you how each UI element has changed.

Gutenberg breakdown

According to the official Gutenberg design documentation the new edit screen consists now of 4 main areas:

  • The editor bar holds post-related actions: The editor mode, save status indicator, global actions for undo/redo/insert, the settings toggle, and the publish options.
  • The content area holds the post content itself.
  • The settings sidebar  holds document metadata, both for the document itself (tags, categories, schedule etc.), and for the blocks located in the Block tab.

Editor bar

The editor bar contains the Publish button you use to save and publish content.  It’s fixed on top so you can always perform these actions, without scrolling to the top of the page. It also contains the Add Block button, allowing you to quickly access the block library and add new content to your page.

Note:
The Code Editor on the right, displays blocks in their ‘raw’ text format. Editing them without knowing what you’re doing can cause blocks to misbehave or even break. Note that it’s not the same as the Text tab  in TinyMCE. There is a separate “View as HTML” option inside each block, which we will present in detail, shortly below.

Content area

The post title and body look the same, but they are two different sections inside the editor content area. The permalink is now hidden inside the title section, and is revealed only when you focus on the title element.

The post body, is just a collection of blocks. The paragraph block is the most basic one, and the one you will be working with the most.

There are many ways to insert a new paragraph block:

  • Press the Enter key, inside another block.
  • Click below or above another block.
  • Click the Add Block button.

Clicking the Add Block button  allows you to choose any kind of block. Let’s take a look at one and its available controls.

Notice the Edit as HTML option. Use this if you’re searching for the ‘View as HTML’  functionality of TinyMCE, and not the Code Editor inside the toolbar.

Settings sidebar

Each time you select a particular block, the individual Block Settings tab changes and displays the block’s configuration options.

Comparison to TinyMCE

This is how the edit post screen looks like with TinyMCE editor. We have highlighted all the main areas below.

And this is how it looks like with Gutenberg.

Play around and get prepared for the next episode

Now it’s time for you to visit Fronteberg and start experimenting with the new Gutenberg editor. Frontenberg is a frontend, and a Gutenberg playground that lets you test out the new WordPress editor instantly. No login is necessary,  just visit the site and you are ready to go. It’s the quickest and simplest way to get started! 🙂

In the next episode we will show you how blocks work and what your new post editing workflow will look like, so stay tuned!

Share

Did you like this article?

Subscribe to our blog and get awesome WordPress content straight to your inbox.

SUBSCRIBE

OUR READERS ALSO VIEWED:

Gutenberg E07: Additional Gutenberg resources and tools

In the final episode of our Gutenberg series we take a look at the best online Gutenberg resources to further guide and inspire you along the way!
Jim Zarkadas
Jim Zarkadas
3 min read

Gutenberg E06: Install Gutenberg on your WordPress site

We're approaching the end of our Gutenberg series, and there is only one thing left: installing Gutenberg on your WordPress site.
Jim Zarkadas
Jim Zarkadas
3 min read

Gutenberg E05: Custom blocks

In this Gutenberg Series episode, we present a collection custom blocks that inspire, and make your content creation easier and more fun!
Jim Zarkadas
Jim Zarkadas
3 min read