Question 107103 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – 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?

Tags:

3

Answers


  1. 0

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

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    )
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search