This block contains invalid or unexpected content on Custom HTML

Question

I am editing a document in draft mode Wordpress 5.2.2 in the Gutenberg editor, and add this Custom HTML block:

<pre><code class="language-typescript">const simple = &ltT&gt(cl: T) => cl;
class Hero {
  constructor(public position: [number, number]) {}
}
interface { hello: number }
const errorOne = &ltT&gt(cl: T) => new cl(); // Cannot use 'new' with an expression whose type lacks a call or construct signature.</code></pre>

and it happily works as expected in preview. I save as draft.

When I return the HTML is ghosted and I get the error in the title. I can convert to HTML and it works again, but then it errors again when I return to it later.

It seems this error is talked about everywhere but the explanations are nonsense and resolve nothing.

If my Custom HTML is valid (which it seems to be), why does it work and then give an error. How do I fix this?

Kalimah Kalimah · Accepted Answer · 2019-09-01T03:36:21

I think the main issue is not converting < & > properly in your code. They are missing the semicolon at the end of the string.

This code is working fine:

<pre><code class="language-typescript">const simple = &lt;T&gt;(cl: T) =&gt; cl;
class Hero {
  constructor(public position: [number, number]) {}
}
interface { hello: number }
const errorOne = &lt;T&gt;(cl: T) =&gt; new cl(); // Cannot use 'new' with an expression whose type lacks a call or construct signature.</code></pre>

When you insert the code with missing semicolon, WordPress saved as is. However, when trying the load the page again WordPress compares the saved content (with missing characters) to the one generated from the block (which is probably attempting to display correct HTML). This process led to an error as both texts were not identical.

If you want to check the error yourself you can check the console through developer tool in your browser (F12 in Chrome).

This block contains invalid or unexpected content on Custom HTML

1 Answers