As of WordPress 5.0’s release on December 6, 2018, WordPress has a new default content editor. Called the WordPress Gutenberg editor while in development, “Gutenberg” is now just the “WordPress editor” or “block editor” if you want to be more specific.
The new block editor brings with it a completely different approach to content creation in the form of blocks (hence the name…).
And in this post, you’re going to learn exactly how to write a perfect blog post using those blocks, and the new editor’s other features, and to create content at your site.
As a quick refresher, here’s what the old WordPress TinyMCE editor looked like. This editor is now called the classic editor:
And here’s what things look like in the new WordPress block editor, AKA Gutenberg:
A Quick Tour of The NEW WordPress Block Editor Interface
Before you start adding some blocks, let’s go over a quick run-down of the elements of the main block editor interface:
- (A) – lets you add new blocks.
- (B) – undo/redo buttons
- (C) – gives you access to document settings, covering things like categories & tags, featured images, etc. This is similar to the current sidebar in the WordPress editor
- (D) – when you have an individual block selected, this gives you access to settings that are specific to that block
- (E) – lets you access a live preview of your post or publish/update your post
- (F) – once you add some blocks, this is where you’ll actually work with your post’s content
Adding new blocks
As I discussed in the intro, you’ll use separate “blocks” to build your layouts with the new editor.
To add a new block, all you need to do is click the +Plus icon and select the type of content you want to add:
In the example above, I showed you how to add a basic paragraph block. But Gutenberg actually includes a ton of different blocks, divided into different sections:
At the top, you see a list of your Most Used blocks. But if you scroll down, you’ll also see sections for Common Blocks, Formatting, Layout Elements, Widgets, and Embeds:
- Inline Elements – only contains one block for an inline image.
- Common Blocks – contains basic building blocks like images, paragraphs (regular text), headings, quotes, etc.
- Formatting – let you add more formatted content like pull quotes, tables, or the classic WordPress text editor
- Layout Elements– let you split text into two columns, include buttons, separators, or the “More” tag
- Widgets – let you add shortcodes, latest posts, or categories. It’s even possible to display sidebar widgets right in Gutenberg.
- Embeds – help you embed content from external sources like Twitter, YouTube, Facebook, Instagram, and more.
- Reusable – once you get the hang of things, you can save groups of blocks as reusable templates and have them appear here. This area won’t appear until you save your first reusable template, which we’ll show you how to do later on in this post.
Building a basic layout with Gutenberg
Let’s start off simple. Say you just want to build a basic blog post layout that includes:
- Regular text
- An image
- A quote
- An embedded YouTube video
Here’s how you’d do it with Gutenberg:
First, you’d write your entire post in the editor. Or, if you’re like me and prefer to write in Google Docs, you can paste it all in and then Gutenberg will automatically convert it to blocks.
Adding the non-text blocks
Now that your content is split into blocks, you can hover over the spot where you want to insert your first image and click the plus icon. That will create a break. Then, click the plus icon again to insert the image block:
This will allow you to insert an image block, from which you can upload or select images in a similar manner to the current WordPress editor:
Once you select your image, you should see it right there in your page layout:
Next, hover over the spot where you want to insert the pull quote and use the same approach to insert another block. You can either search for “quote” or go to the Common Blocks section:
Then, you’ll see your new pull quote block. To create your quote, all you need to do is click into the block and type:
To insert a YouTube video, you can add a new YouTube block from the Embeds tab. To insert a video, all you need to do is enter the URL and click Embed:
Optional – creating different columns
Want to get even more creative? Gutenberg now includes an experimental columns feature that lets you quickly create multiple columns. All you need to do is add the Columns (Beta) block from the Layout Elements section. Then, you can insert other blocks inside it:
Once you’re finished, all you need to do is click the Publish button:
And you’ll have your formatted blog post on the front-end.
How to customize individual blocks
Because the WordPress Gutenberg editor includes a ton of different blocks, I can’t show you how to use each individual block.
But I can give you a basic framework that applies to all blocks.
Basically, you control the content in the actual body of the editor:
For basic text styling and alignment, you can use the menu bar that appears when you hover over a block:
And for more advanced styling, you’ll usually style the block in the Block settings tab.
To access that tab, select the block you want to edit and browse to the Block tab:
How to rearrange individual blocks
To rearrange blocks, you have two options. You can use the Up or Down arrow when hovering over a block to move the block in that respective direction:
Or, you can drag and drop blocks. To activate the drag and drop functionality, you’ll need to hover your mouse over the six dots between the up and down arrows
Putting it all together
Once you pick up the flow of how things work with the new block editor, it’s fairly painless and intuitive.
At first, you might experience some growing pains and struggle to perform basic actions that you’ve taken for granted.
But once you get the hang of things – you should be cruising through building layouts. And with the more advanced blocks that Gutenberg comes with, you’ll have more flexibility than the TinyMCE WordPress Editor.
Some neat, but more advanced, Gutenberg tricks
As you become more acquainted with the WordPress Gutenberg block editor, you might find some of these tricks to be time-savers.
Quick-create a new block with typing
Above, I showed you how to create blocks using the insert button. But to save time, you can actually create blocks by simply typing this syntax:
/BLOCK-NAME
An auto-suggest box will appear to help you find the relevant block.
For example, here’s how to create an image block with just your keyboard:
Pretty convenient and a big time-saver!
Edit source code directly
At any point, you can edit the source code for your entire post by clicking on the three dots in the top-right and selecting Code Editor:
Activate full-screen mode, fixed toolbar, etc.
The new block editor includes a few different modes that let you change the editing experience. You can:
- Add a fixed toolbar like the TinyMCE editor
- Go full-screen
- Put a “spotlight” on the active block
To use these “Views”, click on the three dots icon in the top-right corner.
Use Gutenberg keyboard shortcuts to save time
Beyond standard formatting shortcuts, the block editor has a number of dedicated keyboard shortcuts that can help you:
- Insert new blocks above or below the selected block
- Delete a block
- Duplicate a block
- Etc.
To open the full list of keyboard shortcuts, use the Shift + Alt + H shortcut.
Leave a Reply