JavaScript for WordPress Forums Gutenberg Development 04.01 – I need a little bit more explanation to understand this

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #51925

    Hey Zac,
    thanks for your great Tutorial. I really like your videos. And most of the time I thought I understand your explanation. But actually I don´t get it.
    Normaly I´m a PHP and HTML Webdeveloper with a bit jQuery experience. So for me it is hard to understand some thinks you are talking about.

    I installed atom as my Editor, node.js on my Windows-PC (with the exe-file from, unzip the example-Plugin and add it as a Project in atom. But when I try the commond “npm install” in the platformio-ide-terminal, I only get errors.

    But the most frustrading think is, that I don´t understand, why I do the steps.

    So here a view questions:
    1.) Can I run the steps without a local WordPress installation? It seems as you put your folder from github to the Plugin-directory from WP. Right?
    2.) Can I wrote a Gutenberg-Block without the node.js-Steps?
    3.) Do you know a more “Basic”-Tutorial to start a Gutenberg-Block-Plugin?

    I know, I’m a hardship but I hope you can help me to learn Gutenberg.

    Many Thanks and best regards

    Zac Gordon

    Hi Marcus!

    These are all common issues when working with JavaScript build tools for the first time.

    First we need to make sure Node and NPM are actually installed properly.

    What happens runs “npm -v” in the command line?

    Once we make sure that is working properly, running npm install should work properly in the downloaded example plugin for the course. This plugin does get installed directly into WordPress like any other plugin and you will want a local copy of WordPress running to follow along.

    Lets get these two steps running and go from there with your other questions. You can find some work around to not using build tools, but it will be best if you take the time to learn a bit now as most real Gutenberg development is going to require some sort of build process.

    Hope that helps, let me know how these first steps go.


    Hi Zac,
    thank you for your answer 🙂 In the last days I learned lots of basics about the work with nodejs and react.
    I installed a local WP-Server and getting nodejs run. Because I´m working from a preconfigured PC form my company, I have some problems by installing thinks. Whe I installed nodejs, the setup haven´t set the environment variable. That was the main problem.

    Now I have nodejs in version 5.6.0 running. But when I try to install npm in the plugin I get these errors:

    jsforwp-example-blocks> npm install
    npm WARN jsforwp-blocks@1.0.0 No description
    npm WARN jsforwp-blocks@1.0.0 No repository field.

    I read these forum-post but not really understand anything at all. Did you get a “best practice way” to fix this problem?

    thanks a lot for your help.

    Zac Gordon

    I do cover this in depth in my Learn Vanilla JavaScript Course but we’ll try to get you up and running here.

    It sounds like you already have things installed.

    So, download the plugin repo, put it inside of your plugin folder, activate the plugin and it works. Right?

    Then when you open up the folder for that plugin in your code editor or conmand line and run npm install nothing happens except those two warnings? Are you in the folder that has a package.json file there? It will need that for npm install to work so it you’re in the wrong directory that may be the problem too.


    Hey Zac,
    thank you for your patience. As you said I do the following:
    a.) I install nodejs on my PC
    b.) I make a local WordPress-installation
    c.) I download the Plugin from github (again), install and activate it

    And now the following thinks happened:
    1.) When I try your Example-Blocks on my local WordPress-installation, the only working Block is the “Static Block”. The other Blocks show following error “This block has encountered an error and cannot be previewed.”
    2.) On Atom I open the Plugin-Folder (the folder with the package.json in it) and try “npm install”. Than I get the following code:

    PS C:\Wordpress\apps\wordpress\htdocs\wp-content\plugins\jsforwp-example-blocks> npm install
    npm WARN jsforwp-blocks@1.0.0 No description
    npm WARN jsforwp-blocks@1.0.0 No repository field.
    up to date in 1.098s
    PS C:\Wordpress\apps\wordpress\htdocs\wp-content\plugins\jsforwp-example-blocks>

    Because of the missing description and repository field in the package.json , I add these fields manually.
    After this I try “npm run dev” and get the following errors:

    jsforwp-blocks@1.0.0 dev C:\Wordpress\apps\wordpress\htdocs\wp-content\plugins\jsforwp-example-blocks
    > cross-env BABEL_ENV=default webpack --watch
    Der Befehl "cross-env" ist entweder falsch geschrieben oder
    konnte nicht gefunden werden. (The command "cross-env" is not written correctly or couldn´t be found.)
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! jsforwp-blocks@1.0.0 dev: <code>cross-env BABEL_ENV=default webpack --watch</code>
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the jsforwp-blocks@1.0.0 dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm WARN Local package.json exists, but node_modules missing, did you mean to install?

    Thanks for your help.

    Zac Gordon

    Okay, I just looked over the this “how-to-gutenberg-plugin” and there was an extra folder there. That may have been the problem.

    When you download this plugin –
    And install it, it will likely have a path like “../wp-content/plugins/how-to-gutenberg-plugin-master/” that is the directory you should run npm install in.

    I just double checked it with both plugins and it worked. Not sure what the problem may be at this point, but let me know how this goes and we’ll work it out 👍

    Zac Gordon

    Hi Marcus!

    Another student helped me spot something that needed to be updated with the how-to-gutenberg-plugin plugin.

    If you could try the process again:

    1. Downloading this plugin –
    2. Don’t bother installing, just open and run npm install
    3. Check to see that the node_modules folder is not empty
    4. Try running npm run dev to see if it works without error now

    If this doesn’t work I am going to send you a simple NPM project to test what the other problem may be causing this.

    Also, what version of NPM and version of Node do you have?

    You can run npm --version and node --version


    Hey Zac,
    I tried as you said. But same problems.
    I run npm install. A folder “node_modules” with subfolder “etc” was created. But both are empty.
    npm run dev leads to following output:

    > jsforwp-blocks@1.0.0 dev C:\***\how-to-gutenberg-plugin-master
    > cross-env BABEL_ENV=default webpack --watch
    Der Befehl "cross-env" ist entweder falsch geschrieben oder
    konnte nicht gefunden werden.
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! jsforwp-blocks@1.0.0 dev: <code>cross-env BABEL_ENV=default webpack --watch</code>
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the jsforwp-blocks@1.0.0 dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\***\AppData\Roaming\npm-cache\_logs\2018-07-18T15_51_38_050Z-debug.log

    This is the Content of the debug.log

    0 info it worked if it ends with ok
    1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
    1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
    1 verbose cli   'run',
    1 verbose cli   'dev' ]
    2 info using npm@5.6.0
    3 info using node@v8.11.3
    4 verbose run-script [ 'predev', 'dev', 'postdev' ]
    5 info lifecycle jsforwp-blocks@1.0.0~predev: jsforwp-blocks@1.0.0
    6 info lifecycle jsforwp-blocks@1.0.0~dev: jsforwp-blocks@1.0.0
    7 verbose lifecycle jsforwp-blocks@1.0.0~dev: unsafe-perm in lifecycle true
    8 verbose lifecycle jsforwp-blocks@1.0.0~dev: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\zeug\how-to-gutenberg-plugin-master\node_modules\.bin;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\nodejs\;C:\Users\ScheibMadm\AppData\Roaming\npm;C:\Users\ScheibMadm\AppData\Local\atom\bin
    9 verbose lifecycle jsforwp-blocks@1.0.0~dev: CWD: C:\***\how-to-gutenberg-plugin-master
    10 silly lifecycle jsforwp-blocks@1.0.0~dev: Args: [ '/d /s /c', 'cross-env BABEL_ENV=default webpack --watch' ]
    11 silly lifecycle jsforwp-blocks@1.0.0~dev: Returned: code: 1  signal: null
    12 info lifecycle jsforwp-blocks@1.0.0~dev: Failed to exec dev script
    13 verbose stack Error: jsforwp-blocks@1.0.0 dev: <code>cross-env BABEL_ENV=default webpack --watch</code>
    13 verbose stack Exit status 1
    13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:285:16)
    13 verbose stack     at emitTwo (events.js:126:13)
    13 verbose stack     at EventEmitter.emit (events.js:214:7)
    13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
    13 verbose stack     at emitTwo (events.js:126:13)
    13 verbose stack     at ChildProcess.emit (events.js:214:7)
    13 verbose stack     at maybeClose (internal/child_process.js:925:16)
    13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
    14 verbose pkgid jsforwp-blocks@1.0.0
    15 verbose cwd C:\zeug\how-to-gutenberg-plugin-master
    16 verbose Windows_NT 6.1.7601
    17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "dev"
    18 verbose node v8.11.3
    19 verbose npm  v5.6.0
    20 error code ELIFECYCLE
    21 error errno 1
    22 error jsforwp-blocks@1.0.0 dev: <code>cross-env BABEL_ENV=default webpack --watch</code>
    22 error Exit status 1
    23 error Failed at the jsforwp-blocks@1.0.0 dev script.
    23 error This is probably not a problem with npm. There is likely additional logging output above.
    24 verbose exit [ 1, true ]

    I’ve checked the npm- and the node-Version:
    npm: 5.6.0
    node: v8.11.3

    I work with a windows 7 PC but have the same problems with a windows 10 PC.

    Thanks a lot.


    Hey Zac,
    how are you?
    Do you have a idea, what I can try to get it work? I have no new idea :-/

    Thanks a lot.

    Zac Gordon

    Okay, this is a little unusual but could we hop on a call to resolve this? There is some troubleshooting I want to try that would be easier on a call together.

    Do any of those times work for you by chance? If not, contact me in the chat app on the page here and we’ll schedule a time 👍🏻


    I am having problems at the same point, getting similar errors. I’m on a Mac. NPM 6.2.0. NODE 10.7.0.

    Error on running npm install:

    WARN tarball tarball data for hoek@2.16.3 (sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=) seems to be corrupted. Trying one more time.
    WARN tarball tarball data for hoek@2.16.3 (sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=) seems to be corrupted. Trying one more time.
    npm WARN jsforwp-blocks@2.0.0 No repository field.

    npm ERR! code EINTEGRITY
    npm ERR! Verification failed while extracting hoek@2.16.3:
    npm ERR! Verification failed while extracting hoek@2.16.3:
    npm ERR! sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0= integrity checksum failed when using sha1: wanted sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0= but got sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA== sha1-ljRQKqEsRF3Vp8VzS1cruHOKrLs=. (8882 bytes)


    node_modules folder empty. Ran npm run dev and get this error:

    > jsforwp-blocks@2.0.0 dev /Users/russellweller/Sites/wpblocks/wp-content/plugins/gutenberg-course-master
    > cross-env BABEL_ENV=default webpack –watch

    sh: cross-env: command not found
    npm ERR! file sh
    npm ERR! code ELIFECYCLE
    npm ERR! errno ENOENT
    npm ERR! syscall spawn
    npm ERR! jsforwp-blocks@2.0.0 dev: cross-env BABEL_ENV=default webpack --watch
    npm ERR! spawn ENOENT
    npm ERR!
    npm ERR! Failed at the jsforwp-blocks@2.0.0 dev script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    Zac Gordon

    Oh geez. My apologies ya’ll. I just realized this morning this was from a messed up hash in the package-lock.json file.

    I just fixed it and tested with a student having the same issue. Would ya’ll mind trying again? Should hopefully work this time 👍🏼


    That seems to have done the trick.


    Well, maybe not. It seems to have frozen in npm run dev:

    > jsforwp-blocks@2.0.0 dev /Users/russellweller/Sites/wpblocks/wp-content/plugins/gutenberg-course-master
    > cross-env BABEL_ENV=default webpack –watch

    Webpack is watching the files…

    Hash: 45459f496af61c52f922
    Version: webpack 3.12.0
    Time: 3636ms
    Asset Size Chunks Chunk Names
    ./assets/js/editor.blocks.js 473 kB 0 [emitted] [big] ./assets/js/editor.blocks
    ./assets/js/frontend.blocks.js 3.02 kB 1 [emitted] ./assets/js/frontend.blocks
    ./assets/css/ 5.67 kB 0 [emitted] ./assets/js/editor.blocks
    ./assets/css/blocks.editor.css 658 bytes 0 [emitted] ./assets/js/editor.blocks
    [49] ./blocks/index.js 444 bytes {0} [built]
    [50] ./blocks/i18n.js 51 bytes {0} [built]
    [51] ./blocks/01-static/index.js 1.63 kB {0} [built]
    [55] ./blocks/02-richtext/index.js 2.18 kB {0} [built]
    [58] ./blocks/03-text-alignment-toolbar/index.js 2.73 kB {0} [built]
    [60] ./blocks/04-block-alignment-toolbar/index.js 3.64 kB {0} [built]
    [62] ./blocks/05-custom-toolbar/index.js 5 kB {0} [built]
    [69] ./blocks/07-inspector-control-fields/index.js 3.24 kB {0} [built]
    [117] ./blocks/08-form-fields/index.js 2.31 kB {0} [built]
    [123] ./blocks/10-media-upload/index.js 3.65 kB {0} [built]
    [126] ./blocks/11-url-input/index.js 3.99 kB {0} [built]
    [128] ./blocks/11-url-input-conditional/index.js 4.18 kB {0} [built]
    [130] ./blocks/12-dynamic/index.js 2.01 kB {0} [built]
    [133] ./blocks/14-meta-box/index.js 2.1 kB {0} [built]
    [136] ./blocks/frontend.js 33 bytes {1} [built]
    + 122 hidden modules
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/14-meta-box/style.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/14-meta-box/style.scss 85 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/12-dynamic/style.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/12-dynamic/style.scss 182 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/08-form-fields/style.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/08-form-fields/style.scss 635 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/07-inspector-control-fields/style.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/07-inspector-control-fields/style.scss 958 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/06-inspector-controls/style.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/06-inspector-controls/style.scss 898 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/05-custom-toolbar/style.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/05-custom-toolbar/style.scss 858 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/04-block-alignment-toolbar/style.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/04-block-alignment-toolbar/style.scss 731 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/03-text-alignment-toolbar/style.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/03-text-alignment-toolbar/style.scss 723 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/02-richtext/style.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/02-richtext/style.scss 476 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–1-2!node_modules/sass-loader/lib/loader.js??ref–1-3!blocks/01-static/style.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–1-2!./node_modules/sass-loader/lib/loader.js??ref–1-3!./blocks/01-static/style.scss 464 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–2-2!node_modules/sass-loader/lib/loader.js??ref–2-3!blocks/10-media-upload/editor.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–2-2!./node_modules/sass-loader/lib/loader.js??ref–2-3!./blocks/10-media-upload/editor.scss 495 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–2-2!node_modules/sass-loader/lib/loader.js??ref–2-3!blocks/05-custom-toolbar/editor.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–2-2!./node_modules/sass-loader/lib/loader.js??ref–2-3!./blocks/05-custom-toolbar/editor.scss 109 bytes {0} [built]
    Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/raw-loader/index.js!node_modules/postcss-loader/lib/index.js??ref–2-2!node_modules/sass-loader/lib/loader.js??ref–2-3!blocks/01-static/editor.scss:
    [0] ./node_modules/raw-loader!./node_modules/postcss-loader/lib??ref–2-2!./node_modules/sass-loader/lib/loader.js??ref–2-3!./blocks/01-static/editor.scss 133 bytes {0} [built]

    Zac Gordon

    Hey Russel, I’m trying to duplicate and having trouble. Does npm run dev cause an error. If you edit one of the JS files like /blocks/01-static/index.js does it recompile the changes?


    Hey Zac,
    can you please tell me, where you updated the package-lock.json?
    Do you change this one:
    or that one:

    I tryed both but can´t see a diffrent result.

    Zac Gordon

    Hi! You don’t need to make the change youself, I already did. Just grab the latest copy from the repo.

    The change made though was to one of the hashes for one of the dependency file. Would be hard to catch just by reading through the two side by side 😉

Viewing 17 posts - 1 through 17 (of 17 total)
  • You must be logged in to reply to this topic.