# Add controls for WP 6.3’s new asynch & defer attributes

**URL:** <https://forum.pinegrow.com/t/add-controls-for-wp-6-3-s-new-asynch-defer-attributes/8271>\
**Category:** Feature Request\
**Tags:** wordpress\
**Created:** [July 31, 2023, 4:08pm UTC](https://forum.pinegrow.com/t/add-controls-for-wp-6-3-s-new-asynch-defer-attributes/8271 "2023-07-31T16:08:18Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![TechAkayy](https://avatars.discourse-cdn.com/v4/letter/t/ce73a5/32.png) [@TechAkayy](https://forum.pinegrow.com/u/TechAkayy)\
**Post date:** [January 30, 2024, 12:07pm UTC](https://forum.pinegrow.com/t/add-controls-for-wp-6-3-s-new-asynch-defer-attributes/8271/3 "2024-01-30T12:07:39Z")

</div>

On this topic, also support for inline & external module scripts. Just sharing the below, to see if anyone tried something similar, and have any suggestions.

Probably there are better solutions… meanwhile, pg-wp-addon, if it sets the information that the script is of type=“module” (can be extended to async, defer, once, nonce etc) in the script’s `id` (which currently is of format `inline-script-x`), then the `id` can be used by `wp_inline_script_attributes` && `wp_script_attributes` hooks to set the script tag as `type="module"`.

For eg, (assuming `assets` are available within the `public` folder of the theme),

**Flavour-1** - Module script imported using `src`

```auto
<script type="module" src="/assets/my-module.js"></script>

```

If this is generated…

```auto
wp_register_script('inline-module-script-1', "/assets/my-module.js", [], '1.0.0', true);
wp_enqueue_script('inline-module-script-1');
wp_scripts()->add_data('inline-module-script-1', 'type', 'module');

```

**Flavour-2** - Module script where the import is within the script body (alternative to flavour-1)

```auto
<script type="module">
    import {something} from "/assets/my-module.js";
    something();
</script>

```

If this is generated…

```auto
wp_register_script('inline-module-script-1', '', [], '1.0.0', true);
wp_enqueue_script('inline-module-script-1');
wp_add_inline_script('inline-module-script-1', 'import {something} from "/assets/my-module.js";something();');

```

Then, we could use these two hooks to set the `type="module"` attribute like this (added to `inc/custom.php`):

```auto
<?php
/* 
Use this file to add custom PHP code to your theme or plugin 
*/
add_filter('wp_inline_script_attributes', 'add_type_module_attribute');
add_filter('wp_script_attributes', 'add_type_module_attribute');
function add_type_module_attribute($attributes)
{
  if (isset($attributes['id']) && str_contains($attributes['id'], '-module')) {
    $attributes = array_merge($attributes, array('type' => 'module'));
  }
  return $attributes;
}
?>

```

Some related info, for any solution involving `wp_scripts()->add_data('inline-script-1', 'type', 'module');` which probably won’t work for inline scripts

- The script\_loader\_tag filter only applies to tags that load JavaScript files, not inline JavaScript blocks. Source - [Why are some script tags skipped when adding nonces for content security policy in WordPress? - Stack Overflow](https://stackoverflow.com/a/76377900)
- wp\_script\_attributes && wp\_inline\_script\_attributes doesn’t receive $handle. Source - [wp\_script\_attributes – Hook | Developer.WordPress.org](https://developer.wordpress.org/reference/hooks/wp_script_attributes/)

---

_[View the full topic](https://forum.pinegrow.com/t/add-controls-for-wp-6-3-s-new-asynch-defer-attributes/8271)._