`wp_set_script_translations` with `wp.i18n` does not return translated strings in simple plugin

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 [email protected]\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

Result on my test website:

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

Topic localization language translation plugin-development Wordpress javascript

Category Web


Ok, 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

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.