Building a mini course on Block Design in 24 hours

Click to go to the latest update.

Over the years, I’ve watched a bunch of rad people create products in public. I’ve dabbled with building in public too, having built both Super List and QuickPost in public on Twitter last year. And this year, I’ve been attempting to finish and release a course that I half-announced last year, and it’s been a daunting process, in fact, despite multiple attempts, I’ve continued to procrastinate on it and push the release of it again and again, because it just feels so big.

So I was lying awake in bed unable to sleep a few days ago, and I thought..what if I built something small and did it in public and set a time limit on it Nathan Barry style? In fact, what if I just did it like Nathan Barry did all those years ago?

Taking a small detour

So that’s what I’m going to do. I’m going to take a break from the daunting task of the larger course that I seem to have set impossible standards for myself for, and make this little product that I’ve had in my mind for a few weeks. In order to make sure I actually finish it and do it, I’m giving myself..24 hours. Ideally, I would have started this at the top of the morning, but here we are at 8pm on a Saturday. But that’s alright. By 8pm tomorrow, this little product should be complete, released, and available for purchase.

And like I said, it’s going to be in public – I’ll post on social media too, but I’ll log my updates and stay accountable to myself (and to you) here in this post. Every couple hours, I’ll post an update with my progress and what’s going on. I have never put up a product for purchase before, so this is in some ways pretty nerve-wracking..and I don’t expect too much, but it’s an excellent first step.

So what’s the course?

I have a lot of conversations with other developers about how, with the advent of the Block Editor, we as developers can’t just care about the frontend, we have to now actively care about the administrative experience. I’ve been an advocate for thoughtful, well designed editing experience in the WordPress dashboard even before the Block Editor, but now with the visual editing experience, this matters even more.

So I’m going to take the conversations I find myself having repeatedly and distill it down into a mini course you should be able to complete from start to finish in one hour, that’ll give you a framework for how to plan out your WordPress block and the editing experience for it.

My spouse has these things called “lunch ‘n learns” at his office, where the team gathers with their lunch (or the company provides a lunch) and one of the team members or an outside expert teaches everyone something new while everyone eats lunch. So think of this as a Lunch N Learn on crafting a thoughtful block editing experience.

Right now

I’ve got some thoughts jotted down in my Notes app, from when I was lying awake in bed a few nights ago, but I haven’t actually started yet, because I wanted to get this little post out first. Right away, I know that:

  • it’ll be maybe 8 or 9 short videos
  • plus a planning template (based off the one that I think through things in myself)
  • $10 – $15 bucks at most, with two packages (again, very Nathan Barry inspired here)
  • the course will be delivered through a little WordPress website (of course!)

I have some ideas for a name, but nothing nailed down yet.

The very first thing I’m going to do is roughly plan out the videos and what they’ll each be about, and I’ll probably do it in FigJam, which I’ve recently been really enjoying.

Okay! It’s 8:24pm, I’m going to get this post live, post an announcement on social media, and then get cracking. And if you want to hear when the course becomes available for ordering, you can sign up for the mailing list at the bottom of this post. 🙂

First update will be up in a couple hours!

Tweet thread here.

Mastodon thread here.

May 6 – 9:45pm

Alright, so first of all, I decided to set up a new video template in Screenflow to be able to quickly record little updates. That took..a bit of tinkering – about 30 minutes or so. 😅 So anyway, you can watch the video update or just read.

I mapped out 9 lessons/videos for the course:

  1. The anatomy of the block editing interface
  2. Guidelines for naming your block clearly
  3. Choosing an icon for your block
  4. Deciding on the type of block
  5. Planning out the block properties
  6. how to plan out the editing interface
  7. Designing a good setup and default state 
  8. Designing a good editing state
  9. Designing a good preview state
  10. How to plan out the editing interface with the planning template

I didn’t want to use an existing block because most of those are for clients, so I’m thinking of buying a design template from Creative Market so I can walk through a real design and pick out a component to block-ify from there to work from.

That’s where I’m at. Now..back to work.

May 7 – 12:27 am

Alright! I have two lessons recorded and edited. When recording the first lesson, I had…5 false starts, but then I got into it and was able to knock it out. I’m doing very light editing for now, but we’ll see how I feel when I’ve recorded them all. The goal is to keep it all under an hour. It’s past midnight now, so I’m going to go to bed, but I’m pleased with my progress.

  • Lesson 1 came out to 4 minutes 28 seconds
  • Lesson 2 came out to 4 minutes 58 seconds

So I’m about 22% done with production..sort of. Not bad.

