Gutenberg block, adding and accessing a javascript file path

Question

I am new to plug-in development, and I am impressed with the support and documentation. I have been able to implement a Gutenberg Block plugin and enter all the variables I want. It’s now time to implement the JavaScript and PHP render pages (edit.js and render.php). The purpose of my plugin is to enable the display of CreateJS animations. To do this, CreateJS needs to be loaded (I have that working) and the JavaScript code to create the animation. How do I load a JavaScript file that changes with each Gutenberg block? Here is the PHP code I have right now:

<div id="animation_containerPEPSyn" style="background-color:rgba(255, 255, 255, 1.00); width:450px; height:360px">
    <canvas id="<?php echo $init_id ?>" width="<?php echo $canvas_width ?>" height="<?php echo $canvas_height ?>" class="default">
    </canvas>
    <div id="dom_overlay_containerPEPSyn" style="pointer-events:none; overflow:hidden; width:<?php echo $canvas_width ?>px; height:<?php echo $canvas_height ?>px; position: static; left: 0px; top: 0px; display: block;">
    </div>
    <script src="<?php echo $javascript_path ?>"></script>
    <script>window.addEventListener("load", <?php $init_func ?>())</script>
</div>

I want the plugin user to be able to enter a width and height for the canvas page, and also a path to the JavaScript file that creates the animation. The problem I am having is that I keep getting errors when I try to point to the js file in the content directory. I have placed the file in the content directory like so… wp-content:images: 8-9.js

I am thinking the path should be images/8-9.js, and when I use that and render the page, I get this path

http://localhost/wordpress_ttm/2025/08/25/copyright-test-page/images/8-9.js

As requested by mmm: The goal of this block is to allow the display of createjs animations. These use a library, createjs, to make animations. All the drawing and animation will typically be contained inside a single javascript file. This code will load images, move them around, control button actions, etc. So in WordPress the user creates the block and enters the following information: javascriptPath - the path to where the javascript is that creates the createjs animation canvasWidth - the width of the canvas that will be drawn on canvasHeight - the height of the canvas that will be drawn on init_func - the name of the function in the javascript pointed to by javascriptPath that starts the drawing function init_Id - the id of the canvas element. This is used by the javascript file.

I have played around with this some more, and I think the issue is that WordPress is inserting text into my path that doesn't belong. If I try to use a relative path such as "images/8-9.js for the JavaScript path. I get the path listed above. If I hard-code the exact path, I can get the script to load and start, but any relative paths inside the JavaScript also get the

2025/08/25/copyright-test-page

added to their paths. Where is that coming from?

Further update I figured out where that path was coming from, it was how I had permalinks set up. I figured out a different way to add the path, but the javascript still isn't loading. Here is my new code for render.php:

<?php
/**
 * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
 */

?>
<p <?php echo get_block_wrapper_attributes(); ?>>
</p>
<?php

if(!empty($attributes['javascriptPath']) && !empty($attributes['canvasWidth'])
    && !empty($attributes['canvasHeight']) && !empty($attributes['initFnc'])) {
    $javascript_path = $attributes['javascriptPath'];
    $canvas_width = $attributes['canvasWidth'];
    $canvas_height = $attributes['canvasHeight'];
    $init_func = $attributes['initFnc'];
    $init_id = substr($init_func, 4, strlen($init_func));
    $javascript_path = "/" . str_replace(ABSPATH, "", WP_CONTENT_DIR) . "/" . $javascript_path;
}

?>
<div id="animation_containerPEPSyn" style="background-color:rgba(255, 255, 255, 1.00); width:450px; height:360px">
    <canvas id="<?php echo $init_id ?>" width="<?php echo $canvas_width ?>" height="<?php echo $canvas_height ?>" class="default">
    </canvas>
    <div id="dom_overlay_containerPEPSyn" style="pointer-events:none; overflow:hidden; width:<?php echo $canvas_width ?>px; height:<?php echo $canvas_height ?>px; position: static; left: 0px; top: 0px; display: block;">
    </div>
    <script src="<?php echo $javascript_path ?>"></script>
    <script>window.addEventListener("load", <?php $init_func ?>())</script>
</div>

if the user who want an animation must write his own code, then what are the functionalities in you extension ? edit your question to give an example of what the user will do to setup an animation. — mmm
– mmm, Commented Aug 28 at 17:15
the part 2025/08/25/copyright-test-page looks like the url of the public page. maybe you can try to set a javascript variable with the url to the wp-content directory and then use this variable in all url in the javascript code. — mmm
– mmm, Commented Aug 28 at 18:49
So some more information., Wordpress was generating that path based upon the permalink setting. This is set at Settings->Permalink. By modifying this, it changed. it. So I had to find a new way to set up the correct path. I now have it giving me the correct path, but for some reason, even though it appears the path is correct, it won't load the scripts file. — Timothy Paustian
– Timothy Paustian, Commented Aug 29 at 19:24
what doesn't load ? there is a 404 error in the network tab ? an error in the console ? the code doesn't execute even if the js file contains only console.log("I'm here !"); ? — mmm
– mmm, Commented Aug 29 at 19:56
you forget an echo on the line addEventListener("load .... — mmm
– mmm, Commented Aug 29 at 19:58

mmm · Accepted Answer · 2025-08-28 15:46:12Z

1

if you are writing a plugin, all files have to be in the plugin directory and then the javascript file must have an url like ...wp-content/plugins/MY_PLUGIN/js/images/8-9.js.

to dynamically calculate this url you can try this code :

$plugin_url = plugins_url("", __FILE__);
// return something like https://server/wp_directory/wp-content/plugins/MY_PLUGIN

$javascript_url = "$plugin_url/js/images/8-9.js";

answered Aug 28 at 15:46

mmm

4,0593 gold badges17 silver badges22 bronze badges

Thank you for your response. I appreciated it. I think what I am trying to do may be impossible with WordPress blocks. For createJS, you use javascript to create and control the animation. The javascript loads any images, moves them around, etc. What that means is that for each block, the javascript for the animation is going to be dictated by the user of the block, not by the plugin author. Each javascript will be different for each animation that gets posted. I think I also need to be able to frontload the javascript to get the animation to work.

Timothy Paustian
– Timothy Paustian

2025-08-28 16:09:42 +00:00
Commented Aug 28 at 16:09

Add a comment |

Stack Exchange Network

Gutenberg block, adding and accessing a javascript file path

1 Answer 1

Your Answer

Hot Network Questions

Gutenberg block, adding and accessing a javascript file path

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions