Plugins – Block registration with ViewScript

I am trying to include a frontend script for my block plugin which is registered with block.json, What I have is below:

/
  plugin.php
  block.json
  scorecard.php
  scorecard.css
  scorecard.js

plugin.php

add_action( 'init', 'sf_scorecard_block_init' );
function sf_scorecard_block_init() {
    register_block_type_from_metadata( __DIR__ );
}

block.json

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "name": "sf/scorecard",
    "title": "Deal Scorecard",
    "description": "Display a scorecard for the selected Deal.",
    "viewScript": [ "file:./scorecard.js" ],
    "style": [ "file:./scorecard.css" ],
    "category": "embed",
    "textdomain": "sf",
    "icon": "yes-alt",
    "keywords": [ "scorecard", "deal" ],
    "acf": {
        "mode": "auto",
        "renderTemplate": "scorecard.php"
    },
    "align": "full"
}

scorecard.js

console.log('loaded');

with block everything is working as expected (including css file) but i can’t get scorecard.js file to load and fire. I’m on wordpress 6.1, so viewScript Should work according to docs.

I am also using this block in conjunction with acf, so acf.renderTemplate key. Not sure if it interferes with this…

Surely I am missing something, but the documentation seems confusing on the subject. Most examples I see register blocks via PHP and don’t block.json,

Leave a Comment