Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use translation __() with hyperlinks

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?

like image 439
micky Avatar asked Sep 27 '21 15:09

micky


People also ask

How do I link to a Google translate page?

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.

How do you translate attributes in HTML?

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.

How does translate work in html?

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type.

What is link Translation and how to enable it?

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.

How do I translate a link in WordPress?

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.

How do I translate links to internal media?

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.

How to use translating in translator++?

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


3 Answers

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>);
}

Side note

This 'The cold never {d} anyway.' is a plain string, maybe you intended `The cold never ${d} anyway.` (for string templating).

like image 97
Newbie Avatar answered Nov 09 '22 23:11

Newbie


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>
    )
}

like image 32
emptyhua Avatar answered Nov 09 '22 23:11

emptyhua


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

like image 33
Dmitry Avatar answered Nov 10 '22 01:11

Dmitry