Hot take on Zach Silveira's Gutenblock Demo!

README.md

Gutenblock Demo!

Zach Silveira was kind enough to create a video tutorial:

https://www.youtube.com/watch?v=apZwd0FqQu4&feature=youtu.be

Here are my notes as I followed along...

Getting Started

1. Install Docker for Mac.

2. Create & open a test folder (I used /tmp/gutenblock-demo).

3. Copy https://gist.github.com/zackify/d8e428f93e018c3fbcce512414d02e62 to docker-compose.yml.

4. Run docker-compose up.

   It's working if you see:

   Complete! WordPress has been successfully copied to /var/www/html

5. Visit http://localhost/ and setup WordPress.

6. Install & Activate Gutenberg

7. Visit http://localhost/wp-admin/post-new.php, and now we're all caught up!

Tutorial

0. The video starts with http://localhost/wp-admin/post-new.php.

1. Zach uses npm install gutenblock -g, but I'm using yarn global add gutenblock.

2. gutenblock init, and now /blocks is populated!

3. cd blocks && gutenblock watch

   I'm getting an error:

   Module build failed: ReferenceError: Unknown plugin "/Users/eric/.config/yarn/global/node_modules/gutenblock/config/../node_modules/react-hot-loader/babel" specified in "base" at 0, attempted to resolve relative to "/private/tmp/gutenblock/blocks"

   The problem is because ./blocks/node_modules/gutenblock/config/babel-options.js should be using require.resolve('react-hot-loader/babel'),, not __dirname + '/../node_modules'....

I think it would be best to do the gutenblock init before running docker-compose up, since that folder gets mounted.

1. Ensure Gutenblock by Crossfield is Activated:

   http://localhost/wp-admin/plugins.php

2. Continue following along with the video (editing ./blocks/src/example/edit.js to see HMR).

You basically end up making these files:

// ./blocks/src/paragraph/block.js
const Block = {
  title: 'Custom Paragraph',
  icon: 'shield-alt',
  category: 'common',
  attributes: {
    title: {
      type: 'string',
    },
    description: {
      type: 'string',
    },
  },
};

// ./blocks/src/paragraph/edit.js
import { RichText } from 'gutenblock-controls';

const Edit = () => (
  <div>
    Custom:

    <RichText name="description" tagName="p" />
  </div>
);

Impressions

This is pretty cool! If it weren't for the duplicate terminals (one for running docker-compose up and the other for running gutenblock watch, this would be entirely seamless!)

This workflow can hit that sweet spot of leveraging WordPress & React both for their strengths, instead of having to dump WordPress entirely because "it's too hard to customize the editor."

👏 Fantastic work Zach! :)