Designing for the Site Editor
Flashback to September 2022. Full Site Editing (FSE), introduced in 2020, extended the visual design capabilities of the WordPress block editor allowing anyone, regardless of their coding knowledge, to build templates and template parts directly in the WordPress editor. Full Site Editing elicited many Feelings(™) from designers and developers using WordPress who had established workflows and potentially complex development needs which the site editor was still a bit clunky with. The question of “who is this for?” was (and is) an ongoing discussion.
A freelance, self-taught web designer, I was mainly using the blank Underscores theme as my base, and feeling like maybe I had the hang of this web design thing. Googling how to do something in PHP was/is still a major part of my development process so the idea of being able to visually design themes was quite attractive. The web, after all, is fundamentally about the democratization of publishing, so, all signs pointed to “Yay!”.
But… the site editor (formerly known as Full Site Editing) is a completely new thing. Completely new things are hard.
Community and Collaboration
When Jonathan Bossenger posted a request for a block theme design on Twitter, I volunteered. Jonathan is a Developer Educator for WordPress and I had recently begun following his training modules on Learn WordPress. Learning from a legitimate “real” developer*, as opposed to fumbling through Stack Overflow posts, promised to be much more illuminating.
* As a web designer at the very front of the front-end, there’s a lot of things that I can understand conceptually but I just don’t have the skills to create from scratch.
Note to Designers
It’s especially informative for ANY designer to understand how a developer might read your designs and interpret them. If you are new-er to designing for the web, or even a seasoned pro, it’s super-beneficial to get involved in the building and thinking process rather than just delivering a design file and calling it a day.
Make Web Design Fun!
Jonathan graciously accepted my offer to design a theme for the block editor. Uh oh – now I have to design something that can withstand the critical gaze of #DesignTwitter!
Mostly, I wanted web design to be fun again. My approach was to do things that my standard client work would not be receptive to and have some fun with design challenges that would be more tricky for me to code.
It starts with a name…
I chose “Sendig” as my theme name because it sounded kind of cool and it’s also an anagram of the word “design”.
Aesthetically, I really enjoy Brutalist architecture and design. I like showing the structure of things as well as bringing back some vintage web conventions such as a visited link color. I spent some time reviewing the structure of the Figma* file for WordPress Twenty-Twenty Three theme** and patterened my Sketch file after that.
You can view and download the Sketch file for Sendig here: https://www.sketch.com/s/ef210a7a-a623-4353-be26-bf45d37e2d29
* Maybe I’ll learn Figma someday. For now, Sketch or Balsamiq are easier for me.
** WordPress has a Figma design library and many other resources through Make WordPress Design.
Can a free theme also be a teaching opportunity?
I was thinking, instead of Lorem Ipsum text, what if we included some hints about accessible design considerations within the text of the theme? Maybe a little learning mixed into the theme could help to keep accessibility in mind when creating a new website?
So, I probably have to change this to something from Web AIM or a more general source, but I chose to use some quotes from Steve Krug, author of the classic text “Don’t Make Me Think,” and a quote from Marcy Sutton’s recent accessibility training course, Testing Accessibility.
Headings in the design also describe their purpose; introducing a new section or topic and helping to create good page structure.
Design is Problem Solving
I wanted to do some design-y things that tend to be less applicable to my commercial work – such as aligning main content to the left rather than centering it by default or using “not typically considered beautiful” colors like mustard yellow (aka. Yellow Ochre for the painters). And, I wanted to do some fun CSS things like shapes, overlay/opacity, transform, and layering of elements in space.
I’ve created a few patterns that reference “classic” graphic design motifs like scattered images around a block of text. These patterns would be hard for me to create in the WordPress site editor (without relying on custom CSS and code) so I’m keen to see how they develop through this process.
Developing the Sendig Theme in Public: The First Twitch Session
After several months, the first Twitch development session took place on this auspicious day, May 9, 2023. Today was mostly set up and although Jonathan called it the “boring” part, it’s always informative to me to learn how other developers structure their process, what tools they use, and how they approach a project.
In that sense, I find developing to be closely related to painting. In practice, all painting is essentially abstract. When observing a structure or a landscape, what we see is broken down into colors, shapes, and light (or, components) as we understand how all the parts can fit together to compose a whole. In painting, an expression of feeling supersedes exactitude. Which, for better or worse, also tends to be my design approach (apologies in advance).
Live streaming this process highlights the thinking that underpins any project. There is no such thing as a perfect design to dev handoff (at least, not in my experience). Communication, collaboration, and ongoing inquiry are key. And, love it or hate it, we are all learning this new thing together, which is pretty cool!
I’m looking forward to continuing to follow this project on Twitch on Tuesdays and I hope you will to.
Project Links:
- Twitch: https://www.twitch.tv/jonathanbossenger
- GitHub Project: https://github.com/jonathanbossenger/sendig
- Twitter: https://twitter.com/jon_bossenger
- Sketch file for Sendig: https://www.sketch.com/s/ef210a7a-a623-4353-be26-bf45d37e2d29
A few resources to learn about block themes:
- I recommend Daisy Olsen’s Twitch stream which you can see archived on YouTube. Her block theme experiments are a great learning experience.
- Full Site Editing training site by Carolina Nymark, https://fullsiteediting.com/
- Bill Erickson shares a lot of useful info, snippets, and resources.
- Just launched by Aurooba Ahmed, Thoughtful Block UI. The podcast, viewSource, with Aurooba Ahmed and Brian Coords is more advanced development and also highly recommended (most of it is beyond me but I still learn a thing or two).
- Build Mode Live, an ongoing and open Zoom conversation each Friday morning (10am CST) hosted by Sam Munoz and Brian Gardner from WPEngine about the future of WordPress and the site editor.
- Gutenberg Times, “All things WordPress Block Editor and Gutenberg Plugin”!
- WP Café is a podcast that’s a bit more about the business aspects around theme development but also documents their transition into learning and using the block editor for client work.
- MasterWP, not specific to block theming but a great learning resource: https://masterwp.com/
About Me
I learned web development when dynamic HTML and tables featuring sliced images a la Photoshop were the primary means of designing for the web. Creating websites has always been an extension of my fine art (painting) background and my interest in community and communicating with people. I’ve learned on the job, building sites for friends at first, and over the years expanding my skills through workshops, MeetUps, podcasts, and generally lurking around Twitter following the experts. I worked briefly for an agency in Chicago (which was both good and bad), but after a few years decided to return to my solo-preneur business as Always Open Design.