Disappearing double spaces

Hi @unwantedlife – those definitely sound frustrating.

Hi, it used to be a random issue where my front-end post would lose double spacing for paragraphs. Now, any time I visit a post or page on the backend the double spacing disappears and I have to go through it all and reapply the double spacing. How can I stop your plugin from doing this?

Just to clarify what you mean – how are you adding the spaces in/between the widgets at the moment? And when you say ‘double spacing’ do you mean a blank paragraph in between other paragraphs?

Also, the menu bar for your plugin has stopped at the top of the block, meaning if I’ve 1,300 words into writing in your block, I have to scroll to the top each time I need to do something, like add a hyperlink, then scroll all the way down to add the link to the hyperlink, and if I then want to pick a custom colour for the new hyperlink, I have to scroll back to the top of the block to do so. It’s making everything much harder to do and wasting a lot of extra time doing it. How can I get the menu bar for you block to travel down with me when I scroll and use your block?

This is something that is a current bug with the Classic Block – and is being worked on at the moment ??

Hi, I’m not adding spaces between widgets. I’m using one classic block for the majority of my writing and add a double space to my writing by simply tapping the enter key twice, never leaving the classic box. And yes, I mean a blank space. It seems I can’t upload an image to show you, but you can see it here: https://unwantedlife.me/8-ways-to-cultivate-internal-validation-for-better-mental-wellbeing if the paragraphs haven’t randomly disappeared by the time you look

Thank you for the additional details, @unwantedlife.

I can’t upload an image to show you

For future reference, it is not possible to upload images directly but you can embed images from several services such as IMGUR. You can also upload an image to your site’s Media Library, copy the URL/address to the image and add it to your reply using the image block.

add a double space to my writing by simply tapping the enter key twice

I see! Do you always add double spacing to separate your paragraphs? If so, you probably want to add this via CSS styles rather than tapping “enter” twice. The reason for this is that you are creating empty paragraphs and a lot of text editors/processors tend to “ignore/remove” those, as you are experiencing already.

If you can point me to a post without empty paragraphs, I might be able to help you add the necessary CSS to create the “extra” margin below your paragraphs without having to create empty ones.

To prevent the empty paragraphs you already added from showing, we might be able to add something like p:empty {display:none;}

• This reply was modified 1 year, 3 months ago by Alvaro Gómez.

Took me a while to find one that I hadn’t corrected already https://unwantedlife.me/creating-goals-so-you-can-overcome-your-difficulties

Thank you for the link, @unwantedlife. I took a closer look and this is what I found:

In this second example you just shared, your paragraphs are indeed empty. There is nothing inside the p tag and they are not being rendered at all. The HTML code looks like this:

<p></p>

When a paragraph is really empty, it will not take up any space at all. This is why you are only getting a single line break in some of your posts.

In the first example, on the other hand, your “empty” paragraphs are not quite empty. Instead, they have empty “ ” space value in them, like this:

<p>&nbsp;</p>

In this case, the paragraphs are not considered empty and that is why the paragraph is taking up space.

How to solve this:

If your preference is to have double space on all your posts and pages by default, you can accomplish this using styles instead. This will save you the need to tap enter twice every time and all these unintended side effects.

Also, because you have all these empty and “almost empty” paragraphs all over your posts, you will need to hide or remove them to avoid having “cuadruple” space in some of them.

1. Adding bottom margin via CSS styles.

This is relatively easy. You will want to head to Appearance > Customize > Additional CSS and add the following code:

.entry-content p  {
  margin-bottom:96px;
}

2. Removing empty paragraphs

Once you have done this, you will find that the posts that were ok have twice as much bottom margin because of the   faux empty paragraphs I mentioned before. As it turns out, it is not possible to target an HTML element by its content using CSS styles alones but you have two other options to fix this:

2.1 Hide the empty paragraphs using JavaScript

This is the easiest solution. You can user a free plugin (such as this one) to include custom JavaScript code and add the code below:

var paragraphs = document.querySelectorAll('.entry-content p');

  // Loop through each <p> element
  for (var i = 0; i < paragraphs.length; i++) {
    // Check if the content of the <p> element is '&nbsp;'
    if (paragraphs[i].innerHTML === '&nbsp;') {
      // Hide the <p> element
      paragraphs[i].style.display = 'none';
    }
  }

This code will not alter the content of your site, it will just identify and hide the   paragraphs when the page is loaded. You can undo this at any momento by removing the code or deactivating the plugin.

2.2 Remove empty paragraphs from your Database altogether

If you want a permanente solution and not have to rely on JavaScript, you can run a query on your site’s database and remove all your “  empty” paragraphs. Most hosting companies have a tool called PHPMYADMIN you can use to run queries.

This would be the query:

