Tutorials

Help! I updated to the new WordPress editor and now everything looks different!

In the previous few weeks, several individuals have emailed me in numerous levels of panic about the new look of their WordPress admin area. That they had updated to WordPress 5+, which options the brand new Block Editor AKA Gutenberg, and have been flummoxed by the new modifications.

The new editor transforms the publish modifying display from this:

WordPress Classic Editor

To this:

WordPress Block Editor - Gutenberg

In the event you’re not anticipating it, or for those who’ve discovered to do sure tasks on your website a selected method, this might be really complicated and cease you in your tracks.

The introduction of the new editor was a big and impactful WordPress replace. Many plugins and themes had to update their code to ensure seamless compatibility. However in fact, not all of them did this in time, or in any respect, subsequently some individuals are encountering errors due to incompatibilities.

This is just one of many causes that you need to be making an attempt out all major updates on a check website first. You’ll be able to create your personal check website  or you will get internet hosting via a premium managed WordPress provider  that gives a staging area for you.

What occurs to my content?

Usually, nothing dramatic 🙂

In case you are updating a website with present content material to WordPress 5.zero or later, on each publish/web page, that content material can be converted to a Basic Editor block:

This should be sure that your content material shows appropriately in your website. However there are limitations to this, like the reality you’ll be able to’t insert new pictures (pre-existing ones will still be there) into a Basic Editor block (I know, I know, it’s a bit crazy).

There’s the choice to Convert to Blocks.

This can work nicely in lots of instances, but for those who’ve executed something customized with the code in the editor, chances are you’ll get some sudden behaviour. For instances like this the place you want to edit the content that existed pre-Gutenberg, the Basic Editor plugin may be the safest guess.

What to do if one thing is damaged

In case you’re seeing error messages, or things aren’t functioning appropriately in the admin space of your website, in the majority of instances, the difficulty isn’t with WordPress itself, it’s with plugins or themes being incompatible. A bit of bit of troubleshooting can get you a great distance.

First you’ll want to work out if it’s associated to your theme, or to one among your plugins.

Verify your plugins

That is how you can check if the drawback is plugin-related:

  • Deactivate all plugins
    • Has the problem resolved?
    • If no, it’s not plugin-related, so you’ll be able to reactivate them.
    • If sure, it’s brought on by considered one of your plugins, continue to the next step.
  • Flip your plugins again on one-by-one till the concern reappears – then you realize it’s brought on by the most just lately activated one.
    • Is an replace obtainable for that plugin?
    • If sure, update it!
    • If no, contact the plugin developer (nicely, please!) and ask about the status of their compatibility.

Examine your theme

Check if the drawback is said to your theme by switching to a default WordPress theme, that’s one in every of the ones beginning with Twenty something (Twenty Nineteen and so on).

If the difficulty is theme-related, first be certain that your theme is up-to-date. Once updated, if there’s still a problem, contact the developer.

Discover the errors

To get additional information about the exact problem, if there’s not an apparent error on the display, go to your PHP logs and verify for PHP errors. This will present beneficial information should you want to contact a theme or plugin developer.

Bypass the points

If all else fails, in many instances chances are you’ll give you the chance to bypass the compatibility issues by putting in the Basic Editor plugin.

Further troubleshooting steps

The WordPress.org group posted an incredible listing of troubleshooting steps you’ll be able to take.

A last resort might be to un-do the replace and return to WordPress four.9.9. You can do that fairly simply through the use of the WP Downgrade plugin. Backup your website earlier than doing that 🙂

Some widespread issues

Can’t publish or update posts

WordPress 5 - Updating failed

In case you find which you can’t save drafts or update posts after updating to WordPress 5+, it might be as a result of the REST API has been disabled on your website. Some safety plugins have settings for this, however the new editor relies on it.

The simplest method to see if this is the situation is to install the Health Verify plugin. This can be a plugin from the WordPress.org staff to help with troubleshooting problems.

After activating, go to Dashboard > Health Verify > REST API availability

For those who see any sort of error here, you will need to resolve it:

Health Check - REST API availability

WooCommerce Orders

There was an issue the place orders were not displaying appropriately, using WordPress 5.zero.2 + and WooCommerce 3.5.2

WooCommerce - No orders found - WordPress 5

WooCommerce fastened it of their next replace, so when you’ve got this drawback merely replace to WooCommerce three.5.three or later.

Not seeing the new editor

After updating to 5+, the new editor might be out there by default for posts and pages. But some themes and plugins create custom submit varieties as properly – portfolios, sliders and so on. For such a customized content material, the Block editor has to be specifically enabled in the code. The developer might have decided not to help Gutenberg on this method. It is best to contact the theme developer for additional information, or change to a Gutenberg enabled theme.

