Friday, 1 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

Replace all image paths in a css file with base64 encoded strings - rollup

I am trying to replace all the image paths in a css background url to a base64 encoded string while doing a rollup build.

I am using rollup-plugin-postcss for this, I am able to generate a separate .css file in the build, but I want the image paths to be replaced with base64 encoded data URL.

Something like this:

background: url('images/sample.png');

to

background: url('data:image/png;base64,R0lGODlhyAAiALM...DfD0QAADs=');

Here is what I have been doing:

import postcss from 'rollup-plugin-postcss'

...

plugins: [
    postcss({
        extensions: ['.css'],
        extract: path.resolve('dist/index.css'),
    }),
]


from Replace all image paths in a css file with base64 encoded strings - rollup

Remove tags when RemoveFormat is executed

I'm trying to extend RemoveFormat command to make it remove <br> tags.

I've tried altering removefromat format:

            formats: {
                removeformat: [
                    {
                        selector: 'br',
                        remove: 'all'
                    }
                ]
            }

The code above for some reason removes &nbsp; from blank lines <p>&nbsp;</p>, this is not acceptable.

My second try was adding plugin and using editor.selection.getContent/editor.selection.setContent, but I can not find information how to restore selection with this approach.



from Remove
tags when RemoveFormat is executed