gutenberg widget outputting paragraph marks

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)