WordPress Gutenberg for absolute beginners.

WordPress Gutenberg for absolute beginners.

Online by JSC0d3
March 5, 2019 | | Recognition

I’ve been loosely following the noise and #wpdrama surrounding Gutenberg for as long as it has been around and honestly for the most part I’ve had negative feelings around it (I don’t like change at the best of times). However, I recently dived in and tried it out and you will never guess what happened next!

Gutenberg is the new default editor for WordPress. It saw the WordPress editor switch from meta boxes to reusable blocks. And it’s safe to say that Gutenberg has truly rocked the WordPress community. Whether you love the new editor or hate it, it’s here to stay.

What is Gutenberg?

As a customary catch-up for those who don’t know, Gutenberg is the new way to edit content in WordPress. It replaces the tired TinyMCE post content editor and can do a lot more too – think shortcodes, widgets, menus, and even custom fields. It is a client-side interface built with React that uses a block based system to build up content:

Gutenberg ready wordpress theme development
Gutenberg is being developed as a feature plugin over on GitHub

The new Gutenberg editor gives you, as a WordPress  user – not a developer – a simple way to add varied content to your blog posts and webpages.

For example, if you wanted to use a table in your content, using the old WordPress editor; you would need to install then activate a standalone table builder plugin.

Motivations

Gutenberg is an obvious reaction to competitors of WordPress; the writing experience of Medium, the quick and easy site builds using Wix and Squarespace.

Clearly a project the size of WordPress needs some strong leadership and a clear roadmap. However, when that roadmap starts to be clouded by outside factors such as financial pressure to compete with the market, decisions aren’t made in the best interest of everyone. Don’t forget that whatever is implemented in WordPress.org is being built for WordPress.com (one of the main money-making arms of Automattic) and no doubt their biggest concern when considering losing customers to competitors. Gutenberg is a clear attempt to attract new users to the platform.

But in doing this is WordPress stepping away from the values that make WordPress WordPress? This is a move away from one of WordPress’ key philosophies, ‘Clean, Lean, and Mean’, which states that the “core of WordPress will always provide a solid array of basic features. It’s designed to be lean and fast and will always stay that way.”

Given that Gutenberg is basically a very advanced page builder plugin (like the many premium plugins on the market that do a similar job and will likely suffer because of Gutenberg), albeit with more scope, it is questionable why this feature plugin has been given the green light for a merge into core.

When using Gutenberg, all you need to do is add a table block, select the number of columns and rows, then begin filling out its content.

We are constantly asked “when will X feature be built” or “why isn’t X plugin integrated into the core”. The rule of thumb is that the core should provide features that 80% or more of end users will actually appreciate and use.

WordPress Philosophy

Interesting. So who decides what will be useful for 80% of end users (a wide demographic), and on what basis?

In Gutenberg’s case, this is quite clearly the Benevolent Dictator For Life of the WordPress project and Automattic CEO Matt Mullenweg, after confirming at the State of the Word 2016 that he would now be project lead for 2017, and that the visual editor would be one of the focuses for 2017. Early in 2017 he also established himself as the project lead of Gutenberg and moved a couple Automattic employees on the project to drive it forward. Matt is making executive decisions, not options.

Things Will Break

WordPress has always been a project that prides itself on backwards compatibility, a choice that has left the codebase large, outdated, and full of technical debt. WordPress allows the software to be run on a version of PHP (5.2.4) that has been unsupported by PHP since January 2011! Developers have been calling for this to be raised for some time but it has been postponed under the banner of backwards compatibility and the ‘Design for the Majority’ philosophy because the “average WordPress user simply wants to be able to write without problems or interruption.”

But Gutenberg is quite a departure from this stance. The goal of the project has dictated the need to use modern technologies (React, REST API), and therefore it circumvents the problematic parts of core.

… However…

Maybe just want to get rid of the new editor.
We all have busy lives and maybe you don’t have time right now to learn Gutenberg properly.
There is a “Classic” block, which is almost the same as the old editor, except in block form. Maybe you could try using this while you learn the ropes?
However, if your goal is to totally revert back to the classic WordPress editor, we recommend that you use the Class Editor plugin for WordPress.
You can find the Classic Editor plugin on the official wordpress.org website.
This is a strategy we have used on client websites, if we have no agreements to maintain the custom WordPress themes we developed for them.
This limits breaking changes and means clients’ teams won’t be confused.

However, if they wish to switch to the Gutenberg editor, we’re more than happy to help!

How to Prepare

The best way to prevent sites breaking for users when Gutenberg lands, is to enable the Classic Editor plugin now and configure it to revert to the old editor. This will mean come 5.0 things will work as is, and will be the approach I take for now.