UPDATE wp_posts
SET post_content = REPLACE(post_content, '<p>&nbsp;</p>', '')
WHERE post_type IN ('post', 'page');

This would be a PERMANENT change so, if you go for this option, make sure you have a backup of your database in clase something goes wrong. If unsure, I would recommend going for the first option instead (the JavaScript one)

I hope that helps, good luck!

Hi, there might be a slight problem with that as a workaround. There are certain times where I don’t want double spacing, such as when I list my references, list contact details, sidebars, etc. How do I make it so I only get double spaces where they’re actually needed? And how come the issues with the removal of double spaces have only been a recent issue when it had been a rare issue since I started doing this at the start of 2019?

how come the issues with the removal of double spaces have only been a recent issue when it had been a rare issue since I started doing this at the start of 2019?

It’s hard to tell, but it sounds like the issue was there all along, it simply became more prevalent recently.

The underlying problem here is that using line breaks to add margins is inherently unreliable. My suggestion would be to try and steer away from that method completely and use CSS styles instead (or even switch to using the block editor which has a convenient “spacer” block).

How do I make it so I only get double spaces where they’re actually needed?

The SQL query I suggested above would only remove empty paragraphs inside the content of pages and posts. This means that it should not affect your sidebars. That being said, please make sure you have a backup before running it.

when I list my references, list contact details

Is that part of your content? Could you please share a link to a post where I can take a direct look? Depending on how and where you are using these, it should be possible to add margin via CSS styles.

hi, but what about my spacing within the pages and posts that I don’t want double spacing, such as my reference and support sections?

If I’m going to have to use two spacer blocks every time I want to add a double paragraph, which is not only more time consuming than double tapping the enter button, but also makes using the classic block redundant, as the point of using the classic block was to keep everything within one neat and tidy block, but if I’m going to have to do every single paragraph as it’s own block separated but two spacer blocks. That’s an awful lot of extra work just I be dyslexic inclusive, and it’s a real shame the classic block doesn’t support this in the first place as that was the reason why I used it in the first place

what about my spacing within the pages and posts that I don’t want double spacing, such as my reference and support sections?

It is possible to style paragraphs different based on what specific page or post they are on.

if I’m going to have to do every single paragraph as it’s own block separated but two spacer blocks. That’s an awful lot of extra wor

I totally agree and would not personally use spacer blocks for this but I thought it was worth mentioning to lay out all the possible options.

the classic block doesn’t support this

I just had an idea you can try: If your goal is to make sure your empty paragraphs show consistently, you can press the spacebar before you press the second enter. So, instead of “enter, enter”, you would do “enter, spacebar, enter”.

Doing this will add a blank space ( ) inside your paragraph which should ensure it being displayed. This is not the most elegant solution in the world but it is simple enough.

I hope that helps ??

having to press enter, space, then enter again to get my desired double spacing is going to be very time consuming, but seems the only way it can be done. Any tips on how to apply this to over 300 pages and posts? Going through them one at a time to correct everything is going to take a significant amount of time, as the double spaced paragraphs only disappeared from my content very recently. I’ve been using the double space since January 2019

doing enter, space, enter doesn’t work. As soon as I go back to editor, all the double spaced paragraphs return to no space paragraphs. It’s not recognising the space as a legitimate object to keep the double spacing. Sigh, it shouldn’t have to be this hard just to be inclusive of people with dyslexia

Thank you for trying the things I suggested. I totally get the frustration and I agree that having to press space is not very practical (and apparently not too reliable either).

The ideal solution would be to remove all empty paragraphs via JS or a SQL query and add double spacing using CSS, as I suggested in one of my previous replies. Going back to that, you mentioned this:

There are certain times where I don’t want double spacing, such as when I list my references, list contact details, sidebars, etc.

It should be easy to exclude sidebars from this double spacing style. Regarding the other two things (contact details and references), it will depend on how and where these were added. Could you share a link so I can take a closer look?

I tried using the CSS for spacing along with the other methods, but there was a problem. It doesn’t provide double spacing when editing or creating a new page or post, which is an issue, as I’m dyslexic. This is why I try to make my blog as dyslexic-friendly as possible. Is there a way that’ll allow me to have double spacing on both the front and back end of my pages and notes?

Hi @unwantedlife,

If I understood correctly, you basically want the same CSS to apply in the editor as well, right?

I believe this will only apply in case you’re using block theme, but here is something you can try:

You can add this CSS by going to the Site Editor, then Styles. There you can click on the three-dot icon (kebab menu), and go to Additional CSS:

Full Size: https://d.pr/i/Yox1tm

If you are not using a block theme, it is possible that you might need custom code to do that.

after paying more attention to the issue, the double spacing disappears as a result of opening a post in the editor on the backend only, so it’s an issue solely with the classic block removing the double spacing. How can you stop your classic block from doing that?