Now - that the introduction of the Gutenberg editor on WordPress has been successfully carried out and the initial excitement has died down, here I would like to give my comments and summary on the new WordPress feature.
For those who haven't dealt with theme yet, Gutenberg is the new included editor for WordPress. Named after the inventor of buck printing. Johannes Gensfleisch, today known by the name of his family seat "zum Gutenberg" The traditional visual editor requires the use of shortcodes, HTML components or HTML tag, so that everything can be designed according to the wishes of the author blog / page operator. So the goal of the WordPress developers was to make this process much easier and more comprehensible, mainly for the newcomers to WordPress. Since then, the inclined user had to shift to additional PageBuilder tools such as VisuellComposer, WPBakery, Beaver Builder or Elementor which may also be paid. I myself have worked for several years with the Visuell Composer and was always very satisfied with it.
Test installation
The chief developer of WordPress Matt Mullenweg (the founder) had pushed 100,000 active test installations even before the integration of the editor into the WordPress kernel. This allowed bugs and additional suggestions to be incorporated into the final release. In December 2018, the new Gutenberg editor was automatically installed with "WordPress 5.0" as the default editor. Since the excitement on the net was quite large and I anyway planned to relaunch my WebSite privataktionaer.com, I still waited with the installation of WP 5.0 until I had selected my new theme. Then I rebuilt my test site locally for practice purposes. For the test I chose a typical business theme from the catalog of https://www.templatemonster.com/de/.
WordPress relies on blocks
Whoever creates pages or posts with Gutenberg in WordPress - from now on configures blocks. Depending on the function or structural context of the post, blocks can be created, edited or converted to other blocks. In my test installation, I tried out all possible blocks, tried the different settings and wandered merrily between the various conversion options. Through the preview option of WordPress I could always quickly view the result, yet needed a few days to be able to navigate in the new editor safely and effortlessly. Who has some basic knowledge in the semantics of HTML5, will quickly find their way in the designations and parameters and also recognize the context. However, if you have no knowledge of HTML, you can only try and see what happens. However, this can also be disadvantageous in terms of search engine optimization. There are 4 different types of blocks: General blocks, blocks for formatting purposes, layout elements, widget blocks and embeds.
Overview of the "Gutenberg" blocks
| General blocks | |
| Designation | Function |
| Paragraph | A paragraph is inserted. |
| Audio | Inserts an audio file either with drag & drop, upload or media library |
| Image | Insert image by drag & drop or load or from media library |
| Cover | Title screen over screen width (viewport). |
| File | Inserts a file, e.g. an Excel file as drag & drop, upload or from the media library. |
| Gallery | Creates an image gallery with up to columns from media library or upload |
| List | Create an unsorted or sorted list |
| Headline | Insert heading from H1 to H6 (Preset H2-H4) |
| Video | Adds a video file either with URL specification, emded, drag & drop, upload or media library |
| Quote | Create a citation with source citation according to the layout of the theme |
| Blocks for formatting | |
| Designation | Function |
| Classic | Use of the classical editor within Gutenberg. with taken over contributions this is indicated likewise! |
| Code | Block for displaying programming code e.g. PHP or Javascript |
| HTML | Insert self-created HTML code with preview view. |
| Pullquote | A quote with extended parameters |
| Table | Inserting a table e.g. Table-Generator |
| Verse | Slightly indented text for prose |
| preformatted | Similar to the code block, with additional setting options |
| Layout elements | |
| Designation | Function |
| Spacer | Creates vertical spacing between blocks |
| Button | Creates a radio button (button) create. Design and layout depending on the theme. |
| Media & Text | Place images or videos next to text. Column size changeable. |
| More | "Read more" - button in posts |
| Page break | Creates multiple subpages for a post. |
| Columns | Creates min. 2 to max. 6 columns |
| Separator | Creates a semantic as well as a graphical separation either as a short, wide line or dotted line |
| Widget blocks Excerpt depending on theme and installed plugins this can be considerably more | |
| Designation | Function |
| Archives | Creates a monthly archive e.g. like in the sidebar |
| Categories | shows your categories (like before in the sidebar). Optionally as a list or dropdown menu, with or without number of posts. |
| Comments | Recent Comments. Adjustable are avatar, date and text excerpt.default are 5 set, adjustable 1 to 100 |
| New contributions | Recent posts, either in list or grid. Order, category, number of items and date are adjustable |
| Shortcode | Inserting a shortcode |
Plus these:
...Embeds
Embed blocks are used to include active content from other web pages. The embed element is a stand-alone HTML element without a closing tag. That's why you can't enter ALT text for it like you can for images and videos. You need the URL of the respective page. WordPress provides some embeds (many social media providers) already by default, the complete overview can be found in the Gutenberg Codex.
and the
...inline blocks
Inline elements are elements that can be inserted inside another block, usually a paragraph block. Currently, there is only one inline block, the inline image.
My conclusion!
The Gutenberg editor has proven itself in practice for me. If you don't edit long texts, which is the case in times of VLOG, podcast and streaming, you will be able to create new posts and layouts with Gutenberg quite quickly. However, if the focus is on longer text articles, the may be more satisfied with Classic Editor. For more specific tasks, it is then anyway recommended to look into the rich plugin offering for PageBuilder. Because they will continue to have their justification for special requirements. But also these plugins will be based on Gutenberg in the future.
Advantages Gutenberg Editor
- The block orientation facilitates Responsive WebDesign;
- There are some design options for which plug-ins were necessary since then;
- A very helpful new feature of "reusable blocks";
Disadvantages Disadvantages in Gutenberg Editor
- The WYSIWYG properties are not optimal, the display in the editor is only approximated to the actual layout;
- Some shortcodes unfortunately don't work anymore, an extensive function test should be done;
- Columns are misleading and difficult to adjust and limited responsive;Some alternative social media providers are not available in embeds;
- Designing tables is cumbersome;
If you want to continue working with the classic editor, we recommend the Classic Editor Plugin. With this plugin, you can either replace the Gutenberg editor completely as the default editor or use the Gutenberg editor as the default editor and still switch to the Classic editor for selected posts.
Other interesting links:
- A compilation about the development and progress of the editor: Gutenberg-News (english)
- Say Hello to the new Editor Gutenberg on WordPress.
- Disable Gutenberg back to the old editor
