WordPress 5.0 Release

Computer with WordPress 5 update

WordPress 5.0 Release

“A new version of WordPress is Available. Update now.” – It’s either music to your ears or the scariest thing you’ve heard this month.

WordPress just released its biggest update in years. WordPress 5.0, also known as Bebo, hit screens on December 6, 2018. I have been building sites in WordPress for about a decade (WordPress version 3.13 was my first!), and I can say with complete confidence that this is the most drastic change I’ve seen. But don’t worry kids! I am here to explain what’s new, what to love, and what to fear.

What’s the Deal with WordPress 5.0?

Blocks. All the blocks. (Insert J-Lo joke here). WordPress has replaced the default Classic Editor with building blocks, also known as the Gutenberg Editor. This building-block editor is a bit similar to competitors Wix or Squarespace, or builder tools such as Visual Composer and GoodLayers. WordPress was born as a simple blog editor, and it has always felt like a simple blog editor. Despite all the changes over the years, one thing has remained relatively steadfast – the Classic Editor.

 The Classic Editor

The Classic Editor

With this change, it feels like WordPress has finally embraced its identity as a website tool rather than just a blogging tool. Blocks have been a long time coming.

Introducing: Blocks

Blocks are designed to help non-developers create a modern website without knowing how to write a line of code. Over time, non-developers will be able to create increasingly more complex layouts. With the new Gutenberg Editor, users can choose from the following default blocks:

  • Paragraph
  • Image
  • Heading
  • Gallery
  • List
  • Quote
  • Audio
  • Cover
  • File
  • Video
  • Code
  • Custom HTML
  • Preformatted
  • Pullquote
  • Table
  • Verse
  • Columns
  • Button
  • Page Break
  • Separator
  • Spacer
  • Widgets
  • Embeds

Each element is treated as a separate entity. In fact, within a “paragraph” block, hitting “enter” will create a new block. This makes it easy to drag, rearrange, and resize blocks without getting messy. Theoretically, if you stay within the confines of the editor your site should be fully responsive out-of-the-box. Blocks are built in a grid system (obviously), which will automatically rearrange itself to fit different device sizes.

Still not sure what I’m talking about? Check out this video from WordPress. It’s flashy, but explains the concept well:

Since WordPress 5.0’s release, several websites have published great tutorials. I love this one by codeinwp, which includes useful screenshots and animated gifs to demonstrate Gutenberg’s powerful options

The New 2019 Theme

Each year, WordPress also releases a default theme. The Twenty Nineteen theme celebrates the new Gutenberg Editor. It’s very clean and simple, but it takes a bit of work to wrangle into something attractive. The biggest change I noticed is that Twenty Nineteen does not have a widgets sidebar by default. Previous versions lacked this as well, but I found it particularly noticeable in Twenty Nineteen, since the Gutenberg “columns” feature is not very intuitive (more on that later). To me, the result is a “cramped” site with odd dimensions. The only default widget drawer is “Footer”, which means the out-of-the-box view of Twenty Nineteen looks like this:

Default view of Twenty Nineteen

Default view of Twenty Nineteen

In the words of Cathy on a Monday – ACK! While it’s easy enough to modify the page using the Editor and Customizer, it feels like kind of a discouraging (see: ugly) place to start.

What’s good about WordPress 5.0?

Despite some pitfalls, I am a big fan of the WordPress 5.0 release, conceptually. As I said, I think it’s been a long-time coming, and I think it positions WordPress as an editor-of-the-future. There’s no way they could continue to compete with easy-to-use website builder platforms without making this update. CMS’s (content management systems) are in a race to the bottom – a battle for simplicity. The simpler platforms are going to win this market long-term. Here’s what I like:

Intuitive interface:
Blocks are much more intuitive than the Classic Editor, which has always given me “blank piece of paper” levels of anxiety. Use up and down arrows or a drag and drop “grabber” to move elements around the page. Add new blocks with a plus button at the top of the page or after any existing block. It’s simple, and it inspires me to be more creative.

Gutenberg Editor

Gutenberg Editor

Native columns
For the first time, WordPress offers a built-in columns tool. Use the “columns” block to add a grid to your page. Columns will resize responsively for different screen sizes. Now, I don’t actually like how WordPress executed this feature (more on this later), but I appreciate that they at least have a solution for this, finally.

Columns in the Gutenberg Editor

Columns in the Gutenberg Editor

Save blocks
Saving templates of “reusable blocks” will save you time and ensure a more consistent site. Create a design element once, save it, and re-use it throughout your site.

Reusable Blocks option within Gutenberg Editor

Reusable Blocks option within Gutenberg Editor

Readability
WordPress 5.0 warns you if you use a color combination that might be hard for users to read. Awesome!

Difficult to read message

Difficult to read message

Change block colors
Change the background color or text color of blocks with a simple menu. This functionality is perfect for users who don’t want to mess with CSS.

Embed options
The new Gutenberg Editor comes pre-installed with dozens of embed options from popular sites. For example, embed a YouTube video by adding a YouTube block and entering the appropriate URL.

Gutenberg Editor embeds

