Block Error: Unexpected or Invalid Content

Error overview

If you’re encountering this error message in the Block Editor, it typically means that there is a problem with the content you’re trying to insert or edit within a block. Usually, the error is displayed when the affected block contains content that has a formatting problem, this could happen because of a number of reasons explained in this article. 

More Options

As with other blocks, the affected blocks also include the More options menu in the block toolbar. You can access these options by clicking on the ellipses (three dots) in the block toolbar as shown below. The Copy Block option allows you to copy the block and its content to a clipboard, you can paste this content elsewhere in the editor or even on a different post/page.

Read about the More Options settings and how to make use of them

Possible reasons a block displays an error

The option to edit the block using HTML 

A block’s toolbar provides an option to edit your block’s HTML code.

In this case, the error can be displayed when there is a syntax error. For example, adding two <p> opening tags before a closing tag </p> on a Paragraph block or using the wrong syntax for adding a link as shown below. 

Unexpected HTML formatting

This can occur when the block editor detects a mismatch between the expected markup and the actual HTML content within a block. This error typically happens when HTML is manually added or copied into a block, and the block editor doesn’t recognize it as valid content for that specific block type. 

For example, adding Javascript to a block that isn’t the Custom HTML Block or in the case shown below, adding inline CSS to a paragraph block. Style attributes aren’t expected by the block so it will return an error. 

Plugin or Theme conflict

It’s possible that a theme or plugin is interfering with the editor. Maybe your site isn’t up-to-date, you didn’t configure some important settings properly or there is some code conflicting with the blocks on the page. However, whatever the reason may be, you will need to do some troubleshooting to solve this kind of problem. 

Ways to solve the error

The block will give you several options to fix the error: Attempt Block Recovery, and an ellipsis (three-dot) button containing the options Resolve, Convert to HTML, and Convert to Classic Block.

You will have to be mindful of why you are receiving the error, in some cases these options will not be helpful for example when you have the wrong Syntax or you try to add Javascript or PHP code. 

Attempt Block Recovery

Attempt Block Recovery button will restore the block as it was before the error appeared. This option will automatically remove the custom code and revert the block back to its previous safe state. 

Resolve

When you click on the ellipsis (three dots) button you will see more options, the first option is Resolve. When you choose to Resolve the block error, you will be provided with two options each with its own possible outcome.

Convert to HTML

On the left side, you have the option to convert the block to a Custom HTML Block, this will convert the invalid content directly into an HTML block and keep any HTML customization made. You can read more about the Custom HTML block in this guide.

Convert to Block

On the right side, you can convert the HTML code to Blocks,  changes that will be made when that is done will be clearly displayed.

In the example below, converting the block to a Custom HTML block will keep the inline CSS added to change the font color to pink which would normally be stripped off by the Paragraph block. 

Convert to HTML

The third option is to convert to a Custom HTML block, this is the same function as the Convert to HTML option which is part of the Resolve option above.

Convert to Classic Block

You can convert the invalid content into a Classic Block,  this block contains the same options from the Classic Editor. The changes you would have made will be kept similar to converting the Custom HMTL block. You can go over our Classic Editor guide for an explanation of each of the options shown for the Classic Block.