“This block contains unexpected or invalid content” for internal page links

  • When working with HTML on large pages, I’m in the habit of creating a “Table of Contents” at the top of the page with internal links to each section. This is very convenient for readers, and also eliminates the need for me to write a separate page for each section that are all on the same general topic (and there can be many).

    Here’s a simple example…

    The table of contents:

    <a href="#S1">Section 1</a><br>
<a href="#S2">Section 2</a><br>
<a href="#S3">Section 3</a><br>

    etc…

    Further down the page directly above the <h3> title of each section, within “<!– wp:heading {“level”:3} →” tags (in this particular case):

    <a name="S1"></a>
<a name="S2"></a>
<a name="S3"></a>

    I just converted one of these pages to blocks, and the Gutenberg editor had no complaints.

    But, it stripped out all of this code, and naturally because of that the TOC no longer worked. So, I added it back in manually using the “code” editor, and everything was back to normal with no errors indicated by Gutenberg in the “visual” editor, even after clicking “Update”.

    The next time I went in to edit the page, it contained blocks flagging all of the places I did this (see topic title).

    Despite the block errors displayed, after changing a few things to force the “Update” button to become active, all was still well with the TOC functioning. However, it’s very annoying to see these errors every time I update the page, especially since it’s perfectly valid HTML.

    Is there another way of accomplishing this in Gutenberg that I should be using instead? I really don’t see the point of having a code editor option in the first place if it won’t properly accept valid HTML.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • However, it’s very annoying to see these errors every time I update the page, especially since it’s perfectly valid HTML.

    Not sure if this is the cause of your issue, but your TOC anchor links have a single opening paragraph tag, but two closing paragraph tags. This is certainly not “perfectly valid HTML” as you say.

    <p><a href="#BADCO">Bad Company</a><br><a href="#RUSH">Rush</a><br><a href="#LZ">Led Zeppelin</a><br><a href="#TULL">Jethro Tull</a><br><a href="#STRYPER">Stryper</a><br><a href="#DIBA">Dio, Iommi, Butler, Appice</a><br><a href="#DG">David Gilmour (featuring Richard Wright)</a><br><a href="#DT">Dream Theater</a></p></p>

    Thread Starter cygnusstudiosflorida

    (@cygnusstudiosflorida)

    Good catch. You’re certainly correct, that’s obviously not valid HTML, nor did I create it. I’ve never manually added any paragraph tags to this page.

    It’s a good thing I “select all/copy/paste/save” the content of all of my posts and pages from the code editor in LibreOffice documents, as I did yesterday after manually fixing this issue.

    Here’s what the section you referenced looked like in the code editor then, and still does:

    <!-- wp:paragraph -->
<p><a href="#BADCO">Bad Company</a><br><a href="#RUSH">Rush</a><br><a href="#LZ">Led Zeppelin</a><br><a href="#TULL">Jethro Tull</a><br><a href="#STRYPER">Stryper</a><br><a href="#DIBA">Dio, Iommi, Butler, Appice</a><br><a href="#DG">David Gilmour (featuring Richard Wright)</a><br><a href="#DT">Dream Theater</a></p>
<!-- /wp:paragraph -->

    As you can see, there’s only one closing paragraph tag, and I also checked that there were no duplicates following it as well.

    I then went back into the visual editor and miraculously all of the block errors that were being flagged yesterday had disappeared. So, as a test I again added some text then deleted it to force the “Update” button active, and saved the page.

    After that, the TOC links were once again dead. Back into the code editor, unsurprisingly I saw that Gutenberg had stripped out all of the anchor tags within the document. Here’s one example of what is being removed (2nd line):

    <!-- wp:heading {"level":3} -->
<a name="BADCO"></a>
<h3><span style="color:#0000ff;">Bad Company</span></h3>
<!-- /wp:heading -->

    I re-added all of the anchor tags for a 2nd time, updated the page, and immediately backed out as I did earlier. The TOC then functioned normally again, and curiously upon examination of the page source at that point the duplicate closing paragraph tag had also disappeared.

    After two attempts at adding these tags back, it’s apparent this problem is going to recur every time I edit and save the page.

    I’d love to know why the block conversion process is removing these tags, without any warning whatsoever. It surely seems like a bug to me, as I can’t imagine WordPress interpreting internal anchors as malicious code.

    The answer may be setting the page up using “Custom HTML” blocks when I get a chance, and when I do I’ll report back with the results. That’s the only other way I can think of to accomplish what I want, unless someone has a better idea.

    Man, I surely wish I’d never converted this page to blocks… What a major PITA.

    Thread Starter cygnusstudiosflorida

    (@cygnusstudiosflorida)

    FYI, Using “Custom HTML” blocks to insert target anchor tags within the page is what finally did the trick. Here’s an example of how it looks in the code editor.

    <!-- wp:html -->
<a name="BADCO"></a>
<!-- /wp:html -->

    I still feel that the block conversion process should be handling this automatically, as it obviously breaks things without any indication of an issue. The code editor is useless when it comes to stuff like this, but it does make for a good tool to copy the source HTML and save it locally. If I wasn’t able to do that, it would pose a huge problem as far as I’m concerned.

    And so, the mystery of implementing internal page anchors is now solved.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘“This block contains unexpected or invalid content” for internal page links’ is closed to new replies.