Here is all that you need to know in order to become an expert at the recently launched Gutenberg editor by WordPress

Case Study , Posted by on 2019/07/30 0     Comments

The Gutenberg WordPress editor is a new WordPress editor which was first introduced to the world in 2017. This editor differs from the previous WordPress editor in the sense that it has many additional features. You shall be happy to know that it is actually a blessing for people who are on the non-technical side. You can create and perform edit operations on websites very easily. 

The Gutenberg editor allows website creation using blocks, which you can just drag and drop thereby replacing the current customization process. You can also enable HTML tags in the new editor. If you happen to be one of those who want to know how to use/learn Gutenberg editor, then this piece is for you. It is stated to be released with WordPress5.0. There is a lot of debate going on over this matter. We are adding some information here and it will help you to make a decision. Gutenberg editor is your cup of tea or not or how to use it properly- we will cover all the areas today. 

The Gutenberg editor: 

The major advantage of those who plan to use the Gutenberg editor is that you need not be an expert in HTML or write codes. Also, you need not do the following: 

  • Import images or multimedia files.
  • Copy-paste links for embedding purposes. 
  • Create featured images which are added at the top of a post. 
  • Write shortcodes for different plugins.
  • Add widgets for the content which are located on the side of a page. 

So, if you want to use the Gutenberg editor, you shall be getting to know an editor which is easier to use than the previous one. Also, instead of writing meta boxes and shortcodes, you will use simple blocks. 

The main purpose of Gutenberg Editor

  • After taking a glance at the description of the Gutenberg plugin, we can say that the main aim of this block editor is to let users add rich content to WordPress. The entire process will be simple as well as enjoyable. 
  • Zack Katz says, “Gutenberg is an important step forward for WordPress. Gutenberg enables WordPress to build content layouts, not just write articles. It is one of the many transitions happening in WordPress toward more simplified user experience.”

We have already mentioned that there is a lot of debate over the Gutenberg plugin. Below, we will mention 3 common points every debate. So, let’s take a dive-

It is currently a PlugIn

You can use Gutenberg as a PlugIn to any WordPress site. You can simply download it from the WordPress PlugIn directory and enable it on your site. Generally, it is updated weekly. In the description, you will see that it is beta software. So, you need to use it with care. 

It will be included in WordPress 5.0

We have already mentioned that Gutenberg is going to be added to WordPress 5.0. It is going to be more special or more feature-rich, to know that we have to wait for the 5.0 version. 

It is not completed yet

A lot of features of Gutenberg are still in the implementation process. And the new version changed the earlier implemented UI and its features. Presently it may not offer a smooth experience but you should not panic. The process is in the oven and soon it is going to show its taste and smoothness. 

By using react javascript, Gutenberg has been written. But Mutt Mullenweg announced that both Gutenberg and WordPress.Com are going to be written using a completely different library. It can delay the Gutenberg project. 

How to use the Gutenberg editor:

Once you have installed and activated Gutenberg, you will see an icon in the left menu bar. When you launch it, it creates a demo post where you can practice before you create your own. 

Add a new post: 

Go to “Posts” in the left menu bar of the WordPress dashboard. You will see that a new post has launched in Gutenberg. 

Edit:

Utilizing the classic editor in case if you are still in love with the old editor that you have used all along, you can use the new and updated editor to edit the content as well. However, you can still use the classic editor to have your work done. You can check in the following gif about how you can use the same.

Switch between the two editors: 

Go to the dropdown menu in the upper right corner to switch between the visual editor and the text editor. If you need a shortcut for this, use Ctrl + Shift + Alt + M to do so. 

Copy all content: 

If you want to use the Gutenberg editor, you can copy all content in the HTML version with just a single click. Open this feature (both editors) by clicking on the dropdown menu in the upper right corner of the dashboard. You can use a Custom HTML block to put the HTML content in it and then you can just use the preview button the view the HTML isn’t that so easy?

In classic editors, you need to switch to the text view and then you had to find the place where the corresponding HTML was written, in Gutenberg they made, is easier than ever to manage your content.

Page settings and documents settings: 

You can change various settings on the page and document. These are the following changes that you can make: 

  • A post can be made public or private. 
  • The date of publishing can be changed. 
  • You can select the format of the post. 
  • You can add/edit tags and categories. 
  • Featured images can be uploaded. 
  • Enable and disable comments. 

Frontpage: 

If you are running a blog and in the document settings this feature is turned on, the selected post will always appear on the front page of your blog. If you want to remove it, all you have to do is just turn it off. 

Blocks: 

