Translate javascript with WordPress built-in localization API for static strings

Question

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

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