Not seeing custom taxonomies

For customized taxonomies to present up in the new editor, they’ve to be obtainable to the REST API. Normally, it’s a easy change. In the code that registers your taxonomy, examine that show in rest is about to true, as an alternative of false:

How to do widespread tasks in the new editor

Block Editor Fundamentals
The very first thing to understand is which you can still do everything you used to do in the new editor, it’s just that everything is now a block as an alternative of an icon on your toolbar.

Scale back cognitive overload

Since everything is a block, by default there’s a toolbar that may show up anytime you could have clicked on a block which I discover notably disruptive. So my first tip for studying to love Gutenberg is to activate the Prime Toolbar choice. Click on the 3 dots at the prime proper of the display and select Prime Toolbar. This fixes the toolbar to the prime of the display which feels far more manageable.

Everything being a block can make it a bit of laborious to do some easy issues, like insert a learn extra hyperlink, as a result of you might have to find the block first. You possibly can alleviate this a bit of through the use of the slash command. Typing the “/” key’s a shortcut to pulling up an inventory of blocks. Even when the one you want isn’t instantly seen, start typing the identify of it to find it.

Edit the HTML

In the basic editor, there are 2 tabs: Visual and Textual content

In the block editor, you’ll be able to nonetheless access the HTML but there are two alternative ways to do it.

1.  Per block
For any given block, click the 3 dots and then select Edit as HTML

Text View

2. For the entire publish.

Click on the three dots at the prime proper of the display and choose Code Editor.

Gutenberg - code editor

What’s a bit totally different in the block editor code is that you simply’ll see the HTML feedback designating each block. Don’t disturb these until you understand what you’re doing 😉

Under you possibly can see how the 2 blocks appear as code:

Add a “read more” link

There’s a block for that now. It’s referred to as “More” and is discovered beneath Format Parts.

Edit permalink

There are two locations you are able to do this now.
1. By clicking on the title – the permalink subject will pop-up above.
2. In the Doc sidebar, there’s a Permalink panel

1. Click on the title
2. Use the Permalink panel

Page attributes, categories, tags and so forth

All the “meta” information about your posts and pages is now present in the proper hand column in the Document tab. Click the arrow to broaden/collapse every panel:

WordPress 5 - document sidebar

Display choices

This is the place you would disguise/present numerous bins on the display.
Now it’s been moved to an Choices menu discovered underneath the three dots at the prime proper:

WordPress 5 - Screen Options

Adding pictures and galleries

Along with everything else, photographs are now blocks! For extra detailed details about working with photographs and galleries in the new editor, please see this devoted guide.

Including hyperlinks to photographs

WordPress block editor- image link settings

Previously certainly one of the ways you’d add links to photographs is through the use of the proper hand column whenever you uploaded or selected an image from the media library, but that choice is not there. Now you insert the picture, click on the picture to highlight the block, then use the Block settings on the right aspect.

A number of new, cool things you can do

Columns

Sure you’ll be able to create actual columns in the new editor without a further plugin. It’s not good, however a terrific improvement. Learn extra about that here.

New image-related blocks

There’s a canopy block that permits you to place textual content over a background image, a media + textual content block and more. Read more about those here.

Phrase rely and outline

There’s now an “info” button which exhibits you some useful particulars about your content corresponding to phrase rely and doc construction:

content info

Reusable blocks

If you find yourself copying and pasting the similar content or formatting into multiple posts, resuable blocks will save the day. Create a block as soon as, reserve it as reusable, then use it it in any publish/web page you want. Take a look at this guide for extra details.

Further text formatting

Gutenberg comes with extra methods to make your website appear to be a ransom word ;). Please use the following features with warning. To entry them merely click on on any textual content block in your web page to highlight it and the Block choices panel on the right can be visible.

Drop Cap

A drop cap simply makes the very first letter in a paragraph bigger. This can be helpful for a “magazine” type look to your posts.

WordPress block editor - drop cap

Text measurement and background shade

In prior variations many individuals incorrectly used the headings to change the measurement of their textual content. This isn’t advisable since the headings have a selected semantic use – utilizing them randomly to change the measurement of text isn’t applicable. So the block editor provides you a simple means to change the measurement with out resorting to a heading.

Moreover you possibly can now easily set a background colour in your blocks. Nevertheless you might simply make your website illegible with this feature, so in the event you make some dangerous decisions, you’ll see a warning – please heed it!

Block Editor - text and color settings

Whenever you first update to the new WordPress you will in all probability have some culture shock and your knee-jerk reaction could also be to install Basic Editor as fast as potential. However I encourage you to spend some time with the new block editor. When you get over the shock, you’ll in all probability prefer it simply positive 🙂