Thanks @t-hamano, my experience was that it didn't work without the import statements. I'll test again.

My recollection is that without the import statements the build process didn't add the CSS files to the /build directory. As I said, I'll check that again.

My recollection is that without the import statements the build process didn't add the CSS files to the /build directory.

This is true. However, this tutorial appears to expect users to create their own CSS files in the plugin root directory.

So in your plugin directory, create an editor.css file to load in editor view:

My understanding is that this tutorial expects the following directory structure:

gutenberg-examples
├── build
│   └── block.js
├── src
│   └── block.js
├── block.json
├── editor.css
├── style.css
└── gutenberg-examples.php

If this is correct, then the sample code in block.json appears to be incorrect.

{
    "apiVersion": 3,
    "name": "gutenberg-examples/example-02-stylesheets",
    "title": "Example: Stylesheets",
    "icon": "universal-access-alt",
    "category": "layout",
    "editorScript": "file:./block.js",
    "editorStyle": "file:./editor.css",
    "style": "file:./style.css"
}

Only the editorScript path should refer to the build directory:

{
    "apiVersion": 3,
    "name": "gutenberg-examples/example-02-stylesheets",
    "title": "Example: Stylesheets",
    "icon": "universal-access-alt",
    "category": "layout",
    "editorScript": "file:./build/block.js",
    "editorStyle": "file:./editor.css",
    "style": "file:./style.css"
}

This tutorial might be confusing because it differs from the file structure created by create-block.

@t-hamano I just tested again with the CSS files in the project root, and you're right. The CSS files are picked up without the import statements. What I didn't notice the first time I ran through the tutorial is that the block name gets changed in the second lesson. I'll close this and create another PR to draw attention to the name change.

I'm also thinking of creating a PR to add a section to the first lesson with steps for:

• npm init
• npm install @wordpress/scripts --save-dev
• adding start and build scripts to package.json

as those steps are not explicit. What do you think?

@mburridge

I'm also thinking of creating a PR to add a section to the first lesson with steps for:

I think this is a great idea.

Since a method of development using the create-block package already exists, I think this page should be intended to manually build a basic block development environment without using create-block.

Therefore, mentioning npm is a good thing, but since this page can also contain plain code samples that do not use JSX (and do not require a build), it may be necessary to provide explanations that address both cases.

For example, the following:

If you are developing with JSX, you will first need to run npm init and prepare the necessary packages and scripts, as you will need to compile the source code. If you are using plain JavaScript that does not require a build, this step is not necessary.

For example, the following:

That's awesome - you've virtually written it for me 😅! Thanks @t-hamano I'll get that PR together.

#53689
☝️ @t-hamano