A Comprehensive Guide to New WordPress Editor aka Gutenberg

gutenberg

If you are familiar with WordPress, you possibly might have heard about Gutenberg blocks. Gutenberg is a WordPress editor. It was launched concurrently with WordPress 5.0. The editor has revolutionized the creation of content in the WordPress platform.

It comes handy when creating posts, developing a page or any other aspects of your website. Since it’s the latest development in the WordPress platform, you may be interested to learn a few things about the editor.

What is Gutenberg?

No changes have ever been made to the WordPress Editor since it was developed. For this reason, some users reported that the original editor was slow. It had, therefore, outlived its usefulness. In other words, obsolete. 

In light of this development, other developers started offering alternatives. Some of these editors were more insightful. They offered developers the ability to visualize the developed contents. Slowly their popularity blossomed among many developers. 

The editors employed easily to use and customizable website building blocks. Users simply need to use the blocks to build a fancy website. Coming up with the website layout is easy by using the drag and drop tools. The ease of using these blocks meant that the old WordPress Editor was “difficult” to use. 

What does Gutenberg Offer?

In the old WordPress editor (TinyMCE) to insert diverse elements, you need to either use HTML or rely on shortcodes. That’s not convenient when creating a page with diverse content.
Gutenberg is a new WordPress Editor. It allows website developers to build and edit website pages and posts in a friendlier way without programming or editing HTML and without rely on shortcodes. It’s just like a page or website builder tool. Gutenberg editor make it easy to set up a website without any coding or site design experience.

Gutenberg and other page building plugins could be added to a WordPress site alongside the default editor, offering users the option of drag and drop page design as well as the flexibility of the core editor. But Gutenberg brings page design functionality to the editor itself with its system of movable, editable blocks that can contain everything from text to embedded media. And, once WordPress 5.0 rolls out, Gutenberg will be the default editor for the WordPress core.

What Advantages and Disadvantages of Gutenberg?

There is a wide ongoing debate about the advantages and disadvantages of the new WordPress Editor. These debates range from its uniqueness to complexity. Let’s examine a few of them.

Advantages

The proponents of the Gutenberg blocks argue that:

  1. The editor allows users to create intuitive content easily. This feature makes the editor attractive for both newbie and professional website builders who want to keep things simple.
  2. It enables the developer to visualize how the content will appear on the frontend. Users can, therefore, customize the website to their taste.
  3. You necessarily do not require separating shortcodes which can be tiring and boring at times.
  4. It allows for the customization of contents with an array of discrete elements. The wide choice of discrete elements offers website builders to try different styles and formats.
  5. You don’t have to install a separate page building plugin. 

Disadvantages

Some users, however, argue that:

  1. Although the intents of the editor are noble, it’s difficult to learn how to use the new editor at the first time.
  2. The new WordPress editor conflicts with some plugins and themes.
  3. The editor should not be a core part of the platform. Several developers recommend that it should be a separate plugin.

As you can see, the benefits of the new WordPress editor outweigh its cons. Anyway, there is nothing that doesn’t have disadvantages. Some WordPress specialists anticipate that in the same way that many third-party developers are continually making new WordPress plugins and themes, designers may locate a new niche for themselves in creating Gutenberg blocks that can be sold and managed like any other WordPress asset.

What The Future of Gutenberg Looks Like?

Gutenberg is not just a another editor for WordPress. It’s the beginning of something much bigger, but it’s something many people often gloss over. The developers of Gutenberg invested heavily to ensure the editor becomes a darling of many developers. This was made possible by a team of developers. The team researched how to improve the editor. This means that the Gutenberg blocks have a bright future. You can envision,, this gives us unlimited possibilities and it is a necessary step to keep WordPress the first CMS for years to come.

How to use Gutenberg?

How to use Gutenberg
How to use Gutenberg

Gutenberg divides contents into blocks. These blocks differ and have different functionality. Click on the plus icon at the top-left corner of your screen to view and select a block.

Developers can create several features including galleries, paragraphs, lists, etc. For instance, the image block allows you to add media on to your web page and a simple paragraph for a text.  Once the developer selects a block, it automatically adds to the content.

