There are millions of users all over the world that were dreaming about something more intuitive than the usual method of post-editing WordPress offers. Today’s web audience already progresses using tools like Ghost or Medium. WordPress hasn’t surprised its users with relevant updates for years but now the situation has changed. That is why we are glad to introduce you to Gutenberg WordPress editor.
Today we will talk about a convenient way to work with your publications. Being an owner of a blog 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. The most primitive way to work with 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 to get a unique and visually pleasing post. You can 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 of 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 the 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 belonged 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 feedback before adding the editor to WP core. Therefore, Gutenberg has a big chance 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 the ‘next big thing for WordPress’ and said that Gutenberg would rapidly change the ecosystem of WordPress. What should we wait for?
- Firstly, WordPress users will construct their sites even faster than now. Designing an online project and making it look just as you imagined will be much easier. To say more, once 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 inventing a custom WYSIWYG editor. With it, the creators will add tons of premium plugins to their templates. Pay attention to choosing only SEO WordPress themes.
- Thirdly, a plugin developer will use a user-free and 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 half of life.
To sum up, everyone related to WordPress will feel this progress. Every step of working on WordPress will get its portion of simplicity. Another awesome thing you should know 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, every issue related to backward 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 the editing experience and incorporate the page templates’ concepts.
3rd stage will be the final one. It should transform the editor into a ready-made solution that fits any need. 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 lightning-fast speed. It took the team only six months to replace the 0.1.0 version with 2.2.0! Matt Mullenweg says that the editor will be ready to hold a wide global audience in its arms around April. You can view his State of the Word address for more information.
Logically, the most popular question about Gutenberg is can I get it right now? Yes, you can, but it is available as a plugin only. Although Gutenberg is meant only for its beta version these days, 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 on WP’s site. Still, the limitations of this product can disappoint those users who can’t wait for Gutenberg’s release. We recommend using it for a side project with nothing with eCommerce. In case you did, don’t hesitate to share your feedback.
Installation
Shortly, the installation process for Gutenberg is quite usual. You should find it on the market using the dashboard. Then install the plugin and activate it.
Try working with posts. Open ‘Posts’ and click on ‘Add New.’
Gutenberg’s Blocks
Historically, Tiny MCE provides a user with one 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 site content.
When it comes to third-party plugins, Gutenberg holds the content rendered. As a third-party plugin developer, you will be offered to showcase the custom blocks and introduce how they cooperate with Gutenberg.
You get widgets, buttons, tables, texts, video content, and images working with the editor. With it, you can add the content of all types and edit it using blocks. Manipulating the blocks is easy. 2 arrows 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 manipulate 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 of the tools of another platform, Medium.
Interface
Here is what you get.
- A is for ‘New Block;
- B is for Undo and Redo buttons;
- C is for the ‘Document’ tab. Using the sidebar, it is possible to change content visibility, featured images, status, tags, and more.
- D is for the 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.
First, write your text using Gutenberg or copy it to the editor. Your next step will be hovering over the text and clicking the vertical dots. You will see them on the right. Then click on the ‘Convert to blocks’ button that is in the displayed drop-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 Gutenberg’s layout.
Your third step will be adding a quote. To do it, go to ‘Blocks’ – ‘Pullquote’ or search to find it.
Next, add a new pull-quote 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 the ‘Embeds’ tab and choose ‘YouTube.’ Here you need to put the link to the video you want to upload.
It is time to click the ‘Publish button’ and introduce your post to the audience.
We suggest you view this helpful video from the TemplateMonster team. That is an alternative way to create a post with Gutenberg.
Blocks
After all, you may want to try all of Gutenberg’s content blocks. Let’s see what they are! Pressing the ‘+’ shortcut, you can see four tabs. Each of them consists of content blocks.
There is a ‘Recent’ tab to see the latest content blocks you have used.
Also, there are ‘Blocks’ tabs to see a full collection. These elements can be divided into the next groups:
- Common blocks include video, audio, image, heading, gallery, paragraph, and quote list.
- Formatting blocks that include classic text, code, pull-quote, verse, preformatted, table, and custom HTML sections.
- Layout blocks that include text columns. Separator, buttons, and ‘more.’
- Widgets that include shortcodes, categories, and the latest posts.
Next to blocks, you will see the ‘Embeds’ tab. It is responsible for the ways you can add a video.
As the tab’s name says, ‘Saved’ shows users their favorite blocks to further the working process.
Customization
To make a long story short, every piece Gutenberg provides its user 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 of the content of all the blocks in the actual editor’s body.
Additionally, you can work with the benefits of a new settings bar. It goes for the basic texts and allows styling them 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, tap into the settings under the ‘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 post’s caption with a drop cap, select the needed style, etc.
Skilled users have already gotten used to working 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 third-party objects by simply choosing the needed block and entering the class in the ‘Additional CSS Class field.
As you can see, this attention-grabbing editor makes content editing simpler. 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 impressive changes!
Leave a Reply