After installing from the zip file, I'm seeing the following in my Google Chrome console.

Uncaught TypeError: Cannot read property 'settings' of undefined
    at eval (78:20)
    at Object.<anonymous> (editor.blocks.js?ver=1522872259:559)
    at __webpack_require__ (editor.blocks.js?ver=1522872259:20)
    at eval (69:5)
    at Object.<anonymous> (editor.blocks.js?ver=1522872259:503)
    at __webpack_require__ (editor.blocks.js?ver=1522872259:20)
    at eval (49:10)
    at Object.<anonymous> (editor.blocks.js?ver=1522872259:372)
    at __webpack_require__ (editor.blocks.js?ver=1522872259:20)
    at editor.blocks.js?ver=1522872259:63

Along with this, some of my blocks seem to be missing (e.g. Example - Meta box)

Install Information

Local site running with Local by Flywheel

Ad Blockers

I've disabled all of my ad blockers.

Installed / Active Plugins

• Gutenberg `2.6.01
• Gutenberg - Example Blocks 2.0.0 installed from zip file at https://github.com/zgordon/gutenberg-course/blob/master/jsforwp-example-blocks.zip

Theme

Twentyseventeen

I tried figuring out what was going on here for a bit but didn't find the solution.

When this is removed, the block works properly. Except for the fact that it's missing the URL field :)

It might be a good idea to refactor the dynamic block to use withSelect instead of withAPIData as core devs are planning to deprecate withAPIData in the near future:

WordPress/gutenberg#7397

I'm not sure why this problem presented for me, and I gather nobody else, but I needed to add .babelrc and set the wordpress default preset in order to run any build. I'll provide a PR with this.

I found a small error that happens when I try to use use npm install on lesson 04.01. Midway through the install I experienced a lot of errors. Once the install finished I ran a test using npm run dev and was unable to move further due to additional errors.

I read through some of the errors and found that everything pointed to "node-sass": "^4.8.3" not being able to install. I updated pacakage.json and changed "node-sass": "^4.8.3" to "node-sass": "^4.9.0". I then ran npm install and npm run dev with success.

I just wanted to share this information in case anyone else has experienced this same issue.

variables.scss loads Google fonts with HTTP resulting in mixed-content errors on HTTPS sites.

@import url(http://fonts.googleapis.com/css?family=Archivo+Black|PT+Sans:400italic,700italic,400,700);

Easiest fix is to just make this HTTPS for everyone

@import url(https://fonts.googleapis.com/css?family=Archivo+Black|PT+Sans:400italic,700italic,400,700);

I can create a pull request if you want me to.

It seems wp.components.withAPIData is deprecated and will be removed from Gutenberg in 3.7.

Could you update this example to use the Core Data Module or wp.apiFetch directly instead?

How could we implement this pattern with Webpack 4? Also, how could we implement this using sourcemaps?

I changed the plugin folder to /_jsforwp-blocks/, which changed plugin loading order.

register_block_type() in jsforwp-blocks.php became fatally undefined.

wrapping both register_block_type() in init actions resolved the issue.

Just an fyi for anyone who changes the folder name to anything < 'gu'

Hello,

I get many errors once I run npm run dev

[0] ./blocks/index.js 444 bytes {0} [built]
[1] ./blocks/i18n.js 51 bytes {0} [built]
[2] ./blocks/01-static/index.js 1.25 kB {0} [built] [failed] [1 error]
[3] ./blocks/02-richtext/index.js 1.14 kB {0} [built] [failed] [1 error]
[4] ./blocks/03-text-alignment-toolbar/index.js 789 bytes {0} [built] [failed] [1 error]
[5] ./blocks/04-block-alignment-toolbar/index.js 795 bytes {0} [built] [failed] [1 error]
[6] ./blocks/05-custom-toolbar/index.js 912 bytes {0} [built] [failed] [1 error]
[7] ./blocks/06-inspector-controls/index.js 796 bytes {0} [built] [failed] [1 error]
[9] ./blocks/08-form-fields/index.js 836 bytes {0} [built] [failed] [1 error]
[10] ./blocks/10-media-upload/index.js 649 bytes {0} [built] [failed] [1 error]
[11] ./blocks/11-url-input/index.js 856 bytes {0} [built] [failed] [1 error]
[12] ./blocks/11-url-input-conditional/index.js 856 bytes {0} [built] [failed] [1 error]
[13] ./blocks/12-dynamic/index.js 1.04 kB {0} [built] [failed] [1 error]
[14] ./blocks/14-meta-box/index.js 1.05 kB {0} [built] [failed] [1 error]
[15] ./blocks/frontend.js 33 bytes {1} [built]

When inserting the Example - Editable block the following message is produced in the browser

Editable is deprecated, use wp.blocks.RichText instead.

Hi,

In https://github.com/zgordon/gutenberg-course/blob/master/jsforwp-example-blocks/blocks/12-dynamic/index.php

the closing ul tag is missing the /

;)

With the current version of Gutenberg ( 2.0.0 ), the action hook enqueue_block_assets is invoked even when using the Classic editor. This invokes jsforwpblocks_scripts() which enqueues the React Javascript which is incompatible with the Classic editor's TinyMCE. This results in TinyMCE failing to load.

I raised this in WordPress/gutenberg#4672 (comment)
Now I understand it better I'm considering whether or not to raise a separate issue on Gutenberg.

Media Uploader Block does not work using Gutenberg 3.6.2.

I've spotted the good ol' Editable import in :

https://github.com/zgordon/gutenberg-course/blob/master/jsforwp-example-blocks/blocks/10-media-upload/index.js

(It's only imported, not used)

Question :
You are sometimes using { isSelected ? ( <html> ) : null }
and sometimes { isSelected && ( <html> ) }

I prefer the second one buy may be the 2 are equally okay?

Thanks for the plugin V2. A lot of things have changed for the best

PS : what do you think about removing every semi colon in the code for a better readability?

https://github.com/zgordon/gutenberg-course/tree/master/jsforwp-example-blocks/blocks/12-dynamic

Add the block to page -> save page -> reload edit page

Hi Zac, thanks for your great course!
I need your support, I've tested your plugin in wordpress together with installed Gutenberg plugin.
It breaks down my Wordpress-Installation (4.9.4) with Servererror "500" and following response in Serverlog:

6130#0: *591912 FastCGI sent in stderr: "PHP message: PHP Fatal error: Uncaught Error: Call to undefined function register_block_type() in /var/www/vhosts/gutenberg.example/wp-content/plugins/jsforwp-blocks/jsforwp-blocks.php:155 Stack trace: #0 /var/www/vhosts/gutenberg.example/wp-settings.php(305): include_once() #1 /var/www/vhosts/gutenberg.example/wp-config.php(78): require_once('/var/www/vhosts...') #2 /var/www/vhosts/gutenberg.example/wp-load.php(37): require_once('/var/www/vhosts...') #3 /var/www/vhosts/gutenberg.example/wp-admin/admin.php(31): require_once('/var/www/vhosts...') #4 /var/www/vhosts/gutenberg.example/wp-admin/index.php(10): require_once('/var/www/vhosts...') #5 {main} thrown in /var/www/vhosts/gutenberg.example/wp-content/plugins/jsforwp-blocks/jsforwp-blocks.php on line 155" while reading response header from upstream

Why they can't find the register_block_type()-Function delivered by Gutenberg-Plugin?
Is it the wrong way to use your code in Wordpress?

Thanks a lot for your quick support!
Best regards from berlin/germany
Andy

@zgordon is compiling of the sass files supposed to only happen when running the npm run build command?

I've a feeling that the CSS z-index for the content displayed with each demo block is probably a bit too high. It makes the blue text sit over the top of things.