I have 5-6 warnings in dashboard when your plugin is activated. Can't use it at all because of broken dashboard. Is it working at all?

Currently the code examples use __(), but don't include any of the build tool configs necessary to make __() actually output localized strings.

Related: https://github.com/swissspidy/gutenberg-i18n-block

Updating to Wordpress 5.0 today broke my site. I think it is due to the following error caused by this plugin:

Fatal error: Call to undefined function gutenberg_get_jed_locale_data() in directory\index.php on line 55

This is being called in 05-recipe-card/index.php

I'm not sure how to fix it and would really appreciate help!

Getting error for update failed - https://goo.gl/24Vd8N

Does anyone know about this issue?

~Prajakta,

The wp.editor is deprecated, use the new class. wp.blockEditor / wp.blockEditor.RichText

all above esnext example is not working showing syntax error:
Uncaught SyntaxError: Unexpected token <

please provide us how to solve this error.

filemtime(): stat failed for gutenberg-examples-master/05-recipe-card-esnext/block.build.js
in /gutenberg-examples-master/05-recipe-card-esnext/index.php on line 12

Hey there!

I've been learning gutenberg dev over the last few days and I feel there is a strong need for repeatable nested content such as columns or tabs.

I haven't found a great example of a barebones implementation of this but I think it would be really beneficial to this repo and other developers learning this framework. In ACF land the repeater field is one of the most widely used and I sense as we start shifting over to gutenberg blocks we'll have similar needs of creating repeatable content.

I also raised a similar question on Stack Overflow: https://stackoverflow.com/questions/61925625/developing-block-with-multiple-child-blocks-such-as-columns-or-tabs

To reproduce:

1. make a post with the recipe card (either version) and save it
2. go to post in posts list and try to edit with Gutenberg

This whitescreens for me with the error:

