wp_add_inline_script with block-based themes

  • Hello!

    I’ve got a question about using wp_add_inline_script to pass PHP data to a JS file. Are there new restrictions on how that can be done when using a block-based theme? I’ve got some code that was working previously (outlined below), that appears to not work with any block-based theme.

    Specifically, the JS handle isn’t being evaluated as registered on line 288 of class.wp-dependencies.php, and so wp_add_inline_script is failing, but only when a block-base theme is in use (I tested with the Twenty Twenty-Two and Tove block themes, works with all of the default, etc. non-block-based themes).

    Here are the stripped out portions of code that isn’t working. If there are any other sections that would be helpful to see, please let me know.

    In the main plugin file:

    add_action( 'wp_enqueue_scripts', array( $this, 'register_assets' ) );
public function register_assets() {
    wp_register_script( 'ewd-ufaq-js', EWD_UFAQ_PLUGIN_URL . '/assets/js/ewd-ufaq.js', array( 'jquery', 'jquery-ui-core' ), EWD_UFAQ_VERSION, true );
}

    Inside of the shortcode file:

    public function render() {
    $this->enqueue_assets();
}

public function enqueue_assets() {
    $args = array(
        // array data here
    );

    wp_enqueue_script( 'ewd-ufaq-js' );
    
    wp_add_inline_script(
        'ewd-ufaq-js',
        'const ewd_ufaq_php_data = ' . json_encode(
            apply_filters( 'ewd_ufaq_js_localize_data', $args )
        ),
        'before'
    );
}

    Again, works the code seems to work perfectly in non-block based themes but isn’t printed at all in the two block-based themes that I tested with. Thanks for any help as to what I might be doing wrong!

    • This topic was modified 2 years, 10 months ago by Rustaurius.
Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi @rustaurius !
    I was able to reproduce this issue but unfortunately, I couldn’t find anything in the documentation yet. However, if you want to conditionally enqueue the script only when the shortcode is used, then you can use the following workaround:

    function register_assets() {
    global $post;
    wp_register_script( 'ewd-ufaq-js', EWD_UFAQ_PLUGIN_URL . '/assets/js/ewd-ufaq.js', array( 'jquery', 'jquery-ui-core' ), EWD_UFAQ_VERSION, true );

    if ( $post && has_shortcode( $post->post_content, 'YOUR_SHORTCODE' ) ) {
        wp_enqueue_script( 'ewd-ufaq-js' );
        wp_add_inline_script(
            'ewd-ufaq-js',
            'const ewd_ufaq_php_data = ' . json_encode(
                apply_filters( 'ewd_ufaq_js_localize_data', array('one') )
            ),
            'before'
        );
    }
}

    Here, I moved $this->enqueue_assets(); from the render function to the wp_enqueue_scripts callback and loaded the script conditionally by checking post content for the usage of the shortcode.

    Please ensure you replace YOUR_SHORTCODE with your shortcode.

    Let me know if this works for you.

    Thread Starter Rustaurius

    (@rustaurius)

    Hi @kaavyaiyer,

    First off, thanks for taking the time to reproduce the issue and suggesting a workaround!

    What you’re suggesting would definitely work in cases where the data being to wp_add_inline_script is known before the shortcode runs, so for quite a few use-cases.

    There are a couple where it would not, though (ex. passing the min/max prices of products displayed by a shortcode to allow for price filtering, or FAQ titles for search with auto-complete, just as a couple of examples).

    The work around I came up with is simply printing some of the information at the same time as the other shortcode HTML, something like:

    $data = apply_filters( 'ewd_ufaq_js_localize_data', array('one') );

printf( "<script%s id='ewd-ufaq-js-extra'>\n%s\n</script>\n", json_encode( $data) );

    I’m hoping someone might know if this is an intended change in how wp_add_inline_script can be used in which case I’ll make the necessary changes, or if opening a Trac ticket would be appropriate here.

    Thanks again for taking the time to reproduce and reply!

    Hi @rustaurius, you’re welcome!

    If I understand this correctly, you want to pass the shortcode attributes to your JS file. Although your workaround will work, WordPress does not recommend injecting scripts without proper sanitization and Code sniffers will give you warning.

    I found another way which would be to use shortcode_parse_atts() function to parse/extract the shortcode attributes from the post content and pass that to the wp_localize_script function. wp_localize_script handles sanitization too! 

    if ( $post && has_shortcode( $post->post_content, 'YOUR_SHORTCODE' ) ) {
        $parsed_attrs = shortcode_parse_atts( $post->post_content );
        // enqueue script
        // localize script
}

    I’m hoping someone might know if this is an intended change in how wp_add_inline_script can be used in which case I’ll make the necessary changes, or if opening a Trac ticket would be appropriate here.

    I am not sure if this is an intended change. Since block themes are fairly new to the WordPress ecosystem, the documentation for it is limited at the moment.

    Thread Starter Rustaurius

    (@rustaurius)

    Hi @kaavyaiyer,

    Thanks for the reply and the note about escaping the script!

    I’ll dig some more to see what escaping is done before the data is printed to the page using wp_add_inline_script or wp_localize_script, so that that can be applied directly, and maybe follow up with a ticket about this issue.

    Thanks for your help!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘wp_add_inline_script with block-based themes’ is closed to new replies.