wp_localize_script()
defines a variable in the global JS scope – in the case of your code, the object is placed in a globally-scoped variable with the identifier MediaFolders
.
In your load
event callback you are also defining a variable with the identifier MediaFolders
scoped to it’s encapsulating function body – so when you use the variable further down, your code is referencing the locally scoped variable rather than the global one which wp_localize_script()
defined.
The solution is to remove your var MediaFolders = {...}
definition. Alternately, if you wanted to provide redundant fallbacks, you could also use the spread operator or Object.assign()
in order to merge the values from the wp_localize_script()
object into some defaults by explicitly referencing the global value as a property on window
:
var MediaFolders = {
textContent: 'Select the folder where you want to save the images or files that you upload to this post.',
textButton: 'Select Folder',
...window.MediaFolders
};
Though, this shouldn’t be necessary as it would only protect against the case where wp_localize_script()
fails for some reason – which would probably mean you have bigger fish to fry.