Gutenberg: Create "Hello World" Block plugin examples with documentation

[ahmadawais]

I have had been looking at the source code of Gutenberg lately and it seems that 3rd party Gutenberg blocks page is outdated.

I'd like to build a few 3rd party blocks to hunker down a few silly assumptions and for fun. Would it be possible for anyone to help collaborate in building a very simple boilerplate for creating 3rd Party Gutenberg blogs.

Ideally the boilerplate would have

• Basic block setup
• Documentation on edit and save methods
• Basic documentation on how Gutenberg works (technical docs — much needed since React, JSX, ES6 etc. are pretty new for many WordPress developers)
• Example blocks (take user input in edit and use it inside the saved state etc.)
• NPM Scripts, Gulp, Webpack (basic configuration files for working with Babel, ES6, React, etc.)

Currently, working off an experimental plugin https://github.com/ahmadawais/Gutenberg-Blocks

Looking forward!

[ahmadawais]

@georgestephanis I have created this separate ticket for what we discussed in #1184
Looking forward!

[jasmussen]

Thank you for the ticket! I took the liberty of renaming it and putting it in a milestone!

[nylen]

As of #1717 this is possible to create in a reasonable way, and there is an extremely basic but usable implementation at https://github.com/nylen/gutenberg-examples.

We're also working on other components like a plugin with a Webpack ES6 build process and a documentation site that will replace the blocks/README.md. Once these are further along and we figure out how they should be structured, we'll move them under https://github.com/WordPress.

[ahmadawais]

Thanks for that @jasmussen.
That's what I have had been trying to accomplish @nylen. Looking forward to it.

[antek83]

Hi guys, I would like to try to recreate, probably failing many times but who cares :), the most common shortcodes around: alerts, gmap, feature boxes etc.. as blocks for both exercise and public usage.

I cannot thank enough @nylen and @ahmadawais for the boilerplate and the demo twitter block examples.

I would like to ask where would be possible to find documentation regarding the available fields that can be used in the block's forms for example select boxes, radio buttons, color pickers etc?

[mtias]

Initial pass done in https://github.com/WordPress/gutenberg/pull/1786.

@antekdesign the plan is to list such utilities in the docs at http://gutenberg-devdoc.surge.sh/. It will include modules from https://github.com/WordPress/gutenberg/tree/master/components and https://github.com/WordPress/gutenberg/tree/master/blocks.