The WordPress 5.0 is expected for this 2018. And among all the news that will include, one of the most controversial is Gutenberg, the new editor of WordPress. In an attempt to renew its interface and approach other more current services, the community has become polarized. As it happens in all the tools that offer a breakthrough update, there are some people that feel comfortable with the current and see that any change is always a step back on what has been proven to work. And some other people that have been asking for several years a renewal that brings new options and a leap of quality over what we have.
And as the best thing to form an opinion is not only to learn about the subject, but if possible, to try it first-hand, we invite you to continue reading this article, in which we will try to create an entry with Gutenberg testing some of its new features
If you want to know more, I recommend the very interesting talk given by Mauricio Gelves in the WordCamp Chiclana about the points in favor and against Gutenberg.
We can test Gutenberg now via plugin. It is available from the WordPress plugin repository itself. We must say that this plugin is a previous version of what will eventually be the new editor, so it is possible some options change or new features appear in the final version although it is the closest thing to what we will have in the future.
l see a new option in the WordPress administration panel, an option called Gutenberg. If you enter it, you will see a demo post, which you can explore and see above some of the things that can be done in Gutenberg. The first thing is to see what its interface is, what areas it has and what options it offers you. So let’s venture and create your own entry!
Knowing the Gutenberg Interface
Although we saw its interface in the article of introduction to Gutenberg a while ago, it is worth going back to review it, since there have been some changes.
We can divide this new interface into three large areas. On the one hand, in the upper bar, if we see the left part, we find a button to insert a new block, the typical buttons to do and undo and an information button, which tell us the number of words in our article, titles, paragraphs and blocks. And on the right side of this top bar, we find an icon of an eye (to have a preview of the entry,) the button to publish, a gear, which gives us access to the options panel, and a three-point icon that gives us access to extra options, as the power switches between the visual mode and the code editor mode.
The central area, wider, is occupied by the text entry field. As you already know, one of the goals in Gutenberg is that writing is the most important value and that distractions are the minimum. It is something that seems to have been achieved. Now, you already know the importance of texts within our website.
And finally, we have a side panel in the right area. If it does not appear, just click on the gear icon in the top bar. You can hide it at any time, giving more space for the main text field. I like this new panel of options for some reasons. The scroll is independent of the text field, so however you write you will always have the options in sight. It is something that does not happen in the current WordPress editor.
In the Document tab of this panel we have the options that we already know about the classic WordPress editor, such as choosing the publication date, selecting a highlighted image or choosing Categories and Labels. But the really interesting thing is in the Block tab. And it is that this tab is dynamic and will change its options depending on the block that we have selected. When we will create our example entry, we will see some of the options that will be appearing to us.
The importance of the Blocks in Gutenberg
We talked a moment ago about the blocks. If you have never used or read anything about Gutenberg, they may miss you a bit. The blocks (as they currently appear in the plugin) are simply the minimum unit in which they will currently divide our entries. Each block has a different function. We have blocks of paragraphs, blocks for titles, insert images, embedded videos or audios, etc.
The insertion of these blocks in our entry is very simple. We can add a new block using the + icon that appears in the upper bar, such as the one inside the main text field. When clicking on the icon, a small drop-down will open in which we will see the most used blocks and a list with all the blocks, as well as a search engine to find them more quickly by name. We can also create custom blocks, but this is a topic that we will deal with in a particular way in another article.
Once the block is created and we have several inside our entry, we can move it from its position (up or down) with respect to the other blocks, thanks to the arrows that appear on the left side of the block. And with the icon of the three points on the right side we access extra options of the block, such as entering the HTML editor of that particular block, deleting the block or converting it to a different block. This last will save us having to delete and to create a new block if we have made a mistake in choosing it.
Creating an Entry in Gutenberg
And as the movement is shown walking, we will create a new example entry, from scratch, in Gutenberg. For this, we will use some of the most common blocks to see how they work and the options they offer us, besides checking what would be the new workflow that we will have to follow once Gutenberg becomes the definitive editor of WordPress.
In addition to the points of the article, I encourage you to create on your own other types of blocks and experiment. All training will be welcome for when you have to work in production with Gutenberg. We can save time and, why not, the headaches that we always have when trying new tools if we already have some experience in our life.
So let’s start with our entry in Gutenberg.
Inserting Titles / Headings
As we have said before, click on the + icon, and search among all the options of Heading, either between the list or by inserting the word heading in the search field. Once the block is inserted, we can write our title, and switch between H2, H3 and H4. If we have our side panel open, we will see that there are more options for the heading block. Now we can change the holder from H1 to H6, modify its alignment or assign it an additional CSS. We already see in these first steps the importance of this side panel when it comes to giving us advanced options to our blocks.
A little trick: If we insert a new paragraph, and in its text field we insert a slash followed by the name of some block (for example / heading,) a drop-down panel will appear with the name of that block, and if we select it, we can change that type of block. This will save us a few seconds of having to delete and create a block from scratch.
Inserting a Paragraph
We will follow the same process, but only in this case we have to choose the Paragraph option. In the side panel, we have different options to those that appeared with the Heading block. This time, we can change the size and colour of the font, the background colour and the alignment of the block, in addition to learn how to insert an additional CSS in the Heading.
Although many people do not like to work with all the options in sight and like to have an interface as clean as possible, with respect to Gutenberg, I personally like to have this side panel of options always in view. So, I know perfectly what options each block gives me at a simple glance, and I do not have to be constantly opening and closing the panel.
Adding a new Image
If we add an image, by inserting the Image block, we will see an indication to upload an image or look for one in our library. Once we have the image inside our entry, we can write a caption, as well as modify its size, either manually or through different options.
Creating a button
Creating a button is quite simple. With the Button block, by default we have a black button with grey text. We can modify these colours in the side panel. Within the block itself, there is the field to insert a URL. And, as always, we have the option of adding an additional CSS if we want to continue giving style to the button. If you want to know more about CSS, we recommend that you take a look at our article on this topic.
Adding a text in several Columns
Maybe it’s the block that I like the most, since in the classic editor you had to do some juggling to create a text with several columns. With Gutenberg, we simply add the Text Column block. By default, it will be a text with two columns, but in the side panel we see how we can extend it to 4 columns.
If we have created all these blocks, we will see that we have a considerable amount in our entry. And at this point, we can have several doubts. One of them is how to move blocks, which, as we said before, is done using the arrows on the left side of each block. Another question is how to insert a block between two others that we have already created. Very easy. We just have to move the cursor right between two blocks and we will see how the + symbol that has been accompanying us all this time appears. We press it, and automatically we can create a block between those two. This saves us the process of having to create a block at the end and move it to the position we want.
Conclusions
Despite having some initial reluctance for the change of editor, after so many years using the classic, I think it is a breath of fresh air necessary. The new interface is better suited to the designs of current word processors or those of web writing services such us Medium. In addition to that the possibility of generating content from, for example, a tablet, is much more viable with this new UI. So it opens a new range to many users whose main device is a touch screen.
Maybe I miss a tab that is somewhat less hidden to the HTML editor. But I am aware that a large majority of WordPress users do not use this type of option, being relegated to a more technical aspect.
But in general, I think it’s a step forward and I hope it continues to evolve over the years. Although I also hope that there is some option, either through the WordPress itself or a plugin, to still be able to keep the current editor when future editions of WordPress come out. That way we will not lose anyone while doing the one that, I personally believe, is a necessary transition.
