As you know WordPress is about to launch a brand new edtior instead of the existing editor. The name of this editor is Gutenberg.
Gutenberg is currently being released as a separate plugin. But in WordPress 5.0 it will be included in the core and become the default editor.
For those of you who have worked with a WordPress page builder, the way Gutenberg works is not too strange.
Its approach is based on blocks to help you create more complex content and layouts.
For example now you will be able to insert buttons right in the editor or create a multi-column layout without installing the page builder plugin.
But it is clear to some Gutenberg friends that something is still quite strange. So to help you use Gutenberg more effectively, I have compiled a list of about 17+ tips to work with this new editor.
17+ tips with WordPress Gutenberg to help you be more productive
1. Understand the working interface of Gutenberg
This is not the real tip. But first you need to understand everything there is in Gutenberg's interface.
Here is a snapshot to help you familiarize yourself with the interface of Gutenberg:
1. These buttons let you add new blocks (blocks) to Gutenberg. This function allows you to see the entire block available. But I will show you a faster way to add new blocks.
2. This is the body of the editor. At the top you have the title of the post / page. And below, you have real content.
3. This area allows you to perform many of the same actions as the sidebar of the current editor. A big difference is that if you select a block, it provides many options that allow you to configure that block.
In the image below, you will see the interface when I click on block paragraph. The selected sidebar's tab block allows you to change the text size (text size), color (color), drop cap and so on. To return to another setting, either click off the block or manually select the Document tab.
2. Take advantage of new content blocks
One advantage of Gutenberg is that you have lots of new content. With the TinyMCE Editor (the current WordPress editor) you will not be able to insert these types of content. The only way to do this is to install third-party plugins or manually code HTML.
Here I will not mention too carefully, but I encourage you to see the list of blocks that Gutenberg provides.
A few nice blocks of content you can insert into your document:
- File download
- Cover image
- et cetera
If you are still not satisfied with these default blocks, you can add new blocks as I mentioned in this article.
3. Use “/” to quickly insert a block
As I mentioned above you can use the + button to browse for available blocks and select the blocks you want.
But doing this is a bit time consuming.
So if you know which block you need, there's a faster way to insert it. Just type “/” and start typing the block name you need.
When you type Gutenberg will suggest matching blocks. At that time, you only need to press “Enter” to insert the block.
4. Insert photos by dragging and dropping them from the Desktop
This is a feature that saves you time.
Rather than manually inserting images by creating a new image block for each image and then uploading them into the Media Library, you can simply drag photos right from the desktop into the Gutenberg interface where exactly you want to appear.
At this point, Gutenberg will automatically upload the image to the Media Library and then insert it into that location.
It's quite simple, isn't it? You just need to make sure you see the blue line while dragging and dropping to make sure everything works as it should.
5. Learn the Gutenberg keyboard shortcuts
If you want to be more productive, you need to know the Guteberg keyboard shortcuts.
While the majority of popular shortcuts will work in Gutenberg eg Ctrl + B To bold, Gutenberg also added some dedicated shortcuts to save you time.
To view the list of keyboard shortcuts, you can use keyboard shortcuts Shift + Alt + H:
I recommend you to see the full list. But here are 3 shortcuts I find most useful:
- Ctrl + Alt + Blackspace: delete the block you choose
- Ctrl + Alt + T: insert a new block before the one you selected.
- Ctrl + Alt + Y: insert a new block after the one you selected
In addition to the above shortcuts you can use markdown syntax. Here are some markdown syntax that works in Gutenberg:
- ## to create a heading
- 1. to create an ordered list
- * to create an unordered list
- > to create a quote
For example, to create an H2 heading, type “##” then the space key. At that time, Gutenberg will automatically activate the block heading.
See the illustration below:
6. Turn one block into another
Rather than inserting a block for different content types, you can save time by converting one block to another.
This feature is useful with text. For example, you can convert a normal block paragraph to:
- Preformatted Verse
But you can also do this conversion with other types of blocks: like turning a normal image into a cover image.
To access this transformation feature you use the toolbar:
7. Add fixed toolbar for easier formatting
Talk about the toolbar ..
Many people don't like the way Gutenberg's toolbar hides when it moves between blocks.
If this bothers you, Gutenberg lets you switch to a permanent toolbar. This means that you will have a fixed toolbar at the top of the editor.
You can enable this mode by using third dot in the upper right corner and choose Unified Toolbar:
8. Use the drag and drop feature to arrange the blocks
With the old editor, you have to cut and paste to organize the content. While you can still do this, Gutenberg has a more convenient way. That is using Gutenberg's built-in drag and drop layout control.
To enable drag and drop mode, simply drag the mouse over the block and then drag the yes button six dots on the left.
Then just drag and drop to the position you want
9. Use Shift + Enter to wrap the line instead of creating a new block
Want to create a new line of text without creating a new block paragraph?
Simply used Shift + Enter instead of using Enter.
10. Create column with block column
In addition to creating content blocks, Gutenberg also allows you to be more creative with your content layout with block columns.
As soon as you add the Columns block, you can add another block inside it to take advantage of a new layout. As shown below is the 25% – 25% – 50% layout:
Gutenberg's Block Columns can only do the basics. If you need more advanced features, you can use it Kadence Blocks free plugin.
11. Create a Block Template for you to reuse
Block templates are a great feature of Gutenberg to save you a lot of time creating content.
First you just need to select all your blocks (just and drag as you select text in the current editor).
After clicking on the section ba dot. From the dropdown menu you choose Add to Reusable Blocks:
Then enter the name of the template:
From here you will insert the template as if you were inserting a Gutenberg block.
The great point here:
You can use the import / export template feature as a JSON file to use on other websites.
To access this feature, click on the button three dots In the upper right corner, choose Manage All Reusable Blocks.
You will move to the area where you can:
- Import block template from JSON file.
- Delete the block template
- Export block template into JSON file.
12. Edit Post Slug (link URL article)
In the Gutenber interface, Post's slug editing is not very intuitive.
If you want to edit the URL first you need to click on the post title. You can then edit the URL:
13. Take advantage of full-width image alignment
If you use a Gutenberg compatible theme, you can create a full-width image that stretches the entire page.
All you just need to choose Full width (you only see this option if your theme is Gutenberg compatible).
14. Use Classic block if you are familiar with the old editor
If you don't like the new block paragraph, Gutenberg still has one Classic Embed TinyMCE editor as a block.
You even have the TinyMCE toolbar, which includes buttons that other plugins add to the toolbar:
15. Turn all old posts into Gutenberg friendly new designs
One of the reasons why Gutenberg adds the Classic block is compatibility issues.
Imagine having millions of posts created with the old editor. It will be a big problem if Gutenberg automatically converts all of these posts into blocks.
So Gutenberg automatically puts all the content into a single Classic block.
For example, here is a post created using the old editor:
And here is the post after activating the Gutenberg plugin:
As you can see, it's all a single Block class instead of each block separately for each paragraph / image.
If you want to use Gutenberg with old content, all you need is just a click three dots then select Convert to Blocks:
Gutenberg will automatically place each element in its block. You can now manipulate it as a post you created from scratch with Gutenberg.
16. Edit the HTML code
Gutenberg still allows editing HTML code. To do this, you can either use the three-dot button in the upper right corner or use the keyboard shortcut Ctrl + Shift + Alt + M:
17. Hide sidebar when editing full screen
To do this, click on the button Saw, then you choose Fullscreen Mode To hide the sidebar:
18. Deactive Gutenberg Editor
Finally, if you don't like Gutenberg you want to deactivate it to use TinyMCE Editor, you just need to install and activate it. Classic Editor plugin