WordPress 5.0 with Gutenberg
Bookmark! This post will be continually updated as Gutenberg and WordPress 5.0.X continues to roll out.
With the introduction of WordPress 5.0, Gutenberg, the new block editor is now introduced into the WordPress core. Check out my article: How to Update WordPress.
As with any major release, expect updates (5.01, 5.1, 5.1.1, 5.2, etc.) will roll-out as bugs are identified and corrections are made.
WordPress' Gutenberg is named after John Gutenberg who in 1438 began experimenting with printing which led to the development of movable type (printing press) in 1450.
Nothing is so painful to the human mind as a great and sudden change.
~ Mary Wollstonecraft Shelley, Frankenstein
Gutenberg: The Block Editor Experience
On November 29th, Matt Mullenweg, the founding developer of WordPress, posted WordPress 5.0: A Gutenberg FAQ (interesting to read the comments as well).
My POV
Now that Gutenberg has bee released in the wild, I keep getting asked what am I doing to do for my sites? It depends on the site.
This site is running the latest version of WordPress at all times -- now with Gutenberg. My two email etiquette sites (Business Email Etiquette and [email protected]), are the latest WordPress version and sporting the Classic Editor.
For my email etiquette sites, I write my posts off-the-cuff. I do not need formatting and do not use images. So for those sites I really do not want to get into all the extra blocks which are primarily for formatting. If I need a little HTML formatting, I do that as I type for headlines, bolding or bulleted lists.
UPDATE 06.27.19: After getting used to using Gutenberg, while still a bit frustrating I now use Gutenberg on all my sites. Gutenberg is continually improving which is good, and I found that switching between the two was becoming a pain. Much easier to have the same interface on all my sites.
So what about Gutenberg?
Think blocks. Like in building blocks. Each part of your post -- a paragraph, a headline, a bulleted list, an image -- is an individual stand-alone block.
While I am using Gutenberg here, and I do understand why WordPress is going in that direction, I know my clients may not want to deal with the challenge. There is a learning curve to get used to what is where and get into the "block" mentality that we didn't have to have before.
Thank goodness for the Classic Editor plugin.
WordPress wants to compete with all the "builder" platforms, plugins and applications that allow formatting without having to know any code. (I thought WordPress already did that with the "Kitchen Sink" editor toolbar but I digress.)
WordPress as it is now provides a choice. Use the Visual Editor and the Kitchen sink or use the Text tab and just write away and format as you go -- if at all. That choice now no longer available. Now if you go to the "code editor" you have to also weed through all the Gutenberg generated code.
Better or Just Different?
Probably better over the long haul. I can see the potential and Gutenberg already has me thinking about creating my own custom blocks. With that said, based on how I do things now, Gutenberg seemed to make things more difficult rather than easier.
This could be because I write -- a lot. I like to start a new post or page and just start writing. I insert images where necessary, hit enter twice to start a new paragraph and manually type HTML H2 and H3 tags when I add a sub heading or want to include bulleted lists. Easy. I didn't have to think about structure or a block and the settings that go with each. I would just write.
Now, with Gutenberg, when I hit enter twice -- an automatic new block is created. Add an image -- that's an image block.
You can see by the above screenshot top/left that my 362 word test post already has 14 blocks. You'll see top left all the post info and structure. The plus sign to add a new block and the undo/redo arrows. I do like the undo/redo! Top right there is the info you are used to seeing in the right sidebar when creating a post -- so not much of a change there.
Plugins and Meta Boxes
Yoast SEO as well as many other plugins now include integration of their plugin into Gutenberg. You'll notice the familiar Yoast "Y" now is located top right on the above screenshot. Yoast used to be located in meta boxes below the content editor. Other plugins that did the same are no where to be found on my test site. This required switching back to the "Classic" to access those settings. I'm sure that will be resolved with time.
I wonder how that to bar space will be used as other plugins do the same? As more plugins integrate with Gutenberg you'll see plugins either adding icons in that top bar or a section in the right sidebar. Ninja Forms is now in the right sidebar -- that used to be in above the editor. The sidebar tabs work like widgets do now, you click on them and they open displaying the options available to you.
So we are all going to have to get used to what will be where as time goes on.
Think Blocks
If I want to enter a sub-heading, I have to take the steps to create a new heading block.
The options for each block then display in the right sidebar as well. In this case for the Headline I was working on.
With Gutenberg instead of just writing, you'll now have to think about structure not just the words you are typing. You'll have to stop writing to click options and configure each block (paragraph, image, headline, quote, etc.). Built-in are a bunch of blocks for you to chose from and click on. You can also create your own blocks and save as a "reusable block" that is added to your choices. Love the reusable block feature!
Will My Site Break with Gutenberg?
Probably not if you are on a Premium Theme. Gutenberg is about editing and creating content not how WordPress outputs content. Your theme will still handle that. Theme developers and plugin creators have been working on integrating Gutenberg into their themes and plugins for some time now. If you are not sure about your theme, check now to be sure. If you do not get a straight answer, time to move to a premium theme that keeps up with technology!
Shortcodes for example, while they will still work, it is recommended they be changed to blocks. So if you have a bunch of shortcodes on your site -- that is something you'll have to think about and eventually address. Gutenberg has you covered with a "Convert to Blocks" option for any block that contains a shortcode. This tool will convert the content and the shortcode to individual blocks for you.
Using my Reach Out form paste as an example which starts with has two shortcodes -- below you'll see the before and after in Gutenberg.
Before Gutenburg...
After converting to blocks...
Once you have 5.0.X you can then open any page or post to edit and start becoming familiar with how Gutenberg works. You can use the "Convert to Blocks" feature in the More Info tab. Using this option will convert all the elements in your post/page into individual blocks for you to tweak and manage as you desire.
The above also applies to any shortcodes you have in place and will convert them to shortcode blocks.
If you do not have the option of having a test site or staging environment, you need to backup your site thoroughly before updating to 5.0. Actually you should do a thorough backup before doing any updates.
IMPORTANT: Running WooCommerce?
Before updating to WordPress 5.0, make sure you're running WooCommerce 3.5.1+. From the horse's mouth:
When WordPress 5.0 is released this month – currently planned for November 19 – your site needs to be running WooCommerce 3.5.1+ to avoid breaking changes.
My Takeaways
Thoughts off the top of my head: (and updated 6.27.19)
My dashboard is now noticeably slower and I have keyboard lag -- very annoying.This has been addressed in subsequent Gutenberg releases!- Gutenberg is intuitive in some ways and not in others and can be frustrating at times. It is a new way of creating content for those who do not rely on block editors.
For me, Gutenberg adds extra steps and complicates things unnecessarily. I'm still getting used to it.I'm used to it.- I do not think it is as user-friendly for WordPress newbies as some claim.
- Most of the blocks make sense, others seem clunky.
- I do not have the ability to do all the things I used to in the new "code editor" that I used to do in the TEXT tab.
I'll have to get used to doing things differently.I have!
Take the time to watch the State of the Word presentation from Matt Mullenweg below. Makes a lot of sense, provides perspective, a little history and gives a peak in to the future of WordPress too.
Life’s a forge! Yes, and hammer and anvil, too! You’ll be roasted, smelted, and pounded, and you’ll scarce know what’s happening to you. But stand boldly to it! Metal’s worthless till it’s shaped and tempered! More labor than luck. Face the pounding, don’t fear the proving; and you’ll stand well against any hammer and anvil.
~ Lloyd Alexander, Taran Wanderer
There are pros and cons to Gutenberg and how it is being introduced and implemented. I've been following the process for some time, including the disagreements and controversy. And in most cases, I understand both sides. I have no doubt that over time with community involvement and tweaks, Gutenberg will be the future of WordPress.
If you are unsure of your if you website is compatible or you do not have a staging site available to test first, go ahead and install the Classic Editor plugin now.
Gutenberg Resources
Here are a just a few so you can get informed and prepared:
- WordPress' Gutenberg Page
- The Gutenberg Handbook
- Gutenberg FAQ
- The Complete Anatomy of the Gutenberg WordPress Editor
- Gutenberg Phase 2
Maybe because I've be at this for so long I'm used to the fact that technology doesn't sit still. Change is inevitable. Like it or not.
Change before you have to. ~Jack Welch
Need Gutenberg Help?
If you are unsure what to do, when to do it or even what your options are, reach out -- I'm here to help!
At your service,