[Zac Gordon]

Does it not work the same was as using a dashicon for the main block icon?

I sort of remember there being some trick to using Dashicons anywhere in your theme or plugin. What have you tried so far?

[Zac Gordon]

Oh, my mistake he is using graphql here, but it can be done with just the WP data store I believe.

[Zac Gordon]

Okay this is possible, but not in this way.

We can set other conditionals in the PHP here based on anything we are aware of when the data leaves the server. So, if a certain user role then lock the template. That’s possible.

But, the way to check what template is selected and make changes based off of that information is from the client side with JavaScript.

Gutenberg has a data system (Redux store behind the scenes) that we can hook into to find out the current template and do something when it changes. The JavaScript is pretty advanced and I don’t have my Advanced JavaScript Course yet that will get into explaining it.

Jason Bhal, creator of WP GraphQL shared a ghist that shows how you can hook into this.

View this gist on GitHub

Not sure if this is over your head for implementing? You can ignore the graphql bits.

In the big picture, the ability to control templates from the PHP is going to be limited to things you can detect at the time that hook is being called, which doesn’t yet include page template (I don’t think) and certainly wouldn’t allow for changes if someone changed the template in the editor.

Hope this explains a bit!

[Zac Gordon]

Okay! Everything should be fixed now!

[Zac Gordon]

Oh dear!

I was uploading new versions of the videos and captions and accidentally uploaded the unedited version of the course!!!!

We just lost Internet here due to storms, but I will have all this back up and fixed asap once I get internet back!

Apologies for the inconvenience, should have fixed shortly.

[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 😉

[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?

[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 👍🏼

[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.

javascriptforwp.com/chat

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 👍🏻

[Zac Gordon]

Updated that My Account area so should be more clear now and have good links to the Course Dashboard 🙂

[Zac Gordon]

Okay, great! Glad it’s worked out. Yes, I will add a note to the account Dashboard linking back to the course one (working with plugins ;))

I’m a huge fan of the PWA work being done currently 🙂 Will likely do a course on it in 2019 👍

Let me know if you have any questions or issues!

[Zac Gordon]

Hi Juliette!

I just checked your account and you still have access to all your courses.

You should be able to access them in your Dashboard once you login.

Some of the parts of the Master Course have been renamed since you enrolled:

1. Part 1 == Learn JavaScript Deeply
2. Part 2 == The WordPress REST API
3. Part 3 == (I actually removed this for now and will be re-adding new content once React rolls into Core 👍)
4. Part 4 == Real World Projects

You should also see Gutenberg Development there. Please let me know if you don’t see it and we’ll get it figured 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 – https://github.com/zgordon/how-to-gutenberg-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

[Zac Gordon]

What happens when you try it?

[Zac Gordon]

Not if I have anything to say about it!

But you may be right ;p

[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 – https://github.com/zgordon/how-to-gutenberg-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]

Yup, my take has always been just because WP improved its editor doesn’t mean you have to use it 🙂 ACF is still a great solution for custom content. In some cases it may not be necessary, but I think a lot of sites will continue to use it.

Remember, Gutenberg is not an ACF or Page Builder replacement. It is just an enhancement of the current editing experience 🙂

[Zac Gordon]

I am sure someone will build a title block that does exactly what you want.

Shouldn’t be too too hard to try yourself if you wanted.

I doubt it would ever be part of WordPress Core as you can’t add content above the title currently without custom development and it may be confusing for some. But it is possible to do on your own via a plugin 👍

[Zac Gordon]

Or you can hide the title in your template and make a title block that can be placed anywhere.

[Zac Gordon]

Nope. Not that I know of. It would have to be done on Frontend with JavaScript

[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.

[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.

[Zac Gordon]

@mengland this is probably a good question for the core editor Slack channel 👍

[Zac Gordon]

Good question.

The selecting of elements from the DOM is separate from changing the value attribute.

When selecting with getElementsByName it will return an array of values, even if there is only one matching element. So you would first have to get the item from the array you want, then change the value of that element.

It is likely not working because you are trying to change the value of the array, which won’t work, rather than one of the elements in the array.

This is a good question because some selector methods like getElementById only return one value, whereas selectors like getElementsByName will return an array of values.

Hope this helps!

[Zac Gordon]

The error is saying that fullName is null. Try logging the vars that you set with console log. One possibility is that there is no element on the page with that class that is being selected.

Is this happening in the example code without any changes?

[Author]

Posts