Gutenberg: Non breaking spaces not encoded

[benoitchantre]

Issue Overview

With responsive websites, big titles or text in small columns are difficult to handle. They often have widows (words alone on the last line of a paragraph) which is not good from a typographic perspective.

In that context where line breaks have to be avoided, non breaking spaces are really useful to keep some control over the text.

I have noticed that non breaking spaces   are removed by Gutenberg when the post is saved.
This is not the case of the current editor where non breaking spaces are kept.

Tested with Gutenberg 1.7

Related to #3220.

Steps to Reproduce (for bugs)

1. Edit a block as HTML or the entire post in text mode, insert a non breaking space anywhere
2. Save the post

Expected Behavior

• Non breaking spaces must be saved (bug)
• In visual mode mode, non breaking spaces could be revealed (enhancement)
• In visual mode mode, non breaking spaces could be added easily by using Option + Space on Mac or Ctrl + Shift + Space on Windows (enhancement)

Current Behavior

• Non breaking spaces are removed from the markup when saving the post
• Non breaking spaces are removed from the markup when switching from HTML to visual mode
• Non breaking spaces are invisible in Visual mode

[mtias]

Related #3220.

[olivertwistor]

How are things moving along? I'm experiencing today the same behaviour as @benoitchantre did when he opened this issue.

[lkraav]

In visual mode mode, non breaking spaces could be revealed (enhancement)

This would be a tremendous feature imho, we struggle with it all the time.

[aaronjorbin]

removing &nbsp is a regression that should be investigated.

[ellatrix]

This doesn't seem related to rich text, but probably something in serialisation of blocks.

wp.richText.toHTMLString( wp.richText.create( { html: ' ' } ) )

This returns a non breaking space character.

[ellatrix]

Maybe these should be encoded though, not sure. Might be easier to read if we encode all invisible characters.

[burnuser]

Gutenberg 4.3:
I have inserted (TinyMCE Advanced Toolbarbutton) a non-breaking space within classic editor and it works (no linebreak), but if I change to HTML View no " " to see. (Big problem if searching for line break issues.)
If I copy this block and convert the copy to blocks (=> paragraph), it also works and the " " code is visible in HTML view!

I use a lot of non-braking space insertions in my existing website to control readability of special expressions, so, please, make this feature work correctly also in Gutenberg!

[ellatrix]

I cannot reproduce the issue. Non breaking space as saved, but they may not be inserter as  . Could you confirm that the non breaking spaces indeed are saved, but not visible in the code editor or database? You could test this by checking the front end and see if the space is broken or not when possible.

If the only problem is that the spaces are not visible, then we need to encode them. Cc @aduth, only opinion?

[aduth]

If the only problem is that the spaces are not visible, then we need to encode them. Cc @aduth, only opinion?

Would it be a behavior of the serializer, or in the value provided through RichText ? I'm personally a bit more inclined toward the latter. As best I can tell, it's TinyMCE which alternates between ' ' and ' '. It doesn't seem to me an opinion the HTML serializer should hold in constructing a markup string. Maybe it depends on database encoding, but at least for me, the post_content field is not encoded with  , but rather the symbol (precisely "a      b").

One thing I would have expected is a workaround in being able to paste the non-breaking space character into the paragraph block directly. But it seems this is immediately stripped out?

[designsimply]

I tested using the steps provided and found that I could insert a non-breaking space in HTML mode, that it is saved, and that it shows up in the editor in visual mode and on the front end visually. (35s)

^{Tested with WordPress 5.0.3-RC1-44445 using Firefox 63.0.3 on macOS 10.13.6.}

I am closing this issue as the main problem reported appears to have been fixed and would like to ask that new issues be made for separate enhancements if you still feel strongly about asking for those things to be addressed. If you find that something is still amiss, please reply here and ask to have this issue re-opened. Thank you!

[phpbits]

Added on EditorsKit plugin. Here's the format preview but can be added via keyboard shortcut as well using CTRL/CMD + SHIFT + SPACE 💯