0

I'm looking to make use of translation strings inside my JS files and unfortunately, I've read that @wordpress/i18n doesn't work <5.0. Are there any tools/libraries that help me with this?

4
  • 2
    What's the reason for using pre-5.0? The only reason I can think of is that you're unaware of the classic editor plugin. The best practice solution to this is to upgrade to 5.0+
    – Tom J Nowell
    Nov 22, 2020 at 21:16
  • @TomJNowell I want to be able to use translations in my JS files. If you're aware of any alternatives, please do let me know. Nov 22, 2020 at 21:53
  • If you can answer my question, it's important and unavoidable. You may consider it irrelevant, but humour us and demonstrate that. You shouldn't be using a WordPress version that old, if you can't update WordPress then you need to share why. Otherwise the answer is no, that library requires a newer version of WordPress
    – Tom J Nowell
    Nov 23, 2020 at 0:13
  • @TomJNowell I don't choose what version of WP clients use, unfortunately. As per our stats, ~9% of our customers are still running on 4.9. What are the alternatives to this library? Nov 23, 2020 at 0:41

2 Answers 2

3

No. That library requires a newer version of WordPress. If you want to use that library then you need to update your version of WordPress to a more recent version.

2

Although the mentioned library brings an advanced localization abilities (the most important one is the availability of _n function), there is a legacy way of localizing used javascript files with the wp_localize_script() function available for many years since WordPress 2.2. Here is an example of localizing Magnific Popup script (source) from one of my sites. First, you should change all the hardcoded messages inside the script (here is the patch file for jquery.magnific-popup.js script to show how it can be done):

--- jquery.magnific-popup.js
+++ jquery.magnific-popup.js
@@ -895,9 +895,9 @@
 
        closeMarkup: '<button title="%title%" type="button" class="mfp-close">&#215;</button>',
 
-       tClose: 'Close (Esc)',
+       tClose: mfp_msg.close,
 
-       tLoading: 'Loading...',
+       tLoading: mfp_msg.loading,
 
        autoFocusLast: true
 
@@ -974,7 +974,7 @@
    options: {
        hiddenClass: 'hide', // will be appended with `mfp-` prefix
        markup: '',
-       tNotFound: 'Content not found'
+       tNotFound: mfp_msg.content_not_found
    },
    proto: {
 
@@ -1047,7 +1047,7 @@
    options: {
        settings: null,
        cursor: 'mfp-ajax-cur',
-       tError: '<a href="%url%">The content</a> could not be loaded.'
+       tError: mfp_msg.content_not_loaded
    },
 
    proto: {
@@ -1144,7 +1144,7 @@
        cursor: 'mfp-zoom-out-cur',
        titleSrc: 'title',
        verticalFit: true,
-       tError: '<a href="%url%">The image</a> could not be loaded.'
+       tError: mfp_msg.image_not_loaded
    },
 
    proto: {
@@ -1677,9 +1677,9 @@
        navigateByImgClick: true,
        arrows: true,
 
-       tPrev: 'Previous (Left arrow key)',
-       tNext: 'Next (Right arrow key)',
-       tCounter: '%curr% of %total%'
+       tPrev: mfp_msg.previous,
+       tNext: mfp_msg.next,
+       tCounter: mfp_msg.current
    },
 
    proto: {

Next, you use localized script the following way:

wp_enqueue_script( 'magnific-popup', get_stylesheet_directory_uri() . '/assets/lib/magnific-popup/magnific-popup.js', array( 'jquery' ) );
$magnific_popup_messages = array(
    'close'              => __( 'Close (Esc)', 'your-text-domain' ),
    'loading'            => __( 'Loading...', 'your-text-domain' ),
    'content_not_found'  => __( 'Content not found', 'your-text-domain' ),
    'content_not_loaded' => __( '<a href="%url%">The content</a> could not be loaded.', 'your-text-domain' ),
    'image_not_loaded'   => __( '<a href="%url%">The image</a> could not be loaded.', 'your-text-domain' ),
    'previous'           => __( 'Previous (Left arrow key)', 'your-text-domain' ),
    'next'               => __( 'Next (Right arrow key)', 'your-text-domain' ),
    'current'            => __( '%curr% of %total%', 'your-text-domain' )
);
wp_localize_script( 'magnific-popup', 'mfp_msg', $magnific_popup_messages );

This function is also can be helpful when you need to pass some parameters to the enqueued javascript (although it wasn't designed for that purpose, that type of using it is very popular).

2
  • Thank you! Naturally, I always knew about wp_localize_script, but, help me out a bit on my thinking here: why exactly is this package not backwards compatible?. I'm just worried, people who will be using my theme/plugins will be forced into using a custom solution when, you know, there we have @wordpress/i18n. Any thoughts? Nov 24, 2020 at 2:44
  • @DanielSimmons I'm not sure I understand your question correctly. If it is what exactly prevents this package to be backward compatible the short answer is the absence of wp_set_script_translations() function in WP < 5.0, an old way of wp_enqueue_script() function behavior (it doesn't take into account textdomain and translation_path properties of the enqueued script object), the absence of those properties in WP_Dependency object prototype etc etc Nov 24, 2020 at 4:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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