The colour picker is working fine because it’s a separate script being enqueued as a dependency of custom-script-handle. So even if custom-script-handle isn’t loading because the URL is wrong the colour picker script will still load.
If you don’t enqueue custom-script-handle then the colour picker won’t work because the script is being enqueued at all. You would need to enqueue it separately with wp_enqueue_script( 'wp-color-picker' );
The reason custom-script-handle itself isn’t loading, and causing the console error that you see, is because the URL is wrong. The reason the URL is wrong is because you’re using plugins_url() incorrectly. Specifically in how you’ve used __FILE__.
From the documentation, the 2nd argument to plugins_url() is:
A full path to a file inside a plugin or mu-plugin. The URL will be
relative to its directory. Typically this is done by passing__FILE__
as the argument.
The problem is that in your case __FILE__ is within a theme. So your __FILE__ is:
/home/account/public_html/wp-content/themes/mytheme-theme/inc/{whatever-the-file-name-is}.php
But the plugins directory is:
/home/account/public_html/wp-content/plugins
WordPress already knows the URL to the plugins folder, https://example/test/wp-content/plugins/, but needs to use those two paths to figure out the URL to the specific file you’ve requested. So what plugins_url() does is try to figure out the plugin folder by subtracting that second path from the first path.
So if used correctly, __FILE__ will be something like:
/home/account/public_html/wp-content/plugins/my-plugin/inc/assets.php
The plugin path is then subtracted from this and you get:
my-plugin/inc/assets.php
plugins_url() then takes off the filename:
my-plugin/inc
Then adds the filename you provided in the first argument (custom-script.js):
/my-plugin/inc/custom-script.js
And finally adds that to the plugins URL:
http://example.com/wp-content/plugins/my-plugin/inc/custom-script.js
But since your __FILE__ isn’t in the plugins folder, there’s no overlap. So when it subtracts the plugin directory and filename the relative path is still:
/home/account/public_html/wp-content/themes/mytheme-theme/inc/
And then that and the filename get added to the plugins URL and you end up with this:
https://example.com/wp-content/plugins/home/account/public_html/wp-content/themes/mytheme-theme/inc/custom-script.js
So if you need your theme to enqueue custom-script.js, you either need to put it in the theme or enqueue it using the handle the plugin will have already registered for it. Don’t try an load files from a plugin directly from within a theme.