Houston social media expert

Gutenberg for WordPress

What is Guenberg for WordPress?

Have you heard the latest hubub about the way WordPress will be used?  Gutenberg  promises to change the face of WordPress. Matt Mullenweg, the co-founder of WordPress, said, “It’s time for WordPress’ next big thing, the thing that helps us deal with our challenges and opportunities. The thing that changes the world. Gutenberg.” Gutenberg is a new project in the WordPress community that has a lot of people excited but a lot more people apprehensive.

Gutenberg is a new visual editor for WordPress that will allow you to drag and drop element blocks into your posts and pages. It is a significant change from the current editor and has received mixed reactions from WordPress users, developers, and designers. The purpose of Gutenberg is to help those with little tech experience to easily and simply create different formatted types of content.

The Gutenberg visual editor will be released in WordPress 5.0, which doesn’t have a firm release date yet but will probably be sometime before the end of the year.. You may be wondering why a new visual editor is even needed. The current editor works just fine and everyone is used to it, so why change it? The current editor is very old and has limitations. If you want to format the content extensively you have to do in the text editor with HTML, edit the CSS, or even edit theme files. Advanced formatting is impossible with the editor as it currently stands. While Gutenberg doesn’t fix all these issues initially, it eventually will.

The Gutenberg visual editor is named after Johannes Gutenberg, the man who in in 1439 was the first European to use movable type. Test Drive Gutenberg If you give Gutenberg a test drive before it is officially released in WordPress 5.0 you can do so by downloading and activating the Gutenberg plugin from the WordPress plugin repository. I highly recommend giving Gutenberg a try before its release in WordPress 5.0 so you know what to expect and you won’t be surprised by the changes.

Follow the steps below to install and setup the Gutenberg plugin:

1. Login to your WordPress administration dashboard with administrative privileges.

2. Go to the “Add New Plugin” page (Found in the menu under Plugins).

3. In the top right hand corner search bar type in Gutenberg.

4. The Gutenberg plugin will be the first plugin in the results.

5. Click on the Install Now button. This will download the plugin to your WordPress site.

6. Click on the Activate button. This will turn the plugin on.

Once you have activated the Gutenberg plugin you will see a new menu option on your dashboard, aptly named Gutenberg. While there are no settings, the options allow you to see a demo of the plugin in action, a link for support, a link to leave your feedback, and documentation.

Writing a Post or Page in Gutenberg

When using Gutenberg to write a post or page you need to understand what blocks are and how they are used to format your content. Blocks represent the different types of data you can insert into your content.

Most Used Blocks Include:

Paragraph Image

List Cover Image

Heading

Gallery

Quote

Audio File

Common Blocks Include:

Cover Image

Subheading

Video

Formatting Blocks Include:

Code Classic

Custom HTML

Preformatted Pullquote

Table Verse

Layout Blocks Include:

Button Columns (Beta)

More Page Break

Separator Spacer

Widget Blocks Include:

Shortcode

Archives

Categories

Latest Comments

Latest Posts

Embed Blocks Include:

Twitter

YouTube

Facebook

Instagram

WordPress

SoundCloud

Spotify

Flickr

Vimeo

Animoto

Cloudup

CollegeHumor

Dailymotion

Funny or Die

Hulu

Imgur

Issuu

Kickstarter

Meetup.com

Mixcloud

Photobucket

Polldaddy

Reddit

ReverbNation

Screencast

Scribd

Slideshare

SmugMug

Speaker

TED

Tumblr

VideoPress

WordPress.tv

To add a block to your post or page click on the circle + icon on the top toolbar and then choose which block to add. To remove a block, select the block in your content you wish to remove and click on the three vertical dots that appear to the right and choose remove. You can also move the blocks around easily by clicking and dragging them or clicking on the up and down arrows to the left of the block.

One of the great things to come from Gutenberg is reusable blocks. If you find yourself using the same data on multiple pages you can save the block and reuse it on other pages. No need to recreate it every single time. This works for posts too. If you create the reusable block when writing a post, you can then use that reusable block when writing a page as well.

Post, Page and Block Settings in Gutenberg

The post and page settings in Gutenberg have changed extensively. They are much more streamlined and appear more modern looking. No longer do you have separate sections on the right side and bottom of the post content area. The settings are now in a menu format to the right of the editor with the ability to move it out of the way if needed by simply clicking on the gear icon. This allows you to focus more on writing.

The top portion of the settings menu has two tabs – Document and Block. These tabs let you easily switch between settings. The Document tab allows you to edit and set options for the post or page such as category, featured image, scheduled date, etc. The Block tab allows you to edit and set options for each individual block you use such as image, paragraph, and lists.

Document Tab Settings Status and Visibility – The settings for scheduling a post, setting the post or page status to draft, pending, or published, the post format, who can see the post or page, and the option to make a post stay on the front page are found here.

If there is more than one author account on your WordPress install, the ability to change post author is here too.

Categories – Set or assign a new category for the post.

Tags – Assign tags for the post.

Featured Image – Assign the featured image for the post.

Excerpt – Write the excerpt for the post.

Discussion – Set your comments options.

Block Tab Settings

The settings available for each block will vary with each block. These are some of the most common block settings:

Paragraph – You can easily set the text size, format the text with a drop cap, change the paragraph background and text color, and add additional css selectors.

Image – Set the alt text, image size, link settings, and any additional css selectors here.

Cover Image – Chose weather the the image should be in a fixed position or not and adjust the background opacity which determines the transparency of the image.

Columns – Choose the number of columns needed.

Heading – Set the heading level to H1, H2, H3, H4, H5, or H6, and the alignment of the headline. Keep in mind when writing or editing text a bar will popup where you can perform basic formatting such as bolding, alignment, italics, and links.

Something you might notice missing is the ability to change the slug or permalink of a post or page while editing it. Don’t worry, it’s still there. Click on the title block and the option to change the permalink will appear.

The screen settings link at the top of the editor is also been removed as it is no longer needed.

Circle + Icon – Adds a block to your document.

Left Arrow Icon – Undo the step you just performed.

Right Arrow Icon – Redo the step you just performed.

Circle i Icon – When you click on this icon you get some stats on your content. It will show you the number of words, headings, paragraphs, and blocks used. Helpful information if you are attempting to meet certain writing goals.

Save Draft – If you have not previously published the post or page yet, you have the option to save it as a draft. If the post or page has already been published this option will not appear on the toolbar.

Switch to Draft Button – Allows you to unpublish a previously published post or page.

Preview – View a preview of your content in a new tab or window as if it was published.

Publish – If the post or page has not yet been published the Publish button will appear allowing you to publish the content or schedule it for later. Update – Save any changes made to your post or page.

Gear Icon – Shows or hides the settings menu on the right side of the editor.

3 Vertical Dots – Menu that allows you to switch between the visual and HTML editor, fix the formatting toolbar to the top (bold, italics, alignment, etc.), display tips when creating a new post, and to copy all the content. Edit the HTML Want to edit the HTML of a page or post directly? With Gutenberg the Text tab in the editor is removed. You can now access the new code editor by clicking on the three vertical dots in the upper right hand corner next to the gear icon. You will see some new code though, so be prepared for that, but it is normally just HTML comments and helps to find the different blocks in the code.

Alternatively, you can also use the shortcut Ctrl + Shift + Alt + M to switch between editors. You can also edit the HTML on a per block basis. When you select a block click on the 3 vertical dots that appear and choose the Edit as HTML option. This lets you edit just one section of your content in HTML. If you need to quickly add just a HTML snippet, then simply use the Custom HTML block and add the HTML code there.

Keyboard Shortcuts

Many of the keyboard shortcuts that work in the classic editor still work in Gutenberg. However Gutenberg does add some new shortcuts that will help you navigate the editor quicker.

* Enter – Simply pressing the enter key will automatically add a new paragraph block.

* / – The slash key is a shortcut for adding blocks. After you press the enter key press the slash key. A list of available blocks will appear. Use your arrow keys to choose the block you want to add. Alternatively you can start typing the name of the block after the /. For example: /heading will add a heading block.

* CTRL + Shift + ALT + M – Windows only shortcut to switch between the code editor and the block editor.

* Cmd + Shift + ALT + M – Mac only shortcut to switch between the code editor and the block editor.

* CTRL-Del – Windows only shortcut to delete a block.

* CMD-Backspace – Mac only shortcut to delete a block.

Advantages of the Gutenberg Editor

While Gutenberg may seem like a big change from the classic editor you have grown accustomed to, Gutenberg has many advantages. The advantages include:

It is easy for non techies and beginners to use. It much easier for a new to WordPress person to learn to drop and drag blocks for content rather than to edit everything via HTML or to install multiple plugins to get the desired layout. While there will undoubtedly be a learning curve it should be small.

It is  mobile friendly – Gutenberg is mobile friendly right out of the gate! It is so much easier to write or edit a post or page from your phone with Gutenberg.

It helps writers to visualize their content because what you see is what you get.

It has reusable blocks – No more copy and pasting the same data over and over again. You can save your most used blocks to use again.

It is extendable – Plugin and theme authors have the ability to create new blocks that can be used within the Gutenberg editor. *

It offers less distractions for writing – If you write your content directly in the WordPress editor, the slimline design of Gutenberg will have less items to distract you plus you have the ability to hide the settings menu.

Easier embedding -No more copying and pasting lengthly embed codes. With Gutenberg you can embed most video, audios, documents, etc. from other websites with only the URL.

Widgets in your documents- Have you ever wanted a list of pages or featured posts in your content? Before you could not do it without custom code or a plugin. In Gutenberg you can simply use a widget anywhere in your document.

/ Shortcut – This keyboard shortcut allows you to quickly add new blocks.

Gutenberg Hurdles

Of course with any new features there are going to be some bumps and hurdles and Gutenberg has it fair share. Below are some of the disadvantages of using Gutenberg:

Incompatibility with plugins and themes- Plugins and themes that add meta boxes or use custom fields may not initially work with Gutenberg. YoastSEO is one that is ready to go and works nicely with the new editor. Any plugin that adds options to the editor, such as YoastSEO, will still appear at the bottom of the editor.

Custom fields – Many themes and plugins rely on these fields to customize the content. The custom field data is still there you just cannot edit it or add new custom fields. In order to work with custom fields you will need to install a plugin such as the Gutenberg Custom Fields plugin.

* It is something else you need to learn. If you run your business on a WordPress based website then learning a visual editor is just another item on your to do list. One thing you need to remember about Gutenberg is that while it resembles a page builder it is not a true page builder yet as  it only allows you to edit and format the post with blocks not the entire page. For example if you have your blog posts setup to display with the sidebar on the right side, you can not change the position of the sidebar using the Gutenberg editor. Revert To The Classic Editor

When Gutenberg is released with WordPress 5.0, the old classic editor will go away. It will no longer be included in the WordPress core. If you don’t want to use the new Gutenberg editor then you will need to download and install the new Classic Editor plugin. This plugin will allow you to use the editor you are used to and when you are ready to switch over to Gutenberg all you have to do is deactivate the plugin. By default the Classic Editor plugin will remove all traces of Gutenberg. When then plugin is activated it will be like Gutenberg never existed. This will be a great option for those who don’t have the time or energy to learn the new editor. It is also an option if your are concerned about  theme conflicts. The Classic Editor plugin allows you to run the classic editor along side of the new Gutenberg editor. In the Classic Editor plugin settings, if the “Use the Gutenberg editor by default and include optional links back to the Classic editor.” is chosen, it will add an extra link on your posts and pages listings which will allow you to use the Classic editor and if you chose the edit link, the Gutenberg editor.

To install The Classic Editor do the following:

1. Login to your WordPress administration dashboard with administrative privileges.

2. Go to the “Add New Plugin” page (Located in the Menu Under Plugins).

3. In the top right hand corner search bar type in Classic Editor.

4. The Classic Editor plugin will be the first plugin in the results.

5. Click on the Install Now button. This will download the plugin to your WordPress site.

6. Click on the Activate button. This will turn the plugin on.

7. Go to the “Writing” settings page (Located in the Menu under Settings)

8. Choose the Classic editor settings you wish to use. Either replace the Gutenberg editor with the Classic editor, or  use the Gutenberg editor by default and include optional links back to the Classic editor.

9. Save changes.

The best way to prepare for Gutenberg in the WordPress 5.0 release is to install both the Gutenberg plugin and the Classic Editor plugin. Start using both so you are used to them. While many plugins and themes have already become Gutenberg friendly, many have not, and many are still in the process. Using both the Gutenberg editor and the Classic editor now will allow you to test plugins and themes for compatibility and you won’t waste any time trying to figure stuff out when Gutenberg officially replaces the classic editor.

Just remember that Gutenberg is still in active development and bugs and issues will still need to be found and fixed. If you need some help or want to get involved here are some important links:

Report bugs at https://core.trac.wordpress.org/newticket

Get support at https://wordpress.org/support/plugin/gutenberg

Contribute at https://core.trac.wordpress.org/tickets/good-first-bugs

Leave feedback at http://wordpressdotorg.polldaddy.com/s/gutenberg-support

Find more information at https://wordpress.org/gutenberg/handbook/

Some people will love the new Gutenberg visual editor and some people will hate it. While having the option to fall back to the classic editor via a plugin is nice, Gutenberg is here to stay. If you will be using WordPress for any amount of time in the future you need to take the time to learn all the ins and outs to get the most of Gutenberg.

Ready to stop chasing clients and get them to chase you instead? Register for the Free Class today

Leave a Reply

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