0

My problem:

I use the wp-scripts node packages to create a gutenberg plugin. My configuration worked well for one or two weeks and soudainely it stop to work.

My package.json files is:

{
    "name": "wf-g",
    "version": "0.1.0",
    "description": "Example static 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",
        "css": "node-sass --source-map true --output-style compressed -w src/scss/style.scss -o css/ ",

        "dev": "concurrently --kill-others \"npm run start\" \"npm run css\""

    },
    "devDependencies": {
        "@wordpress/scripts": "^23.0.0",
        "concurrently": "^7.1.0"
    },
    "dependencies": {
        "node-sass": "^7.0.1"
    }
}

I used to run the script dev with npm run dev command. Css script continue to work but the start script doesn't work anymore.

I work with Visual Studio Code and the terminal display this :

PS D:\Developpement\Sites - Local\Gutenberg-Dev\app\public\wp-content\plugins\webformation-gut> npm run dev

> [email protected] dev
> concurrently --kill-others "npm run start" "npm run css"

[1]
[1] > [email protected] css
[1] > node-sass --source-map true --output-style compressed -w src/scss/style.scss -o css/
[1]
[0]
[0] > [email protected] start
[0] > wp-scripts start
[0]

What I tried:

I try to run start script directly nothing... build script nothing. I try to delete the node_modules folder and the package-lock.json... and try again npm install --only=dev. Nothing append.

Does anyone can help me ?

Thanks

Improve this question
1
  • Can you be more specific than "it doesn't work"? It's clear that something has stopped working but what was it doing before that it does not do now? And if it isn't doing what you expected, what is it doing instead? Are you sure the problem isn't in the code itself?
    – Tom J Nowell ♦
    Commented Jun 19, 2022 at 14:57

2 Answers 2

Reset to default
1

Finally i found the problem ! There was a problem in the scss file which stop the building script. I had no error message. I think that the problem was that i used a sass variable which was too long.

Improve this answer
0

It seems you are doing it unnecessarily complicated. You can use @wordpress/create-block to scaffold basic block and go from there. I never used concurrently, but my guess is that [1] pattern is from entering npm cli mode instead of starting the command. I understand you are trying to speed build process, by separating javascript and scss building steps and running them concurrently, but be aware that in standard @wordpress/scripts configuration, webpack is configured to process both javascript and scss, so you should modify webpack config. I also suggest updating @wordpress/scripts to the latest version.

My guess is that your run configuration does not work because environment variable path to wp-scripts is not set properly. Try installing @wordpress/create-block and see if that works. You can start modifying from there.

Improve this answer
6
  • Thanks for your answer, i gonna try with create-block, but my setup worked fine for at least two weeks. It's why i really don't understand.
    – Albedo0
    Commented Jun 18, 2022 at 14:31
  • You have instructions how to start with this package: developer.wordpress.org/block-editor/reference-guides/packages/…
    – Lovor
    Commented Jun 18, 2022 at 14:44
  • I just try and it's what i did few weeks ago to initialize my plugin (i didn't remember because it was the first time i used it). After i makes my plugin i change the settings to have several blocks with only one plugin... And to add common css for all blocks. It's why i needed to use concurrently. And like i said, it worked fine for weeks... but suddenly nothing...
    – Albedo0
    Commented Jun 18, 2022 at 14:55
  • Perhaps you set up folder structures incorrect. There is no need to change much to facilitate several blocks. Just put each block in separate folder in src folder like so: plugin/src/my-block and plugin/src/other-block and so on, and make sure that every block has block.json. And clean everything from src root. You should also register each block separately from php like so: register_block_type( __DIR__ . '/build/list-gallery' );
    – Lovor
    Commented Jun 18, 2022 at 15:06
  • So, there is no need to use separate css building, even with multiple blocks. And you can use new hot-refresh feature which instantly changes what on page what you change in code without page refresh. It is described in @wordpress/scripts manual. Put in your package.json the line in scripts: "start-hot": "wp-scripts start --hot". It communicates specially with browser extension on port 8887, so browser also has to have react developer tools or similar extension which will enable hot-refresh
    – Lovor
    Commented Jun 18, 2022 at 15:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.