Speckyboy RSS: Tips for Converting an Existing WordPress Website to Use the Gutenberg Block Editor

Your latest Speckyboy content is here!.

Speckyboy Design Magazine

Design News, Resources & Inspiration

Tips for Converting an Existing WordPress Website to Use the Gutenberg Block Editor


By Eric Karkovack on Jun 23, 2020 07:28 am


When the Gutenberg block editor was released as part of WordPress 5.0, a number of web designers were worried about the effect it would have on existing websites. Some vowed to keep using the Classic Editor for the foreseeable future.

But the newfangled block editor has settled in nicely. Its features and usability seem to improve with every new release. And the development community has contributed a number of handy custom blocks.

For new projects, going with Gutenberg seems like a great option. But what about existing websites? What does the conversion process look like? And, most importantly, what are the risks?

While every website has its own unique quirks, there are some general things to keep in mind. Today, we’ll cover the basics of converting your website to use blocks. Let’s get started!

BUILD WORDPRESS SITES FASTER
Announcing Template Kits. Responsive WordPress Designs Built For Elementor.

First, Take Proper Precautions

If you have the Classic Editor plugin installed, making the switch to Gutenberg and the wonderful world of blocks is easy. However, it’s not recommended to do this without proper testing.

That means setting up a staging environment or local installation of your website. This will allow you to see how things work without risk of breaking a live site.

In addition to staging, it’s also worth looking at your active theme and plugins. You’ll want to do some research to ensure that they are compatible with the block editor. At the very least, it’s about making sure no major conflicts will arise from the change.

Thankfully, just about every theme or plugin that is regularly maintained by its author should be fine. However, if you have any legacy software that hasn’t seen an update in quite a while, you might have a problem on your hands. Only testing will let you know for sure.

Flipping the Switch

So, what does a WordPress page or post created in the Classic Editor look like when you switch to Gutenberg? This was an understandable concern for a lot of us. In reality, it’s not too shabby:

Content before and after switching to the block editor.

WordPress puts the existing content into what is called a “Classic” block, which is exactly like it sounds. This block recreates the experience of the Classic Editor, which will keep your content in tact unless and until you decide to covert it over to a series of blocks.

Converting is a straightforward process. Click the options button for the Classic block (it consists of three vertical dots) and choose “Convert to Blocks”. From there, Gutenberg will break your content up into individual blocks for headings, paragraphs, images and more.

Gutenberg Conver to Blocks dialog.

The conversion is fast, and works great on simple pages. But what about something more complex?

In this example, we embedded both a YouTube video and added some custom CSS to part of the content. What does Gutenberg do with it?

A YouTube video and a container with custom CSS in the Classic Editor.

The YouTube video was a piece of cake. Gutenberg converted it to a YouTube embed block, and it can easily be edited and moved around.

A YouTube video after being converted to a block.

The transition for our custom CSS wasn’t quite as smooth, at least not visually. In instances where there is custom code, the block editor will convert it over to an HTML block. It may not be pretty at first glance, but it’s actually a positive step. This saves any customizations from being lost in translation.

Custom CSS results in an HTML block.

At worst, keeping the HTML block will allow you to maintain custom code. The alternative is reworking the element as either a CSS class or maybe even a custom block.

Potential Drawbacks

The decision to go with the block editor is one that should be considered carefully – especially on an existing website. And, depending on how your website was built, there are a few potential sticking points to look out for:

Already Using a Page Builder Plugin?

It should be noted that page builder plugins and Gutenberg are completely different animals. Thus, there’s no built-in way to convert content from Elementor, Beaver Builder, etc. to the block editor.

That could mean a lot of manual labor. In addition, you might have to accept the fact that Gutenberg can’t do everything a page builder can. Some of the fancier features of your favorite page builder will likely require a custom block – or abandoning the look/functionality altogether – when converting over.

Custom Field Considerations

Custom fields have been a popular tool for customizing page templates and content types. Plugins like Advanced Custom Fields have been widely adopted because they make the process easier.

While custom fields generated through ACF still work with the block editor, their positioning within the edit screen has changed. They’re now at the bottom of the screen. That would be fine, except that ACF long allowed developers to position fields above the editor, or remove the editor entirely. That’s no longer the case.

The result is a more cluttered UI. One way around that would be to convert these custom field sets to blocks. Doing so lets you position fields within the content of a page and makes for a more seamless experience. That will take a bit more work, however.

The Learning Curve

Plenty of users have made the transition from the Classic Editor and lived to tell about it. But if you’re converting a website that your clients will update themselves, be prepared to provide some education and support.

