Administration Webshops Websites
Historical typewriter - WordPress block editor - netzwerk.design
Photo | matttilda on AdobeStock

WordPress block editor Gutenberg #1

8 min.

WordPress basics

WordPress Editor #1 Operation and editor window

The new WordPress standard editor introduced in 2019 has now achieved good functionality and stability. The editor is increasingly becoming the central operation of the entire WordPress CMS. For daily editorial work on websites, the WordPress editor with its excellent user interface is a very practical tool that is fun to work with.

I have been using the block editor on production pages since version 3.7 and have noticed that my customers quickly come to appreciate the intuitive operating concept. In terms of usability, the block editor is now far superior to all page builders, including the previous standard editor Tiny-MCE.

If you want to add important functions to the WordPress editor for advanced layout design, we recommend the GenerateBlocks plugin. It supplements the block editor with a freely definable container block, grid block (flexbox), headline block, button block, accordion block and tabs block as well as greatly expanded configuration options such as inner and outer spacing or the use of any vector graphics as icons in the headline and button block.

The Canadian development team of GenerateBlocks also develops the outstanding theme GeneratePress, which I have been using regularly for many years, and offers very good support in English.

GenerateBlocks (WP-Editor extension) *

GeneratePress (Pro Theme for WP) *

WordPress elements

What is the difference between page and contribution?

In principle, a page is always displayed in the same place on your website; examples include the start page, landing page, about page, privacy policy or the legal notice. A post, on the other hand, is part of the blog on your WordPress website and can therefore be displayed much more dynamically. For example, posts are sorted according to their publication date, they can be assigned to one or more categories and keywords and displayed sorted according to both criteria. These blog functions are always part of your WordPress installation and can, but do not have to be used. Both pages and posts are edited with the block editor. In future, all other editable areas (e.g. widgets or custom post types) in WordPress will also use the new block editor.

WordPress editor

What is a block editor?

The name Block Editor is derived from the German term Block / Blocks. In this concept, a document consists of any number of individual blocks. Each paragraph, each heading, each image is a single block and can also be configured independently of the standard formatting.

Create content

The block editor window

When you create a new post [CONTRIBUTIONS > CREATE] or a new page [PAGES > CREATE], the block editor opens.

Quick & Dirty - What you need to do as a minimum

Minimum entries when creating an entry

In case you have little time to create an article, you will find below the elements that your article absolutely needs:

  • a post title
  • Your text
  • a post image (important for SEO: set alternative text (alt text))
  • the excerpt text for the blog overview page
  • Title tag and meta description that Google should display (SEO)

For image preparation see: Editing images before uploading to WordPress

Additional elements are used for structuring, searching and finding the article on your website. These include the category and keywords.

How does it work exactly?

You have an empty post in front of you. Formulate your post title and start entering text directly below it. ENTER places another paragraph block under the current block. In the document settings on the right, define a post image, a category, an excerpt text for the blog overview page and then click on the blue PUBLISH button. Done, your first post is created and online!

Document status

Draft / Published

As long as you have not yet clicked on the blue PUBLISH button, your post has the status DRAFT, which can be recognised by the fact that the button is labelled PUBLISH. With this status, your post is not online, i.e. not visible to anyone else. Once clicked, your post is published and the name changes to UPDATE accordingly. You can reset your post back to draft status by clicking on the link CHANGE TO DRAFT. As long as you are still creating the post, you should use the SAVE link to save it.

Menu navigation in the block editor

The menu at the top left

The + is very often found in the editor window, not only here, but also when hovering over an existing block and below or to the right of a block. Use the + in the menu at the top left to add another block, directly after the block in which the cursor is located.

Block navigation is useful if you want to select a specific block or a higher-level block (for example, for column or group blocks).

Simply try out the functions.

For each block

Menu and settings

Place the cursor in a block. This activates it. The block menu, which contains the most important settings for this block, appears at the top of the block.

You can choose what kind of block you want to insert. A paragraph? A heading? A spacer? A button? These are just some of the elements you can choose from. You can define the alignment in the paragraph block: left-aligned, right-aligned, centred. You can emphasise text using "bold" (bold) or italic (italic). The symbol, which resembles a chain, is used to set a link. If you place the cursor on a block, the right-hand sidebar also changes. It switches from the 'Document' tab to the 'Block' tab and offers you all other setting options for this block. Try it out for yourself.

Use individual formatting carefully

You should be particularly careful with the text settings 'Size' and 'Text colour' / 'Background colour', as all individual formatting that you activate for a block overwrites the general formatting that is preset in the theme and by your web designer. In general, you do not need to make any changes to the text or heading block. If you define too much individual formatting, the overall view of your post will become unstable. Constantly changing font sizes or text colours confuse the reader and distract from the content. Therefore: less is more.

Organise your text logically with subheadings H2, H3 and, if necessary, H4. But be selective with the use of the "bold / strong / bold" marker, as these are also SEO-relevant and are analysed by search engines.

SEO Tip:

Bold markings should be used carefully and, if used, should only appear a maximum of 12 times per page and contain a maximum of 70 characters each. Use primarily keyword-relevant search terms in headings or bold markings to communicate the logical structure of your content to search engines.

Why is there no option to select a font?

For the same reason that too much individual formatting is not good for the overall image. One to a maximum of three different fonts should be used on a website: one for normal text, one for the headings and possibly another for the menus. I have only used one font on this website, Gill Sans Nova.

If you would like other fonts for your website, please contact your web designer, who will advise you and can integrate other fonts. It is important that the fonts, such as Google Fonts, are installed locally on your server and that no external server access is made to load fonts (keywords: data protection, loading time).

Menu navigation on the block

The 3-point menu on the block

The 3-dot menus conceal functions that are used less frequently. In the 3-dot block menu, you can duplicate the block, insert other blocks before or after it or edit the block in the HTML view, convert it into a reusable block (template), group it with other blocks or finally remove it. You can simply try out the functions once.

Menu navigation in the block editor

The 3-dot menu in the editor at the top right

The editor's 3-dot menu also contains less frequently used functions. One of these is briefly explained here: you can switch between full-screen mode and the view with the WordPress main menu. Tick the box as you wish. You will only use the other functions in this menu when you become more familiar with the possibilities of the block editor, which is why I will not go into them further in this introductory article. However, you should have seen that there is more.

Conclusion

The WordPress block editor - editorial work deluxe

Automattic's new Gutenberg block editor significantly improves editorial work with WordPress. After reading this basic article, you will be able to create appealing blog posts, depending on the theme and your web designer's preparatory work.

Would you like to learn how to use the WordPress editor in an online training course? I offer two-hour training courses on the topics of working with the WordPress authoring system or the WooCommerce shop system.