pass object/JSON to wp_localize_script

5 Views

I’ve got a working piece of javascript that contains an object literal.
But I need to localize it, and I’m ytrying to figure out how to rewrite it so that I can get wp_localize_script() to accet it, and output the correct format.

The non-localized (non dynamic) version looks like this:

Read More
var layoyt_config = {
    'header'        : 1 
,   'footer'        : 1
,   'ls'            : {'sb1':1}
,   'rs'            : {'sb1':1,'sb2':1}
,   'align'         : 'center'
};

Now, to have those values generated by php (based on some wp_settings) I want to use wp_localize_script, so I can take it from there: 

var layoyt_config = my_localized_data.layoyt_config;

And to get that data in to that object property I ‘thought’ I could do this, but obviously not: 

$data = array(
    'layout_config' => {
        'header' : 1
    ,   'footer' : 1
    ,   'ls' : {'sb1': 1}
    ,    'rs' : {'sb1': 1,'sb2': 1}
    ,    'align' : 'center'
    }
);
wp_localize_script('my-script-handle', 'my_localized_data', $data);

As this will cause PHP parse error I’ve tried to rewrite the json to array syntax, as wp_localize_script will convert that back to object notation, but this also does not work for me: 

$data = array(
    'layout_config' => array(
        'header' => 1
    ,   'footer' => 1
    ,   'ls' => array('sb1'=>1)
    ,    'rs' => array('sb1'=>1,'sb2'=>1)
    ,    'align' => 'center'
    )
);
wp_localize_script('my-script-handle', 'my_localized_data', $data);

And while this runs smoothly trhough the php parser, I do not get the expected output in my page source, as my_localized_data.layout_config becomes a String “Array”, here is the output: 

<script type='text/javascript'>
    /* <![CDATA[ */
    var wpkit_localized_data = {
    layout_config: "Array"
    };
    /* ]]> */
</script>

So.. How can I do this (or do I just have to accept that I must ‘flatten’ my object into discrete vars like: 

lc_header = '1';
ls_ls_sb1 = '1';
etc...
Post Views: 5

Related posts

Leave a Reply

2 comments

  1. Indeed, wp_localize_script() is simple, it just adds quotes around the values and escapes the content, expecting all of them to be strings.

    However, there is the l10n_print_after key of the array, which will be printed without any interference at all. It can be used to execute arbitrary code after the strings are passed. You can use it to pass your extra data.

    $data = array(
    'layout_config' => {
      'ls' : {'sb1': 1}
    }
);
$reshuffled_data = array(
    'l10n_print_after' => 'my_localized_data = ' . json_encode( $data ) . ';'
);
wp_localize_script('my-script-handle', 'my_localized_data', $reshuffled_data);

    You will end up with code like this:

    var my_localized_data = {}; // What is left of your array
my_localized_data = {'layout_config': {'ls': {'sb1': 1}}}; // From l10n_print_after

  2. Disclaimer – I am out of my depth on JS security stuff here.

    First, to match your desired output you are off by nesting level. Object name goes as parameter in localize call (instead of array key):

    $data = array(
        'header' => 1
    ,   'footer' => 1
    ,   'ls' => array('sb1'=>1)
    ,    'rs' => array('sb1'=>1,'sb2'=>1)
    ,    'align' => 'center'
);
wp_localize_script('my-script-handle', 'layout_config', $data);

    But ls and rs are still broken because WP_Scripts->print_scripts_l10n() method doesn’t handle the case when variable is array.

    Best I could come up with to fix that is following filter (as above – not sure how safe would be to use it in production, but to give general idea):

    add_filter('js_escape','js_escape_nested', 10, 2);

function js_escape_nested($safe_text, $text) {

     if(is_array($text) )
         return str_replace( '"', "'", json_encode ($text) );

     return $safe_text;
}