Update spacing in prepublish panel titles

[sarahmonster]

Description

Adds missing spaces to the prepublish panel titles, fixing #7842.

Before:

After:

How has this been tested?

Tested on my local install Mac Chrome/Firefox, using English and Hebrew to test RTL-conversion.

Types of changes

Super-quick three-line bug fix!

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.

[tofumatt]

We should keep the space in the string, but add the padding in. I'll make the change and push a fix to this branch.

[tofumatt]

I think the whitespace should stay in these translation strings because it'll make screen readers, copy pasters, and semantic nitpickers like me happier that it's there. Technically the space is part of the translation here.

(See: #7842 (comment))

[tofumatt]

Alternatively, you could add markup and make the text with the colon a header. Apparently in the handbook we shouldn't be using trailing spaces in the string, as @sarahmonster pointed out in the comment, so we should wrap those bits of text in an <hx> tag (whatever level makes sense there).

You can't really copy/paste those sections easily so that's not a concern, but technically we shouldn't have Visibility:<span>Public</span> in the markup, which this change would result in.

[tofumatt]

Hmm, it looks like either way the markup here isn't really great… and this fix at least:

1. respects whitespace rules for i18n strings
2. looks better

So actually let's 🚢 but maybe file a follow-up issue to deal with this markup… it feels like it should be a dl or maybe all the option names (eg "Visibility") should have a tag around them to separate them from the setting value (eg "Public").

[sarahmonster]

I'm a bit unsure of the best solution here, both from an internationalisation and an accessibility point of view. I could wrap the other part of the title in a span, so the markup looks like this:

<span>Visibility:</span><span>Public</span>

...but I don't know if that really solves the issue at all, and we'd still need to use CSS for the space. I could hard-code a space in there, but that wouldn't work for RTL languages:

<span>Visibility:</span>&nbsp;<span>Public</span>

I suspect the best way of handling it would be to nix the CSS space and instead send the whole string, including the label, to the translation function, but that doesn't work either, because we'd need to pass in a React component:

<PanelBody initialOpen={ false } title={
	sprintf(
	           __( 'Visibility: %s' ),
                  <span className="editor-post-publish-panel__link" key="label"><PostVisibilityLabel /></span>
		)
}>

Perhaps there's a better approach here that I just haven't thought of yet?

[tofumatt]

Yeah, I’m not sure we have a way to pass components to translation functions. As mentioned, your solution is better for more people than what we currently have. Let’s go with that for now.

[tofumatt]

Tested this in an RTL locale and it looked okay as well; gonna ship it because it's nicer than what we had but we can follow-up with more specific issues re: markup/etc.