This is designed to teach the basics of WordPress Gutenberg Block Type Development.

This was made for the WordCamp Las Vegas 2019 - "Plugin Development in a Block Editor World"

Google Slides

Developed and presented by @OGProgrammer

See more at the official site -> https://wordpress.org/gutenberg/

To install this, first install docker & docker-compose

Run docker-compose up -d to bring up the wordpress container with the example plugin code.

To shut it all down , just run docker-compose down to shut it all down.

To jump into the terminal for the container, run docker-compose exec wordpress bash

The manual examples can be found in custom-wp-block-type. You'll find a few dynamic blocks and one static block example.

The other example uses create-guten-block, I ran npx create-guten-block my-autogen-block in the root of the project here to generate the autogen example.

Use normal wp-config.php settings and tail logs with docker-compose logs -f

Here are other resources that helped out:

• Good A-to-Z video on Block development

• Babel in-browser HTML -> React JSX Transpile
• Create Guten Block NPM command ** Run npx create-guten-block my-autogen-block

• WP Creating Dynamic Blocks
• WP Attributes / Working with Meta
• WP Block Templates

• FreeCodeCamp WP React Development

Some of the examples are copied/derived from the following:

• Color Block Example from LearnWebCode/simple-block-boilerplate
• Static Block Example from modularwp.com