2

I have created a shortcode to output a wp_Query. Nowhere in my query do I output any <p></p> paragraph marks. However the widget puts this before my output and after.

At first I thought maybe it was something in my code, but I created this sample version as an example:

function test_shortcode() {
    $testout = '<div>hi there.</div>';
    return $testout;
}
add_shortcode ('show-test', 'test_shortcode');

I then output the shortcode in my footer widget. I'm using wordpress 5.9 and the widgets are now gutenberg. I've tried using the shortcode block and the custom-html block.

[show-test]

This is what I expect for an output:

<div>hi there.</div>

But this is what I receive:

<p></p><div>hi there.</div><p></p>

UPDATE: For completion sake, this is the FULL widget output:

<div class="footer-widget-2">
        <aside id="block-10" class="widget inner-padding widget_block"><p></p><div>Hi there.</div><p></p>
    </aside>
</div>

I've tried changing themes this still happens. Does anyone have any idea what is causing the extra paragraph marks before and after? More importantly how to stop them?

5
  • This is likely due to auto-P-ing and auto-correction of invalid HTML nesting, but have you tried using the Custom HTML block? And I just wanted to know if you're using a block theme?
    – Sally CJ
    Mar 17 at 4:35
  • Hi @SallyCJ! Thanks for trying to help! It's not a block theme. I'm using generatepress. But I've tried changing themes (as well as block types). I'm not sure how it could be invalid html as even in my sample above it's 1 line.
    – pressword
    Mar 17 at 15:48
  • Are you absolutely certain that even the Custom HTML block is giving you the same issue? 🤔 (try, if any, clearing your site caches and then disable site caching for a while) Because I can understand why it happens when using the Shortcode block, but it shouldn't happen with the Custom HTML block.
    – Sally CJ
    Mar 17 at 16:22
  • okay so cleared cache. You were right. Why does it happen then?
    – pressword
    Mar 18 at 19:07
  • See my answer :)
    – Sally CJ
    Mar 19 at 13:46

1 Answer 1

1

Does anyone have any idea what is causing the extra paragraph marks before and after?

The Shortcode block performs wpautop() on the content (in the block) before the shortcode is parsed (see source on GitHub), i.e. wpautop( '[show-test]' ) in your case, which then returns <p>[show-test]</p> and then outputs <p><div>hi there.</div></p> after the shortcode is parsed.

So I believe that was the raw (or server-generated) code that you could find in the page source (Ctrl+U on Chrome Windows desktop), but because the nesting/markup is invalid (a div can not be in a p), then the browser automatically fixed the nesting which became this instead: <p></p><div>hi there.</div><p></p>, i.e. two empty paragraphs were added outside the div element.

And with that said, you were likely viewing the DOM tree and not the raw HTML source, hence you didn't notice the actual HTML outputted via the Shortcode block.

For more information on DOM vs. page/HTML source, check these out:


More importantly how to stop them?

The Shortcode block doesn't have any setting that would stop/disable the auto-P-ing, and while it's possible to override the render_callback for the block, or code your own block/widget, there's actually a very easy option to prevent the issue from happening, which is — add your shortcode using the Custom HTML block instead of the Shortcode block. 🙂

(If that is still giving you the same issue, then as I said in my comment, you can try clearing your site cache and disable caching for a while)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.