There are millions of users all over the world that were dreaming about something more intuitive than a usual method of posts editing WordPress offers. Today’s web audience already makes progress using such tools as Ghost or Medium. WordPress hasn’t surprised its users with relevant updates for years but now the situation changed. That is why we are glad to introduce you Gutenberg WordPress editor.
Today we are going to talk about a convenient way to work with your publications. Being an owner of a blog that based on WordPress, you should remember this boring process. Although WP brings us a lot of comfortable things, post editing is not one of them. In fact, the most primitive way to work with the published articles wants a user to know how to deal with HTML. In addition, it requires a nice portion of experience because you have to work with various shortcodes. Finally, there is a rich variety of modern widgets. You should understand the mechanism of their work in order to get a unique and visually pleasing post. Obviously, you are able to get a standard publication but why should you when there are so many online competitors?
What is Gutenberg?
Before all else, let’s give the definition to this magical tool. As it has already been said, Gutenberg is a fresh WordPress editor. It was made to let you edit the posts without a hitch and make them look exactly the way you need. Talking about the name, it is a tribute to Johannes Gutenberg, who lived in the 15th century. He was the first person who shocked publicity with the revolutionary printing press. Reading this post, you will see that the editor is meant to change our working routine for better as well as Gutenberg’s work did.
Although this is a completely new tool, the web space is already full of discussions around Gutenberg. To make a long story short it is a smart alternative to the default Tiny MCE content editor. At this time, we wouldn’t call Gutenberg a part of WordPress core. It is an additional option. Today Gutenberg has a testing period. Thus, it is not available for creating web content and enriching websites. On the other hand, Gutenberg is ready to deliver a fantastic content creation skill for everyone who needs it. Now things become easier thanks to a hi-res distraction-free UI. To create a complete picture, let’s compare the interfaces of a usual WP editor and the fresh one.
That is how the interface of Tiny MCE looks.
And here is the result of Gutenberg’s creators.
Who Created This Editor?
Originally, the idea of Gutenberg’s creation belongs to one of the co-creators of WP, called Matthew Mullenweg. Seeing that, you may suppose that one way this groundbreaking editor will be a part of WordPress. And you are right but, before merging it with WP, the creator wants Gutenberg to have 100 thousand active installs. In addition, he is waiting for an impression portion of feedbacks before adding the editor to WP core. Therefore, Gutenberg has big chances to become an official part of the most popular platform. You can read this post – ‘
We called it Gutenberg for a reason’ – to see the interview of Matthew Mullenweg. He called the editor ‘next big thing for WordPress’ and said that Gutenberg will rapidly change the ecosystem of WordPress. What should we wait for?
- Firstly, WordPress users will construct their sites even faster than now. It will be much easier to design an online project and make it looks just as you imagined. To say more, as soon as a user masters the working model of ‘blocks’, they will see the quintessence of almost all WP plugins.
- Secondly, a creator of WordPress themes will not need to waste time on inventing a custom WYSIWYG editor. With it, the creators will simply add tones of premium plugins to their templates. Pay your attention to choose only SEO WordPress themes.
- Thirdly, a plugin developer will take the advantage of user-free and more complete plugin integration process. It will be possible with the help of the editor’s blocks.
- Fourthly, a code developer will finally get their 21st-century atmosphere! There will be no need to worry about backward compatibility that takes a half of a life.
To sum everything up, every person that is somehow related to WordPress will feel this progress. Every step of working on WordPress is going to get its portion of simplicity. Another awesome thing you should know about is that editor integration to WP will be just the first stage. After it, the
WP team behind Gutenberg will guide the users through a real web evolution.
3 Stages of Editor’s Evolution
1st stage of Gutenberg’s evolution is responsible for merging the editor into WP 5.0 version. For these reasons, developers are working skillfully to present a new-gen post editing experience. They are also going to realize a recent ‘block’ concept. As expected, each and every issue related to backwards compatibility should be addressed.
2nd stage will come as soon as Gutenberg becomes the official WP editor. With it, Gutenberg’s creators will continue working on the editor. They want to improve editing experience and incorporate page templates’ concept.
3rd stage will be the final one. It should transform the editor into a real ready-made solution that fits any needs. Thus, Gutenberg will change every aspect of site customization from bases to the most individual ones.
Today the development of Gutenberg passes the middle of the 1st stage. It grows with a lightning-fast speed. It took the team only 6 months to replace 0.1.0 version with 2.2.0! Matt Mullenweg says that around April the editor will be ready to hold a wide global audience in its arms. You can view out his ‘State of the Word’ address to get more information.
Logically, the most popular question about Gutenberg is can I get it right now? The question is: yes, you can but it is available as a plugin only. Although these days Gutenberg is meant only for its beta version, some users try using the editor on a real site. The good thing is that it doesn’t break your current plugins, widgets or shortcodes. You can find an available version of Gutenberg at WP’s site. Still, the limitations of this product can disappoint those users who can’t wait for Gutenberg’s release. We recommend you to use it for a side project that has nothing with eCommerce. In case you did, don’t hesitate to share your feedback.
Shortly, the installation process for Gutenberg is quite usual. You should find it on the market using the dashboard. Then simply install the plugin and activate it.
Try working with posts. Open ‘Posts’ and click on ‘Add New’.
Historically, Tiny MCE provides a user with 1 field for content editing. Talking about Gutenberg, you will get multiple blocks to edit the structure of your publications. As a result, there will be any kind of site content.
When it comes to the third-party plugins, Gutenberg holds the content rendered. Being a developer of a third-party plugin, you will be offered to showcase the custom blocks and introduce the way they cooperate with Gutenberg.
Working with the editor, you get widgets, buttons, tables, texts, video content, and images. With it, you can add content of all types and edit it using blocks. Actually, manipulating the blocks is an easy thing. There are 2 arrows that allow you to do it in a single click. Choose the block and use them to move it.
Furthermore, Gutenberg’s controls allow a one-click access to block settings. Also, you can remove a block immediately.
Surely, Gutenberg is the only tool to use for manipulating these blocks correctly. They are invisible to browsers and don’t work within HTML. The experience a user gets while working with Gutenberg may remind one the tools of another platform, called Medium.
Here is what you get.
- A is for ‘New Block;
- B is for Undo and Redo buttons;
- C is for ‘Document’ tab. Using the sidebar, it is possible to change content visibility, featured images, status, tags, and more.
- D is for settings panel;
- E is for post preview and publish or update buttons;
- E is the space where you can add the blocks.
How to Create a Sample Post?
Follow these steps to get a basic article with Gutenberg and its content types.
To start with, write your text using Gutenberg or copy it to the editor. Your next step will be hovering the text and clicking the vertical dots. You will see them on the right. Then click on ‘Convert to blocks’ button that is in the displayed ddrop-down
Now you transform text into the clean blocks that one can easily set up.
Your next step will be creating a non-textual block for a picture. Click on ‘Plus’ button and choose your pic. You can choose the one you will see in the Media Library or add your own image. Once you’re through this, upload the image by dragging and dropping it from your computer.
Now the image will be shown in the Gutenberg’s layout.
Your third step will be adding a quote. To do it, go to ‘Blocks’ – ‘Pullquote’ or use search to find it.
Next, add a new pullquote block to enter your text.
Finally, your fourth step will be adding a video. By tradition, you will need to add a new block. Go to ‘Embeds’ tab and choose ‘YouTube’. Here you need to put the link to the video you want to upload.
Now it is time to click on ‘Publish button’ and introduce your post to the audience.
We suggest you view out this helpful video from TemplateMonster team. That is an alternative way to create a post with Gutenberg.
After all, you may want to try all the content blocks Gutenberg has. Let’s see what they are! Pressing ‘+’ shortcut, you can see 4 tabs. Each of them consists of content blocks.
There is ‘Recent’ tab to see the latest content blocks you have used.
Also, there is ‘Blocks’ tabs to see a full collection. These elements can be divided into the next groups:
- Common blocks that include video, audio, image, heading, gallery, paragraph, and quote list.
- Formatting blocks that include classic text, code, pullquote, verse, preformatted, table, and custom HTML sections.
- Layout blocks that include text columns. Separator, buttons, and ‘more’.
- Widgets that include shortcodes, categories, and latest posts.
Next to blocks, you will see ‘Embeds’ tab. It is responsible for the ways you can add a video.
As the name of the tab says, ‘Saved’ shows a user their favorite blocks to further the working process.
To make a long story short, every piece Gutenberg provides its user with comes out-of-the-box. There are inimitable sets of settings. One can regulate them effortlessly to get the very post appearance. Still, some of the settings should be mentioned here.
To begin with, a user gets control under content of all the blocks in the actual editor’s body.
Additionally, you will be able to work with the benefits of a new settings bar. It goes for the basic texts and allows styling them really fast. This setting bar will be displayed as soon as you dandle around the block.
Would you like to go through more advanced customization? Therefore, just tap into the settings you will see under ‘Block’ tab.
With the help of this easy-to-use feature, a user will need a single click to do an action. You can enrich the caption of the post with a drop cap, select the needed style, etc.
Skilled users already got used to work with HTML code if they need to add a custom class to an item. However, using Gutenberg, you can skip this depressing action! Being truly writer-friendly, the editor has blocks that do not require looking into HTML to do it. It is possible to work with the third-party objects by simply choosing the needed block and entering the class in ‘Additional CSS Class’ field.
As you can see, this attention-grabbing editor does make content editing more simple. Being user-friendly and intuitive, Gutenberg contains all the features we were waiting for from WordPress. Finally, post managing can be as easy as ABC. In addition, Gutenberg is not for WordPress users only. Thus, we look forward to the official release of Gutenberg. You can’t deny that every online user will feel these impressing changes!