Skip to content

Commit

Permalink
Load scripts with wp_enqueue_script_module
Browse files Browse the repository at this point in the history
  • Loading branch information
@vinkla
vinkla committed Apr 3, 2024
1 parent 479b14f commit 52038c4
Showing 1 changed file with 5 additions and 14 deletions.
19 changes: 5 additions & 14 deletions public/themes/wordplate/functions.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,15 @@
wp_get_environment_type() === 'local' &&
is_array(wp_remote_get('http://localhost:5173/')) // is Vite.js running
) {
wp_enqueue_script('vite', 'http://localhost:5173/@vite/client');
wp_enqueue_script('wordplate', 'http://localhost:5173/resources/js/index.js');
wp_enqueue_script_module('vite', 'http://localhost:5173/@vite/client');
wp_enqueue_script_module('wordplate', 'http://localhost:5173/resources/js/index.js');
} elseif (file_exists($manifestPath)) {
$manifest = json_decode(file_get_contents($manifestPath), true);
wp_enqueue_script('wordplate', get_theme_file_uri('assets/' . $manifest['resources/js/index.js']['file']));
wp_enqueue_script_module('wordplate', get_theme_file_uri('assets/' . $manifest['resources/js/index.js']['file']));
wp_enqueue_style('wordplate', get_theme_file_uri('assets/' . $manifest['resources/js/index.js']['css'][0]));
}
});

// Load scripts as modules.
add_filter('script_loader_tag', function (string $tag, string $handle, string $src) {
if (in_array($handle, ['vite', 'wordplate'])) {
return '<script type="module" src="' . esc_url($src) . '" defer></script>';
}

return $tag;
}, 10, 3);

// Remove admin menu items.
add_action('admin_init', function () {
remove_menu_page('edit-comments.php'); // Comments
Expand Down Expand Up @@ -110,5 +101,5 @@
return $mailer;
});

add_filter('wp_mail_from', fn() => env('MAIL_FROM_ADDRESS', 'hello@example.com'));
add_filter('wp_mail_from_name', fn() => env('MAIL_FROM_NAME', 'Example'));
add_filter('wp_mail_from', fn () => env('MAIL_FROM_ADDRESS', 'hello@example.com'));
add_filter('wp_mail_from_name', fn () => env('MAIL_FROM_NAME', 'Example'));

6 comments on commit 52038c4

@silverliiv
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How did you manage "wp_localize_script", this still requires "wp_enqueue_script" to be in place.
Or what's the best option to have translatable strings in your JS?

@vinkla
Copy link
Owner Author

@vinkla vinkla commented on 52038c4 Jun 3, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@silverliiv I'm not entirely sure what you're asking?

@silverliiv
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the change of "wp_enqueue_script" into "wp_enqueue_script_module" the "wp_localize_script" is not functioning correctly anymore, as it requires the "wp_enqueue_script" handler. And if you want to translate strings in WordPress for the JS to use them in your codebase, I found that wp_localize_script does that in great fashion.
image

@vinkla
Copy link
Owner Author

@vinkla vinkla commented on 52038c4 Jun 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really sure, I haven't had any issues with wp_localize_script myself.

@silverliiv
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will try and make it more clear.

// Using it like this, does execute the wp_localize_script

wp_enqueue_script('wordplate', get_theme_file_uri('assets/' . $manifest['resources/js/index.js']['file']), [], null);
wp_localize_script('wordplate', 'themeData', [
  'ajax_url' => admin_url('admin-ajax.php'),
]);

// Using it like this, does not execute the wp_localize_script

wp_enqueue_script_module('wordplate', get_theme_file_uri('assets/' . $manifest['resources/js/index.js']['file']), [], null);
wp_localize_script('wordplate', 'themeData', [
  'ajax_url' => admin_url('admin-ajax.php'),
]);

I'd say my theme setup is quite simple, nothing else should get on the way of it.
ChatGPT states: When working with WordPress, the wp_enqueue_script_module function is used to enqueue JavaScript modules (using type="module"). However, wp_localize_script, a function commonly used to pass PHP data to JavaScript, is not directly compatible with module scripts because it was designed to work with traditional scripts.

So my guess is, that it's intended not to work with wp_enqueue_script_module. My question was, what's your workaround for that?

@vinkla
Copy link
Owner Author

@vinkla vinkla commented on 52038c4 Jun 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't seem to be supported at the moment: https://core.trac.wordpress.org/ticket/60234

Please sign in to comment.