I ended up buying a pack of themes from Creative Market, and I’m using one of the designs as the example. I’m going to assess my rate of progress in the morning after a couple more lesson recordings. If I have time, I’ll actually code out a block from that design and include the source code as part of a second tier of the course and maybe a tenth video walking through it a bit. Maybe. We’ll see.

May 7 – 8:16 am

I woke up at 7am, and by 7:30 I was at my desk with some coffee. The first order of business was writing a newsletter and let my subscribers (who haven’t heard from me in over 14 months…) know that I was building a course and doing this thing! Since the newsletter has been so entirely inactive, I don’t expect to have any effect on anything, but I want to start sending out newsletter again, so why not just start now?

Okay, the now it’s time to record the next lesson. 🙂

May 7 – 11:10am

Okay! Lesson 3 is recorded and about a quarter of Lesson 4 is done too! I’m getting into the meat and potatoes of the course now, which means I’m writing some code as well, because I want to be able to demo the things I’m talking about. So that means..there’s definitely going to be a second tier of the course, I don’t want to make it too much more than the first tier, but there will definitely be a price bump since it’s going to come with source files for the block stuff I demo.

The code I’m writing now will carry over and be used in the demo for the next few lessons as well, so although it’s taking a bit longer to record Lesson 4 right now, that’s because of some upfront work, and then the other lessons will go faster.

I also decided to use the Stacks setup from the new community theme that was just released! It’s such a great idea and the nice thing is, you can create slide decks in the manner that theme any theme that uses the Block Editor and supports the core Group block. I demo how I’m using it to make my work easier in the video update above if you want to check it out. 🙂

Alright. Back to work!

May 7 – 2:15pm

So.. I made a mistake in a block I created and had to redo an entire recording because of it, so that delayed me a little bit! BUT Lesson 4 is recorded and edited! And I have all the code I need in order to walk through Lesson 5, 6, 7, and 8, and I should be able to record those pretty rapidly here.

I’m really enjoying having the Stack in the Block Editor and using that as a live playground and visual aid in the lessons. 🙂

Short update, because I gotta go pump out more content a bit quicker since I got side tracked a little. 😅

May 7 – 5:08pm

I’m currently sitting in the car writing this while my spouse drives us over to my in-laws’ place. We have Sunday dinner with our parents every weekend. The great news is that I’ve got Lessons 5, 6, 7, and 8 recorded! 🎉 I still have to edit lesson 8, and I’ve a touch more editing left for Lesson 7 as well.

While I’m at my in-laws, I’ll finish editing, finalize the template I’ll be sharing, and then do a couple outstanding items I need to do for Monday morning. So I’ll be taking a pause at 6pm for a 3 hours to eat dinner with the family and do those other things.

So instead of finishing the challenge at 8pm, since I’m pausing for 3 hours, I’ll probably finish at 11pm or near there. Despite the 2-3 hiccups I had, I’m very pleased with how this challenge is going – I can’t remember the last time I made this much stuff in such a short amount of time, and it’s thrilling.

Right now the total course time is coming to about 40 minutes and I have one more lesson to record. I feel really happy with this length and the amount of stuff I’ve been able to cover in it. 🙂

Now, to finish editing the recorded lessons, and then have a little bit of family time. 🙂

As it stands right now, here’s the amount of time I’ve spent on this course, broken down into planning, doing these updates, and doing the actual recording/production work:

Planning3 hours 15 minutes
Production8 hours 30 minutes
Updates3 hours
Total Time14 hours 45 minutes

May 7 – 6:13pm

We had an early dinner with the family and now I’m doing some other work but also thinking constantly about this course. Outside of actually recording and producing the content, here are the other things that need to happen:

  • Figure out a name for the course
  • Create the sales page
  • Figure out a video hosting platform to use
  • Set up the course on a little WordPress website – I’ve used LearnDash a lot for clients, but for this, I’m going to go with the pro version of Sensei, because my course stuff isn’t complex, and it’s very fast to get up and running with minimal styling TLC needed (which I really appreciate in this time crunch)

I’ll reflect later on how long it takes to create..such a small amount of content. My spouse made fun of me 😂, he was like, “nearly 15 hours, and you have..less than an hour of content?!”. But seriously:

  • coming up with the content
  • creating the supporting materials
  • recording the content
  • and then editing it

I’ve certainly seen people work faster and create more. But I’m maybe not as fast and admittedly, I did have a couple coding hiccups where I accidentally went down the wrong path and then had to redo some work. And this is all without having done the hosting stuff. Thankfully, I started – in my breaks – working on the text for the sales page, so that’s kind of ready to go into WordPress soon-ish.

Naming the mini course

Naming not my forte. But nevertheless, the course needs a name! Here are some options I’ve been playing around with:

  • Thoughtful Block UI Design for WordPress
  • Block UI Design for WordPress
  • Block Design for WordPress
  • Better Block Interfaces for WordPress

I like the phase “better blocks”, I like the word “thoughtful”, and maybe it’d be cool to incorporate the “lunch n learn” idea into the title. I’m not sure yet. But I definitely need to make a decison.

May 7 – 9:10pm

Alright! I edited the podcast episode for viewSource that goes out tomorrow and got it all scheduled up, had a lovely dinner with the family and went for a walk, where we saw a deer and a moose and gorgeous skyscapes (that Calgary is famous for), and everything was sweet and spring-y right after the rain.

Now, I’m home, and it’s time to get back into the course. I paused a little after 5pm (although I did some updates at 6 above), so I have a few more hours to put into this course, and it’s pedal to the metal.

On Names

So far, there’s two votes for “Thoughtful Block Design for WordPress” and two votes for “Better Block Interfaces for WordPress”, and so I’m torn. At first, when Brian Richards suggested “Thoughtful Block Design for WordPress” over on Mastodon, I was going to be like, let’s just pick that. But then Christina voted for “Better Block Interfaces for WordPress”, and then my sister in law voted for that too, but then my spouse voted for the “Thoughtful” one, and now I’m at a loss again.

I’m asking a few friends what they think and then I’m just going to eenie meeni miney mo it if there’s no real decision.

But right now, I’m going to go finalize the template, record that lesson, and get the course production part wrapped up so I can get to the hosting/setup/sales stuff.

Let’s roll.

May 7 – 11:14pm

Alright. The last lesson is recorded! I took a small break to hang out with my spouse before he went to bed, and now after this update, I’ll get all the videos uploaded, the infrastructure set up and get this thing ready for sale. I decided on a name: Thoughtful Block UI for WordPress. A few more votes came in for the “thoughtful” version, and I am rolling with it. 🙂 Thanks to everyone who gave input on Mastodon, Twitter, and over text! I appreciate you all!

There’s definitely going to be two tiers for this course, because I have some fun code I can offer the source for in case you’re curious how I did things (especially because I did them fairly fast, so they aren’t perfect necessarily, but give you a good idea of how quickly you can whip up a fair decent interface if you think it through a little bit).

The whole course comes in at just under 50 minutes including the template walk through, so I’m pretty pleased with that. There are a couple points I wish I had gone deeper on, and I might do a bonus video (but still keeping it all under an hour) after this is launched, so I can offer that extra stuff I held back on in a couple of the videos because I was worried about length.

I’m thinking through the price points now, and I might go slightly higher than $15, now that I’ve done the course and thought about its value a bit. We’ll see. Anyway. It’s time to do infrastructure now!

May 8 – 2:50am

Well. I did want to do a final video update to celebrate the end of the challenge and launch of the course, but I’m honestly so exhausted that, that’s going to have to wait.

THE COURSE IS LIVE! I’m sitting alone at my desk, everyone is asleep, and I really need to go to bed, but WOW it feels good to have done this and gotten it out.

The landing page is super basic and maybe not even the most convincing thing. 😂 But I truly think the course came out really well, and I’m really excited to put this out. I have conversations about how to think about the block editing experience so much, and even then, I feel like I didn’t get to say everything I wanted to because I really wanted to come in under an hour. Which I did! The course is about 50 minutes long, and it’s set up with two tiers:

  • Tier 1: the full course and the planning template for $19
  • Tier 2: everything in Tier 1 plus the source code for all the examples I share in the course (about 3 full blocks, 1 partial block, and 1 custom block modification) for $29

After all is said is done, I’ve spent just under 17 hours in total on this course, it’s been an exhilarating ride. I’ll have more to say later this week. But for now, I’m going to celebrate by collapsing into bed. (I swear in the course recordings, you can progressively see me getting more and more tired, it’s a little funny).

(And of course, I believe in iterative improvement. It’s the first thing I’ve ever put up for purchase that isn’t a service. And I’ll tinker and improve and test, and get more thoughtful when I’m not racing to launch it in 24 hours or so. 🙂)

The really great thing is that I want to release some extra info, because I have a free extra 10 minutes I can use! So I’ll probably release that for free to any of the folks who buy early, and then eventually bump the prices up for new purchases in a few weeks when there’s more polish.

And of course, I’ll keep wondering if I made it too expensive and took a product that could have been a no-brainer purchase and made it something that people have to think about. Perhaps I should have stuck with my original instinct of keeping the price ultra low? I feel good about the $19 though. If I saw this and I was starting out with block development or wanting to get more thoughtful, I would instantly drop the $30 bucks, considering I charge thousands of dollars for a client project. BUT, I recognize not everyone thinks this way. Anyway, enough out loud thinking. BED.