Title Setting Not Changing

[Sally]

I know I am missing something very simple here, but I just can’t find it. I am following along with Section 4, but stopped at 4.03. I am using Atom for my code editor, and working on a local install of Vanilla Press with Desktop Server. I downloaded and installed the plugin just like any other in WP.

I have verified that Line 21 of jsforwp-blocks/blocks/register-block-type/00-demo/index.js does read title: __( 'registerBlockType - Example' ), but the title of the block in my Vanilla Press editor still says Demo. The install of WordPress and Gutenberg are all current.

Initially, I did not execute npm install because I am running Atom with the GUI version of GitHub, which does the watching. However, I thought this may be the problem, so I installed a terminal and ran it and npm run dev and had some errors but tried again. Still no luck.

Yes, I did make sure all the files were saved. I even went into the Windows Explorer and opened the file in a completely different editor. This is driving me crazy! What am I missing?

[Zac Gordon]

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 run npm install in the main folder with the package.json file in it
– If you want to edit the files, the best thing to do is run npm run dev first (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.

[Sally]

Okay, I will try those things. One question: I have this installed properly just like any other plugin. Why can I not just go into the installed files, make the changes and have them show up? Just as if I had written the plugin myself?

[Zac Gordon]

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!

[Sally]

Almost there. Now when I run npm run dev I get the error ‘webpack’ is not recognized as an internal or external command, operable program or batch file. I tried a few solutions from StackOverflow, but no luck.

[Sally]

Not sure what I had wrong, but I had an IRL developer friend help me. All is good. Now, on to development!

[Sally]

Not so fixed as I thought. I wanted to try again from scratch and I am still getting the same error: Cannot find module ‘webpack’.

[Zac Gordon]

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 update

You don’t have to install this as a plugin and test it, just want to see exactly where the problem is happening for you.

[Sally]

Actually, I think the problem is the terminal package I am using in Atom. It seems there is a known issue with the terminal package platformio-ide-terminal in Atom. Evidently, it does not install npm and node correctly. I just opened good old cmd in windows, did the install and the watch, and now everything is working.

[Author]

Posts