Make preview placeholder text translatable

[swissspidy]

Description

This PR addresses #10874 by making the Please wait… Generating preview. text translatable.

Checklist:

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

Fixes #7725.

[ocean90]

This is the same as #3301 which got closed. Maybe you can address the feedback in your PR?

[swissspidy]

Using Lodash's _.escape function now as suggested in that PR.

[aduth]

I think renderToString is probably the easiest / safest way to go here. Might need to concatenate the style tag separately.

let markup = renderToString(
	<div className="editor-post-preview-button__interstitial-message">
		<p>{ __( 'Please wait&hellip;' ) }</p>
		<p>{ __( 'Generating preview.' ) }</p>
	</div>
);

markup += `
	<style>
		body {
			margin: 0;
		}
		.editor-post-preview-button__interstitial-message {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			width: 100vw;
		}
		p {
			text-align: center;
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
		}
	</style>`;

[aduth]

The result of _.escape( 'Please wait…' ); is Please wait…, which will effectively print to the screen as Please wait….

[chrisvanpatten]

Relates to #10896 too.

[aduth]

We may need to use decodeEntities regardless of solution, it appears.

https://github.com/WordPress/gutenberg/tree/master/packages/html-entities

[swissspidy]

@aduth Thanks for your feedback! I updated the code to use renderToString() and decodeEntities() now, and it works like a charm.

[jasmussen]

Early bird gets the worm, right? :D

If this gets in before #10896, I will carefully and gladly rebase.

[jasmussen]

Nice! Thank you for handling the conflict ;)

I think this is good to ship when Andrew thumbs up!

[noisysocks]

We can use the unicode character (…) here instead of calling decodeEntities.

<p>{ __( 'Generating preview…' ) }</p>

[swissspidy]

Last time I checked ESLint threw a warning because of that, but it seems that it's not the case anymore 🤷‍♂️

I'd also argue that … is better for translators, but I'll change it.

[aduth]

The ESLint would have been for 'three dots' .

… is what I've personally used for consistency with other translated strings, but also 🤷‍♂️ can't see why it makes much a difference.

[swissspidy]

Fixed merge conflict after #10953.