For the most part, I have really warmed up to the Gutenberg editor in WordPress. It took me a while. I was very used to the “old ways,” but the flexibility and promise of Gutenberg have won me over. One small thing that I have noticed, though, is that it is really common for users to have an empty paragraph at the end of their content.
This makes sense. The user finishes editing the last block on the page and hits “Enter.” Or they began to create a new block but decided they were done. I don’t think that it is obvious that this in the Gutenberg interface:
will translate into an empty paragraph on the front-end. And, really, most of the time this won’t make a big difference on the page. But, if you have two elements that should stack on top of each other vertically, this can lead to unwanted space. Here is an example:
Thankfully, a fix for this is pretty easy. CSS offers a pseudo class, empty, that can be used to target elements that are, well, empty. Using this pseudo class, we can set these elements to not be displayed and get rid of this extra space. Here is the CSS I use:
If you are worried about this having an unintended effect on other parts of the site’s design, you can always target just the empty paragraphs within your post’s content. Now you won’t need to ensure that any posts don’t have any empty paragraphs and you won’t need to explain this behavior to your clients.