How to Recover All Broken Blocks In One Command in WordPress

How to Recover All Broken Blocks In One Command in WordPress

Last Updated on June 27, 2022

If you have a lot of Block Errors in Gutenberg, here’s a better way of recovering all your broken blocks in a single swoop.

A broken block in Gutenberg
This is what a broken block looks like

In Gutenberg, when you have a broken block, the way to fix it is to click the button that says “Attempt Block Recovery”.

Easy. Problem solved.

But how about when you encounter 10 broken blocks, or maybe 50 or 100 broken blocks? Clicking on every single “Attempt Block Recovery” button would be quite tedious.

Unfortunately, broken blocks sometimes happens since Gutenberg is still evolving rapidly and Gutenberg plugins (like ours) rapidly evolve with it.

Our solution will help you recover all blocks in a single command!

How to recover all broken blocks easily in Gutenberg

The way to recover all broken blocks at once involves pasting some code into your browser’s developer console. If you find it intimidating, don’t worry, we’ll guide you.

Here’s how to recover all broken blocks at once:

  1. While logged into your WordPress site, edit the post that has the broken blocks.
  2. Press CTRL + SHIFT + J on Windows or CMD + OPTION + J on Mac to open your browser’s developer console
  3. Copy and paste the entire code below into your developer console then press ENTER:

After running the code above (it may take a second or two for the recoveries to work), all your blocks should be recovered. It’s as if you clicked every single “Attempt Block Recovery” button. You’ll find that even broken blocks inside reusable blocks will be fixed too.

The code doesn’t save your page, so if all looks well, be sure to update your post.

The code above is quite long, and we left it readable here to be transparent and so that you’ll know that the code above will not do anything funny when you execute it.

If you’re wondering, the code above comes from Stackable’s automatic block recovery code.

Leave a comment down below if the code worked!

8 thoughts on “How to Recover All Broken Blocks In One Command in WordPress

  1. Thanks!

    Are there situations where we wouldn’t want to run this code and instead do them individually? Or asked in another way, why doesn’t WP just automatically fix them if it’s this easy?

    1. You would probably want to fix blocks individually if after recovering a block, some would look broken. When that happens, then it might be better to leave the block broken (remove it and redo it). It’s always a good idea to review the errors individually, although it might be a good idea for there be a native way to do this in Gutenberg as an option.

    1. Hi Joseph, there should be an option from your browser’s toolbar to open the JavaScript console. In my Mac’s Chrome, there’s an option View > Developer > JavaScript Console, you should have something similar. Then once that’s open, simply paste it in the bottommost blank area of the developer console and press ‘Enter.’ This will automatically recover all broken blocks displaying the warning ‘This block contains unexpected or invalid content.’ If you have any questions or need further assistance, feel free to ask!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.