Basic Blocks For Learning Gutenberg

What Is This?

Example code from Josh Pollock's talks and workshops about the new block-based "Gutenberg" editor for WordPress.

• WordCamp Pittsburgh 2018
• React Boston 2018
• php[World] 2018 All day workshop with Zac Gordon

Want To Learn More About Gutenberg?

• Gutenberg Handbook
• Check out Zac’s Gutenberg development course
• My big list of Gutenberg -related talks for developers
• Gutenberg Block Basics - Video WordCamp Jacksonville 2018
• How To Convert A Shortcode To Block

How To Install/ Use/ Learn

This repo has three blocks:

• "Call To Action" - A basic static block.
• "Call To Action Editable" - A static block with editable options.
• "Call To Action Editable Advanced" - A static block with editable options and even more controls and WordPress APIs.
• "Post Title" - An example of block that replaces a shortcode.
  • Step by Step Guide

These blocks were made without JSX or any build tools first. Then they were converted to JSX, using webpack. The first commit in the conversion to JSX is 8b01eaffdea8222435d296dd85a3bfef74d5ccfd

• Download basic version without JSX

Use JSX-version

• Clone from Github
  • git clone [email protected]:caldera-learn/basic-blocks.git
• Switch to directory
  • cd basic-blocks
• Install
  • npm install
• Start watcher to compile JS
  • npm run dev