Empty spaces after WordPress 5.7 update

I have same problem on different sites after wordpress 5.7 update. Huge white spaces everywhere <p> tag is used.

Same problem… fix it in the next update ? Meanwhile, I do not update 5.7

The issue seems to be inserting a shortcode with styling, such as centered. If the shortcode generates code that doesn’t belong inside a <p> tag, an extra blank line is inserted above.

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.

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 1 day, 14 hours ago by giusgenc.

in the shortcode, and it’s ok for me.

Hi @robertoon .
I haven’t shortcode in my pages..

I have the same problem on 3 sites I maintain. It seems to be related to the WYSISYG editor. The p tags are not in the editor or in short code. They appear on the page between elements. I’m using ACF custom fields and hand coded the dynamic sections so there are no extra p tags that I put in. If that were true they would have shown on older versions of WP as well. This just started on 5.7.

Extra p that I didn’t code between the blocks with content:

<small class="disclosure">
  <h5>Disclosure: Futures Trading</h5>
  <p>Futures are not suitable for all investors.</p>

WordPress 5.7 isn’t adding extra P tags, but it will make the empty ones you already had there take up space properly.

If you were entering things by having extra blank lines in the old classic editor, then that might be creating those empty tags.

@otto42 Samuel Wood (Otto). Nope. If that were true then they would have been there on older versions of WordPress as well. Just to make sure I just double checked the text in the editor and my markup and there are no extra p tags or line breaks that “I” have put in. How can you say WordPress isn’t doing it when this problem suddenly appears for so many people that have upgraded?

@lukdvr No, those empty P’s were indeed already there.

What actually changed in 5.7 was a CSS rule for the block editor. It makes the empty P tags have space on the page. This was done so that the view of the content from the block editor would match the output on the page.

5.7 didn’t change your content, it made the content display the extra empty P’s as vertical space. Before, they were compressed and not shown because they had no content.

@otto42 To simplify everything, it would be better to indicate how to change the rule for block editore that is causing this “problem”. It’s possible?

The best solution is to remove the extraneous P tags. However, if you want to adjust the behavior here, something like this should work:

body p:empty:before {
    content: none;

You could use that in the Custom CSS settings, or in the theme, or what have you.

@otto42 Sorry for the inexperience, this code must be inserted in the css code of the theme?

WordPress has a space for putting in custom CSS if you don’t want to edit the theme directly.

Appearance -> Customize. On the customizer screen, look for the “Additional CSS” section and you can put in whatever custom CSS you like there.

Source link