Please Note:
The text on this page was translated by translation software. A revised version from our editors will be available soon.
The new Gutenberg editor makes the creation of WordPress posts or pages more flexible: you can design them even more easily using movable blocks. In this article, we will show you how to use Gutenberg.
Activate Gutenberg
The Gutenberg editor is automatically activated with the update to WordPress 5.0 and replaces the familiar editor. If you have set up an automatic WordPress update yourself, you don't have to do anything else. You received the Gutenberg editor automatically with the update to WordPress 5.0, which was released on December 6, 2018.
More Creative Freedom with the Gutenberg Editor
In contrast to the familiar WordPress editor, the Gutenberg editor allows you to preview and edit the entire article - you build the article itself using practical content elements, the so-called "blocks". Each content block has its own content element, which you can fill and design individually with text, images, lists, covers, headlines, quotes and more.
This makes it much easier to structure and improve the readability of your text sections.
You can easily move any of these blocks in the page at any time.
Create a New Article
After logging into your WordPress dashboard, click Contributions> Create as usual.
By default, the first block for the title of the article already appears. You can enter your title in the field Enter title here.
To start the article text, you have to add a block - you can do this by clicking on the + symbol above the editor.
The Gutenberg editor now offers you the most frequently used blocks under Most Used: paragraph, image, heading, gallery, list, quote, audio, cover and file. These can also be found under General Blocks.
If you scroll down further, further content elements are available under Formatting such as Code, Classic, HTML, Formatted, Pullquote, Table and Vers.
Under Layout Elements you will find the blocks Button, Columns, Media and Text,More, Page Break, Separators and Spacers.
Under Widgets you can choose between Analytics Opt Out, Shortcode, Archives, Categories, Recent Comments and Recent Posts.
If you want to embed files from other services, you will find the Embed, Twitter, YouTube, Facebook, Instagram, WordPress, Soundcloud, Spotify, Flickr, Vimeo and many more blocks under Embeddings.
Write Text
For a classic article text, select the Paragraph block under Most Used or General Blocks. Here you can either write normally or insert pre-written text. The line break occurs automatically.
Please Note
As soon as you insert a new paragraph in this block with the Enter key, a new block opens for the relevant paragraph. So the more often you include a paragraph in the text, the more paragraph blocks you get.
For each paragraph, you can define your own font size, insert an initial letter, and use color settings to determine the background color and the text color.
As an experienced user, you can also use one Additional CSS class per paragraph in the Advanced settings.
Insert an Image or Other Content
To add other content to the article, select the appropriate block after clicking on the + symbol for Add block. You can upload an image in the corresponding section, insert one from the media library of your WordPress blog (if available), or insert one from a URL.
Please Note
The insertion of images using a URL is subject to the statutory provisions of copyright law - in addition, the provisions of GDPR apply to the insertion of social media platforms in particular.
Move Blocks
If you want to move a block within your article, move the mouse to the left edge of the corresponding paragraph until the block is framed. Now you can move the paragraph one position up or down by clicking on the arrow keys, or you can drag it to the desired position by holding down the mouse button on the dotted lines.
Editor Styles
By default, Visual Editor is the default: With this also as WYSIWYG editor (What you see is what you get) you don't need to worry about code. If you want to switch to the code editor and from there back to the visual editor, click on the three dots in the upper right corner and then on the desired editor under Editor.
Save and Publish
If you don't want to publish your article yet but want to save it for later editing, click on the entry Save in the upper bar - you can bring up the article again at any time and edit it further or prepare it for later publication.
If you click the Publish button in the top row, your post will be visible on your blog.