Testing Gutenberg for the Existing Website Content in WordPress
The new content editor Gutenberg is still not officially released, but is expected to be very soon. Each WordPress user still has time to run tests for their website and get ready for the new editor. Even our SuperBlog is getting ready for Gutenberg as the tests were run while we were writing this article.
Testing the new editor with the already existing content on your website is the fastest way to find out if you will be able to use the editor for creating new content.
Testing Gutenberg includes two aspects:
- Checking the plugins/themes compatibility
- Checking the process of creating/editing website content
Checking compatibility of the plugin/theme with Gutenberg
The new editor should be compatible by default with all plugins and themes which do not add features or are not directly related to such ones in the Classic Editor. These are the plugins/themes not influencing or participating in the process of creating or processing content such as Akismet, Contact Form 7, Limit Login Atempts, Redirection and others.
On the other hand, plugins and themes directly related to the Classic Editor and content editing shall be upgraded by their developers in terms of compatibility with Gutenberg.
The following plugins have already been upgraded so as to be compatible with Gutenberg: Advanced Custom Fields, All in One SEO, Divi.. You might be using another plugin of this type for your website. If while testing you discover that it does not work properly with the new editor, check the official webpage for information whether the plugin developers plan to release a compatible version soon.
The situation with the theme compatibility is the same. Themes that play roles in content creation also need to be upgraded by developers so that they become compatible with Gutenberg. Themes which have nothing in common with the Classic Editor are compatible with Gutenberg by default as they will need the slightest enhancement so that they add their layout to the new content editor. There are already some available WordPress themes that are compatible with Gutenberg: wordpress.org/themes.
Creating and editing content with Gutenberg
It is possible that upon content generation with the Classic Editor you might have used elements as embedded CSS or custom HTML, Custom Fields or others. These approaches or elements used for content generation until now shall be tested with the new editor. Some of them might bring changes. For example instead of using the text mode with the Classic Editor you can embed code by using the Custom HTML block. Instead of embedding CSS code directly into the HTML tags, you can now use the Additional CSS Class option.
Although installing and activating the Gutenberg editor is not expected to influence your existing website content, we recommend making tests by using a full website backup. You can do this by going to cPanel » Softaculous » Staging.
Existing content and the features of Gutenberg
At the beginning it was not clear how processing and migration of the existing website content would be performed with Gutenberg. The latest releases, however, contain a few very useful features which can be used for editing and migrating content to the new block format.
The Classic Editor in the Classic Block
When you open an existing webpage in Gutenberg you will notice its content is wrapped in one whole block. This is due to the fact that Gutenberg lacks system tags describing each element as a separate block.
When the webpage has content created with the Classic Editor it’s placed in one block - the Classic Block. The Classic Editor buttons and features will be displayed if you click on the Classic bar.
This special block might be used upon creating a new webpage or editing the already existing content. The block enables you to use the Classic Editor and one of its modules (to process rich content) loaded in the new content editor Gutenberg.
Currently the Classic Block does not have a button for embedding a file (image or others).
This option will be available in Gutenberg 4.0.
Convert to Blocks
This option enables you to migrate/fit old content to the new editor’s block format.
By clicking Convert to Blocks you can automatically break and group the current content into suitable blocks with just a click.
It is important to notice that during converting you can lose the manually entered CSS into HTML tags (style="..."). This will require some more work on the theme's CSS.
After it's once converted to blocks, the content management is fully transferred to Gutenberg. The webpage afterwards can be opened in the Classic Editor by selecting Edit (Classic) or Classic Editor.
If a CSS code has been added to the content it may disappear after converting to blocks. For such cases Gutenberg offers the options to embed the CSS code to a specific block by adding classes - Advanced » Additional CSS Class.
If by now the CSS code has been directly embedded towards HTML tags (inline-style), you will need to transform them to a style class and use it from now on.
Text mode from the Classic Editor is replaced by the Custom HTML block in Gutenberg.
Tip: To quickly add a block, type its name and click Enter.
More features and options
Meta boxes (boxes containing meta data for the content)
Besides content itself, a very important component which belongs to your website is meta data, stored in the custom fields and meta boxes, located at the end of the Classic Editor.
Meta boxes are fully supported and accessible in Gutenberg. Such boxes are added by plugins such as Advanced Custom Fields, Platinum SEO Pack, Meta Tag Manager and others. The abovementioned three plugins have been tested in WordPress 4.9.8 and Gutenberg 3.9.0 and their meta boxes are displayed in the editor, below the content.
You can get back the meta box showing custom fields in the Classic Editor. That feature is planned to be available in the next WordPress versions. This will happen upon the release of the option which was called Screen Options in the Classic Editor. There you will find the option to show/hide the meta box containing Custom Fields.
Custom Fields are returning indirectly through #10210. Once Screen Options are restored, the Custom Fields meta box can return.
Since it is still unclear when this is about to happen, you can display Custom Fields by using a suitable plugin. An example of an appropriate plugin for the purpose is Advanced Custom Fields. It enables you to recreate all fields which have been used up to now in the Classic Editor.
The layout of the back-end (Gutenberg) and front-end is determined by the current theme of your website.
There are already some WordPress themes available that are compatible with Gutenberg: They offer layouts for the main blocks in Gutenberg.
Since the new content editor has not still been officially integrated into WordPress, developers keep working on it at full speed. This means we should expect many more improvements there.
If after testing Gutenberg your website is properly working and the webpages are correctly displayed, you can leave Gutenberg as a default editor.
If after testing Gutenberg you notice that pages created by using it are not displayed correctly or they lack certain elements, you can set the old editor as a default editor by installing the Classic Editor plugin.
We will keep following Gutenberg's development. Stay tuned with the latest updates by checking regularly for new posts in our Blog!