Setting HTML properties in a Gutenberg plugin using WordPress settings

by

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

1 Answer
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.

Leave a Comment