The developer can then edit the block. The features on the right-hand side of the page allow the user to format and style the block. Once customized, simply drag and drop the block where you want it to change the page layout. Note that, you can change the size of the blocks as well.
Once The best way to learn how to use Gutenberg is to experiment with the editor.

What is Gutenberg Blocks?

Gutenberg Blocks are the core of Gutenberg it’s a great new tools for building engaging content. Gutenberg Blocks are the unifying evolution of what is now covered, in different ways, by shortcodes, embeds, widgets, post formats, custom post types, theme options, meta-boxes, and other formatting elements. They embrace the breadth of functionality WordPress is capable of, with the clarity of a consistent user experience. With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge. Instead of using custom code, you can add a block and focus on your content.

Imagine a whole universe of plugins just as flexible, all extending WordPress in the same way. Imagine simplified menus and widgets. Users who can instantly understand and use WordPress—and 90% of plugins.

What is Reusable blocks?

The reusable block is one of the greatest features of Gutenberg. The reusable block has a feature that allows the developer to save the settings of a completely developed block and then use it when needed. This is one of the most astounding features of the new WordPress Editor.

Think of these as a completed block that you can save along with its settings. For instance, if you’ve made a cool looking layout for the intro of your blog articles, you can save this as a reusable block. After that, you only have to go to Add Block ⇾ Reusable to pick your reusable intro block.

How to use reusable blocks?

A reusable block starts out an ordinary block, e.g., heading, text, list, image, map, contact form, etc… You click a button in the block’s toolbar to make it reusable. You then use that block in other places like posts, pages, HayyaBuild headers or HayyaBuild footers. When you change anything in the reusable block, the changes that you made reflect everywhere that the block is used.

Also, you can select a group of blocks by press SHIFT key from keyboard then click in block or use SHIFT key and UP or DOWN keys to select a group of blocks and then make the selected blocks as reusable blocks. See below images to understand how to create reusable blocks.

How to Build Header and Footer With Gutenberg?

Build header and footer
Build header and footer with Gutenberg

Your website header and footer are controlled only by a theme which gives you design and layout limitations. You can use Gutenberg to build modern and responsive headers and footers for your WordPress with just a few clicks and without to write any single code by using some plugins that will help you to do that. For example, you can use HayyaBuild plugin to create a different header for each page, and you can create default header to appear on all pages or on group of pages. This plugin comes with about 24 Gutenberg blocks with multiple options.

How To Write Your First Content Using Gutenberg Editor?

Before trying to write anything, let’s understand Gutenberg interface. Here are what the various areas of the Gutenberg interface let you do:

write content using Gutenberg editor
write content using Gutenberg editor
  1. Click this button to add a new block.
  2. Undo/redo buttons let you move forward or backward to edit easily, just like any other WYSIWYG editor.
  3. Click this button to see used Gutenberg blocks list and to select one of the blocks you added.
  4. To publish, update and save the post or page, also you can show and hide the sidebar by clicking on the gear icon.
  5. Post/Page title.
  6. This is how the blocks looks like after they are added.
  7. Block toolbar.
  8. Where you can find post/page and Gutenberg blocks settings.

If you click on the (+) Plus button to insert a block, it will open a window that lets you browse all available blocks that you can use in your content:

blocks list
Blocks list

The Recent and Saved tabs allow you to access Gutenberg blocks that you frequently use, while the Blocks and Embeds tabs let you browse all available blocks.

Conclusion

The new WordPress Editor has revolutionized web design. It has made web design fun and easier especially among those with little or no knowledge in website programming.

Although some users find it cumbersome to use, it’s no doubt that it will take a while before most of the developers get accustomed to it. Remember that, despite the opposition and negativity surrounding Gutenberg, the editor is there to stay.
The best way, therefore, is to install WordPress 5.0 and practice how to use Gutenberg blocks. With time, you’ll get accustomed to the editor and it will work for you.

Ultimately, it will open new opportunities for plugin and theme developers to better serve users through a more engaging and visual experience that takes advantage of a toolset supported by core.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

insert_comment

account_box
email
email