AtulHost

Business and Tech News

Internet

Is the New WordPress Editor Gutenberg the Next Big Thing?

Gutenberg WordPress Editor

The Gutenberg editor did not really start on the right footing. Resistance to change and possibly an early feedback session which might have been TOO early created a lot of friction with the community.

Gutenberg WordPress Editor

But was this criticism justified? Is Gutenberg dead-on-arrival or is it the next big thing in WordPress editors and page builders?

Despite it receiving a lot of negative reviews from the WordPress community, the reality is that the Gutenberg WordPress editor is packed with tons of useful features which make it much better than the current editor, TinyMCE.

Most of its negative reviews arise from its comparison to other well-established and well developed page builders on the market (see more here on Collectiveray). Gutenberg is not yet up to par when compared to these page builders. But it has its own unique set of features that make it stand out – especially as compared to the current editor.

Additionally, it is currently undergoing extreme testing and still through a vigorous development phase, which is continuously building and polishing it to become fully featured and a prime, mainstream editor for WordPress 5.0.

Let’s now look at a few of the features it currently has:

01. Blocks

Blocks are probably the biggest feature when it comes to Gutenberg. When compared to the current editor, “blocks” enable you to structure web-pages into sections containing images, tables and other elements easily. This also makes it easier to edit and easily create full-fledged web-pages because working with blocks make this quite easy as compared to working with TinyMCE or shortcodes (without needing to pay for a premium plugin).

Gutenberg Block

The different types of blocks that can be added include:

A. Tables

Adding tables in Gutenberg only requires a single click. TinyMCE requires HTML code for table creation and this can be quite complicated for some WordPress developers or particularly to common website users. Currently, Gutenberg only allows the creation of a 2 by 2 table, with further additions requiring HTML code. However, this is expected to be made enhanced in future versions to allow completely flexible, responsive tables.

B. Images

The image block gives you multiple options for adding and editing images such as resizing, editing and including links.

C. HTML

Gutenberg provides a lot of flexibility by allowing you to edit HTML code directly from the visual editor. You can edit any block as HTML and after making changes, switch back to editing visually.

D. Latest posts

This block shows a snapshot of the most recent post on your website and provides an internal link to the latest article. To the developer, featuring recent articles is as simple as clicking a button to add the block, rather than requiring a 3rd party plugin.

Latest Posts

E. Embeds

Embedded blocks make Gutenberg very easy to use. YouTube videos, Facebook and Twitter feeds are among the very few embedded block features that can be used to make developing pages much easier. This is much more mature than what is possible through TinyMCE.

2. Creating a Page by Moving Blocks Around

In addition to having many block types, moving blocks around to create your desired page structure quickly also possible in Gutenberg. After creating the page layout and structuring content into several blocks, some final tweaks or rearranging might be necessary before achieving the result you actually wanted.

Enter block moving.

This feature allows you to simply move a block either a step up or a step down to the position that is best for it.

Rearranging Blocks Move Down

Rearranging Blocks Move Up

This makes restructuring very easy, saving time that would otherwise be used in cutting and pasting content in the current editor – without the risk of breaking stuff in the process.

3. Block Transformation

Gutenberg allows you to switch blocks from one type to another at the click of a button. This is an extremely powerful feature because quick editing such as converting paragraphs into headings or subheadings can be done quickly allowing you to quickly iterate and develop your pages on the fly.

Block Transform

Similarly, images can be transformed into galleries for multiple images displays, with simple add on captions.

Change Block Type

A transformed block can also be turned back to its previous type and this makes editing quite easy and fun.

4. Blocks & Word Count

Gutenberg’s word count feature, similar to TinyMCE,  gives you a nice statistical summary of the words, headings, paragraphs and blocks used in your web-page – but in much more detail.

Gutenberg Document Outline

Word count is quite important when creating web content and dividing the words into a reasonable number of paragraphs is essential for easy reading. Block count includes the paragraph blocks and shows you the percentage of text content on the entire web page.

5. Font Resizing

TinyMCE only allowed resizing of headers using the h tags. Gutenberg extends this further with the option of resizing any piece of text. This can be done on any paragraph block using a slide bar that can adjust the text to any size between 12 and 100.

This is critically important for readability in the age when most content is read on phones, rather than larger desktop screens.

Font Size Custom

Font Adjustment

Additionally, 4 presets are available for switching in between small (size 14), medium (size 16), large (size 36) and extra-large (size 48). A drop cap toggle button can also be used to add drop caps at the beginning of any paragraph, making the text more readable.

6. Table of Contents

After structuring your web content into titles and headers, Gutenberg gives you a clear outline of the whole document in a well-structured table of contents.

In case you want to edit the various sections that make up the table of contents, simply click on that section and you will be taken directly to that block in order to make the changes.

7. Colors and Inline-Styling

Gutenberg gives you the option of changing background colors as well as text colors. Both have preset color values that include pale pink, vivid red, orange, amber, blue and gray among others.

These are very important when including such stuff as Calls-To-Action or pop-outs to attract attention to particular pieces of your posts and pages.

Inline Styling

Additionally, they both have a custom color picker which gives you a color palette to choose your desired color from a wider range of colors.

Color Picker

8. Undo & Redo Buttons

When editing anything, including a website, you are prone to making mistakes. Regardless of the multiple flexibility features that Gutenberg is equipped with for correcting mistakes such as moving blocks to the correct spots, none is as essential as the undo and redo buttons.

This also makes it feel like your standard document editor, where Undo and Redo functions are standard features.

Undo Redo Button

9. Block Alignment

This is another feature that is exclusive to paragraph blocks. It gives you the option of aligning paragraph texts to the left, center or right of the page body.

Block Alignment

Conclusion

The above clearly shows that the current Gutenberg editor, while still a plugin in its most basic version, is quite powerful. Its developers have released a product that shows great promise. The polished version, destined for default use in WordPress 5.0 is expected to have much more features, therefore providing some serious competition to other well established page builders. A switch to such an editor will certainly take WordPress to the next level and be the next big thing in WordPress web development.

1 Comment

  1. Ryan Biddulph

    I dig the embedded blocks thingee Atul. Not a developer so I have no terminology LOL. Def know though; most new ideas meet some resistance early on. Par for the course.

    Ryan

Comments are Closed