Gutenberg Guide – How the new WordPress Editor works

0
40
Wordpress-Editor-Gutenberg
Wordpress-Editor-Gutenberg

With WordPress 5.0, which is about to be released, the new Gutenberg editor has been converted into the standard version of the popular content management system. In this article, we show how to deal with it in concrete terms.

The Gutenberg Editor marks the dawn of a new era in the history of WordPress,” says the beginning of our article, in which we explained in detail a few weeks ago why, why and why WordPress will receive a new editor with the next major update: Gutenberg is coming – All information about the new WordPress editor.

We don’t know exactly when the time will come – but we expect to do so soon. That’s why we’d like to give you some instructions on how to use the Gutenberg Editor here, so that you’re well prepared for a comprehensive introduction. You can use it now with the official Gutenberg plug-in.

The basic operation of Gutenberg

A lot actually changes compared to the conventional approach. The basic principle of the Gutenberg editor – similar to the functionality of the so-called Page Builder – is based on modular blocks that can be used to build the content of a page or blog post. We quote ourselves again:

“The familiar text window disappears and all post elements from the headline to the body text to the images are generated using blocks that can then be moved back and forth. So in the future, a contribution will consist of a series of blocks with different functions.”

Wordpress-Editor-Gutenberg
WordPress-Editor-Gutenberg

Select and edit blocks

To select and edit a block – for example an “Image”, a “Video”, a “Heading” or a “Paragraph” – first click on the plus sign in the upper left corner of the Gutenberg Editor and then on the block of your choice. It will then be inserted into the page or post.

Wordpress-Editor-Gutenberg Blocks
WordPress-Editor-Gutenberg Blocks

Now you can edit the block directly in the middle area of the Gutenberg editor and you will get additional setting options in the sidebar on the right under the “Block” tab. Under the other tab here, “Document”, you will find the classic modification options such as “Status and Visibility”, “Categories”, etc. The “Block” tab on the right allows you to edit the document in the Sidebar.

If you want to edit an already inserted block, simply click in the middle. Using the drop-down menu behind the three dots on the right side of a block, you have additional editing options such as “Duplicate” or “Edit as HTML”. You can add more blocks by clicking on the plus sign at the top.

Further Gutenberg functions

In addition to the blocks, WordPress Gutenberg Editor brings with it other innovations that are worth mentioning. For example, to switch from the visual editor to the code editor, click on the three items at the top right and select the corresponding menu item in the drop-down list field. Alternatively, you can use the Ctrl + Shift + Alt + M key combination.

At the bottom of the same drop-down list field is another handy feature: “Copy entire content”. This allows you to copy the entire content of a page or blog post to the HTML version with just one click, so that you can easily paste it elsewhere.

Also handy: The information icon in the top left corner of the Gutenberg Editor displays the number of written words, headings, paragraphs, and inserted blocks. The two arrow symbols next to it represent the functions “Undo” and “Redo” with respect to the last command.

Wordpress-Editor-Gutenberg Infotab
WordPress-Editor-Gutenberg Infotab

If you blog regularly, you will probably be particularly enthusiastic about the following feature: In addition to the classic modification options, you can check the “Stick to ¬†the Frontpage” box in the sidebar on the right under the “Document” tab to fix a blog post.

Wordpress-Editor-Gutenberg Stick to Frontpage
WordPress-Editor-Gutenberg Stick to the Frontpage

Existing blocks divided into categories

In order to give you an overview of the blocks available so far, we have listed them below for you. After the release of WordPress 5.0, more will probably be added bit by bit, but for a first impression as well as the basic structure of pages and blog posts, the selection is always sufficient.

For each block, as already mentioned, the sidebar on the right offers various settings – such as the definition of font sizes, background colors or sorting. It would be beyond the scope of this article to sketch all options in detail. Here you have to try Gutenberg editor out for yourself.

General blocks

Paragraph
Allows you to insert text paragraphs.

Heading
Allows you to insert headings from different hierarchy levels.

Image
Allows you to insert images.

Gallery
Allows you to insert image galleries.

List
Allows you to insert ordered and unordered lists.

Quote
Allows you to insert quotations.

Audio
Allows you to insert external audio files.

Cover picture
Allows you to insert large images with text over them.

File
Allows you to insert files in various formats, such as PDF, to make them available for download.

Subtitles
Allows you to insert subtitles.

Video
Allows you to insert external video files.

Widgets and Embeds

Two further categories with blocks are available beyond those just listed: Widgets and Embeds. The widgets “Shortcode”, “Archive”, “Categories” as well as “Recent Comments” and “Recent Posts” can be inserted. The general embed block is supplemented by several blocks for services such as Facebook, Instagram, Twitter, etc.

Conclusion

As you can see, the Gutenberg editor brings with it a completely new way of designing pages and articles and will sooner or later replace the classic WordPress editor. Of course, this won’t happen right away, but it’s a good idea to dive into the innovative world of blocks right from the start.

In one of our upcoming blog posts, we will take a closer look at the advantages and disadvantages of Gutenberg in order to inform you in the best possible way about potential risks and the strengths of this innovation. By then, you may already have gained your first experience with it.

We hope you enjoy it!