• Resolved rinh

    (@rinh)


    Hi!

    I’m using the code editor in a template and all was good until I tried adding a block, for example I was adding a post title in the markup like this:

    <!-- wp:post-title /-->

    After that the markup had randomly added empty p tags in several places.

    I also noticed in the code editor that one of my divs had a p tag around it, but it doesn’t seem to have that when inspecting in the browser however.

    Is this expected behaviour and the code editor isn’t meant for doing my own HTML markup like this?

    I’m using WordPress 6.2 RC2 with a theme made from Create Block Theme.

    Thank you in advance

    • This topic was modified 3 years, 2 months ago by rinh.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter rinh

    (@rinh)

    I feel my post is somewhat embarassing since I’m probably supposed to use the columns block for the layout, but it seemed so convenient to throw my own markup in there and add blocks where I needed them.

    Also aware this

    <!-- wp:post-title /-->

    is just a HTML commentary, but it somehow displays the post title.

    Moderator bcworkz

    (@bcworkz)

    There’s a function called wpautop() that is applied to all content when the editor view is switched from code to wysiwyg, or when the post is saved. It can be disabled, but then existing content that was saved with it in place will likely not display correctly.

    If you want to write your own HTML, instead of the code editor view, try using the custom HTML block. I’m not sure it’ll actually help, wpautop() has a mind of its own, it seems. The other measure you could take is to preemptively add your own p tags.

    As for the comment that causes output, I believe there is script running that causes that. Sort of like how shortcodes work, except JavaScript based.

    Thread Starter rinh

    (@rinh)

    Thank you for the reply and explanations!

    It definitely seems to have a mind of its own, and probably not supposed to mix it all like I tried first. I think I’ll do this properly with column blocks and the HTML block when I do need my own HTML for smaller things.

    Thread Starter rinh

    (@rinh)

    Sorry, I’m opening this again because now I have huge issues with this wpautop using the HTML block. I used it for a custom button with a script and after closing and opening the template it was all destroyed by p and br tags and divs had been removed. I understand adding these tags automatically is necessary when writing content, but it shouldn’t be in the HTML block?

    <p><button id="btn">Menu</button></p><p><script></p><p>var btn = document.getElementById("btn");</p><p>btn.addEventListener("click", e => {<br />	document.documentElement.setAttribute("data-modal-active",<br />		document.documentElement.getAttribute("data-modal-active") === "true" ? "false" : "true")<br />});</p><p></script></p>

    I found this on github: https://github.com/WordPress/gutenberg/issues/33832
    It looks like it was fixed, but I can’t see how.

    Is there any way to disable autop from being in the HTML block only?

    Thank you in advance.

    Moderator bcworkz

    (@bcworkz)

    The fix appears to only address an issue in widgets. IMO autop should not be applied in custom HTML blocks anywhere. I’m not sure if it does or not. Personally, I avoid using the block editor when creating actual published content. I mainly only use it in testing. Otherwise I fallback to the classic editor (tinyMCE).

    If you look at wpautop() source code, you can see it basically does a preg_split() on double line breaks (after a lot of pre-processing); then wraps the split elements in p tags; then reassembles the modified split elements. If you avoid blank lines in your HTML, then it should evade wpautop(), at the cost of making your HTML harder to read on sight.

    To get wpautop() to skip over custom HTML blocks for yourself, you’d probably need to disable the core version and introduce your own version that does the same thing except it skips over custom HTML blocks. To skip over, you’d likely need to extract out the HTML blocks, replacing them with unique placeholder elements. Then call wpautop() to do its thing on the result, then re-insert the extracted HTML blocks for each placeholder.

    Thread Starter rinh

    (@rinh)

    Hi and thank you for your reply.
    I’m using the Custom HTML widget for a couple of features in templates where I build the actual layout.

    However, I’m currently trying WordPress 6.1.1, since I’m using 6.2 RC2 for what I’m creating. I should’ve tested that before even posting this in the first place, so I apologise for that. So far I cannot reproduce the issue in 6.1.1. The HTML block behaves like you’d expect it to: keeping the HTML and scripts intact.

    This is very good news, it sure was stressful! Though, seems the bug might be back in 6.2 so perhaps I should report it.

    Moderator bcworkz

    (@bcworkz)

    If you experience custom HTML issues with the latest and greatest (6.2 RC4 was just released Thursday), the devs would certainly want to know about it. Please do report it.

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

The topic ‘FSE random p tags when adding blocks in code editor’ is closed to new replies.