We need a LoDash for WordPress

For those who don’t know: LoDash is a utility library for JavaScript that contains functions that make common tasks easier. You could write them yourself, but LoDash functions are optimised and well tested, so you don’t have to reinvent the wheel.

The problem

WordPress is a bit like a programming language. You have a set of functions that are very basic, and you combine them to an application.

And like a programming language, many wheels are being reinvented.

A typical problem in WordPress is transferring the value of a variable from PHP to JavaScript. There is no function called “transferVar()” or “varToJS()“. Every WordPress programmer has run into this problem, the internet is full of blog posts and stackoverflow questions.

The answer is “wp_localise_script()“. Obvious? No, not at all. To make matters worse, there is a new function called “wp_add_inline_script()“. The name of the function does not imply the passing of a value, too. This is how the functions are used:

-- PHP ---
wp_register_script( 'my_script', 'myscript.js' );
wp_localize_script( 'my_script', 'my_variables', array(
 'variable1' => 'content1',
 'variable2' => 'content2)
));
wp_enqueue_script('my_script');


-- JavaScript --
const variable1 = my_variables.variable1;
const variable2 = my_variables.variable2;
console.log(variable1, variable2);
-- PHP ---
wp_enqueue_script('my_script', '/scripts.js', false);
$script  = 'variable1 = ' . json_encode(array("key1" => "content1")) .'; ';
$script .= 'variable2 = ' . json_encode(array("key2" => "content2")) .'; ';
wp_add_inline_script( 'my_script', $script );

-- JavaScript --
console.log(variable1, variable2);

The first version (“wp_localise_script") is not very intuitive as you are not localizing anything. The second version is a bit more intuitive, but if you’re new to WordPress development, you’ll probably need to look it up and find a blog post or an answered question. BTW, most AI bots will not find the second, modern solution.

And even when you find an answer, you have to adapt it to your needs, convert types, test the function and more.

A possible solution

Wouldn’t it be nice if you could just use a function called transferToJS() (or whatever you want to call it) and pass it an array or an object, a JSON string or object or some other data construct, and it would do what you expect?,

transferToJS($variable1);
transferToJS([$variable1, $variable2]);
transferToJS('{"var1": "content1", "var2": content2"}');
transferToJS(array("var1"=>"content1", "var2"=>"content2");
transferToJS(json_encode(array("key1" => "content1"));

All the actual logic could be hidden inside the functions, and experienced developers could maintain the inner workings.

Another use I can think of is to add a help tab or screen options to an options page. You have to dig deep into the documentation and search the web to find a solution. A simple add_options_help() or add_screen_options() would encourage more developers to add a help screen.

Conclusion

A WordPress library would help new and experienced developers to easily add insert well established solutions to their projects.

I know it would be quite a big project and developers are always in short supply. But you could start the project small and add more and more functions.
That way, clever solutions wouldn’t be left to rot in blog posts or stackoverflow replies, but would be easily findable and usable by many developers.

BTW: “LoPress” would be terrible name!

Foto von Jon Tyson auf Unsplash