In December 2018, WordPress released a major update to its platform, rolling out a new editing experience the called Gutenberg.
With this update comes change, and we have seen some pros and some cons to this update here at Silverback. It's still early, but overall, we certainly see some potential in the direction WordPress headed with Gutenberg.
What is Gutenberg?
Gutenberg is the new update launched in WordPress 5.0. The name probably sounds familiar, as it was named after Johannes Gutenberg, who invented the printing press more than 500 years ago.
This update is significant because it changed the face of the editor, which is not only more intuitive for those who nerd over code, but also easier for those who don’t.
How did the editor change, you ask?
The WordPress editor in the past(Classic Editor) had more of a Word Document feel. You could input your text and media files and adjust/style with the limited options WordPress gave you.
The layout options were very limited, as well. Often, people use WordPress plugins to help out with the layout, or — like we do here at Silverback — we build dynamic layout templates to give our non-technical clients some variety.
All of that work takes time, code and preparation for all the layout possibilities that can break a site’s design.
Gutenberg puts us a step closer to a more dynamic approach, where users may not need a developer to move layouts around.
Also, let’s be honest, the new editor is more aesthetically pleasing!
Pros of Gutenberg
Gutenberg changed the layout approach all by focusing on the concept of “content blocks." Content blocks allow users to insert a specific type of content that you are able to edit individually and outside the other content blocks.
Unlike the old editor, where you just put in your text/media as one big blog post, content blocks allow us to go further with the layout by separating the content in different areas of the editor.
"With blocks, you can insert, rearrange, and style multimedia content with very little technical knowledge. Instead of using custom code, you can add a block and focus on your content."
With the new WordPress editor, it is easier for developers to create dynamic content blocks. This dynamic content blocks are intuitive, offering users a better sense of what they are doing when they are adjusting content on their sites.
Have you ever heard of shortcodes? Unless you are a WordPress developer, you probably haven’t.
Shortcodes are pieces of code that developers create so that our clients can pop them into the WordPress editor (or as WordPress notes, "lets you do nifty things with very little effort").
This is what we typically did with the Classic editor. The code for a simple button would look something like this:
[cta_button href="http://www.google.com" class="blue" target="_blank"]
This is something our clients would have to adjust on their own in order to change the button. A simple character mistake can throw this off.
This process leaves a lot of room for error, and possibly more work for the average agency developer when a client comes back asking what’s wrong — this is supposed to be working!
The new editor provides a simpler approach that is more intuitive for our clients. This bleeds into our next benefit of Gutenberg, design visualization.
This is my favorite part of Gutenberg from an agency standpoint. Our clients can visually see some of the content layouts through the WordPress editor.
Instead of just seeing:
[cta_button href="http://www.google.com" class="blue" target="_blank"]
They see the following:
The developer-friendly interface and design visualization come with editing options. The button visualization example is perfect — our clients can easily customize this button.
This only a simple example; WordPress can go further, and clients can customize more content and layouts.
Here is what editing the button example above would look like:
You can also choose what kind of block you would like to add/remove/edit, and the options are endless. Developers can even create options based on their needs, the clients need, or the needs of the design.
Gutenberg minimizes distractions for users writing content. It provides a full-screen mode to remove the sidebar.
You can also use Spotlight Mode, which focuses on one block specifically.
Another awesome feature is Recent Blocks. Whatever blocks you use recently and frequently are easily accessible, so twe don’t have to go searching far and wide every time we need that same CTA button.
Cons of Gutenberg
Learning curve for our clients
As intuitive as it is, Gutenberg still requires a learning curve. Some people handle change better than others, and this is a big change from what the classic WordPress editor.
In my experience, Gutenberg took some getting used to — it can take some messing around and tweaking things to see how it works.
If an existing client is afraid of change, you can still update WordPress and add in the Classic Editor plugin. This way, your WordPress is up to date without changing the editor.
For new clients, or legacy clients willing to work with Gutenberg, make a guide document specific to their WordPress admin.
Plugin Compatibility issues
It took some ramping up for plugins to catch up on the new editor. Some plugins are still not up-to-date and will give us developers headaches when they have not tested and updated their code to Gutenberg, breaking some of the sites we maintain.
Out of all the WordPress updates, this is probably going to be one that causes the most work for developers. It is best to ensure the current and new plugins are compatible with the newest WordPress version. Testing site functions once switching over to Gutenberg is vital.
Inability to break a complex layout outside of editor
We can think of the new WordPress Editor as one big content block that contains smaller, editable content blocks. The content blocks you see are wrapped around code, which usually displays a consistent design which aligns your content blocks as whole.
But what if you need to break out of that consistent design?
For example: all of my content block are wrapped in the WordPress editor. This wrapper or container makes sure that it is displayed in the middle of the page and both the left and right parts of the content blocks end at the same point, giving some space from the end of the browser window.
If I wanted to have a content block that did not leave that space from its end point to the end of the browser window it will need some finicky code to break the layout. This can cause for some finicky code that may not be easy to maintain, a problem when multiple developers are working on one site.
Although there are some cons to this new editor, we see how it can be improved. WordPress has an awesome community to help us through the way.
We can see some of these cons being addressed and even some potential in the future for the pros. Either way, we are excited to make an even better experience for our clients, and this is a step in the right direction.
Talk About Your Development Needs with Silverback Strategies.
From new websites to blog build-outs to SEO support, Silverback Strategies provides the web development capabilities a growth-focused business needs. Contact us today to learn how Silverback can help power your digital marketing program.