Support » Developing with WordPress » `wp_set_script_translations` with `wp.i18n` does not return translated strings

  • Resolved Kris Kelvin

    (@kanlukasz)


    Short description:

    I try to translate strings in JS file. To test it I decided to create a simple test plugin. I have PHP and JS strings there. Translated PHP strings work fine, JS strings don’t work.

    Tools and environment:

    • WP-CLI 2.4.0
    • WordPress 5.5.1
    • Ubuntu 20.04
    • Original languange: English (United States)
    • Translate language: German

    Plugin PHP file content:

    
    <?php
    
    /*
     * Plugin Name: Test
     * Text Domain: test
     * Domain Path: /languages
     */
    
    /**
     * Init all
     */
    function run()
    {
        wp_register_script(
            'script',
            plugins_url('script.js', __FILE__),
            array('wp-i18n'),
            false,
            true
        );
        wp_enqueue_script('script');
    
        wp_set_script_translations('script', 'test',  dirname(plugin_basename(__FILE__)) . '/languages/');
        load_plugin_textdomain('test', false, dirname(plugin_basename(__FILE__)) . '/languages/');
    }
    add_action('init', 'run');
    
    /**
     * Register a custom menu page.
     */
    function register_my_custom_menu_page()
    {
        add_menu_page(
            'Custom Menu Title',
            __('Custom Menu', 'test'),
            'manage_options',
            'my_custom',
            'callback'
        );
    }
    add_action('admin_menu', 'register_my_custom_menu_page');
    
    /**
     * Display a custom menu page
     */
    function callback()
    {
        esc_html_e('Admin Page', 'test'); ?>
        <h1 id="h1"></h1>
    <?php }
    

    Plugin JS file content:

    
    const { __ } = wp.i18n;
    
    alert(__('js-alert', 'test'));
    
    console.log(__('js-log', 'test'));
    
    div = document.getElementById('h1');
    div.innerHTML += __('js-html', 'test');
    
    

    Procedure for creating translation files:

    1. Creating POT file with wp i18n make-pot . languages/test.pot
    2. Creating PO file with cp languages/test.pot languages/test-de_DE.po
    3. Filling msgstr strings in test-de_DE.po
    4. Adding line "Language: de_DE\n" to test-de_DE.po
    5. Creating MO file with msgfmt languages/test-de_DE.po -o languages/test-de_DE.mo
    6. Creating JSON file with wp i18n make-json languages/test-de_DE.po --no-purge --pretty-print

    Language files structure after performing the steps above

    
    wp-content/plugins/test/languages/test-de_DE-9a9569e9d73f33740eada95275da7f30.json
    wp-content/plugins/test/languages/test-de_DE.mo
    wp-content/plugins/test/languages/test-de_DE.po
    wp-content/plugins/test/languages/test.pot
    

    The content of test-de_DE.po that was used to create the MO and JSON

    
    # Copyright (C) 2020
    # This file is distributed under the same license as the Test plugin.
    msgid ""
    msgstr ""
    "Project-Id-Version: Test\n"
    "Report-Msgid-Bugs-To: https://wordpress.org/support/plugin/test\n"
    "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
    "Language-Team: LANGUAGE <LL@li.org>\n"
    "Language: de_DE\n"
    "MIME-Version: 1.0\n"
    "Content-Type: text/plain; charset=UTF-8\n"
    "Content-Transfer-Encoding: 8bit\n"
    "POT-Creation-Date: 2020-10-28T10:43:41+01:00\n"
    "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
    "X-Generator: WP-CLI 2.4.0\n"
    "X-Domain: test\n"
    
    #. Plugin Name of the plugin
    msgid "Test"
    msgstr "Test DE"
    
    #: test.php:35
    msgid "Custom Menu"
    msgstr "Custom Menu DE"
    
    #: test.php:48
    msgid "Admin Page"
    msgstr "Admin Page DE"
    
    #: script.js:3
    msgid "js-alert"
    msgstr "js-alert-de"
    
    #: script.js:5
    msgid "js-log"
    msgstr "js-log-de"
    
    #: script.js:8
    msgid "js-html"
    msgstr "js-html-de"
    
    

    Additional context:
    wp_set_script_translations returns true all the time
    load_plugin_textdomain returns true all the time
    – i know i can use wp_localize_script() but i would like to do it entirely with wp.i18n

    Plugin files structure:

    
    /test
      /languages
        test-de_DE-9a9569e9d73f33740eada95275da7f30.json
        test-de_DE.mo
        test-de_DE.po
        test.pot
      scripts.js
      test.php
    

    Result on my test website (screenshot):
    https://i.stack.imgur.com/aBf0L.png

Viewing 1 replies (of 1 total)
  • Kris Kelvin

    (@kanlukasz)

    A simple change

    dirname(plugin_basename(__FILE__)) . '/languages/' inside wp_set_script_translations() function (3rd argument)

    to

    plugin_dir_path(__FILE__) . 'languages/'

    **fixed the problem**

Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.