Gutenberg: RichText: Don't insert   until we're sure it's needed

[jasmussen]

This issue is a little exotic. The issue is visible in TwentyNineteen, and the details are largely laid out in https://github.com/WordPress/twentynineteen/issues/187#issuecomment-435361878. The gist is as follows:

As you can see, as you are typing, a space at the _end of the line_ is wider than spaces betwen words.

Behind the scenes, this trailing space is a   character, until you type something more, and it is converted into a normal space. I suspect this is because we want to allow you to indent text using spaces, and if we used the normal space character () this wouldn't work.

Additionally, this issue appears to be specific only to Chrome, and to the font Hoefler Text. Yes, this is exotic, it's time to don the fruit of the loom hat. It seems as if Chrome renders the &nbps; character as a symbol, rather than as a non breaking space. But this isn't fixed in any near-future versions of Chrome. So there are a few ways we can fix this:

1. Switch out Hoefler Text with a different font, for example Baskerville Old Face which is next in line in the Twenty Nineteen font stack.
2. Don't insert the   character until we _know_ that it's necessary.
3. Swap out our usage of   character, with   (punctuation space), which does not suffer from this width issue, and is the same width as space.

1 we would like to avoid, because it's a really big design change pretty late in the process.

2 seems like it would be an acceptable solution. Instead of this:

Hello World 

we would want

Hello World

If you then go on to add additional spaces, it's fine if you get this:

Hello World  

the key is if there is only ever a single   it should not be at the end.

3 could also work, as is demonstrated in this codepen: https://codepen.io/joen/pen/RqbBxa?editors=1100

CC: @iseulde

[ellatrix]

@jasmussen This is done by the browser to make sure the trailing whitespace is not collapsed. Sometimes the browser removes this again, sometimes it doesn't. This happens in the old editor as well, but maybe more cleanup happens there. Not sure if there's anything be can do. What do you expect on the front-end if you insert so many spaces at the end or in between words?

[ellatrix]

Hoefler Text fix: https://codepen.io/iseulde/pen/qQWJRo.

@font-face {
  font-family: 'NonBreakingSpaceOverwrite';
  src: local( 'Georgia' );
  unicode-range: U+00A0;
}

div {
  /* Explitily set to whatever you want */
  line-height: 1;
  font-family: 'NonBreakingSpaceOverwrite', 'Hoefler Text'
}

[ellatrix]

See https://github.com/WordPress/twentynineteen/pull/463.

[jasmussen]

You're the very best of them all.

[ellatrix]

Oh ❤️ @jasmussen