Need help in fixing/debugging wordpress to know why my block is not visible in my theme's block editor

Question

I am new to WordPress development but have decent experience with Javascript.

So I've tried out this tutorial on Udemy (https://www.udemy.com/course/become-a-wordpress-developer-php-javascript/) and the project for the course worked out perfectly. So I decided to create a new theme from scratch and I seem to be stuck at the most basic step. Creating my first block. So it's a very basic block with this file structure in my wp-content -> themes folder

my-theme-folder

- src

-- header

--- block.json

--- index.js

--- render.php

functions.php

Here's my block.json

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "name": "my-theme/header",
  "category": "text",
  "title": "My Theme",
  "description": "The header for My Theme",
  "keywords": ["header"],
  "editorScript": "file:./index.js",
  "render": "file:./render.php"
}

Here's my index.js

import { registerBlockType } from "@wordpress/blocks";
import metadata from "./block.json";

function Edit() {
  return <div>Hello from admin backend.</div>;
}

registerBlockType(metadata.name, {
  edit: Edit,
});

Here's my render.php

<div>
    <h3>Hello from the front end </h3>
</div>

And finally here's my functions.php

<?php

// ENQUEUE CSS AND JS

function theme_scripts(){
    wp_enqueue_script( 'theme-script', get_theme_file_uri('/build/index.js'), null,'1.0', true );
    wp_enqueue_style('theme-style',get_theme_file_uri('/build/style-index.css'));
    
}
add_action('wp_enqueue_scripts','theme_scripts');

// REGISTER BLOCK

function my_theme_blocks(){
    register_block_type_from_metadata(__DIR__ . '/build/header');
}

add_action('init','my_theme_blocks');

I am using this package.json

{
  "name": "vpawards",
  "version": "1.0.0",
  "description": "Theme for VP Awards ",
  "main": "index.js",
  "scripts": {
    "start": "wp-scripts start src/index.js",
    "blocks": "wp-scripts start --experimental-modules",
    "buildIndex": "wp-scripts build src/index.js",
    "buildBlocks": "wp-scripts build --experimental-modules",
    "build": "run-s buildIndex buildBlocks"
  },
  "author": "Alim Bolar",
  "license": "ISC",
  "dependencies": {
    "@wordpress/scripts": "^28.0.0",
    "npm-run-all": "^4.1.5"
  }
}

And I run npm start on one terminal and npm run blocks on another terminal as that's what the teacher for the tutorial suggested as the 'tried and tested' method/workaround to ensure a smooth workflow and it does work.

Now I have a similar set up for the project that we completed at the course and I can't seem to figure out why my code is not working (why my block is not visible in the block editor when I try to search for it) and I can't seem to understand how to debug. There's no 'console.log' option that I am used to with javascript and I'd really appreciate some help on fixing the problem or even guiding me on how to approach debugging in wordpress.

I have a thought about what the problem could be.. but I am not sure.. In the block.json the name property has this value - 'my-theme/header' ... on what basis does wordpress know this is the right one and what if I use another namespace instead of 'my-theme' for another block in the same theme? I am assuming it would throw an error but I am not sure. The documentation says that it should correspond to the name of my theme but where and how do I register this namespace as the name of my theme?

Any advice would be appreciated.

Regards, Alim

I've tried changing the namespace and then I added the project from my course as a theme as it was working and tried to remove some components to figure out at what stage does it start to give a problem but I couldn't find anything specific. Finally when I tried to keep the bare minimum of the project's course, even that was not working on my site. So it's something that I am doing or not doing with my code. I've tried googling and here's a link to a situation similar to mine and he seems to have found a workaround by totally avoiding the register block method which is not the way I would like to go..

Custom WordPress block not loading into editor using block.json, register_block_type

Answer 1

This is to help some others out there who might have the same issue as well as a note to my future self.

The issue was not with the code which was, if I were to be extremely modest, perfect!..;-)..

The issue was with the '@wordpress/scripts' latest update of version 28. Reverting back to version 27.9 worked perfectly for me and helped me to not end my development career thinking that I can't even get a basic block to show up!!

There's even an open issue for it here.. It was a fellow user of Udemy who helped me find this.

https://github.com/WordPress/gutenberg/issues/62202

Hope it helps someone out there.