How to Recover WordPress Block in Gutenberg

ABOUT THE AUTHOR

I’m the SEO specialist at Webcodebuilder and ZEMEZ, companies that create templates powered by Gutenberg WordPress editor and Elementor page builder . We also have ZeGuten multipurpose plugin, which expands Gutenberg's possibilities.

How to Use WordPress Customizer and Reusable Blocks
Prev post
  • Feb 19, 2020
  • 2 min read
  • 5,458

How to Recover WordPress Block in Gutenberg

From today’s quick and simple tutorial we will figure out how to recover WordPress broken block in the Gutenberg editor. Although the Gutenberg editor is native and inbuilt since WordPress 5.0, which assumes that there must not be bugs, some situations still may cause trouble.

The Reasons to Recover WordPress Block

Sometimes blocks in Gutenberg may break because of a few reasons. Among them are:

  • tried to edit your block as HTML and then came back to the visual editor;
  • made a mistake while editing the block in HTML and came back to the visual editor;
  • opened WP Admin, then Calypso and then again WP Admin;
  • some plugins that filter or edit any content of your page on save which introduces code that isn’t part of the block.

Coming back to the problem. In the Gutenberg editor area will appear the “This block contains unexpected or invalid content” text.

recover block

As you can see, the Gutenberg editor recommends you two ways to recover WordPress block. However, each one of them may not actually get you out of this trouble.

  • The Resolve button will lead you to the popup window, that offers you to choose whether to convert your content to Blocks or to HTML. Take a look at the code after conversion and you’ll see that although you avoid a mistake, the code isn’t actually correct.
  • When you click on the Convert to HTML button, the Gutenberg editor will simply lead you to the code editor, where you have the ability to find out the mistake and fix it.
convert to HTML

However, the most recent Gutenberg version provides you with a hidden ultra-comfortable tool. Find the three-dotted icon, like it is shown on the screenshot, and choose the “Attempt Block Recovery” text. This small step will solve your problem.

convert to classic editor

We hope you liked our simple and quick tutorial on how to recover a broken block in Gutenberg. Subscribe to our newsletter and stay in touch for more useful tutorials and instructions!

5
Appreciate
How to add About block in Gutenberg
Next post
How to Use WordPress Customizer and Reusable Blocks
Prev post
How to add About block in Gutenberg
Next post

Get Gutenix Subscription

Create unlimited Gutenberg, Brizy and Elementor websites with dozens of templates, premium blocks and a lightweight theme — all in one toolkit!

Meet Gutenix, the devoted team of developers that stands behind many projects created with Elementor & Gutenberg. We're inspired by WordPress, and are always looking for an opportunity to make WordPress easier for everyone.
Copyright © 2024 Gutenix. All Rights Reserved.