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:

Working tip with 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.

Working tip with gutenberg 1

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.

READ  Vollständiger Leitfaden zur Suchmaschinenoptimierung (SEO)

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:

  • Button
  • File download
  • Cover image
  • et cetera
Working tip with gutenberg 2

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.

tip for working with gutenberg 4

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.

tip for working with gutenberg 5

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:

tip for working with gutenberg 6

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
READ  How To Build The Right Goal For Your Seo Strategy

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:

tip for working with gutenberg 7

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:

  • Heading
  • Quote
  • List
  • 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:

tip for working with gutenberg 8

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:

tip for working with gutenberg 9

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.

tip for working with gutenberg 10

Then just drag and drop to the position you want

tip for working with gutenberg 11

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.

tip for working with gutenberg 12

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:

tip for working with gutenberg 12

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:

tip for working with gutenberg 13

Then enter the name of the template:

tip for working with gutenberg 14

From here you will insert the template as if you were inserting a Gutenberg block.

tip for working with gutenberg 15

The great point here:

You can use the import / export template feature as a JSON file to use on other websites.

READ  Use Facebook Debugger to fix Facebook failures to load images and link WordPress

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.
tip for working with gutenberg 16

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:

tip for working with gutenberg 17

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).

tip for working with gutenberg 17

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:

tip for working with gutenberg 19

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:

tip for working with gutenberg 20

And here is the post after activating the Gutenberg plugin:

tip for working with gutenberg 21

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:

tip for working with gutenberg 22

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:

tip for working with gutenberg 25

17. Hide sidebar when editing full screen

To do this, click on the button Saw, then you choose Fullscreen Mode To hide the sidebar:

tip for working with gutenberg 26

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

Source WPLift

Read more :

Leave a Reply

Your email address will not be published. Required fields are marked *