Make preview placeholder text translatable#10880
Conversation
|
This is the same as #3301 which got closed. Maybe you can address the feedback in your PR? |
|
Using Lodash's |
aduth
left a comment
There was a problem hiding this comment.
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…' ) }</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>`;| <div class="editor-post-preview-button__interstitial-message"> | ||
| <p>Please wait…</p> | ||
| <p>Generating preview.</p> | ||
| <p>${ escape( __( 'Please wait…' ) ) }</p> |
There was a problem hiding this comment.
The result of _.escape( 'Please wait…' ); is Please wait&hellip;, which will effectively print to the screen as Please wait….
|
Relates to #10896 too. |
|
We may need to use https://github.com/WordPress/gutenberg/tree/master/packages/html-entities |
|
@aduth Thanks for your feedback! I updated the code to use |
|
Early bird gets the worm, right? :D If this gets in before #10896, I will carefully and gladly rebase. |
|
Nice! Thank you for handling the conflict ;) I think this is good to ship when Andrew thumbs up! |
| <path className="inner" d="M69.5 46.4c0-3.9-1.4-6.7-2.6-8.8-1.6-2.6-3.1-4.9-3.1-7.5 0-2.9 2.2-5.7 5.4-5.7h.4C63.9 19.2 56.4 16 48 16c-11.2 0-21 5.7-26.7 14.4h2.1c3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3L40 67.5l7-20.9L42 33c-1.7-.1-3.3-.3-3.3-.3-1.7-.1-1.5-2.7.2-2.6 0 0 5.3.4 8.4.4 3.3 0 8.5-.4 8.5-.4 1.7-.1 1.9 2.4.2 2.6 0 0-1.7.2-3.7.3l11.5 34.3 3.3-10.4c1.6-4.5 2.4-7.8 2.4-10.5zM16.1 48c0 12.6 7.3 23.5 18 28.7L18.8 35c-1.7 4-2.7 8.4-2.7 13zm32.5 2.8L39 78.6c2.9.8 5.9 1.3 9 1.3 3.7 0 7.3-.6 10.6-1.8-.1-.1-.2-.3-.2-.4l-9.8-26.9zM76.2 36c0 3.2-.6 6.9-2.4 11.4L64 75.6c9.5-5.5 15.9-15.8 15.9-27.6 0-5.5-1.4-10.8-3.9-15.3.1 1 .2 2.1.2 3.3z" fill="none" /> | ||
| </svg> | ||
| <p>Generating preview...</p> | ||
| <p>{ decodeEntities( __( 'Generating preview…' ) ) }</p> |
There was a problem hiding this comment.
We can use the unicode character (…) here instead of calling decodeEntities.
<p>{ __( 'Generating preview…' ) }</p>There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
|
Fixed merge conflict after #10953. |
* Make preview placeholder text translatable * Escape i18n strings since they are directly added to markup * Use renderToString() and decodeEntities() * Address feedback
Description
This PR addresses #10874 by making the
Please wait… Generating preview.text translatable.Checklist:
Fixes #7725.