It's confirmed, the Gutenberg editor will indeed be the default article editor for WordPress. Iai was able to test the latter and I quickly realized that many users will be lost with this new editor, hence the reason for this tutorial. So together we will go through the basics of the Gutenberg editor and cover some advanced points.
Before you begin
If you don't have the ability to install WordPress version 5.0 (which is still under development), you can now download Gutenberg and test it on your version of WordPress (I'm starting an experimental environment again). However, I admit to being a little surprised when, looking at the ratings given to this new editor, more than half of my users gave a rating of 1/5.
I'm not going to stop on this and test to get a feel for it.
Interface presentation
To use Gutenberg, you must write an article (obviously), as you have done in the past, i.e. " Articles> Add"
What I noticed from the outset is that the publisher has focused a lot on the absence of distraction and exploited the full width of the page.
Even if we have to recognize that there are too many margins on Gutenberg, the white background I think is a color that causes less distraction. You'll notice that Gutenberg looks a lot like the post editor on Calypso (WordPress.com).
Location of the elements
Backup section
The layout has changed enormously. The item saving area is now located at the top. Rather, it is a quick access section to the save button.
The button with the setting icon allows you to close the flap below. The buttons that allowed us to switch between the visual editor and the text editor are now located in the same pane at the far right. To preview the article, you must click on the eye located before the “Publish…” button.
The section for selecting the featured image for categories and article visibility is on the right as usual. Do you need to make sure that the " Document Is selected.
Block section
This is the innovation that Gutenberg brings. You should know that now any paragraph on Gutenberg should be considered a block. The blocks have this possibility of being singularly adjustable, but also they can be easily moved over the whole document.
When you have put the cursor on your paragraph, to access the functionalities of the selected block, you must click on the block tab on the right.
With these settings, you can for example define a background color that applies only to the block as well as change the font size of the block. I find it rather convenient.
Formatting options
The formatting will appear above each block.
You will also display the layout options at the top by clicking on the Editor Option then by clicking on "Set the toolbar at the top".
How to add custom blocks
You are not limited to using the paragraph block. To add more blocks, you must click on the + icon located at the top left.
This allows you to access the different blocks available. It is also at this location that you can access the different blocks offered by the Themes and plugins. You'll even have the option to save your own custom blocks. I think it will make it easier to edit similar articles.
That's it for this tutorial, we will continue in a next one by putting into practice everything we observed in this tutorial.
