HTML Custom HTML Block Unexpect Content Recovery

  • Unknown's avatar
    biblebitsmanager · Member ·

    Very frustrated inserting simple HTML markup into an HTML Custom block.
    The simplest markup almost always results in the “unexpected or invalid content” error and the “attempt recovery” button.
    The WordPress validity checking software seems to hit and trigger failures on spacing, blanks, etc.
    I am experienced with HTML markup.
    I would like to include CSS <style> and class markup as well.
    I would like to use <span> <table> <tr> <td> <div> <p> list and other ordinary markup tags.

    Samples of failure:

    <p>hello</p><span>dog</span></p>

    <p></p><p style=”color:black;”>dog</p>

    <p></p><p style=”color:black;”>dog</p>

    This final example is converted by WordPress’s recovery logic to this:

    <figure class=”wp-block-table”></p><table><tbody><tr><td>dog</td></tr></tbody></table></figure>

    I cannot figure out what is going on. I’ve gone down the various recovery paths.
    Very frustrating.
    The basic HTML help pages are not helpful.

    The blog I need help with is: (visible only to logged in users)

  • staff-totoro · Staff ·

    Hi there,

    What is the HTML you are trying to add. This is it? 

    <p>hello</p><span>dog</span></p>

<p></p><p style=”color:black;”>dog</p>

<p></p><p style=”color:black;”>dog</p>

    I noticed that you have some errors in the code there. For example it the first line has an extra </p> that should not be there.

    Also I see some extra <p></p> tags which are empty and have no text content between them. You are trying to use these blank paragraphs to add ” blank spacing” to the code somehow?

    To clarify, it is considered “invalid html” to use empty paragraphs (<p></p>) to create empty spacing. What if you use the ‘non-breaking space’ HTML code of &nbsp; instead?

    Thanks for the additional info!

  • Unknown's avatar
    biblebitsmanager · Member ·

    The

    is placed there by WordPress upon creation of the custom HTML block. I simply left it there.

    I note that WordPress often adds closing tags which browsers “ignore” outside of WordPress. I added closing tags because that’s what WordPress does.

    The first line with the extra erroneous in my sample list is simply a typo on my part in my forum post.

    I intend to use a variety of HTML markup and also various CSS style markup.

    WordPress’ devices for detecting what it calls HTML “unexpected or invalid content” and then offering recovery solutions are poor and frustrating.

    The following renders in Mozilla Firefox but in WordPress yields an “unexpected or invalid content” message with the “attempt block recovery” button.

    dog

    background

    big cat

    chicken duck cow

    When I hit the “attempt block recovery” button WordPress simply eliminates my attempted HTML block and returns me to my document.

    When I choose the addition options “…” and try to “resolve” the issue, WP shows my markup with some color indicators of line-break issues and other things.

  • staff-totoro · Staff ·

    Hi again,

    The <p></p> is placed there by WordPress upon creation of the custom HTML block. I simply left it there.

    I tried this on my test site and I did not see any prefilled content on creation of the HTML block. Just a prompt to add my HTML. You can see a video of what I see here: https://d.pr/v/vJNEBg

    Can you record a video of the pre-filled <p> tag next time you create a block? I would like to have our developers take a closer look.

    I note that WordPress often adds closing tags which browsers “ignore” outside of WordPress. I added closing </p> tags because that’s what WordPress does… WordPress’ devices for detecting what it calls HTML “unexpected or invalid content” and then offering recovery solutions are poor and frustrating.

    The Custom HTML block is not a replacement for an IDE, and does not add closing tags or tidy of your HTML automatically. So it is incumbent on you to make sure you are writing semantic HTML and closing all your HTML tags manually. If not you will get unpredictable results, such as incorrect display on the site, or a notice that the block contains invalid content.

    I intend to use a variety of HTML markup and also various CSS style markup.

    To clarify, the following tags are not allowed on sites on our Premium Plan and below for security reasons:

    embed, frame, iframe, form, input, object, textarea, style

    Specifically you mentioned CSS and I want to underscore that this HTML will not be recognized on your site unless you have upgraded to our Business Plan (or higher.)

    You can see what tags we do allow here: https://wordpress.com/support/code/#html-tags

    The following renders in Mozilla Firefox but in WordPress yields an “unexpected or invalid content” message with the “attempt block recovery” button.

    <p></p>
<p>dog</p>
<br>
<p style=”background-color:#f099cc;” >background
<p style=”font-size:120%;” >big cat</p>
</p>
<p>
<table><tr><td>chicken<td>duck<td>cow
</table>

    Is this sample code you are creating on the fly? I see that it is lacking some closing tags for </tr> and </td> tags, but despite that, the code seems to work fine when I try it on a test site (other than the CSS styles, which will not work as mentioned previously)

    I recorded a video showing me:
    – adding your code to an empty HTML block
    – saving those changes and viewing the code output on the live site
    – returning to the editor (which does not display an error message in the block)

    You can view the video here: https://d.pr/v/bvVUTf

    Since I did not see the error message you saw (using the same code you provided) do you happen to have a page or post on your site where I can look at a block you added previously? I’d like to see the error message you are seeing on your end so I can examine your block content more closely, thanks.

  • The topic ‘HTML Custom HTML Block Unexpect Content Recovery’ is closed to new replies.