{"id":16357504,"date":"2023-06-27T13:49:30","date_gmt":"2023-06-27T13:49:30","guid":{"rendered":"https:\/\/wordpress.org\/documentation\/?post_type=helphub_article&p=16357504"},"modified":"2023-06-27T14:19:07","modified_gmt":"2023-06-27T14:19:07","slug":"block-error-unexpected-or-invalid-content","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/block-error-unexpected-or-invalid-content\/","title":{"rendered":"Block Error: Unexpected or Invalid Content"},"content":{"rendered":"\n

Error overview <\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

\"Picture<\/figure>\n\n\n\n

More Options<\/strong><\/p>\n\n\n\n

As with other blocks, the affected blocks also include the More options<\/strong> 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<\/strong> 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.<\/p>\n\n\n\n

Read about the More Options settings and how to make use of them<\/a><\/p>\n\n\n\n

\"More<\/figure>\n\n\n\n

Possible reasons a block displays an error<\/h2>\n\n\n\n

The option to edit the block using HTML <\/h3>\n\n\n\n

A block\u2019s toolbar provides an option to edit your block\u2019s HTML code.<\/p>\n\n\n\n

\"Showing<\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

Unexpected HTML formatting<\/h3>\n\n\n\n

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. <\/p>\n\n\n\n

For example, adding Javascript to a block that isn\u2019t the Custom HTML Block<\/a> or in the case shown below, adding inline CSS to a paragraph block. Style attributes aren\u2019t expected by the block so it will return an error. <\/p>\n\n\n\n

Ways to solve the error<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

Attempt Block Recovery<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

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. <\/p>\n\n\n\n

Resolve<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Convert to HTML<\/h4>\n\n\n\n

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<\/a> in this guide.<\/p>\n\n\n\n

Convert to Block<\/h4>\n\n\n\n

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.<\/p>\n\n\n\n

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. <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Convert to HTML<\/h3>\n\n\n\n

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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Convert to Classic Block<\/h3>\n\n\n\n
\"\"<\/figure>\n\n\n\n

You can convert the invalid content into a Classic Block<\/a>,  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<\/a> for an explanation of each of the options shown for the Classic Block. <\/p>\n\n\n\n