While creating a block in WordPress, I'll need to add a translation with a link inside. I'm doing this way in JS, but it isn't providing expected results:
import { render } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
export default function Final() {
let d = <a href="https://example.com">bothered me.</a>;
return (
<p> { __( 'The cold never {d} anyway.', 'text-domain' ) } </p>
)
}
document.addEventListener( "DOMContentLoaded", function(event) {
const appRoot = document.getElementById( 'root' );
if ( appRoot ) {
render(
<Final/>,
appRoot
)
}
});
In PHP, I could easily do that with sprintf and using placeholder like %1s.
echo sprintf(
__( 'The cold never %1s anyway', 'text-domain' ),
'<a href="https://example.com">bothered me.</a>'
);
How do I do the equivalent of sprintf when creating a block in react?
Open a web browser and go to translate.google.com. In the text box on the left, type in the entire URL (including http://) of the website you want to view. On the right, choose the language you want to see the website in. Then, click Translate.
The translate global attribute is an enumerated attribute that is used to specify whether an element's translatable attribute values and its Text node children should be translated when the page is localized, or whether to leave them unchanged.
The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type.
When link translation is enabled, the Application Proxy service searches through HTML and CSS for published internal links and translates them so that your users get an uninterrupted experience. Using the MyApps Browser Extension is preferred to the Link Translation Setting since it gives a more performant experience to users.
Simply hover a link, click the button and translate the link. For each language you can either place the translated link or select a resource using Add Media button. This allows you to use the WordPress Media library to select an existing image, PDF or other files, or upload a new file.
What’s left are links to internal media such as images, documents or archive files, and external links. These can be translated manually from the Translation Editor interface. Simply hover a link, click the button and translate the link. For each language you can either place the translated link or select a resource using Add Media button.
Translating in Translator++ is quite straight forward process. basically you translate the text in the leftmost column into the column next to it. When you successfully create a project, you probably will notice a grid like figure below : Figure 1: Original text column and translation column
You are attempting to insert a html tag inside a translated sentence using React. You will need to keep a placeholder (something like {0}
) and then you will need to replace it with the actual component.
When with PHP you are simply replacing text with other text (that is your HTML), in react you are using components so you can not simply replace them.
export default function Final() {
const [before, after] = __('The cold never {0} anyway.', 'text-domain').split('{0}');
return (<p>
{ before }
<a href="https://example.com">bothered me.</a>
{ after }
</p>);
}
This 'The cold never {d} anyway.'
is a plain string, maybe you intended `The cold never ${d} anyway.`
(for string templating).
Another way is using sprintf
built-in with @wordpress/i18n
import { render } from '@wordpress/element';
import { sprintf, __ } from '@wordpress/i18n';
export default function Final() {
let d = '<a href="https://example.com">bothered me.</a>';
let txt = sprintf(__('The cold never %1s anyway.', 'text-domain'), d);
return (
<p dangerouslySetInnerHTML={{__html: txt }}></p>
)
}
Try to use template strings(ES6):
export default function Final() {
let d = <a href="https://example.com">bothered me.</a>;
return (
<p> { __( `The cold never ${d} anyway.`, 'text-domain' ) } </p>
)
}
Similar Question
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With