Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gutenberg Block Development notes (Hollywood WP Meetup 1-31-18)

Notes on Gutenberg Block Development

Disclaimer: I am just learning this myself...and it's hard, very hard.

Main links:

Blocks ≠ Fields Everything is in post_content and structured with HTML comments

When Gutenberg sees those HTML comments, it knows what kind of block to load. Then, attributes - which we will see shortly - hook up the data to the block interface.

Before we do that, let's take a look at what blocks from the user's perspective.

Blocks will be in plugins, not themes. Themes will be primarily responsible for styling.

Now let's look at how a block is created! It's very, very confusing and requires a lot of JS knowledge. It's taken me many hours of confusion to get this far. Luckily, however, there are some very nice resources popping up and hopefully this dicussion will save you some time!

First and foremost, create-guten-block - a tool that allows us to bypass the nasty configuration step, and get to coding:

Next up are packages of example blocks that I recommend starting with. I followed along with the example files from Zac Gordon's class:

There are also some official block examples from the Gutenberg team:

And the source for the block I will show you now:

Okay, now to create a block ️❤️ (open cc4k/wp-content/plugins)

	$ create-guten-block fun-block
	$ cd fun-block
	$ npm start

(Enable JS4WP blocks and side by side compare code)

Attributes first: These essentially map to the data you want to save, sort of what your fields would be

  attributes: {
		someText: {
      type: 'array',
      source: 'children',
      selector: '.some-text'
    }
  },

"edit" method is what you see in Gutenberg, the React stuff:

	<Editable
          tagName="p"
          placeholder={ __('Write something') }
          value={ props.attributes.someText }
          onChange={ onChangeSomeText }
          />

Add on change function to hook up :

    const onChangeSomeText = value => {
      props.setAttributes({ someText: value })
    };

Save the markup to the database in the "save" method (this is saved to the DB):

   <p>{ props.attributes.custom }</p>

Other resources:

Contributing:

Issues of note (not super technical):

Misc JS learning resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment