WordPress Gutenberg Tutorial – How To Get Ready For WordPress 5

//WordPress Gutenberg Tutorial – How To Get Ready For WordPress 5

Welcome to our WordPress Gutenberg Tutorial

Are you ready for the WordPress 5.0 Gutenberg update? Haven’t heard of it? Not ready? We, at Fincel Design, got you covered. Don’t worry – this change is for the better and our Wordpress Gutenberg Tutorial will help you understand how and why.

You came to the right spot to learn about this new editor on your site. Below, our Wordpress Gutenberg Tutorial will breakdown and explain what Gutenberg is, what it means for you, what to do before it launches, and how to use this new editor for your WordPress content.

This change has been a long time coming and it will make updating content on your website easier! So let’s get started with our WordPress Gutenberg Tutorial.

First, what is the Gutenberg Editor?

What is the Gutenberg Editor?

The Gutenberg editor is named after Johannes Gutenberg, who invented the printing press. Gutenberg is the new WordPress post backend editor due to land any time now as part of the WordPress 5.0 update. This editor will be like Squarespace and the current “What You See is What You Get” WordPress (WP) editor – this means the editor is mimicking your site’s frontend.

Well, if it’s similar, what’s the big deal?

As our WordPress Gutenberg Tutorial points out below, the main difference between these other editors and Gutenberg is the current WP editor requires a person to have a knowledge of shortcodes and HTML to get full functionality out of the editor, while the Gutenberg editor groups sections into “little blocks,” which makes the editing process easier. These blocks are sections of content created in the editor. No coding is needed!

These content blocks are like those you have when using a page builder, and you will be able to insert content, including social media posts and multimedia, directly into the WP editor. Basically, you can add anything you want (pictures, videos, columns, buttons, text) by dragging blogs. No need to use shortcode. No need for styling changes. You can edit all on your own. You don’t need as many plugins or widgets to edit content, which will help speed up your site. There’s a chance you may not even have the need for any plugins or widgets due to the blocks.

These blocks will give you more control of your content on your site. You can reuse blocks on as many pages as you want. Blocks will provide base structural CSS styles, which themes can add to or override, or blocks can provide no styles and rely on the theme for the style.

A key feature and value of these blocks is that you will be able to easily drag and drop them wherever you want in the editor.

Gutenberg also comes with a new universal inserter tool, which gives you access to every block available.

You will be able to preview your post as you create it and will no longer have to toggle between the editor and preview screens.

Gutenberg will work in modern browsers, and Internet Explorer 11. Gutenberg requires Javascript and React skills, as well as PHP and HTML/CSS skills, which is a new world for WP people – this means many developers and agencies may not be ready for the change, so many of your plugins may not work.

Want to take Gutenberg for a spin? The beta version of the editor is available to download as a plugin here: Gutenberg editor.

What Exactly Are These Blocks, And Why Are We Using Them?

WP embraced the concept of blocks, so you can incorporate images, multimedia, embedded social media content, and more, into a content post much easier. With the current editor, you had to go to a media library or write HTML for images, multimedia, and files, paste links for embedded content, do shortcodes for specialized assets from plugins, and access widgets on the side of the page. Now, all these items could be blocks that are easy to search and understand and they all easily shift around the page.

WP believes the block concept is user-friendly and “can offer an outstanding editing and publishing experience.”

Why the Change to Gutenberg?

This is WP’s version of what many other site builders (Wix, Squarespace, Weebly) are already doing, and these site builders are popular. The goal of this editor is to give you a spot to edit areas of your site all in one place, and they’re starting with the content editor. According to WP, the “goal is to great a new post and page editing experience that makes it easy for anyone to create rich post layouts.”

Once Gutenberg arrives, it will be the editor for a long time. To stay competitive with your site, Gutenberg was created by WP to help you keep up with other sites out there. WP believes it is important and critical to innovate and make the site-building experience intuitive and enjoyable for its users.

The goal and hope of Gutenberg is that is creates a seamless writing, post, and page-building experience for users.

Why Should I Start Using Gutenberg?

The new Gutenberg editor is the way of the future; the way this editor allows users to interact with content will become the default. Users have more freedom and opportunities with the content and layout. Posts and content can be created faster. It is an intuitive editor.

When Do I Switch to Gutenberg and Will It Break My Site?

The release of this editor could be any day now. According to WP’s site, the release date is vaguely stated as “2018.” Eventually, you will have to make the switch to WP 5.0. When you update to 5.0, you will automatically get Gutenberg. You can avoid the switch by not updating your website, but we do not recommend it. You can also use the “classic” block editor, so you don’t need to use the Gutenberg editor, but this change is for the better.

This is a large WP update, so there is a chance your site could break. Thankfully, WP will have a plugin for you to revert to the “classic editor,” if your current theme isn’t syncing right with Gutenberg.

You should test your site now with the beta Gutenberg editor plugin. You want to make sure your site is compatible with the Gutenberg update. At Fincel Design, we are making sure our sites and our clients’ sites are compatible with Gutenberg.

Gutenberg Editor Screenshot


Will Gutenberg Change My Workflow and Business?

When you first use Gutenberg, it will be a changer, for sure. The user interface has changed and most of the plugins, widgets, and formatting controls are moved. These movable blocks are your new controls/editor. Don’t fret if you feel a little lost at first – you’ll get the hang of it.

Your current workflow in how you create and publish a post will likely change, but once you get the hang of it your productivity should increase.

Some of your plugins may become unusable because they will not be updated for the launch, but most major plugins (like Yoast) have been tested, updated, and are ready to go. There will be updates for the plugins, but it may get off to a rough start (just be aware).

The goal of this editor is that it will be easier for you to compose a blog post in WP. How will it be easier?

  • There will be blocks for paragraphs, heading, quotes, images, buttons, and more.
  • You can easily drag and drop the boxes to rearrange them however you like.
  • You can individually format each block.
  • There are default color options for the background and text

These are just some of the pros and cool features of this editor.

Your productivity will increase especially if you don’t write in HTML. Making changes and rearranging content are easy and immediately visible. All your formatting options are right in front of you. You can still paste content into the editor (content you wrote outside of the editor) and covert it to blocks. You do this by adding a “classic” block, pasting your content, and then converting to blocks.

How Do I Prepare for and Use Gutenberg?

For our Wordpress Gutenberg Tutorial we have prepared some steps to help you get ready for Gutenberg’s arrival:

Step 1
The best way you can prepare for Gutenberg’s arrival is by downloading the plugin (beta) for your website here: Gutenberg editor. We suggest testing the plugin on a staging website (not a live site) to learn the new editor. The Gutenberg editor is what most editors will be like in the future, so it makes sense to get used to it. You can

Once it’s launched and you update to WP 5.0, the classic editor will no longer be visible. However, if your plugins are not working, you may have to download WP’s Classic Editor plugin.so you can still compose a post in the classic editor while you have Gutenberg. The classic editor plugin is like a backup plan in case some of your plugins don’t work, but we suggest you use Gutenberg for as much new content as you can.

Step 2
How do you install Gutenberg onto your site? Go to Plugins. Click “Add New.” Search for “Gutenberg.” Click “Install Now.” Wait for the “Install Now” button to say “Activate.” Click “Activate.” Once you activate the plugin, your site will automatically use the Gutenberg editor when you add new posts.

Step 3
Before downloading the Gutenberg plugin, we suggest backing up your site. In case something goes wrong with the plugin, you can revert to the current version of your site.

Step 4
Create a staging (test) site. Sure, you can do it on your own (live) site, and revert to backups if there are problems, but it’s much easier to deal with problems when you don’t have to worry about getting your site up-and-running again.

Step 5
Make sure all your WP core, plugins and themes are updated regularly so there will be little to no compatibility issues. Update these items one at a time, so your site will not freeze or break. When you update, make sure to make a backup of your site, as well (just in case). First, you should update your plugins, then your themes, then the core WP version update.

Step 6
Perform a site audit. Before Gutenberg arrives, it’s smart to do an audit to ensure your site is operating at its best. The site’s audit is of your plugins, widgets, and themes.

For plugins, remove any that aren’t being used, or that are very similar to others being used. If you’ve been using Gutenberg, you probably know which plugins you need and which you can remove. Check to see how often the plugins you use are updated. If they are not updated regularly, this could be a problem with the Gutenberg update. Try and look for similar plugins that are updated frequently.

If you have a custom-made theme, this can be a problem with the Gutenberg update, especially if it has not been updated in a while. We recommend you use commercially-available themes as these will be compatible with the update.

Step 7
Play around with the plugin. Learn everything you can about the new Gutenberg update. Once the Gutenberg plugin is downloaded, go to your dashboard and create a new post. When you click “add new,” you will have the option (for now) to choose either the Classic or Gutenberg editor.

Play around with the Gutenberg editor and its features. Use built-in blocks to get started. You can even make your own block: learn how-to here: How to create Gutenberg block. Publish your new post and see how it all came out. If some things look off or is not working correctly, bugs or issues will be resolved. If things go wrong, you’re not on a live site, so don’t worry! If your site doesn’t seem compatible right now, this will change as Gutenberg rolls out and things get fixed. Remember, Gutenberg is still in development.

Don’t Panic!

If things are going wrong, deactivate all plugins except Gutenberg. Check to see if Gutenberg is conflicting with your theme. If it is, switch to the default WP theme and check to see if there is a conflict again. If there is still a problem, there’s either an issue with Gutenberg or your host. If there is not problem, activate each plugin, one at a time, to check for errors. If problems start after activating a plugin, it’s a good sign that plugin is conflicting with Gutenberg. You can either deactivate the plugin or submit a ticket to the plugin creator letting the know the plugin doesn’t work with Gutenberg on your site. Most likely, your issues will be resolved in the next round of updates to your theme, plugins, and/or Gutenberg.

The plugin is being changed weekly, so it is good to test it out. The Gutenberg developers have asked for feedback. When you test the editor, see what’s working and what’s not, and contact the WP developers. so, they can create something that is better for everyone.

It’s worth testing out the new editor and getting comfortable with it. If you aren’t prepared for the editor, your site may go down or stop working correctly for a certain amount of time. If Gutenberg is the defaulted editor and many plugins aren’t compatible, your site breaking is highly likely, but hopefully with the classic editor plugin, your site would be restored until you figured out the plugin issues.

It’s also crucial to do this WP update to keep your site protected against security risk. When you update your site, it has been publicly documented and hackers won’t go after your site.

What Features Will Be Available at Gutenberg’s Launch?

According to WP, there’s too many features to discuss, but the launch will include the post and page editor, a page template editor, and a site builder. In the current beta version, not every aspect of Gutenberg is available yet.

How Will Shortcodes Work in Gutenberg?

Shortcodes will work the same as they do now. However, instead of having to type out the code, you can use the universal inserter tray to pick a block and get a richer interface to configure and preview the block. WP recommends that people upgrade their shortcodes to blocks. Blocks will become the expected way that users insert content into WP.

How Will Custom TinyMCE Buttons Work in Gutenberg?

Custom TinyMCE buttons will still work in the “classic” block, which is the block version of the current classic editor.

Work with a Digital Marketing Company to Get Your Site Ready for the Gutenberg Update

This concludes our WordPress Gutenberg Tutorial. Change can be scary, but we promise this is worth it! Since we can’t opt out of the change, let’s face it head on! The Gutenberg editor is the way of the future, so let’s embrace it and prepare for it, so the transition won’t be so bad! By following our steps above, you shouldn’t run into too many issues once the editor is released.

This editor will allow non-developer users to create more complex layouts with more elements – this is a big deal!

As stated above, there is still many outstanding issues with the Gutenberg plugin. As we get closer to the WP 5.0 release, more features will be added, and problems will be fixed.

At Fincel Design, we are going into our clients’ sites one-by-one to make sure there will be no conversion problems once the switch to Gutenberg has been made.  We are getting themes and plugins ready to work well with Gutenberg from the start. Once the final release of Gutenberg happens, our hope is to only have minor changes across all websites to fully make the site compatible with the new editor.

Nervous about the Gutenberg update? We understand – it’s a big one! Let us help! At Fincel Design, we can help you through the transition. We will update your website to WP 5.0 (once it is released), and make sure your site is compatible to the new editor and software. We will also make the class editor available (just in case). We can also give you a tutorial on how to use Gutenberg.

Our team is prepared and ready for the challenges that Gutenberg may bring with it. We are here to help you, and we’re excited for this WP update!

We hope you enjoyed our WordPress Gutenberg Tutorial. If you need help with your website transition, we can help make the transition go smoothly and easily for you. We are a full-service digital marketing agency. We work in WP every day, and already have a good understanding of this newest update. Contact us or call 904-834-0509.