WordPress basics
WordPress Editor #1 Operation and editor window
The new WordPress standard editor introduced in 2019 has now achieved extensive functionality and very good 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 proves to be 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 extend the WordPress editor with important functions for advanced layout design, we recommend the GenerateBlocks plugin. It supplements the block editor with a freely definable container block, a grid block (flexbox), an accordion block as well as headings and button blocks with greatly expanded configuration options such as inner and outer spacing or the use of any vector graphics as icons. By the way, our standard premium theme GeneratePress is from the same development team (Edge22 Studios LTD, Canada), who also offer exceptionally good support.
GenerateBlocks Website (WP-Editor Extension) (*)
GeneratePress Website (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 elements
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)
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, keywords if required, 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 be 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, 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.