0

I have been trying to implement the translation to a couple of strings in a .js file but nothing has worked.

First try to do it like I do in php, in the .js file add this variable var __ = wp.i18n.__; and I put the strings like __( 'Hello World', 'text-domain'), but it didn't work.

After looking for information about it, I found a post where they talk about passing the translated strings with wp_localize_script something like that.

// Localize the script with new data
$translation_array = array(
    'some_string' => __( 'Some string to translate', 'plugin-domain' ),
    'a_value' => '10'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );

I did it and it didn't work either

Below I leave my js and php code, please tell me what I'm doing wrong

PHP

// Register script
function mediafolders_sidebar_plugin_register() {
    wp_register_script(
        'mediafolders-plugin-select-js',
        MEDIAFOLDERS_PLUGIN_URL . 'assets/js/select.js',
        array( 'wp-plugins', 'wp-edit-post', 'wp-element' )
    );
    $translation_array = array(
        'textContent' => __( 'Select the folder where you want to save the images or files that you upload to this post.', MEDIAFOLDERS_TEXT_DOMAIN ),
        'textButton' => __( 'Select Folder', MEDIAFOLDERS_TEXT_DOMAIN ),
    );
    wp_localize_script( 'mediafolders-plugin-select-js', 'MediaFolders', $translation_array );
}
add_action( 'init', 'mediafolders_sidebar_plugin_register' );

// Enqueue script
function mediafolders_sidebar_plugin_script_enqueue() {
    wp_enqueue_script( 'mediafolders-plugin-select-js' );
}
add_action( 'enqueue_block_editor_assets', 'mediafolders_sidebar_plugin_script_enqueue' );

JAVASCRIPT

window.addEventListener( 'load', function() {
    var registerPlugin = wp.plugins.registerPlugin;
    var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
    var Button = wp.components.Button;
    var el = wp.element.createElement;

    var MediaFolders = {
        textContent: 'Select the folder where you want to save the images or files that you upload to this post.',
        textButton: 'Select Folder',
    };

    function onButtonClick() {
        var popup = document.querySelector( '.mediafolders-popup' );
        popup.classList.add( 'open' );
    }

    // Create elements for panel on sidebar
    function MediaFoldersDocumentSetting() {
        return el(

            PluginDocumentSettingPanel,
            {
                name: 'media-folders-lite',
                title: 'Media Folders Lite',
                icon: 'open-folder',
                initialOpen: true,
            },
            MediaFolders.textContent,
            
            el(
                Button,
                {
                    isDefault: true,
                    className: 'mediafolders-panel-button',
                    onClick: onButtonClick,
                },
                MediaFolders.textButton,
            ),

        );
    }

    registerPlugin( 'media-folders-lite', {
        render: MediaFoldersDocumentSetting,
    } );

    // Close the pop up by clicking on the X or Done!
    var btnClosePopup1 = document.querySelector( '.mediafolders-popup-close' );
    var btnClosePopup2 = document.querySelector( '.mediafolders-popup-button > button' );
    if ( btnClosePopup1 ) {
        btnClosePopup1.addEventListener( 'click', () => {
            var popup = document.querySelector( '.mediafolders-popup' );
            popup.classList.remove( 'open' );
        });
    }
    if ( btnClosePopup2 ) {
        btnClosePopup2.addEventListener( 'click', () => {
            var popup = document.querySelector( '.mediafolders-popup' );
            popup.classList.remove( 'open' );
        });
    }
});

1 Answer 1

1

wp_localize_script() defines a variable in the global JS scope - in the case of your code, the object is placed in a globally-scoped variable with the identifier MediaFolders.

In your load event callback you are also defining a variable with the identifier MediaFolders scoped to it's encapsulating function body - so when you use the variable further down, your code is referencing the locally scoped variable rather than the global one which wp_localize_script() defined.

The solution is to remove your var MediaFolders = {...} definition. Alternately, if you wanted to provide redundant fallbacks, you could also use the spread operator or Object.assign() in order to merge the values from the wp_localize_script() object into some defaults by explicitly referencing the global value as a property on window:

var MediaFolders = {
  textContent: 'Select the folder where you want to save the images or files that you upload to this post.',
  textButton: 'Select Folder',
  ...window.MediaFolders
};

Though, this shouldn't be necessary as it would only protect against the case where wp_localize_script() fails for some reason - which would probably mean you have bigger fish to fry.

2
  • 1
    Aside: that window reference isn't actually necessary there, as the local MediaFolders variable has not yet been defined. Somewhat counter-intuitively, a reference to just MediaFolders within the object literal definition of the local MediaFolders variable would be a reference to the global variable.
    – bosco
    May 28, 2022 at 22:20
  • 1
    Exactly, was taking the local variable, I thought I had to declare it also in the js... Thank you very much. I spent all day with this problem and could not find a solution. Thank you. It works now
    – choseɳ
    May 29, 2022 at 4:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.