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:
- http://gutenberg.news
- https://wordpress.tv/2017/11/28/morten-rand-hendriksen-gutenberg-the-future-of-wordpress/
- http://gutenberg.courses
- https://make.wordpress.org/core/tag/core-editor/
- https://make.wordpress.org/chat/ (show Slack)
Contributing:
- https://github.com/WordPress/gutenberg - the main Github repo
- https://github.com/WordPress/gutenberg/issues - it's intimidating, but if you have an opinion, chime in!
Issues of note (not super technical):
Misc JS learning resources
- https://javascriptforwp.com/ - This is probably the best resource to get started
- https://frontendmasters.com/
- https://www.lynda.com/search?q=javascript - Some of the Frontend Masters courses are on here, too! Free membership with your LAPL library card
- https://javascript30.com/