Support

Account

Register Login

Home › Forums › Gutenberg › Load JS in editor with block.json

Solving

Load JS in editor with block.json

  • I’m using block.json to define my ACF block. However, it’s either not pulling in the JS file which is basically just a console.log('Hello'). The editorStyle is working, so I know it’s recognizing my block.json config. What’s the best way to get the JS to load in the editor? BTW, Even the JS file defined as "script": "file:./custom.js" isn’t loading on the front end either.


    {
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "name": "acf/testimonial",
    "title": "Testimonial",
    "description": "A custom testimonial block.",
    "script": "file:./custom.js",
    "style": [ "file:./style.css" ],
    "editorStyle": "file:./style.css",
    "editorScript": "file:./editor.js",
    "category": "common",
    "icon": "admin-comments",
    "acf": {
    "mode": "preview",
    "renderTemplate": "testimonial.php"
    }

    }

  • I found a way that works, but I don’t know if it’s the best practice today. This uses Bill Erickson’s tutorial. https://www.billerickson.net/building-acf-blocks-with-block-json/#script

    So, script in block.json should point to a function rather than file.

    Although, now my function is in the functions.php file instead of with my block. I’m not a PHP expert so maybe there’s a way to keep this more tidy.

  • Experiencing the same issue. Has anyone found a better fix?

  • I had the same problem of my block JS file not loading when adding it this way. If you have wp_debug enabled you’ll probably see this notice: “Function register_block_script_handle was called incorrectly…”. It will show the name of the .asset.php file it’s expecting.

    However, using this ACF forum post to start, I found how to load scripts via file name in blocks.json. Which is great as I understand it’s the better way to do it (now that it’s possible) instead of what Bill Erickson’s tutorial shows.

    So @spinline since you are loading a JS file named custom.js you’d need to add in the same folder a file named custom.asset.php. In this file you can include the handle name, dependencies, and version number. Or you can leave them to be default generated. My js-file-name.asset.php looks like this:

    
<?php
  return array(
    'dependencies' => array(
        'wp-blocks',
        'wp-element',
        'wp-i18n',
    ),
    'version'      => '1.0',
  );

    To read more about this, check out the WPDefinedAsset section in the Block Editor Handbook.

  • I had the same problem of my block JS file not loading when adding it this way. If you have wp_debug enabled you’ll probably see this notice which will show the name of the .asset.php file it’s expecting:

    “Function register_block_script_handle was called incorrectly…”.

    However, using this ACF forum post to start, I found how to load scripts via file name in blocks.json. Which is great as I understand it’s the better way to do it (now that it’s possible) instead of what Bill Erickson’s tutorial shows.

    So @spinline since you are loading a JS file named custom.js you’d need to add in the same folder a file named custom.asset.php. In this file you can include the handle name, dependencies, and version number. Or you can leave them to be default generated. My js-file-name.asset.php looks like this:

    
<?php
  return array(
    'dependencies' => array(
        'wp-blocks',
        'wp-element',
        'wp-i18n',
    ),
    'version'      => '1.0',
  );

    To read more about this, check out the WPDefinedAsset section in the Block Editor Handbook.

  • I had the same problem of my block JS file not loading when adding it this way. If you have wp_debug enabled you’ll probably see this notice which will show the name of the .asset.php file it’s expecting:

    “Function register_block_script_handle was called incorrectly…”.

    However, using this ACF forum post to start, I found how to load scripts via file name in blocks.json. I understand this is the better way to do it (now that it’s possible) instead of what Bill Erickson’s tutorial shows (enqueing the script manually via PHP).

    So since you are loading a JS file named custom.js you’d need to add in the same folder a file named custom.asset.php. In this file you can include the handle name, dependencies, and version number. Or you can leave them to be default generated. My js-file-name.asset.php looks like this:

    
<?php
  return array(
    'dependencies' => array(
        'wp-blocks',
        'wp-element',
        'wp-i18n',
    ),
    'version'      => '1.0',
  );

    To read more about this, check out the WPDefinedAsset section in the WP Block Editor Handbook.

  • Has anyone ran into an issue when using wp-scripts package that the {block}.asset.php file gets auto-generated but has blank dependencies? For example, I have an editor.asset.php file in my src block files with the following code:

    <?php
return array(
    'dependencies' => array(
        'wp-element',
        'wp-blocks',
        'acf-input', // way to make block js wait for window.acf to exists
    )
);

    However, when wp-scripts generates my build directory, that file is generated/copied, however the contents is now:

    <?php return array('dependencies' => array(), 'version' => '9f262c201bd7fd5a3679');

    I was digging into the actual code within the node package that generates the contents of this file, and it appears the if statement within this code block never runs because this.externalizedDeps is always just an empty set.

    const chunkDeps = new Set();

			if ( injectPolyfill ) {
				chunkDeps.add( 'wp-polyfill' );
			}
			const processModule = ( { userRequest } ) => {
				if ( this.externalizedDeps.has( userRequest ) ) {
					chunkDeps.add( this.mapRequestToDependency( userRequest ) );
				}
			};

    Any thoughts..?

  • Also in my-block.php file, is there a way to get
    <script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script> to process in the editor?

    This doesn’t seem to process in the editor; only on the front end:

    <div <?php echo $anchor; ?>class="<?php echo esc_attr( $class_name ); ?>">
<script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script>
<spline-viewer url="<?php echo $text; ?>"></spline-viewer>
</div>

  • I had the same problem of my block JS file not loading when adding it this way. If you have wp_debug enabled you’ll probably see this notice: “Function register_block_script_handle was called incorrectly…”. It will show the name of the .asset.php file it’s expecting.

    However, using this ACF forum post to start, I found how to load scripts via file name in blocks.json. Which is great as I understand it’s the better way to do it (now that it’s possible) instead of what Bill Erickson’s tutorial shows.

    So @spinline since you are loading a JS file named custom.js you’d need to add in the same folder a file named custom.asset.php. In this file you can include the handle name, dependencies, and version number. Or you can leave them to be default generated. My js-file-name.asset.php looks like this:

    `
    <?php
    return array(
    ‘dependencies’ => array(
    ‘wp-blocks’,
    ‘wp-element’,
    ‘wp-i18n’,
    ),
    ‘version’ => ‘1.0’,
    );
    `

    To read more about this, check out the WPDefinedAsset section in the Block Editor Handbook.

  • Trying again…

    Using this ACF forum post I found how to load scripts via file name in blocks.json. Which is great as I understand it’s the better way to do it (now that it’s possible) instead of what Bill Erickson’s tutorial shows.

    So @spinline since you are loading a JS file named custom.js you’d need to add in the same folder a file named custom.asset.php. In this file you can include the handle name, dependencies, and version number. Or you can leave them to be default generated. My js-file-name.asset.php looks like this:

    
<?php
  return array(
    'dependencies' => array(
        'wp-blocks',
        'wp-element',
        'wp-i18n',
    ),
    'version'      => '1.0',
  );

    To read more about this, check out the WPDefinedAsset section in the Block Editor Handbook.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.