Creating a theme

I am still like many discovering how I create themes using site editing, but I wanted to share my current process and some observations I’ve made along the way. The image for this post is a picture of yarn because at times I’ve felt like I am untangling yarn as I piece together my process in this. That’s a natural part of learning and finding those threads is also fun as the reward of discovery can be shared.

My current workflow

My process has ended up having a few stages to it; this reflected the creative process of creating a theme:

• Figma: I gather inspiration, colours and typography. I may have created a sketch elsewhere or do there roughly of a concept.
• Theme files: From the concept, I have a recipe list of things to add to my styling, from hierarchy, colours to fonts. At this point, I am typically only setting up the theme name, basics and also foundational styling values.
• Site editor: Create the theme, taking the foundations and applying them to each page template.

After I have the templates formed, I typically export the templates and parts, put them in the theme files, and then push them to Github to keep a record outside the site.

Observations on theme.json

Theme.json is the foundation of my process; it’s where I set the scene of my theme. Here are some notes from using that as my foundation; I share these known issues exist to resolve things and also that sometimes it was my workflow being the issue:

• From time to time, variables have got stuck. For example, content width when using variables can get blocked on a value or not even work at times. I am still working out how and when I use variables.
• Your file can rapidly get long, so having some supporting documentation with it might help to come back to later.
• Use names that make sense for colours. Right now, there are no conventions around this (although conversations around this excite me), but coming back to this, you will thank yourself if you give terms that are easy to make sense.

{
    "slug": "text-grey",
    "color": "#2d2d2b",
    "name": "Text Grey"
},
{
    "slug": "dark-grey",
    "color": "#939599",
    "name": "Dark Grey"
},

Observations on creating in the editor

The most significant change beyond the file structure for me is creating in the editor. Although it is a little like going back to Dreamweaver, I guess, or other ‘create in place tools’. I have some notes from that experience:

• What you see isn’t always what you get. Gradients are ‘unexpected’ between the front and back. A lot of what you see when editing, particularly around spacing, won’t look the same on the show. Often it looks better, which is a pleasant surprise, but things like spacing aren’t always accurate.
• Be at one with group blocks. Whilst it is something I want to reduce the use of, the number of group blocks I have used is significant in many templates. 
• Creating in the editor forces you to think content first. This way of thinking is a huge benefit. I am laying out not with fake content; I am from the start interacting with reality.
• The spacer block is a good fix for things, but I wonder about the overuse and yearn for those incoming better controls, just like the group block.
• Query block is powerful but delicate to use currently; when you remove a block from within it, you can easily break the entire block. It will get better, but until then, be a little careful where you click.
• The side list navigation is your friend as you get quickly into deep nesting in these templates, so you need a clear, simple way to find things.
• Featured image block can be placed in an area outside query loop and pick up the last content if in an archive or the post feature image if in single.

Styling templates

Overall, the process is a matter of getting used to it. What is being created by many is right now minimal because of that process. There is also the limit of the editor itself, and unless you want to mix in the prior theme styling, you will find lighter styling options. The tools are growing, just like I am learning rapidly, so complexity increases in what I create.

Being able to have templates just for content, created on the page itself, is incredibly powerful. For example, this post itself has a template that changes the colouring. I plan on writing a tutorial on this because I think the idea of single art directed templates is exciting.

Wishlist

Here is where I get a little hopeful for things to come. I will also be going along to Github and see if there is an existing conversation; if not, perhaps start one. This list focuses on the editor’s tools because ‘how’ creation happens should be explored collectively; everyone will likely have varying methods.

• Adaptive points: more granular control around this, although I don’t think it needs to be too much and I know this is planned.
• Template styles: whilst global styles are great; I find myself wanting to set styles for the whole template itself- not easy as you’d think without a group block around it all.
• Consideration over what should be exposed as global options: as more get added, extended, there is an impact on usability. I think it is going to be an ongoing discussion. I want more as a creator but as a user a more straightforward interface and less confusion.
• A way to reduce group or spacer block use.
• A visual indicator that is a little stronger when in global styles. I have reset my entire styling for the theme more than once, thinking I was just in a template.
• Ability lock templates would be great, perhaps relating to my mishaps with the above overwriting of styles.

Road to go

There is a road to travel with full site editing. I am also aware that many of the processes and ways I am doing things right now will change. Where there are boundaries, those will also move as the features improve. That’s the point of this early stage exploring and also part of the joy. We are all getting to discover the new features, tools and give feedback to make them better. It’s an exciting time for themes.