Gutenberg Editor embeds

Widgets no longer for sidebars only
It’s always been challenging to add widgets to pages and posts in WordPress. In the new release, compatible widgets are available as “blocks”, which can be added directly to each page. As time goes on, I believe more and more plugin authors will create block-compatible widgets.

Block-compatible widgets

Block-compatible widgets

Keyboard Shortcuts
I am a sucker for keyboard shortcuts. With Gutenberg Editor, you can simply type a slash “/” and the name of a block to add it to your page. For example, /gallery will add a gallery. Slack devotees rejoice! You can really fly through the development of a page.

Source: CodeinWP WordPress guide – See keyboard shortcuts in action

What’s not so great about WordPress 5.0

I have a generally positive view of WordPress 5.0 because I think it paves the way for ever-simpler CMS’s. However, not everyone feels as sunny about the Gutenberg Editor. There are many negative reviews, particularly from developers. As a rule, developers and other folks using advanced features like custom post types and advanced taxonomies do not find the block editor useful. At best, it gets in the way, at worst, it breaks functionality. Experts that have a background in development will likely find Gutenberg annoying to deal with, precisely because it was built for laymen. Here’s what I don’t like:

Gutenberg can’t compare to other visual builders
While I love the idea of blocks, I really don’t think that WordPress’s release compares to existing visual builders like Beaver Builder or GoodLayers. These visual builders really put WordPress’s attempt to shame. For example, GoodLayers offers the ability to adjust container spacing and padding, offers hundreds more block options, and has an extremely intuitive “columns” feature. Gutenberg was designed for barebones, pure-simplicity. This simplicity can feel too limiting in comparison to other builders. Sure, the learning curve is steeper for something like Beaver Builder, but the end result is much more custom and way more attractive.

Page Builder tool within GoodLayers features intuitive columns and wrappers

The Page Builder tool within GoodLayers features intuitive columns and wrappers

Inability to save color settings
While it’s very easy to change the color of text or backgrounds in the Gutenberg Editor, there is no default ability to save a set of theme colors. This is crazy to me! It doesn’t even save your most recently used color. Every time I want to use Lucid Agency blue (#294ba3), I need to re-enter the hex.

Not truly drag and drop
Builders like Beaver Builder are truly drag and drop – meaning you can click anywhere on a block to drag it elsewhere. In Gutenberg, you must use the up and down arrows to re-arrange blocks, or you must hover on the left-side of a block and click on the “move” tool to grab your block. This isn’t a tremendous inconvenience, but it feels a bit clunky compared to others. You also can’t drag blocks within other blocks.

Use the up and down arrows or the move tool to rearrange blocks

Use the up and down arrows or the move tool to rearrange blocks

Theme breakage
WordPress 5.0 might break your site. While most sites should be fine with the update, some of you may suffer. I updated a brand-new site with a modern theme to WordPress 5.0. At first glance, everything looked fine. However, I soon realized that I was unable to save updates to any of my existing content in the new editor, and had to revert to the Classic Editor. I heard similar anecdotes from coworkers and clients. Updater beware.

Columns
This is the biggest miss for me. Whereas other builder tools like Beaver Builder and Visual Composer feature intuitive column functionality, Gutenberg’s columns block (located under “layout elements) is a mess. Look at this!

Columns nested within columns

Columns nested within columns

You can’t drag to resize columns. It is difficult to move columns in relation to one another. I can’t seem to figure out how to add more than two columns, and I end up with columns nested inside columns instead. It’s column Inception! The whole idea of using “blocks” is useless if I have to arrange my page in one single column. I really hope WordPress has plans to improve the functionality here.

Should I Update to WordPress 5.0?

Whether you like it or not, WordPress 5.0 and Gutenberg Editor are here to stay. Should you update your existing sites? Yes . . . Carefully.

Our recommendations:

  • Turn off any auto-updates for WordPress.
  • Wait a bit – don’t update yet. You may want to wait until WordPress works out any initial kinks. You may want to wait for 5.0.1 or 5.1 before updating.
  • If you’re using a pre-built theme, check your theme’s logs and support forum to see if other users have reported issues updating to WordPress 5.0 update before pulling the trigger.
  • Check documentation on each of your plugins as well. Will they support Gutenberg Editor?
  • Backup your site before updating. UpdraftPlus is a reliable, free choice.
  • Always update to a dev environment first.
  • See if switching back to Classic has fixed any issues you may have encountered
  • WordPress will continue to release new versions to patch bugs and security holes. If you are using a pre-built theme, the theme authors will likely release updates as well, to bring the theme into compliance with the new WordPress version.
  • Turn auto-updates back on if everything goes smoothly.
  • If you encounter any issues, don’t roll back your site. Instead, try installing the Classic Editor plugin, then go to Settings/Writing Settings and choose “Classic Editor” as your default editor. Choose the option to NOT allow users to switch editors. WordPress will support the Classic Editor through 2021.
Options to switch back to Classic Editor

Options to switch back to Classic Editor

 

Lucid Agency
[email protected]
No Comments

Sorry, the comment form is closed at this time.