Where to create gutenberg block

0
votes

This Gutenberg update looks sweet, but it's immediately frustrating trying to follow any of the documentation.

I started with the very simple looking tutorial that is the first result on Google. It has code that looks to make sense for what I'm trying to do here. Great.

Except it says nothing about where to put this code to make it work.

Other tutorials are all about "download our plugin and we'll create one for you" - but I don't want to add that huge nest of code when what I'm really looking for is a fairly simple static block of code I can have users drop into a page.

Back in the day we'd just register a short code in the functions.php file and call it a day.

Can someone explain to me:

  1. Where to put this registration code?
  2. Where to put this JS code it references?
  3. If I'm somehow going about this with a huge misunderstanding of how Gutenberg works?

Thanks

1
wordpresswordpress-gutenberggutenberg-blocks
This series of 7 articles from css-tricks helped me a lot in understanding gutenberg. Apart from that I have looked at the core blocks of gutenberg and learned how they implements their blocks. - Mehmood Ahmad

1 Answers

1
votes

To actually solve this properly would need a couple of chapters of a book... but here's the very condensed answer.

Taking a very quick look at the link you shared, the code should be put in a plugin as there are calls to the function plugins_url(). So you need to first create a plugin. It's not difficult to build a simple plugin but it does take a bit of time getting used to how things need to be registered and how everything is glued together (that's why I said that a proper answer would take a couple of chapters of a book :D).

Once you have the plugin, the code should be within the plugin (or in any PHP file that is included by the plugin) and the JS file should go inside the plugin directory in a folder called step-01

There's a git repo from WordPress with some Gutenberg examples. I haven't looked to hard at them, but It might be a good idea to follow the code in there with the tutorial of how to build a plugin (and the WordPress code reference site opened too :D). If you are going to be developing things for WP, I recommend you to get Zeal or Dash to be able to browse the documentation in an easy and fast way.

Edit

I just found that you can create the scaffolding with wp cli. Wordpress has a tutorial on how to use the wp scaffold block command here.