Issue with space added near shortcodes in WordPress 5.7

  • Some of the plugins on my site use shortcodes. Also, I use the Classic Editor plugin to use the classic editor, not Gutenberg.

    When I create pages in the classic editor, I include shortcodes in the text to use the appropriate plugin.

    In WordPress 5.6.2, my site worked great. After upgrading to WordPress 5.7, there are now large spaces (about 70px in size) added to the website wherever there’s a shortcode in the classic editor text. If I remove the shortcodes, the spaces disappear.

    Any suggestions? Thank you

Viewing 15 replies - 1 through 15 (of 24 total)

  • 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.

    Thread Starter fijisunshine

    (@fijisunshine)

    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?

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    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.

    Moderator Samuel Wood (Otto)

    (@otto42)

    www.remarpro.com Admin

    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.

Viewing 15 replies - 1 through 15 (of 24 total)
  • The topic ‘Issue with space added near shortcodes in WordPress 5.7’ is closed to new replies.