If you use the Gutenberg editor, you shall have to know that blocks are the most fundamental of its units. Click the ( + ) button next for the redo/undo option to open the blocks menu. The most common blocks are the following: 

Paragraph: 

The paragraph block comes with features like custom font sizes, drop caps, background colors, and text colors. Also, you can add more CSS classes here, if need be. 

Image:

It has a new feature that allows you to shift between gallery and image layouts. Additionally, you can set particular size dimensions and have more control over images. 

  • Elements: 

The other important elements you should be aware of are:

  • Cover Images. 
  • Quotes. 
  • Headings.
  • Lists.
  • Audio. 
  • Video. 
  • Subheadings. 
  • Galleries. 

Format: 

These blocks contain all the formatting tools. 

Table: 

When you use the Gutenberg editor, you shall see that with the table block, you can add and remove rows, columns of a table without any coding. 

Custom HTML:

If you want, you can use a custom code when you use the Gutenberg editor. Also, you can insert your code and can preview it in the block itself. 

  • Elements: 

Other notable elements which are important here are as follows: 

  • Classic.
  • Code.
  • Preformatted. 
  • Pull Quote.
  • Verse. 

Layout:

When you use the Gutenberg editor, you can create excellent layouts using this block. 

Button: 

Buttons like “Subscribe now” and “Buy now” can be added using this block. Also, there are options for alignment and font styles. Additionally, you can also set the color of the background and shape of the button. 

Columns: 

This block allows you to add text columns where you shall be able to add one to six columns in a single row.

  • Elements:

Other notable elements include: 

  • Page break.
  • Separator.
  • Spacer.
  • Read more. 

Embeds: 

Using these blocks you can easily access any embeds. All you need to do is paste the URL in the given blank space, and Gutenberg will embed the code for you whether it is a link from YouTube or Twitter. 

Reusable Blocks: 

You can convert any block into a reusable block so that you can use it in a different location. Developers get access to improved usability because of reusable blocks. The same block can be edited and saved to be used as a new reusable block again. This is a great thing that shall be of use to you when you use the Gutenberg editor. 

Pros of Gutenberg Editor

Strengthens the WordPress visual editor

According to WordPress users, the WordPress visual editor was not performing well. It was providing a stagnant experience to its users. But Gutenberg can wipe out that pain point. It may not offer the best or fantastic experience but pain points will be wiped out for sure. The goal of the Gutenberg editor is to have a more intuitive interface for the new users. 

Clever block info storage 

When it comes to storing information about blocks, Gutenberg does it in HTML comments. All these comments are visible only on the back end of the website. 

You can disable Gutenberg editor whenever you want

You may know that there are a lot of page editors that break the site after getting uninstalled. But in the case of Gutenberg, this is not going to happen. Required HTML comments will be stored along with content. If you want to reactivate Gutenberg, you do not have to lose any previously arranged blocks. Along with this, you should remember that without activating Gutenberg, the HTML comments will be stored in page source. 

Copy-Paste is now hassle-free

You may know that the previous version of Gutenberg turned the copy and paste it into a hassle. During the copy-paste process, the format gets lost. But now this problem has been solved. Now pasting paragraphs, headings, lists, etc is easy and formatting will be safe. In the case of the text markup, I mean the Italic or bold text, the process will be the same.

You can create your own blocks

If it comes to customize a block, developers will be able to create their own blocks. This ease is not available in other available page editors in the market. And that’s why experts are upbeat that it is going to make the use of WordPress easier than ever. 

Cons of using Gutenberg Editor

No composing support in the browser

Experts say that the User Interface of the Gutenberg Editor is focused only on the Content creation but not on content creation. So, It can be a problem to the WordPress users if they use the Gutenberg PlugIn. 

No images, no embed in the paragraphs

In the Gutenberg editor, you cannot put text around an image. In order to put images, you have to take the help of a separate image block. 

In the base of other embeds like audio and video, you have to create separate blocks. oEmbed from YouTube is not going to work here anymore, not even in the text columns.

No shortcode facility in paragraphs

Presently, a user cannot use shortcodes in the paragraph blocks or in the text column. Just like embeds, shortcodes need to be put in separate blocks in order to make it work. It can create problems when it comes to inline content.

Conclusion: 

The new features have been described in detail and if you use the Gutenberg editor, you shall for yourself see the advantages of this. 

Also, we are leading software developers in developing CMS solutions using the WordPress environment. If you have any needs which require WordPress based solutions please do not hesitate to get in touch with us. Our team of software developers at Vyrazu Labs shall see to it that we are able to come up with customized solutions that take care of your needs. We are here 24/7 for our clients. You can contact us at any time. We will be back to you within the next 24 hours.

You can leave feedback in the comment section!