react.3a8927d9.js:343 Uncaught Error: Objects are not valid as a React child (found: object with keys {type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.
    in ul
    in div 
    ....

Taking out the multiline props fixes this, although admittedly doesn't give you a list. 😊 I'm not sure if the issues is here or in Gutenberg or if something's changed recently. (I wanted to raise an issue before I forgot the details!)

Dear Gutenberg team, it would be great if you will added some example with latest posts.
We need to render item list of custom post type.

Why are these not used in the wp_register_script function?

I installed the installable version and it just brakes the dashboard.

Hello,

I'm facing some JS issue for below examples:

1. 03-editable
2. 03-editable-esnext
3. 04-controls
4. 04-controls-esnext
5. 05-recipe-card-esnext

As you can see in above screenshot, I'm not able to find Example: Editable block ( and similar for other blocks above ) because of the JS error.

When I comment https://github.com/WordPress/gutenberg-examples/blob/master/03-editable/block.js#L11 ( and similar line in the code for other examples ), Example: Editable block is searchable and also the JS error for 03-editable is gone. Please check below screenshot:

Let me know if this issue is valid or anything I missed.

In the Gutenberg handbook is a tutorial "Creating Block Types". This seems to be for very beginners. There is stated:

To follow along with this tutorial, you can download the accompanying WordPress plugin which includes all of the examples for you to try on your own site.

The plugin for download is this one with these examples: /gutenberg-examples

Comparing source codes you'll find that they are not identical.
For example chapter one "writing your first block type"

--- enqueuing Block scripts ---
Handbook (hb) wp_register_script(
Gutenberg-examples (ge) 01-baisc wp_enqueue_script(

(hb) register_block_type(
(ge) blocks.registerBlockType(

(hb) missing i18n

(hb) use of prefix wp. var el = wp.element.createElement
(ge) var el = element.createElement;

(hb) missing window.wp.blocks, window.wp.i18n, window.wp.element

(hb) missing filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )

And general questions to understand the source code:

(ge) path = gutenberg-examples/01-basic/block.js
Why the block_type is named example-01-basic from blocks.registerBlockType( 'gutenberg-examples/example-01-basic', {

What does this mean? step 1 (from the editor). from 'Hello World, step 1 (from the editor).'
The same in (hb) (Step 1) from title: 'Hello World (Step 1)',

The namings are totally different:
(hb) wp_register_script( 'gutenberg-boilerplate-es5-step01', plugins_url( 'step-01/block.js', __FILE__ ), array( 'wp-blocks', 'wp-element' )

(ge) wp_enqueue_script( 'gutenberg-examples-01', plugins_url( 'block.js', __FILE__ ), array( 'wp-blocks', 'wp-i18n', 'wp-element' ), filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )

If you look in the other examples you'll find more inconsistency

As learning references these examples are not particularly helpful, on the contrary, they are confusing - especially for beginners.

What is wrong, what should I use, why there is a prefix wp. there not, why there it is blocks.register... and there register?... and so on.

Download a pre-built zip archive of the latest release.
Do not download from the "Clone or download" GitHub button, as this includes the source material only. Read the Development instructions below if you’re interested in building your own copy of the plugin.

This is what I see before clicking on the link to download the files. However, what I see is this:

I download both the gutenburg-examples.zip and source code in order to look at both folders. The source code has package.json, etc that the gutenburg-examples.zip doesn't have.

I'm trying to follow the block tutorial from develop.wordpress.org: https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/writing-your-first-block-type/

So which one should I be using to edit as I follow the block tutorial?

Hey, I did npm install and correct build of the block. When opening my page edit screen I have an error like in the title. Can't find my block from repo :(

Firstly thanks so much for sharing these examples. They have provided a good starting point for me, a PHP WordPress developer having to start learning how to use javascript in order to keep up with WordPress.

One thing that I would love to see is more comments in the code please. I probably over comment my code, but to someone coming along and reading this as a new language it would make much more sense if comments we added to code lines or at the very least blocks, to indicate to devs like me what actually is going on.

For example take this line of code:

https://github.com/WordPress/gutenberg-examples/blob/master/03-editable/block.js#L29

It would be super useful to have a 1 or 2 line comment explaining what is happening with that part of the code. Thanks in advance.

I'm not exactly sure how to implement Block Type Metadata of the new Block API Updates of WP 5.5: https://make.wordpress.org/core/2020/07/30/block-api-updates-in-5-5/

I would like to see (one of) the gutenberg examples in this repo use this new approach.

There's been a lot of changes in the past month with this plugin for compatibility for the newer versions of Gutenberg but the last build .zip was from October.

Since WP5 is publicly available and Automattic is strongly encouraging users to embrace Gutenberg, it's imperative that the examples to learn about Gutenberg are up to date and relatively easy to access.

Examples 3 and 4 are broken on my naked / Gutenberg only latest wordpress environment.

Wordpress Version: 4.9.6
Gutenberg Version: 2.9.2
Gutenberg Examples Version: 0.1.0

is there any method to create dynamic select control ?

The Recipe block Media Image Uploader does not display in the Editor since upgrading to 3.6.2. All of my blocks that were working are not broken for MediaImage Uploader.

Both Example: Recipe Card and Example: Recipe Card (esnext) generate the following error:

This block has encountered an error and cannot be previewed.

I have not had time to debug the issue.

That would provide an example that is modern and consistent with standard block development practices.

The minified output should probably be build/style.css rather than /style.css.

We should add more examples like these:
https://github.com/youknowriad/gutenberg-extensibility-workshop

Maybe we can merge this two repositories? @youknowriad

Issue:
float: right on recipe-image element causes block to spill out of container and overlap content below.

Solution
Apply clearfix css to container div:
.wp-block-gutenberg-examples-example-05-recipe-card:after { content:""; clear:both; display: table; }

Inserting an Example Recipe Card block leads to this being displayed in the block in the editor:

This block has encountered an error and cannot be previewed.

The browsers console shows;

react-dom.min.82e21c65.js:110 Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= 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 react-dom.min.82e21c65.js:88
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)

WP version 4.9.8RC2
Gutenberg examples: 3564e38
Gutenberg: 767ef1e3

As a plugin developer, I want to update my plugins' meta boxes to natively work with Gutenberg. For meta boxes that don't make sense as blocks (for example, a box with fields to populate open graph tags), I might want to add a box to the sidebar.

It would be helpful for theme and plugin developers to have an example of adding a meta box/pane, akin to the "Featured Image", "Excerpt", and "Discussion" boxes. It would be nice if there was an example of doing this for each available space (sidebar, below the editor, and if there's anywhere else).

I followed the instructions:

1. installed Docker

2. downloaded a copy of the repo

3. docker-compose up -d

4. go to http://localhost:9999/ and install WordPress in the Docker container

5. npm install (no errors, only the following warnings):

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

6. then

cd 01-basic-esnext/
npm start

and I get the following error:

'wp-scripts' is not recognized as an internal or external command,

The full error output is here:

> [email protected] start C:\My_Docs\phpstorm\REDACTED\wp-theme-plugins\plugins\gutenberg-examples-master\01-basic-esnext
> wp-scripts start

'wp-scripts' 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 protected] start: `wp-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\billb\AppData\Roaming\npm-cache\_logs\2019-11-13T19_30_24_729Z-debug.log

So I then I tried installing/re-installing wp-scripts via

npm install --save-dev wp-scripts

and confirmed that a folder for it exists in my node_modules folder.

Running npm start in the 01-basic-esnext\ folder again produces the same error.

I'm using Powershell in Windows 10.

Documentation describe values for source key of attributes object:
https://developer.wordpress.org/block-editor/developers/block-api/block-attributes/

But source: 'children' is not described.

Where I can read about 'children' value ?

Switch ESNext examples to use import { .. } from '@wordpress/package' syntax
Fix deprecation warnings for editor => blockEditor and others.

When adding or editing a post, a lot of errors show up in the console. The "Unsafe lifecycle methods" is coming from Gutenberg itself, but the rest are from the examples plugin, and go away when it's disabled.

Jed localization error: 
Error: Domain `gutenberg-examples` was not found. index.js:1:985

TypeError: blocks.source is undefined block.js:11:6
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/03-editable/block.js:11:6
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/03-editable/block.js:7:3

TypeError: _wp$blocks.source is undefined block.build.js:74:5
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/03-editable-esnext/block.build.js:74:5
__webpack_require__
http://iandunn.localhost/content/plugins/gutenberg-examples/03-editable-esnext/block.build.js:20:12
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/03-editable-esnext/block.build.js:63:18
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/03-editable-esnext/block.build.js:1:11

TypeError: blocks.source is undefined block.js:10:6
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/04-controls/block.js:10:6
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/04-controls/block.js:6:3

TypeError: r.source is undefined block.build.js:1:543
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/04-controls-esnext/block.build.js:1:543
t
http://iandunn.localhost/content/plugins/gutenberg-examples/04-controls-esnext/block.build.js:1:96
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/04-controls-esnext/block.build.js:1:451
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/04-controls-esnext/block.build.js:1:2

TypeError: s is undefined block.build.js:1:570
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/05-recipe-card-esnext/block.build.js:1:570
t
http://iandunn.localhost/content/plugins/gutenberg-examples/05-recipe-card-esnext/block.build.js:1:96
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/05-recipe-card-esnext/block.build.js:1:451
<anonymous>
http://iandunn.localhost/content/plugins/gutenberg-examples/05-recipe-card-esnext/block.build.js:1:2

• WP 5.0-alpha-20180705.141730
• Gutenberg e1fa05379b175183e21c05d9d08cb24853bcd82c
• gutenberg-examples 3564e38
• Firefox Developer Edition 62.0b5

I would love to see an example that adds an additional sidebar control for 1) A specific block (maybe the paragraph block?) and 2) all blocks.

A quick and useful example could be storing "notes".

Gutenberg Core's config is pretty complicated and not easy to replicate in the context of a plugin. It'd be helpful to have a working example that devs could just copy instead.

The Readme file states:

To build a development version of the plugin and watch changes for automatic rebuild

npm start

But there is no 'start' script configured in the scripts section of the package.json file. The result is that it is not possible to run npm start, it results in an error: npm ERR! missing script: start

Is this a documentation error or is the start script actually missing?

Originally reported by @aduth at nylen/gutenberg-examples#9

Reported at: Automattic/jetpack#7597 (comment)

Example: https://github.com/nylen/gutenberg-examples/blob/6e369f8/01-basic/block.js#L20

The wp.i18n.__ function does not accept a domain (second parameter). i18n domain has yet to be implemented for these functions, and is still up in the air whether this is to be performed as part of the runtime call or during a build step.

See also: https://github.com/WordPress/gutenberg/tree/master/i18n

Hi Andrew thanks for this examples but I wonder if you consider adding more examples in the future like posts block. There's latest post block in gutenberg and I try to do a similar block but I can't find a way to import a function from another files like it's done in latest post block

var el = wp.element.createElement,
registerBlockType = wp.blocks.registerBlockType,
import { getData } from './data.js';

When I add import getdata my block disappear in the editor and I can't understand why.

I've found it time consuming to get Jest properly configured with Babel and JSX and all the things. I think it'd be useful to include working testings and all the required build tool configs, in order to make this easier and more convenient for people.

It's not very easy to clone and install this repository as a plugin. We might consider either pre-built distributables, and/or improving the install/build workflow.

Currently, the developer must cd into each -esnext folder, npm install && npm run build.

Via Slack Overflow sleuthing, I found some nice conveniences to this:

find ./* -maxdepth 1 -name package.json -execdir sh -c "npm install; npm run build" \;

But this will not support WIndows. We could either find dependencies with CLIs which perform similar, or create our own script.

On https://developer.wordpress.org/block-editor/tutorials/block-tutorial/creating-dynamic-blocks/ , the instructions for activating Javascript don't work with the dev dependencies in package.json

It needs to be changed to this to work:

"devDependencies": {
"@wordpress/scripts": "6.0.0"
},

I updated the Editable instances to RichText as this has been implemented as of 2.2.0, but other than that everything is the same as the repo code. However, I'm getting a React 152 error:

t(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Hello! When attempting to create a new block or edit an existing block in the most recent version of Gutenberg, the above logs appear.

Steps to Reproduce:

1. Create post
2. Click Enter in Paragraph block to create a new paragraph block.
3. One of 2 errors consistently appears: "this block has encountered an error and cannot be previewed" or the post completely crashes and you have to enter recovery mode

Browser Settings: Version 70.0.3538.110 (Official Build) (64-bit)

Reproducible in Safari Version 12.0.1 (14606.2.104.1.1) with the same error message

Block names must include only lowercase alphanumeric characters or dashes, and start with a letter. So gutenberg-examples/01-basic-esnext doesn't work anymore.

See: https://github.com/WordPress/gutenberg/blob/master/blocks/api/registration.js#L58

I have followed the exact same steps from the example Basic (ESNext). But I am getting the i18n of undefined error. I go through the node_modules and checked the @WordPress directory but I haven't find the i18n or block directory exists.

Can someone please help me to fix this issue?

• Short description about the block
• Screenshot for block frontend and backend
• Quick link to components / packages used in example

In 03-editable and 04-controls, blocks.source is undefined:

( function( blocks, i18n, element ) {
	var el = element.createElement;
	var __ = i18n.__;
	var RichText = blocks.RichText;
	var children = blocks.source.children;

WP version 4.9.8RC2
Gutenberg examples: 3564e38
Gutenberg: 767ef1e3

Hi, I have some questions about main file of the plugin.

include '01-basic/index.php';

1. Why do you use include instead of require_once?
2. Why don't you use recommended plugin_dir_path method? https://developer.wordpress.org/plugins/plugin-basics/best-practices/