installation problem

[Caf_JS]

Hi.
I have installed jsforwp-example-blocks in the plugin directory.
When i run npm install, i only get:

npm WARN jsforwp-blocks@1.0.0 No description
npm WARN jsforwp-blocks@1.0.0 No repository field.
up to date in 1.207s

Nothing seems to be installed.

When i run npm run dev, i get:

> jsforwp-blocks@1.0.0 dev C:\MAMP\htdocs\mamp\toolset\wp-content\plugins\jsforwp-example-blocks
> cross-env BABEL_ENV=default webpack –watch

‘cross-env’ is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! jsforwp-blocks@1.0.0 dev: cross-env BABEL_ENV=default webpack --watch
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.

[Caf_JS]

Hi.

It worked when i used the normal command window in Windows 10 (not the one in Atom, don’t know why, but it’s OK).

I have another question:
I tested the “Example – Static Block”. It worked, and i could change things in the code. All changes were shown, both in edit view and in the front end.

But, all the other blocks gave me an error message when i tried to add them into a page:
“This block has encountered an error and cannot be previewed.”

[Caf_JS]

Hi.

When i inspect the code in Chrome, in the editor in WordPress, i get this message below (by the way, i use MAMP 3.3.0 for my localhost):

react-dom.min.82e21c65.js:110 ReferenceError: isSelected is not defined
at edit (index.js?1c2d:58)
at yh (react-dom.min.82e21c65.js:95)
at lg (react-dom.min.82e21c65.js:120)
at mg (react-dom.min.82e21c65.js:120)
at gc (react-dom.min.82e21c65.js:127)
at vb (react-dom.min.82e21c65.js:126)
at ub (react-dom.min.82e21c65.js:126)
at wg (react-dom.min.82e21c65.js:137)
at Ze (react-dom.min.82e21c65.js:41)
bg @ react-dom.min.82e21c65.js:110
react-dom.min.82e21c65.js:110 Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args%5B%5D=undefined&args%5B%5D= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at Sg (react-dom.min.82e21c65.js:142)
at m (react-dom.min.82e21c65.js:12)
at ed (react-dom.min.82e21c65.js:65)
at If (react-dom.min.82e21c65.js:82)
at v (react-dom.min.82e21c65.js:84)
at react-dom.min.82e21c65.js:88
at rd (react-dom.min.82e21c65.js:91)
at O (react-dom.min.82e21c65.js:90)
at yh (react-dom.min.82e21c65.js:104)
at lg (react-dom.min.82e21c65.js:120)

[Caf_JS]

Hi again.

It works now.
I installed MAMP 4.01 and installed the Gutenberg plugin and the course plugin again. Don’t know what solved it, but now it works.

[Zac Gordon]

Glad you got it all sorted! Not sure if you’re still having problems, but let me know if you do.

The error of making changes to an existing block is standard behavior. Annoying, but standard.

[Caf_JS]

Hi.

Great videos, i hope you’ll make a follow up course later with even more advanced stuff about Gutenberg blocks.

I have not finished the course so maybe it’s in some video later, but do you have a description of how to move the finished blocks to the live site?

I’m rather new to Javascript/React development. After the “npm run build”, i assume a new directory is created. Exactly what files, and directories, do i need to copy to the plugin folder on the live site?
Of course, i’m not going to do any development on the live server, so only the files that make the plugin work.

You can use the course plugin as the example. I want to test to see that all those blocks work on my live site.

And, when i in the future build my own blocks, i can use your plugin as the starting point, right? I mean, not the exact blocks, but the directory structure, etc.
And then rename the plugin, namespaces, etc. Any recommendations about that? Strings i have to change, that might be easy to miss.

[Zac Gordon]

Hi!

All you need is the final file that webpack exports. This is all covered in the course, but let me know once you’re done if it doesn’t make sense 🙂

Also yes, you can use the course plugin as a starting point for future projects.

Yup, I have a course on Advanced Gutenberg planned for the end of the year 🙂

[Caf_JS]

Hi.

Great.

“Also yes, you can use the course plugin as a starting point for future projects.”

Haven’t tried it yet, but i suppose i only have to do a lot of search-and-replace, right?
Like this:

I copy the entire catalogue “gutenberg-course-master” and rename it.

jsforwp-example-blocks.php
Just rename the file and the settings like any normal plugin.

Search and replace in all files for:
Gutenberg_Courses\Example_Blocks (both strings)
jsforwpblocks – to my own text domain

I’m sure there are more. Any more strings you know that should be replaced?

[Zac Gordon]

I don’t have a full checklist of what to change but that is exactly the idea 👍🏼

[Caf_JS]

Hi.

I’m trying to make the blocks work on my live site. I must be doing some things wrong. I have finished the course but i just need help with this.

After npm run build, exactly what do i copy to the plugin folder on my live site?

Please be as detailed as possible, i’ve developed WordPress with PHP, etc, but i’m very new to Javascipt development.

[Zac Gordon]

So webpack is taking all of your JS and CSS and compiling them into a few files in your assets folder. So, you will need all of the compiled files for sure. Likely the only files you do not need are the ones in the blocks folder.

To know for certain, look at what css and JS files the plugin enqueues and include them.

Hope that helps 🙂

—
In the future could you please open new forum threads if you have different questions so they’re easier to find and keep track of. Thanks!

[Author]

Posts