npx @wordpress/create-block command generates code/files different from what's in Gutenberg tutorial video

[RachelRVasquez]

Type of feedback

//content

Description

Around 13:00 of this tutorial video, titled "Intro to Gutenberg Block Development", after you're instructed to run the npx @wordpress/create-block command, the files/code he then walks through do not match what the command actually spit out for me in real time.

https://learn.wordpress.org/tutorial/intro-to-gutenberg-block-development/

Step-by-step reproduction instructions (optional)

1. Follow instructions from the video as far as setting up/creating your first block using the npx @wordpress/create-block command
2. Go to 10:52 of the video
3. As he explains this is the file where you register styles/scripts in starter-block.php, I'm comparing it to the files that I have from the same command except in my case, I ran npx @wordpress/create-block@latest.
4. In my [block-name].php file, I don't have register_style/scripts. I do have register_block_type but the file/function format doesn't match the video. His file looks like this:
   
   Mine looks like this:
   
5. Unlike the video tutorial, my file points to the build folder and there, you will find block.json, a file not present in his file structure. See screenshots of the video versus my file structure (mine is the dark theme).
   
   
   You can see from the structures that there are some additional files in mine than what's in the tutorial.

Other information (optional)

I've been working in WordPress for over a decade now and am a full-stack developer trying to get familiar with how Gutenberg works. I can tell from his video versus the file structure the npx command gave, that the methods are similar, but because they're not the same number of files or functions are doing things differently than his examples, it makes it hard to follow along. I had to stop watching the video once I realized his package.json file (9:16) didn't contain the scripts that mine did to compile/run block related functionality. This is what's in my package.json:

{
	"name": "intro-cta",
	"version": "0.1.0",
	"description": "Example block scaffolded with Create Block tool.",
	"author": "The WordPress Contributors",
	"license": "GPL-2.0-or-later",
	"main": "build/index.js",
	"scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"packages-update": "wp-scripts packages-update",
		"plugin-zip": "wp-scripts plugin-zip",
		"start": "wp-scripts start"
	},
	"devDependencies": {
		"@wordpress/scripts": "^27.7.0"
	}
}

[jonathanbossenger]

Hi @RachelRVasquez, thanks for your feedback.

As the creator of that original video, I would point out that it's very old now and was recorded in 2020 😁 A lot has changed with the create block tool since then.

I have recorded updated versions of that tutorial, in separate videos, which you can find here:

• https://learn.wordpress.org/tutorial/using-the-create-block-tool/
• https://learn.wordpress.org/tutorial/converting-a-shortcode-into-a-block/
• https://learn.wordpress.org/tutorial/styling-your-wordpress-block/
• https://learn.wordpress.org/tutorial/using-block-attributes-to-enable-user-editing/

That being said, those tutorials are about a year old now, and I'm in the process of updating them again, as part of the beginner developer learning pathway, which is due to launch in July.

That older tutorial needs to be deprecated, and include a link to point folks to the newer content, so what I'd like to ask from you is, how did you come across the older tutorial? Was it from a Google search, or was it shared elsewhere?

[RachelRVasquez]

@jonathanbossenger It was from a google search I think. Maybe the older video can re-direct to the newer ones? Thanks so much for the new links. Will check those out. :-)

[jonathanbossenger]

@RachelRVasquez thanks for the update

Maybe the older video can re-direct to the newer ones?

Indeed, that's why I was asking, if folks are still coming to that tutorial organically, it will be a good idea to leave it published, but add a note at the top of the page to direct folks to the newer videos.

[jonathanbossenger]

Updated the tutorial with a notice at the top of the page, pointing to the newer tutorials