Issue with space added near shortcodes in WordPress 5.7

Use the browser Developer Tools to inspect the CSS for where the spaces are. That should tell you if it comes from a plugin or theme or WP.

Thank you, Joy. I followed your instructions. The following code is in the html source code (i.e. visible when inspecting with the browser) wherever there’s a shortcode in the classic editor:

<p>
::before
</p>

I think these empty paragraphs are causing the spaces on the website. The css looks ok.

Any thoughts? Thanks again

The <p>must come from somewhere? ?? Or do you mean those <p> are included automatically whenever you use shortcode? Have you tested an another theme? Same issue?

Same problem. <p> is not always closed before a shortcode !!
Example : <p>blabla<br /><p>

• This reply was modified 3 years, 8 months ago by robertoon.

I have the same problem, after a WordPress 5.7 there are a lot of empty spaces. Anyone know how to fix?

This was an intentional change: https://github.com/WordPress/gutenberg/pull/27995

The basic problem is that you have empty paragraph tags in your content. To make these empty tags have presence on the page makes them the same in the block editor as they do on the page itself.

Note that the CSS will only affect empty P tags. So if you have <p></p> on the page somewhere, then normally that would be not shown. It’s just meaningless tags. But it shouldn’t be there.

To fix the problem, remove the empty P tags from your content.

I haven’t empty tag <p></p> but maybe my theme generates them and I can’t remove all empty tags.

It is possible that the shortcode is adding them somehow, or something about your content in the classic editor is doing it.

It would be helpful if we could see the issue on the page, or knew what shortcode you were using. Fixing the problem at the source to get rid of the empty P tags is the best way forward.

Replace
<p><div…</div></p>
by
<div…</div>
in the shortcode, and it’s ok for me.

@otto42

Unfortunatelly now I have downgraded the wp version. However I haven’t shortcode on my page buy for any tag <p> I have this problem.

Comparing the old CSS with the one after the update I noticed that before where it was: <p></p> now is added <p>:: before</p>.This causes an empty space of 15px or 20px.

Inspecting the code after the update, it adds:

p: empty: before {
content: “”;
}

Disabling this code from the Chrome console fixes the problem.

• This reply was modified 3 years, 8 months ago by giusgenc.

@otto42 I have also same problem on different themes where shortcodes is used. Is there any workaround for this, as it looks mission impossible to change everything if you have like thousands of posts and/or pages where you use shortcodes and big white spaces occur?

Is there anyone who could actually supply any site that has these problems? I’m curious because I’m developing plugins with shortcodes and I want to know how to solve this if someone asks me directly ??

I just noticed the same thing which is why I came here. After upgrading, if I add a Youtube embed, I get a lot of <p> and empty spaces before and after the embed. Looks really bad ??

Now with 5.7, all HTML tags manually inserted in the article are surrounded by <p>…</p> even if there is no content.

• This reply was modified 3 years, 8 months ago by robertoon.
• This reply was modified 3 years, 8 months ago by robertoon.
• This reply was modified 3 years, 8 months ago by robertoon.
• This reply was modified 3 years, 8 months ago by robertoon.

Try adding remove_filter(‘the_content’, ‘wpautop’);
at the top of the shortcode code. It worked for me.