Saturday 23 October 2021

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?



from How to use translation __() with hyperlinks

No comments:

Post a Comment