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.

Want To Learn More About Gutenberg?

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.

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

Use JSX-version

  • Clone from Github
    • git clone git@github.com:caldera-learn/basic-blocks.git
  • Switch to directory
    • cd basic-blocks
  • Install
    • npm install
  • Start watcher to compile JS
    • npm run dev