- This topic has 10 replies, 2 voices, and was last updated 4 years, 7 months ago by Zac Gordon.
August 4, 2018 at 7:43 am #53926
I have installed jsforwp-example-blocks in the plugin directory.
When i run npm install, i only get:
npm WARN firstname.lastname@example.org No description
npm WARN email@example.com No repository field.
up to date in 1.207s
Nothing seems to be installed.
When i run npm run dev, i get:
> firstname.lastname@example.org 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! email@example.com dev:
cross-env BABEL_ENV=default webpack --watch
npm ERR! Exit status 1
npm ERR! Failed at the firstname.lastname@example.org dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.August 4, 2018 at 9:35 am #53941
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.”August 4, 2018 at 10:42 am #53949
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 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)August 4, 2018 at 3:00 pm #53957
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.August 4, 2018 at 3:09 pm #53961
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.August 5, 2018 at 9:43 am #53983
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?
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.August 5, 2018 at 12:04 pm #53992
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 🙂August 5, 2018 at 1:35 pm #53995
“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?
I copy the entire catalogue “gutenberg-course-master” and rename it.
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?August 5, 2018 at 2:26 pm #54000
I don’t have a full checklist of what to change but that is exactly the idea 👍🏼August 7, 2018 at 12:26 pm #54139
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.August 7, 2018 at 2:27 pm #54145
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!
- You must be logged in to reply to this topic.