Why is my wp_localize_script() not working with Twenty Twenty-Two?

[sanzeeb3]

So, I have registered a script in 'wp_enqueue_scripts' hook.

wp_register_script( 'wpfda-delete-account-frontend', plugins_url( 'assets/js/frontend.min.js', WPFDA_PLUGIN_FILE ), array( 'wp-element', 'wp-i18n', 'jquery' ), WPFDA_VERSION, false );

and it's enqueued and localized in 'render_callback' of register_block_type()

    register_block_type(
    'wp-frontend-delete-account/delete-account-content',
        array(
            'editor_script'   => 'wpfda-gutenberg-block',
            'render_callback' => 'wpf_delete_account_content',
        )
     );

The callback function where wp_localize_script is called:

function wpf_delete_account_content() {
    wp_enqueue_script( 'wpfda-delete-account-frontend' );

    wp_localize_script(
        'wpfda-delete-account-frontend',
        'wpfda_plugins_params',
        i10n_data()
    );
}

It looks like wp_localize_script isn't working and I'm getting the error 'wpfda_plugins_params' not defined. Though, the script frontend.min.js is loaded properly.

This works on other themes such as Twenty Twenty, Twenty Twenty-One etc.

[MaggieCabrera]

I tried to reproduce this using your plugin and I couldn't, I never saw the error on my logs and the plugin seemed to load correctly. The theme doesn't add anything that would prevent this from working as intended, there may be a bug in Gutenberg related to block themes only if indeed the same Gutenberg version breaks this only in TT2.

[sanzeeb3]

@MaggieCabrera Thank you for testing the issue. I've tested on multiple environments and it does not look like the issue with Gutenberg, because the behavior is the same with Shortcode. Here's the simpler version to reproduce the issue.

1) Add the following codes in the theme's functions.php.

add_action( 'wp_enqueue_scripts', function() {
    wp_register_script( 'my-script', 'https://example.com/script.js', array(), '0.0.1', false );
} );

add_shortcode( 'my_shortcode', function() {
    wp_enqueue_script( 'my-script' );

    wp_localize_script( 
        'my-script',
        'my_params',
        array( 
            'is_okay' => 'Yes'
        )
    );

    return 'Shortcode Content';

} );

2) Go to posts and add the shortcode [my_shortcode]. 3) Visit the page. 4) In the view-source, I'd expect to see the localization:

<script id='my-script-js-extra'>
    var my_params = {"is_okay":"Yes"};
</script>

5) In Twenty Twenty-Two, it's not seen. 6) Repeat steps 1-5 in Twenty Twenty-One and see the source, you can see the localization.

I'm not sure if that approach of enqueuing and localizing is incorrect?

[MaggieCabrera]

Ok I see the issue now, but I still don't think it's a TT2 issue but a problem with block themes in general. Try the same steps over on empty theme which is the bare minimum for a block theme. The script is never enqueued. This must be an issue in core or Gutenberg specific to block themes. I'm running GB trunk when testing this.

[sanzeeb3]

It looks like wp_localize_script() should not be called within the shortcode or block callback.