Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make preview placeholder text translatable #10880

Merged
merged 6 commits into from Oct 25, 2018

Conversation

@swissspidy
Copy link
Member

commented Oct 21, 2018

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 comment has been minimized.

Copy link
Member

commented Oct 21, 2018

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

@swissspidy

This comment has been minimized.

Copy link
Member Author

commented Oct 21, 2018

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

@jasmussen jasmussen requested a review from WordPress/gutenberg-core Oct 22, 2018
Copy link
Member

left a 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&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>`;
@@ -90,8 +90,8 @@ export class PostPreviewButton extends Component {

const markup = `
<div class="editor-post-preview-button__interstitial-message">
<p>Please wait&hellip;</p>
<p>Generating preview.</p>
<p>${ escape( __( 'Please wait&hellip;' ) ) }</p>

This comment has been minimized.

Copy link
@aduth

aduth Oct 22, 2018

Member

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

@chrisvanpatten

This comment has been minimized.

Copy link
Member

commented Oct 22, 2018

Relates to #10896 too.

@aduth

This comment has been minimized.

Copy link
Member

commented Oct 22, 2018

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

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

@swissspidy

This comment has been minimized.

Copy link
Member Author

commented Oct 23, 2018

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

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Oct 23, 2018

Early bird gets the worm, right? :D

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

@swissspidy swissspidy requested review from aduth and youknowriad Oct 23, 2018
@swissspidy swissspidy requested a review from jasmussen Oct 23, 2018
@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Oct 23, 2018

Nice! Thank you for handling the conflict ;)

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

packages/editor/CHANGELOG.md Show resolved Hide resolved
</svg>
<p>Generating preview...</p>
<p>{ decodeEntities( __( 'Generating preview&hellip;' ) ) }</p>

This comment has been minimized.

Copy link
@noisysocks

noisysocks Oct 23, 2018

Member

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

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

This comment has been minimized.

Copy link
@swissspidy

swissspidy Oct 23, 2018

Author Member

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 &hellip; is better for translators, but I'll change it.

This comment has been minimized.

Copy link
@aduth

aduth Oct 23, 2018

Member

The ESLint would have been for 'three dots' .

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

@swissspidy

This comment has been minimized.

Copy link
Member Author

commented Oct 23, 2018

Fixed merge conflict after #10953.

@swissspidy swissspidy requested a review from ocean90 Oct 23, 2018
@aduth
aduth approved these changes Oct 23, 2018
@jasmussen jasmussen added this to the 4.2 milestone Oct 24, 2018
@youknowriad youknowriad modified the milestones: 4.2, 4.1 - UI freeze Oct 24, 2018
@youknowriad youknowriad added this to the 4.2 milestone Oct 24, 2018
@gziolo gziolo merged commit 0df454f into master Oct 25, 2018
2 checks passed
2 checks passed
codecov/project No report found to compare against
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
@gziolo gziolo deleted the fix/preview-i18n branch Oct 25, 2018
antpb added a commit to antpb/gutenberg that referenced this pull request Oct 26, 2018
* Make preview placeholder text translatable

* Escape i18n strings since they are directly added to markup

* Use renderToString() and decodeEntities()

* Address feedback
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
8 participants
You can’t perform that action at this time.