Title: wp_add_inline_script with block-based themes
Last modified: February 11, 2022

---

# wp_add_inline_script with block-based themes

 *  [Rustaurius](https://wordpress.org/support/users/rustaurius/)
 * (@rustaurius)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/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 4 years, 4 months ago by [Rustaurius](https://wordpress.org/support/users/rustaurius/).

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Kaavya Iyer](https://wordpress.org/support/users/kaavyaiyer/)
 * (@kaavyaiyer)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/wp_add_inline_script-with-block-based-themes/#post-15289883)
 * Hi [@rustaurius](https://wordpress.org/support/users/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](https://wordpress.org/support/users/rustaurius/)
 * (@rustaurius)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/wp_add_inline_script-with-block-based-themes/#post-15290077)
 * Hi [@kaavyaiyer](https://wordpress.org/support/users/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!
 *  [Kaavya Iyer](https://wordpress.org/support/users/kaavyaiyer/)
 * (@kaavyaiyer)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/wp_add_inline_script-with-block-based-themes/#post-15292813)
 * Hi [@rustaurius](https://wordpress.org/support/users/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](https://wordpress.org/support/users/rustaurius/)
 * (@rustaurius)
 * [4 years, 4 months ago](https://wordpress.org/support/topic/wp_add_inline_script-with-block-based-themes/#post-15295453)
 * Hi [@kaavyaiyer](https://wordpress.org/support/users/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.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 5 replies
 * 4 participants
 * Last reply from: [Rustaurius](https://wordpress.org/support/users/rustaurius/)
 * Last activity: [4 years, 4 months ago](https://wordpress.org/support/topic/wp_add_inline_script-with-block-based-themes/#post-15295453)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics