Home » Blog » Getting Ready for Gutenberg

gutenburg

Getting Ready for Gutenberg

Gutenberg has been a major talking point for WordPress users for a good part of a year now.  It is will change how we create posts and pages in WordPress for the better. It makes it easier to create rich content with a new visual editor.  Let’s take a closer look at it and see how it will affect your WordPress experience.

What is Gutenberg?

Gutenberg is the name given to the new WordPress editor, which is named after Johannes Gutenberg.  He invented the movable type printing press in the mid 1400s.

The current editor on WordPress looks like a normal text editor and requires a bit of finessing with shortcakes and HTML to change the layout of the page or post.  Gutenberg solves this issue by letting the user create “blocks” that can be easily formatted and arranged on the page by drag and drop.  You can go to Gutenberg’s official WordPress page for a demo and try it out.

Installing Gutenberg

If you want to dive deeper into Gutenberg, it is available to install to WordPress 4.8 and later as a plugin.

  Gutenberg Plugin

 

Also when you update to WordPress 4.9, it is given as an option on the WordPress dashboard in the WP admin area.

Gutenberg on Dashboard

 

Keep in mind that Gutenberg is still in the beta testing phase, so functionality may not be limited.  But you will get a good idea of what is to come.  Make sure that you are trying it out on a testing site or setup a staging environment with your hosting.

Getting to Know Gutenberg

Once you have installed and activated Gutenberg, you will see it appear in the WordPress sidebar like any other plugin.  It also takes you to a sample post that is a brief tutorial of some of its features.

Gutenberg Installed

 

Since Gutenberg is still being tested, it gives you the option to switch between the classic editor and the new editor. You will find this in the top left.  Click on the plus sign and a drop down menu appears. Under the Formatting menu you will find the option to switch back to classic editor if need be.  Also this is where you will find the options for adding custom code into the pages.

Switch to Classic Editor

 

In this same drop down from the plus icon, you can also see some new cool options.  The Layout Elements menu allows you to insert buttons, columns and some other neat features.

Layout options

 

And the Embed menu item gives you the option to embed video/music easily from various sources.

Embedding options

 

On the top right of the post you will find a Gear symbol.  When clicked it brings up the settings both for the document in general and for selected blocks.  The document settings gives you the regular setting of status/visibility, categories, tags, featured image, excerpt, and discussion options.

Document Settings

 

When you have a block selected, it shows the settings for that particular block.

Block settings

 

Clicking on the i icon in the left hand side of the menu will give you a quick overview of your post.  It gives you word count, headings count, paragraphs count and a block count.  It also gives you a nice document outline to see what your document looks like.

Information tab

 

The triple dots, or more icon, on the top right of the menu lets you switch between the visual editor and the code editor.  And a few other extras.

 

Closing thoughts on Gutenberg

I honestly haven’t gotten to play with Gutenberg as much as I would like yet.  But from what I see so far there will be many cool features that make it easier to create beautifully laid out post and pages.  It is worth the time to try the plugin now before it rolls out permanently on WordPress 5.0.  At that time it will no longer be optional to install.  Though there will be a plugin to disable Gutenberg at that time.  It is still best to try it out now and see if you will want it disabled or not.

Have fun trying Gutenberg on your WordPress site!

If you need help designing, developing or maintaining a WordPress site, I’m ready to help you so you can concentrate on running your business.

*originally posted on http://www.rgodin.com/