This is my first attempt at a Gutenberg block. I’m building this looking at / copying nylen’s Gutenberg examples plugin. Mine is named “Gutenbergerli” because this will be wonderful for a few hours then it’ll go stale, just like Luxemburgerli which are some of the best things ever for a time, at least.

Ok. Here we go. I’ve straight up copied example 5 (ESNext version) into my plugin directory “faq” and run npm install and built it just to make sure it’s all working.

WAIT. You need to have the latest and greatest Gutenberg installed and (this is key) built. (Yeah, I forgot.)

Steps 1-4:

1. copy block from Gutenberg examples plugin into mine
2. do npm install
3. Rename things! Rename block in block.js to gutenbergerli/test and change title so I know which one it is. Change the name in package.json, rename the plugin and change the function names in index.php. Here are the block.js changes:
4. do npm run build

And now it works and by work I mean have another recipe card block like the Gutenberg examples plugin. Except this one is called “Gutenbergerli test” in the list of blocks. First commit here.

So far so good. Now what am I going to build? A little faq. 🙂 WHOOO faq. For my usual faq, I have the questions show and then, when you click on it, the answers show. I’m not going to start with that now; it’s just going to be a static version that shows everything. It’ll have the question with styling and then underneath that, the answer.

Wow, that was easy. I went through and edited block.js, substituting in names and deleting some stuff. The only trouble I had — and this was minor — was doing comments correctly. I’m not sure they’re right but I’m leaving them for the moment. The best thing to do now is look through the second commit diff as I commented it fairly thoroughly I think.

Steps 5-6:

5. Edit block.js and give static unstyled layouts
6. Edit stylesheets with empty class names (because I had those on hand and didn’t want to have to look it up again)

I’m not happy with the focus behaviour on the Editable components in the edit screen but I’m not really sure of what I want it to be either, so I’ll leave that. What I’d really like is for only the questions to show on the front end at first and then the answers are opened up when the associated question is clicked. I have this somewhere already so I’ll work from that. By the magic of blog writing, I did that in the space of a typed line. Here is the diff for the styling and animations. (I also forgot how css comments worked so I fixed those! And I changed the name of the block; I had meant to do that before but forgot.)

Steps 7-8:

7. Fix stupid mistakes (hey! I made it this far without committing any, that’s pretty good for me. Oh wait that’s only one step, well… still good.)
8. Style and animate as usual-ish. I usually use velocityjs but am using jQuery because it’s on hand, apols for any non-smooth animations.

Ok, done for now. Here’s how the faq blocks look (the first question has been clicked, the second hasn’t):

First go was super straightforward. Much easier than using metaboxes, definitely!