Massive Page Gap

Hi there,

I've inspected your site and you have empty paragraph blocks between the mentioned elements that cause this as shown here: https://share.getcloudapp.com/BluYlnAJ

Removing these empty paragraph blocks within the block editor should address the gaps.

I never added them, and they are not there in the text editor.

That is the issue I'm having, and I have no clue why.

Thank you,
JJ Smith

Here's a quick fix for this:

Try this CSS:

p:empty:before {
    display: none;
}

That fixed it, but the question is, why did it do it?

It happened to multiple sites that I have.

Could it be something in the last update?

Thank you,
JJ Smith

That fixed it, but the question is, why did it do it?

I'm not exactly sure but it's certainly not from GeneratePress.

It's this CSS:
p:empty:before{content:"​"}

It's a CSS from /wp-includes/css/dist/block-library/style.min.css.

But what's weird is the element having an empty <p> in the first place. I don't see this occurring on my sandbox site.

Can you give us more details about your site? WP Version, GP Premium Version, GeneratePress version, etc.

Are you using Classic editor or Block Editor(Gutenberg)?

You can provide us temporary site credentials to check. You can use the private information text field to provide the details.

Let us know.

Everything is updated to the newest versions, but it has happened on 3 sites, so I will dig a little and see what I find out and report back here.

Thanks,
JJ Smith

I have shut down all plugins on another site I have, and it still does it.

There has to be something in WordPress 5.7.

I'm still looking, but this is really strange to me.

Thank you,
JJ Smith

Hi there,

WordPress 5.7 introduced some CSS to add a :before property to empty paragraph tags, so as users who were adding extra P's to create space would actually see that on the frontend - see here:

https://github.com/WordPress/gutenberg/pull/27995

In my opinion it was a very short sighted measure on their part as some users did not know until this date that their content contained them... and as its quite common that some plugin shortcodes inject empty Ps ( thanks to WPs AutoP function ) a lot of unexpected space is now appearing.

Good news is - it looks like the change will be reverted.

In the meantime the CSS fix Elvin provided is the way to fix it - if you cannot remove the emepty paragraphs from your content.

For reference this is the CSS to fix the issue:

p:empty:before {
    display: none;
}

Thanks for the update.

I knew it had to be something that wasn't right, and I'm glad we got to the bottom of this.

God bless,
JJ Smith

You're welcome

Thanks David,
Just experienced this with a new site build.
Hopefully this will be reverted with 5.7.1
Part of the reason I prefer to always wait a few days especially on new 'big' WP versions.

Glad to hear that!