While Gutenberg’s usability has grown by leaps and bounds, it’s still a different experience. Therefore, it’s going to take some time for your clients to adjust. This is something that needs to be discussed before making any decisions.

Introducing Your Existing Website to Gutenberg

The fear of switching to blocks was and is understandable. There’s always a risk when making a major change to your website.

However, switching from the Classic Editor to Gutenberg is a pretty straightforward line for most websites. And, it’s perfectly fine to convert only the content you want to revamp. Everything else can safely stay in a Classic block and will work just as it always has.

Of course, the use of page builders and other complex tools can muddy up the process a bit. That’s why it’s a good idea to test on a staging environment first. It’s one of the key steps in your website’s transition.

Beyond that, it’s about considering what you stand to gain by using blocks. Things like custom layouts, easier content embeds and more flexibility come to mind.

If those seem like exciting benefits, then maybe it’s time to start building with blocks.

The post Tips for Converting an Existing WordPress Website to Use the Gutenberg Block Editor appeared first on Speckyboy Design Magazine.





Recent Articles:

Making Time for Your Professional Learning Goals
Weekly News for Designers № 545
Working With Good and Bad Design Clients
How CSS Variables Can Improve Efficiency and Consistency
The Most Important Thing Your Clients Should Know About Their Website
Share
Tweet
+1
Share
Forward
Copyright © 2020 Speckyboy Design Magazine, All rights reserved.
You signed up for daily Speckyboy Design Magazine email alerts either via Feedburner or directly through our site.

Our mailing address is:
Speckyboy Design Magazine
27 Braeside Park
Inverness, Scotland IV2 7HL
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can or .

Older messages

Speckyboy RSS: Making Time for Your Professional Learning Goals

Monday, June 22, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Making Time for Your Professional Learning Goals By Eric Karkovack on Jun 22, 2020 10:31 am

Speckyboy RSS: Weekly News for Designers № 545

Friday, June 19, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 545 By Speckyboy on Jun 19, 2020 07:56 am Envato Elements How CSS

Speckyboy RSS: How CSS Variables Can Improve Efficiency and Consistency

Tuesday, June 16, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration How CSS Variables Can Improve Efficiency and Consistency By Eric Karkovack on Jun 16, 2020 08:

Speckyboy RSS: The Most Important Thing Your Clients Should Know About Their Website

Monday, June 15, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration The Most Important Thing Your Clients Should Know About Their Website By Eric Karkovack on Jun

Speckyboy RSS: Weekly News for Designers № 544

Friday, June 12, 2020

Your latest Speckyboy content is here!. Speckyboy Design Magazine Design News, Resources & Inspiration Weekly News for Designers № 544 By Speckyboy Editors on Jun 12, 2020 01:02 pm Envato Elements

You Might Also Like

Celeb Homes at the Holidays—and a Few More Things to Make You Merry

Tuesday, December 24, 2024

View in your browser | Update your preferences ADPro Holiday Cheer Whether your taste leans traditional, modern, or all-out extravagant, AD is rife with inspiration for your holiday. In the spirit of

#488: Fun And Useful Gems

Tuesday, December 24, 2024

Radio garden, Zoom backgrounds, visual history of the alphabet and fun interactive experiences. Issue #488 • Dec 24, 2024 • View in the browser Smashing Newsletter Hello Smashing Friends, As we are

Accessibility Weekly #428: Putting AI to the (Accessibility) Test

Monday, December 23, 2024

December 23, 2024 • Issue #428 View this issue online or browse the full issue archive. Hey accessibility friends! It's the time of year where news and information slows down as many people take

2024 magic moments

Sunday, December 22, 2024

Issue 225: The year from my personal lens ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Planning mode

Friday, December 20, 2024

Lessons from our first-ever annual planning sprint ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

We Co-Sign This AD100-Approved Trend

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Emboldening the Bath Marble, marble, everywhere, and every drop is chic. According to AD100 designer Jake Arnold, “material drenching”—that is,

177 / Keep calm by listening to these ambient sounds

Thursday, December 19, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Dec 2024 • Part 1 View in browser Welcome to Issue 177 Lately, I've been driving a lot of inspiration from the things I see in real life. The range

The Year in Color: Hella Jongerius, Mocha Mousse, and More

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Color Our World Since the summer, AD PRO has kept its finger on the pulse of color predictions. Overall, the vibe right now is down to earth,

🐺Get Media Features in 2025

Thursday, December 19, 2024

A BIG Wolf Craft announcement!! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Small teams

Thursday, December 19, 2024

Issue 224: Why the mentality of lean and small always wins ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