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

I’ve been attempting to implement the interpretation to a few strings in a .js file however nothing has labored.

First attempt to do it like I do in php, within the .js file add this variable var __ = wp.i18n.__; and I put the strings like __( 'Hey World', 'text-domain'), but it surely did not work.

After searching for details about it, I discovered a publish the place they discuss passing the translated strings with wp_localize_script one thing like that.

// Localize the script with new knowledge
$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 did not work both

Beneath I depart my js and php code, please inform me what I am doing mistaken

PHP

// Register script
operate mediafolders_sidebar_plugin_register() {
    wp_register_script(
        'mediafolders-plugin-select-js',
        MEDIAFOLDERS_PLUGIN_URL . 'property/js/choose.js',
        array( 'wp-plugins', 'wp-edit-post', 'wp-element' )
    );
    $translation_array = array(
        'textContent' => __( 'Choose the folder the place you need to save the photographs or information that you just add to this publish.', MEDIAFOLDERS_TEXT_DOMAIN ),
        'textButton' => __( 'Choose Folder', MEDIAFOLDERS_TEXT_DOMAIN ),
    );
    wp_localize_script( 'mediafolders-plugin-select-js', 'MediaFolders', $translation_array );
}
add_action( 'init', 'mediafolders_sidebar_plugin_register' );

// Enqueue script
operate 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', operate() {
    var registerPlugin = wp.plugins.registerPlugin;
    var PluginDocumentSettingPanel = wp.editPost.PluginDocumentSettingPanel;
    var Button = wp.elements.Button;
    var el = wp.aspect.createElement;

    var MediaFolders = {
        textContent: 'Choose the folder the place you need to save the photographs or information that you just add to this publish.',
        textButton: 'Choose Folder',
    };

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

    // Create parts for panel on sidebar
    operate MediaFoldersDocumentSetting() {
        return el(

            PluginDocumentSettingPanel,
            {
                identify: '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,
    } );

    // Shut the pop up by clicking on the X or Carried out!
    var btnClosePopup1 = doc.querySelector( '.mediafolders-popup-close' );
    var btnClosePopup2 = doc.querySelector( '.mediafolders-popup-button > button' );
    if ( btnClosePopup1 ) {
        btnClosePopup1.addEventListener( 'click on', () => {
            var popup = doc.querySelector( '.mediafolders-popup' );
            popup.classList.take away( 'open' );
        });
    }
    if ( btnClosePopup2 ) {
        btnClosePopup2.addEventListener( 'click on', () => {
            var popup = doc.querySelector( '.mediafolders-popup' );
            popup.classList.take away( 'open' );
        });
    }
});