2

I want to set the maxlength property on a TextControl I define in a Gutenberg plugin. This length is to be set from a setting in my WordPress plugin (the one that loads the Gutenberg plugin). I attempted the standard approach of passing PHP data to JavaScript (using wp_localize_script, discussed for example here), but I wonder if there is a better way to do this, especially with the work that has gone into Gutenberg, than continuing to misappropriate a translation function.

In any case I encountered an error trying to get the approach in the question above to work. Here are the relevant parts of my code:

PHP plugin:

    // enqueue my plugin script
    wp_enqueue_script(
        'my-script-name',
        '/path/to/my/script.js',
        array( 'wp-edit-post', 'wp-plugins', 'wp-i18n', 'wp-element' ),
        'my-script-version'
    );

    // pass setting to script
    wp_localize_script(
        'my-script-name',
        'my_script_input_maxlength',
        get_option( 'my_plugin_maxlength' )
    );

Gutenberg plugin (hooks into PluginPostStatusInfo to add a TextControl):

class MyPlugin extends Component {
    constructor() {
        super( ...arguments );
    }

    render() {
        return el(
            PluginPostStatusInfo,
            {
                className: 'my_text_panel'
            },
            el(
                TextControl,
                {
                    name: 'my_text_control_name',
                    maxlength: my_script_input_maxlength
                }
            )
        );
    }
}

With the above code, Gutenberg says it has encountered an unexpected error (shown at bottom). I assume this is either due to my lack of understanding of JavaScript or Gutenberg's use of React, which might handle variables like this differently.

My question is: what is the "proper" way to pass PHP settings / add arbitrary data to a Gutenberg/React plugin? If it is indeed to use wp_localize_script like above, then what am I doing wrong?

Gutenberg error using the above code:

render@https://my-test-site/wp-content/plugins/my-plugin/js/script.js?ver=0.8.1:51:21
Xf@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:91:266
yh@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:102:317
lg@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:120:88
mg@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:120:386
gc@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:127:202
vb@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:126:230
ub@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:126:65
zd@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:124:449
ra@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:123:319
enqueueSetState@https://my-test-site/wp-content/plugins/gutenberg/vendor/react-dom.min.82e21c65.js:189:231
q.prototype.setState@https://my-test-site/wp-content/plugins/gutenberg/vendor/react.min.ab6b06d4.js:18:428
value/this.unsubscribe<@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:14405
n/</<@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:4745
n/<@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:4716
v@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:21770
S/</<@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:4298
G/</<@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:12594
a/</</<@https://my-test-site/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=1540053061:1:3778
dispatch@https://my-test-site/wp-content/plugins/gutenberg/build/data/index.js?ver=1540053061:1:24328
i/<@https://my-test-site/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=1540053061:1:3359
n/<@https://my-test-site/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=1540053061:1:7930
n@https://my-test-site/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=1540053061:1:7904
u/<@https://my-test-site/wp-content/plugins/gutenberg/build/redux-routine/index.js?ver=1540053061:1:7859
j/</<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:2:29352
j/<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:2:29220
f@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:20743
MutationCallback*[70]</n.exports@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:21024
[205]<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:2:28663
s@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:257
s/<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:316
[2]<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:1903
s@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:257
s/<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:316
[1]</<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:506
[1]<@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:481
s@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:257
e@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:431
@https://my-test-site/wp-content/plugins/gutenberg/vendor/wp-polyfill-ecmascript.min.2ae96136.js:1:2
Improve this question

1 Answer 1

Reset to default
1

I came to this question almost 3 years late, but there is a better way of doing that now: WordPress recommends using wp_add_inline_script when you want to pass data between PHP and JS, you can read about it here

Basically, what you will do, is changing your wp_localize_script function call in your code, for this:

wp_add_inline_script('my-script-name', 'const my_plugin_max_length=' . get_option( 'my_plugin_maxlength' ), 'before');

And then you can use the variable my_plugin_max_length in your JS file.

Improve this answer
1
  • Thanks, this was a long time ago but I think that's what I ended up using!
    – Sean
    Commented Sep 5, 2021 at 14:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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