I recently attended and spoke at my first WordCamp. This article details the experience and why I built my presentation entirely out of blocks using the WordPress Editor.

My Road to WordCamp US

WordPress plugin development was my hobby for nearly a decade. It was something I did on the side throughout my career in the hospitality industry.

After many months of the pandemic, I decided to “retire” from resort marketing in 2021 and pursue my passion—WordPress. That decision ultimately led to developer advocacy at WP Engine. My current role focuses on WordPress contribution and education with an emphasis on block development, block themes, and Full Site Editing.

WordCamp US 2022 was announced at the beginning of the year. It would be the first in-person US event in over two years. I couldn’t wait to attend and submitted three talks with the hopes of presenting:

1. How to Build a Custom Block (Workshop)
2. Taking the “Full” out of Full Site Editing (Standard Talk)
3. Let’s Build a Custom Block In 15 Minutes (Lightning Talk)

Option three was chosen.

Why Custom Blocks?

WordPress has been moving towards a block-based architecture for many years. I remember trying to build my first block in 2019 with few JavaScript skills and no idea what a “build process” was. It took me weeks of arduous self-education and scouring the internet for code snippets.

A lot has changed in the last two years. With the right tools and resources, I firmly believe that every WordPress developer can quickly build a simple custom block if desired. My talk “Let’s Build a Custom Block In 15 Minutes” hoped to demonstrate that through the use of the create-block tool.

I had no idea if building a block in 15 minutes was even possible. But the title was catchy and the presentation was bound to be entertaining whether I succeeded or failed.

So with the talk accepted and the deadline looming, it was time to create my slides.

Why the Block Editor?

I spend at least 4 hours in the WordPress Editor during a typical workday.

As I began designing my presentation in Keynote, the Mac version of PowerPoint, I quickly became frustrated. What took me minutes to accomplish could be created using blocks in just a few seconds.

The presentation would also be a mixture of slides and live coding demo. I would need a local WordPress site to showcase the block and a code editor to write the code. Juggling three different applications with only 15 minutes on the clock would be a nightmare.

This was the lightbulb moment. Why not just use the Editor?

Eliminating Keynote would simplify the mechanics of the talk plus it would be a fascinating experiment to see how far you can take blocks and the Editor. A presentation about building custom blocks that itself was created entirely out of blocks?

It was all too perfect—time to get building.

How I Built It

Constructing a slideshow in the Editor is relatively straightforward. You could take many approaches, but this is what I came up with.

General aesthetics are handled by my experimental block theme, which is the same theme powering this site. While I used a block theme, any theme with a blank page template should work. You don’t want the theme’s header and footer to show up in your presentation.

I am also using the Gutenberg plugin to take full advantage of functionality not yet in WordPress core, notably spacing steps and fluid typography. If you are reading this article after WordPress 6.1 is released, Gutenberg is no longer required.

After that, it just takes a lot of blocks. 749 to be exact.

Each presentation slide is a Cover block with the “Toggle full height” setting applied. Inside each slide is a Stack block, which includes 3 Group blocks. The general structure looks like this:

The Cover and Stack blocks have a minor amount of additional CSS applied. These styles are add using the classes, .is-style-slide and is-style-full-height-stack respectively.

Within each Stack, the first Group block contains the slide header while the last Group includes the footer. Slide content is placed in the middle Group block and differs from slide to slide. Below is the complete slide from the previous screenshot which uses a two-column layout.

% npx @wordpress/create-block --variant dynamic hello-dolly-block
% cd hello-dolly-block
% npm start

Slide 8 from “Let’s Build a Custom Block in 15 Minutes”

I created a Gist of the block markup for the complete presentation. While it’s nearly 2,300 lines long, the entire slideshow was built visually in the Editor. Once the slide design was finalized, it was just a matter of duplication and updating slide content.

Slide progression is handled using anchor links placed in the header and footer of each slide. Anchor links, while simplistic, work well enough and I wanted to stick as closely as possible to core WordPress. They also show up in the List View making it easy to navigate between slides in the Editor.

Finally, I used a few third-party plugins to polish up the presentation.

Every SVG icon is added using the Icon Block. The Block Visibility plugin conditionally displays certain slide components. For example, I wanted to hide slide headers and footers on mobile devices. The plugin was also used to schedule the presentation so it would remain inaccessible until I began speaking at WordCamp US. Here’s a look at the configuration for the main slide.

These additional tools are definitely not required, which means the entire slideshow could be built with core WordPress as soon as version 6.1 is released.

Closing Thoughts

So, would I give another presentation using the Editor?

Absolutely, especially if I was also doing a live coding demo. However, using a purpose build application like Keynote, Powerpoint, or Google Slides would be much easier if I just needed to present slides.

If you’re going to try building a slideshow in the Editor yourself, it is important to use the fewest number of blocks possible. Optimize your slide design to ensure every block is critical to achieving the desired aesthetic. The more blocks you add, the slower the Editor will become.

While the Editor performed admirably with 700+ blocks in my testing, some minor lag and extended loading times did occur. I am using an M1-powered Mac, so the result may vary depending on your device.

My goal in creating a block-based presentation was equal parts utility, experimentation, and novelty. The talk itself was designed to encourage custom block development. Hopefully, the way the slideshow was built encourages you to explore the limits of WordPress Editor.

In case you missed it, a recording of Let’s Build a Custom Block in 15 Minutes is available on YouTube, and you can preview the slides here.

Got questions or comments about custom block development, building experiments in the Editor, or WordPress in general? Let me know in the comments or reach out on Twitter.

Featured Image Credit: Evan Mullins