Forum Replies Created
-
Posts
-
When you return elements in React they have to be wrapped inside a single element. So you can either take your elements and wrap in a div or import Fragment from wp.element and wrap it in a
component. Hope that helps!
Okay so I may still not be following everything completely, but couldn’t you add the attribute you need to the save function as a data attribute or class?
I’m also curious what happens when you use the CodeEditor component in the save method (I haven’t experimented with it yet).
Not sure if it relates, but blocks were not designed to be interactive on the frontend. So if you want a block to have JS run on the frontend you do need to load it separately in a script loaded to the frontend like you’re describing.
Hope this helps a bit? Let me know how the experimentation goes!
Could you use a selector like a radio button in the inspector control that let’s you assign the type of code block on the backend? Then I’m guessing some class or something passed as from an attribute could let the frontend know the kind of code you’re working with. Would that work or address the problem?
Hey Raquel!
Is this for the updated example files or for some of your own custom blocks?
This is a pretty general error which usually means something isn’t being returned as a proper element or you’re trying to return two elements instead of one.
You should hopefully get a file name and line associated with the error.
Let me know!
Good question. I haven’t seen anything about this as I believe the editor is designed to be responsive so I’m not sure if hardcoding the width of it would be a good idea in all contexts. I haven’t tried it but can you just apply some custom CSS to one of the main editor wrappers?
Heyo! Way to go Alan! Hope the course was helpful 🙂 Congrats on and good luck with your Gutenberging!
And you deleted the old plugin and installed the new one with this update?
It is working from my end although I was able to duplicate the first issue you raised before the patch.
Okay, should work now (check the updated repo files)! Sorry about that!
Please let me know if you still have troubles.
Huh, weird. Just added the course for you manually again. Should work now! Sorry for the bugginess :O
I believe that one is just because Editable changed its name to RichText. Some other small things like focus has changed to isSelected as well.
Will get those up as soon as can 🙂
I believe that one is just because Editable changed its name to RichText. Some other small things like focus has changed to isSelected as well.
Will get those up as soon as can 🙂
Yes! Good catch. Sorry about that.
Editable changing to RichText and some other updates have occurred and are no longer supported.
I am starting this week to begin redoing all the examples and re-recording the course to include the updates 🙂
Hi Sally,
Let’s try this to troubleshoot:
1. Download the repo – https://github.com/zgordon/gutenberg-course/archive/master.zip
2. Open it in the command line
3. Run npm install
4. Run npm run dev
5. Open a JS file in the /blocks/examples and make a change to it
6. The command line should updateYou don’t have to install this as a plugin and test it, just want to see exactly where the problem is happening for you.
You are correct my friend! Thanks for posting this up 🙂
Hoping to make an update to the course with this soon, but so many changes still happening. Will link to this forum post from the video though 🙂
Oh Yay!
– FIRST So proud of you!!! This is no small thing getting tools like this up and running and you deserve some recognition here for working through all this 🙂 Congrats 🙂
– That is WEIRD about the NODE_ENV thing. Hopefully you should not need to uninstall Atom or do major reboots to have everything work going forward.
Please post back up in this thread if you have the same issues or a new one if anything different comes up for you 🙂
Okay, great! This is a step in the right direction.
1. Good
2. Okay, so if you delete the node_modules folder and just run npm init in the plugin folder, what specific errors do you get?
3. NODE_ENV is being set automatically for you when you run npm run dev or npm run build. You should not need to set NODE_ENV manually. See these commands here? How they set that for you – https://github.com/zgordon/gutenberg-course/blob/master/jsforwp-blocks/package.json#L4-L5Two followup questions:
4. Where are you hard coding the value of NODE_ENV?
5. When you run “npm run dev” and change something in the JS, does the file rebundle and show up properly in WordPress?Hi @ccziriak!
Sorry I missed that you posted up your specific errors here!
Okay so this is basically saying that the cross-env library is not being loaded.
To start troubleshooting this let’s
1. Make sure that the cross-env package is listed in your package.json file. It should be by default.
2. Manually delete the node_modules folder in the jsforwp-blocks folder and try running npm install again.
3. This should make sure that cross-env is loaded.Let me know the results and we’ll go from there..
Hi Sally!
The reason is that the plugin pulls in a compiled version of all the other JavaScript files. This is so that we can use things like imports and JSX and other JavaScript features that might not be supported in browsers.
It is an extra step, but does provide a lot of benefits that make it worth it 🙂
Hope that helps! Let me know how the config process goes!
Hi Sally!
Okay, this sounds like a problem getting setup with the build tools:
– Make sure you’re working with the plugin inside your /wp-content/plugins folder
– You will want to runnpm installin the main folder with the package.json file in it
– If you want to edit the files, the best thing to do is runnpm run devfirst (npm run build is more meant for when you are done and want to run the build one final time)If you have errors from running any of these commands, please post them up and we’ll get you up and running.
