Wordpress Gutenberg Custom Block the viewScript does not get loaded on the frontend when my block is inserted

Question

I recently developed a custom Gutenberg block by utilizing the @wordpress/create-block package, which effectively generated a full plugin framework. I simply needed to tweak some existing files to get the core functionalities working.

This block is a hero/visual type where users can choose images and add titles for each slide. The block displays correctly on the front end, showcasing all selected images and titles.

My current task is implementing JavaScript to enable carousel functionality. However, I'm encountering an issue where my viewScript (specified as "file:./view.js") isn't loading in the front end. By not loading, I mean that the script doesn't appear in the HTML markup or the network tab.

Here's the content of my block.json located in the build folder:

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "custom-block/hero",
  "version": "0.1.0",
  "title": "Hero",
  "category": "widgets",
  "icon": "smiley",
  "description": "Custom hero block",
  "attributes": {
    "images": {
      "type": "array",
      "source": "query",
      "default": [],
      "selector": "img",
      "query": {
        "url": {
          "type": "string",
          "source": "attribute",
          "attribute": "src"
        },
        "alt": {
          "type": "string",
          "source": "attribute",
          "attribute": "alt"
        },
        "caption": {
          "type": "string",
          "source": "attribute",
          "attribute": "data-caption"
        }
      }
    }
  },
  "supports": {
    "html": false
  },
  "textdomain": "hero",
  "editorScript": "file:./index.js",
  "editorStyle": "file:./index.css",
  "style": "file:./style-index.css",
  "viewScript": "file:./view.js",
  "viewStyle": "file:./view.css"
}

You can verify the presence of view.js in the build folder of my plugin right here in the actual repository.

The plugin's main file, hero.php, does not utilize the render_callback function, hence I assumed there's no need for manual script enqueueing. Here’s how it looks:

/**
 * Plugin Name:       Hero
 * Description:       Custom hero block.
 * Requires at least: 6.1
 * Requires PHP:      7.0
 * Version:           0.1.0
 * Author:            Daniel
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       hero
 *
 * @package CreateBlock
 */

if ( ! defined( 'ABSPATH' ) ) {
  exit; // Exit if accessed directly.
}

function create_block_hero_block_init() {
  register_block_type( __DIR__ . '/build' );
}

add_action( 'init', 'create_block_hero_block_init' );

Despite correctly adding the block and saving the page, the view.js script remains undetected on the frontend. I've scoured the internet for solutions, but it seems to work for others. Could I be missing an important step?

Thanks in advance for any guidance.

Answer 1

Problem solved. If there's anybody that has the same problem as me, go into the *.php file where you're trying to render the block. Make sure that you're using the_content() in order to render the page content and not get_the_content().