I was excited to give a WordPress presentation—albeit short and informal—for the first time in a while at a meetup last week. I’ve really enjoyed reconnecting with the local developers meetup since the pandemic started when attending became much easier over Zoom.

The presentation was an abbreviated rough first draft of a talk I submitted to WordCamp US (that I learned wasn’t selected a couple days before the meetup 😭) and the summation of some concepts I’ve had rattling around in my head for the last three years as I’ve learned to customize and support clients with the WordPress block editor. I hope to find some future venues to improve and expand on this talk to share it with a wider audience. I also plan to work up a post soon about my philosophy on implementing the block editor in general that will build on these ideas.

As anyone who has given presentations for a while will tell you, there’s no better way than presenting to others to force yourself to clarify, simplify, and document your knowledge.

Summary

I approach styling sites that use the WordPress Block Editor by providing editors with a consistent “design system” that uses “components” of content. Each component has a unique, content- and context-appropriate design that reinforce the brand and strengthens the website’s ability to communicate with visitors.

Blocks in the WordPress Block Editor map quite nicely to the idea of components (in the editor’s React code, this is literally true), and this presentation goes over three ways editors can insert and/or customize blocks in the editor.

• Styles are the simplest, allowing editors to change how a block looks by choosing one style from a number of preset alternatives.
• Variations work similarly to styles but allow for additional styles, customization of block settings, and nested content.
• Patterns are composed combinations of blocks with demo content that an editor can easily insert and customize.

I find all three of these methods useful and important as a means to provide editors with meaningful, easy-to-use design tools that avoid endless tweaking and the creation of inconsistent and off-brand designs. Once you are comfortable with each, you’ll find that they overlap in notable ways but are most appropriate for different use cases.

Slides & Comparison Table

There’s no recording of the presentation, but I’ve updated the slides to include example screenshots, and I think it mostly stands up on its own. I also link to this comparison table spreadsheet that I used to first distill and summarize my observations.

One especially fun thing about this presentation: I got to include tons of examples from a few of the sites I’m proud to have built like Communities In Schools of Washington, WSCADV, Communities Rise, EarthGen, and UTOPIA. As has always been the case, the lessons learned and new features developed on each site, always turn into long-term improvements for every following site.