If you have a site with custom post types (CPT) or develop a plugin with them registered, you can stop Gutenberg hijacking the usual UI with a couple of things. Either ensure you edit the registration arguments to explicitly set show_in_rest to false, or if you need to use the REST API for your CPT, then you can use the following filter to turn off Gutenberg for your CPTs:

add_filter( 'gutenberg_can_edit_post_type', 'js_code_gutenberg_can_edit_post_types' );
if ( !function_exists('js_code_gutenberg_can_edit_post_types')) {
  function js_code_gutenberg_can_edit_post_types( $can_edit, $post_type ) {
      if ( in_array( $post_type, array( 'a_post_type', 'another_post_type' ) ) {
          return false;
      }

      return $can_edit;
  }
}

You can learn more about preparing your plugins for Gutenberg from this more in-depth guide. A more drastic measure is not updating to WordPress 5.0 and only update to any security releases of 4.9.x.

Using the Gutenberg editor for the first time

If it’s your first time using Gutenberg, and you’ve finally updated your version of WordPress, try opening up one of your posts.

If your website has no posts (it should) then add a new post.

If you don’t see the expanded document sidebar, make sure you select the settings cog, next to the Publish… button.

It’s very similar to what we had previously in the traditional editor.

You can use just the document sidebar to edit post privacy, schedule posts like before, delete the post, count revisions, update its permalink, assign categories and tags, set a featured images, change the post excerpt, and allow or disallow comments, pingbacks, and trackbacks.
You’ll also see that a more traditional looking tinyMCE-esque window is still at hand.

Add.. Block?

What the block?

Blocks are content elements that WordPress users may combine to create unique layouts.

You can change tabs to browse the different block types, or enter a keyword to find the block you’d like. If you need to add custom JavaScript, or an Amazon Affiliate widget, or even some form of tracking code, you just put a code block in.
P.S. this is a great way to use custom JSON-LD to add Schema.org data to your WordPress website’s pages and posts.
And the best bit is that WordPress plugins are already developing amazing features that will help you improve your website with Gutenberg blocks. Why don’t we do the some of this post using Yoast SEO’s How-to Gutenberg block?

Can I make my own Gutenberg blocks?

Yes, yes, yes! We are actually working on a new blog post on how to do exactly that. Why not join our mailing list and be notified as soon as we share how?

How to save and reuse Gutenberg blocks?

All you need to do is click the menu button located on the far right corner of the block’s bottom toolbar. Select the ‘Add to reusable blocks’ option. This is super helpful if you’re blogging every day, and makes life much easier for you. You’ll be able to access reusable blocks each time you add a new block, in the reusable tab. Any time you ever update an instance of a block, it will be updated across each block on your website.

Can WordPress theme developers style blocks?

Yes. Blocks are permitted to provide their own custom styles. A theme developer can write code that ensures your theme can add to or override any existing styles, or they can provide no styles at all and rely fully on theme styles.

How does Gutenberg affect text that is copy and pasted from external sources?

Based on our tests to date, Gutenberg places all copy and pasted text into a single block. You may then use Gutenberg editor to change the content however you see fit.

Are there keyboard shortcuts for Gutenberg?

Yes. You can see all the available keyword shortcuts by going to the top right menu. Click “Keyboard Shortcuts”.

Does Gutenberg have columns?

Yes, Gutenberg offers a columns block.

Is Gutenberg drag and drop?

Yes, to some extent. Gutenberg editor allows publishers to drag and drop blogs to reorganise order.

Should I start using Gutenberg now?

Blocks are now the most common way users interact with content. Users and developers alike are going to be uncovering new functionality with the editor, and creating new and exciting layouts with Gutenberg blocks.

Wrap up

Hopefully you learned something new about WordPress and its new editor, Gutenberg.
These are exciting times to be a WordPress user, and for us, it’s an exciting time to be WordPress developers. My last bit of advice is don’t be fearful of Gutenberg. Set up a dummy WordPress website on a subdomain, or even better, use a localhost.

Get your hands dirty, and play around with Gutenberg.

JSC0d3's Logo
About JSC0d3

JSC0d3 is an entrepreneur, online marketer, and an employee of an IT company. When not building websites, creating content, or helping customers improve their online business, spend time with their wife and two beautiful children. Although he still feels new in WordPress, he enjoys sharing what he has learned with all of you! If you want to get in touch with him, you can do this through this website.

On the same idea

Posted by | April 1, 2019

Images are vital components of every website Before you start questioning the importance of images, just try to imagine your favorite blog or website...

Posted by | February 24, 2019

To ensure that your site ranks highly in Search Engine Result Pages (SERPs), you’ll need to make it easy for search engine ‘bots’ to explore...

Posted by | February 17, 2019

In this post, I will walk you through the process of creating your own like post button in WordPress Here’s a demo of how my final button looks...

Previous PostBackNext Post

Leave here an impression