General Overview

Welcome to a new introduction and (not so much) a tutorial to a huge upcoming feature for WordPress: a brand-new proprietary text editor known as Gutenberg. I’ve already featured this upcoming feature for the next version of WordPress (WordPress 5) on a past entry, but this section will be more of an early review and coverage of the new text editor to be implemented in the next coming months.

A bit of development history…

When WordPress first released the software back in the early 2000s, their default text editor implemented in the software is a Javascript-based script called TinyMCE. TinyMCE is also a popular piece of text editor script that provides that WYSIWYG content addition and editing that was used throughout many types of popular scripts, such as forums, other CMS scripts, and content-hosting services and social media services like LinkedIn and Fanfiction.NET.

The basic version of TinyMCE has always been the default text editor for WordPress since the beginning. As many of you WordPress developers and users know, our TinyMCE text editor looks like this:

Simple and straightforward, right?

The TinyMCE was also being specifically modified to add other features that make the WordPress CMS that we’re familiar with today, such as being able to use and read shortcodes for more further customization on how our post and page layouts would look like on its final publication. After all, just like WordPress, TinyMCE is also an open source script that any developer can fork or modify to suit their needs.

There is one bit regarding TinyMCE. It may be open source software, but its use is not for free. You have to pay a subscription fee depending on the type of project that you have, however, it also has its Community version that you can download for free if you want to contribute some of your coding features to the script itself.

Thinking about it, the folks who built WordPress would have to pay subscription fees to include TinyMCE in their software. There are also some developers and users who aren’t huge fans of shortcodes and would want to have more control and flexibility over their content. The community has heard of different pleas for a much more user-friendly version of WordPress, and for the last year or so, the folks began to develop and test a new type of text editor that would solve these issues.

Say hello to Gutenberg.

What the heck is Gutenberg?

Gutenberg is a brand-new text editor that the WordPress community has been developing for over a year and will be implemented in the next huge update for WordPress (5.0). Not only that Gutenberg will make content posting easier and cleaner, but it also has the ability to create custom (post or page-specific) layouts on a page or post.

So, to explain it further, I’ll use an example. You’ve seen the popular microblogging service called Tumblr, right? Now you can create custom posts that may look something like Tumblr’s post types from blog entries to galleries to quotes to chat scripts, etc. You can also change the layouts of your posts too using what they call blocks so that each blog post you make would look like something that’s laid out on those news sites and newspapers (for example, of course).

If you are familiar with WordPress’s free blog service, WordPress.com, the Gutenberg text editor would look (almost) exactly like the free blog service’s own text editor. In that way, those who may have used WordPress.com who wishes to become “independent” by having their blog completely customized and hosted in its own web host and URL, the transition will be a lot smoother into something familiar.

WP.com Text Editor and Gutenberg

So, here are some screenshots of both the default WP.com text editor and the upcoming Gutenberg text editor for self-hosted WordPress sites would look like. Because Gutenberg is still under development as of this writing, the text editor is available as a plugin for testers and can be installed in a locally-installed WordPress site.

If you don’t know what it means for a site to be locally installed, you can check out my Local Environment tutorial or my Local by Flywheel WordPress-specific local hosting tutorial.

WordPress.com Text Editor

Gutenberg Text Editor

The two text editors look (almost) similar to each other, don’t you think?

Getting a bit in-depth

For the time being, the best way for you to get to know more about Gutenberg is to download the plugin and install it in a locally-installed WP site. Do not install it on a live site as the plugin has bugs and other mishaps that can mess up your current layout or content altogether.

When you do install it, you can start playing around with it. If you started using the WP platform by signing up for their service, WP.com, it shouldn’t be too difficult to figure your way around Gutenberg. However, if you’ve never used a WP.com-hosted blog or site before, then this would be a bit of a learning curve.

Blocks

One of Gutenberg’s major features is the implementation of blocks.

If you’re a WP theme developer who builds themes using existing theme frameworks like Genesis or Divi, you should get the gist of what these blocks can do. For every post (and page), you can create several different types of layouts by dragging and dragging different kinds of blocks.

Here are a few examples of Gutenberg’s default blocks:

Aside from the paragraph block and the image block, here are other blocks available:

Common Content Blocks

• Heading Block
• Gallery Block
• List Block
• Quote Block
• Audio Block
• Cover Image Block
• Subhead Block
• Video Block

Formatting Blocks

• Code Block
• Classic Block (if you want to switch to the old text editor instead of Gutenberg)
• Custom HTML Block
• Preformatted Block
• Pullquote Block
• Table Block
• Verse Block

Layout Element Blocks

• Button Block
• Columns Block
• More… Block
• Page Break Block
• Separator Block
• Text Columns Block

Widget Blocks

• Shortcode Block
• Categories Block
• Latest Posts Block

A sandbox example of an entry using the available blocks in full potential is found here.

My thoughts on Gutenberg

I know it’s been months, but life happened. Finally, I’ve squeezed some time to test this upcoming feature on my Local by Flywheel environment.

I have to say that it will be difficult for seasoned WordPress bloggers, designers, and developers to get used to Gutenberg, especially with the Blocks feature. Many designers and developers (myself included) have also built themes based on frameworks like Genesis, Divi, Underscores, etc., and are also curious on how Gutenberg will gently integrate with existing sites without undermining and affecting the current layout.

On the other hand, I’m looking forward to Gutenberg. I think it would make quick designing and customization of every post or page for the new WordPress user, blogger or designer or developer otherwise. It would make things easier for content-heavy bloggers to make their pieces beautiful and attractive as something a professional would be able to come up.

I plan on releasing a series of reviews and tutorials on how to build simple WordPress themes, however, I think it’d be safer to wait until WP 5.0 is released with Gutenberg already implemented in the new core product.

Till next time!