• Theme.json inspires

    WordPress themes have been stuck. It wasn’t their fault they were being asked to do so much and often had to pretend they were plugins. The end result of this was seen in code weight, style stagnation and generally a lack of excitement around themes compared to the years gone past. I don’t say this to call anything out specifically, it was a situation of circumstance. It is a situation changing and one of the huge factors of that is theme.json which is bringing the first major theme process change to core in years.

    The power of changing process

    Theme json if you aren’t aware if this magical little file that can sit in your theme and send all kinds of amazing presets to the editor, using global styles for example things spark alive in the full site editor. This post though isn’t a ‘how to’ about theme.json, it’s about how the use and existance is a process change that not only brings us closer to the rest of front end development, but unburdens themes.

    A statement to make

    I am very aware that saying ‘first major theme process to core’ in years is quite a statement. Theme.json to me is that though. I don’t say this ignoring iterations and improvements, WordPress is a project flowing with the energy of those. However, themes were on life support stuck in a land when the rest of front end development was moving on. It wasn’t for some trying to change that, mostly when they did the time wasn’t right and as it didn’t come from core it was always a harder change.

    Block based template parts and templates are a companion to theme.json, to make a block based theme – that’s a lot of blocks. I am therefore, aware in just calling out theme.json that it might seem a little unexpected. Theme.json though seperates style from form. It allows thinking of the art direction, the true effect of the theme. This is a mental model shift. You aren’t patching at the CSS level, you are thinking holistically. Combine that with the other tools and you’ve got a powerful combination.

    The burden of themes

    For years, most themes had PHP, HTML and CSS. Then along came JS, with at the start a few jQuery scripts and overtime some rolling of the theme author’s own. Many use Sass.. there’s a stack to theme creation that grew more and more over time. With each thing added the burden got more, the hurdle to learning more for those coming in.

    We not only were creating more issues for ourselves in creating themes, as we navigated around more complex interfaces, but we were putting walls in the way of the knowledge. I remember like so many viewing the code of Kubrick, it was how I learnt themes. We had reached a point where honestly, I am not sure how you’d learn themes.

    Not just adding but removing

    I am aware as I type making it sound like this is all a simplification magic wand, that I am using language that sounds technical. Even the notion of a JSON is ‘another thing’. However, what theme.json is doing isn’t just adding another thing, it’s allowing to remove a lot of other things to. This is one of the key points.

    There is also a readability to the way theme.json is created, kudos to those that worked on it. It flows, it makes sense and because it’s core there is an incredible documentation effort underway.

    Putting themes back in the hands of designers

    I am incredibly excited to not just have those designers that code be able to make themes. Whilst we are great, the designs that haven’t been able to be made into themes make me so sad. The designs that sit waiting for a developer, or that a designer couldn’t turn to their vision because the tools weren’t there.

    Theme.json, it’s friends block templates and parts, start us on the road to that by being part of the process of full site editing. It’s not quite there, but eventually no-code themes will be possible and that is going to see I hope those designers free to create their theme dreams.

    For those of us that do dabble in code, these new processes take the hard work out of themes, they free us to be creative. To truly explore and that can only lead to incredibly exciting things.

    The start of something

    I see theme.json as the start of things in many ways. There are going to be so many iterations and exciting tools along the way. Themes can get back to being just themes and that can only be good for WordPress because that’s when they can be beautiful, inspirational and creative.

  • Lithosphere: a theme seed

    I took some time over the holidays to plant a seed and create a new theme for this and a few sites. I had a few objectives this time around that I wanted to achieve and the biggest of these was to create a foundation I could experiment from over the coming year.

    • Keep it simple but with readability.
    • Where possible have everything from the block editor, including navigation.
    • A minimal base to build upon.
    • Share my journey (starting with this post).

    I began with a simple sketch, starting to think about what I would like this theme to be.

    Forming Lithosphere

    Commons Wikimedia image

    The lithosphere is the solid, outer part of the Earth. The lithosphere includes the brittle upper portion of the mantle and the crust, the outermost layers of Earth’s structure. This theme is a foundation which will be built on by the editor. With the functionality below and styling above.

    I began by using the Gutenberg starter theme as my base. It’s a terrific boost to any theme project. I didn’t have to reinvent any wheels and was already off to a great start.

    I picked ‘Libre Franklin’ as the font; it balanced readability with the larger, crisp font sizes I wanted. I decided to make the typography scale bigger than have in the past on themes to improve readability. Colours, again I went for blue with a brighter variation on hover.

    The most prominent styling element was a top strip which had the title. I choose to use emojis for titles. I was pretty happy to discover you could do that in the Customizer. I then added a little background to it to create a logo.

    Navigating

    I didn’t want to have traditional navigation. Previously, I was using a reusable block made from a list and styling for navigation. Now with the new navigation block, I could use that to create my own.

    I wanted to link my sites through this navigation, having each going to a type of content. By doing this, it was a way for me to bring in some different sites I use and over have them separate to titles, link to what they are specifically about. I also linked in my reading list and speaking page. As a final point, I tied in a contact email using a plane emoji.

    One cool thing I found was the ability to copy and paste blocks even across sites. I have rolled this theme out onto various sites to tie in with the navigation and each one I could add the navigation and social links block by copying – so cool!

    Layout using blocks

    For the front page, I wanted to create a summary layout. The latest posts block was just perfect for this. I added it and set to a grid layout. You can adjust the excerpt length, so I did that. It’s a great way to create a starting page to content.

    I also added in a search block to the top of the page and a quote block to frame the latest posts. Building layout using the blocks gives me the flexibility to change what I want effortlessly.

    Block styles

    Along the way, I brought in some styles to particular blocks. For example, the search block got a wide style using the following code:

    .wp-block-search{
  background: var(--border-color);
  padding: 20px;
}

.wp-block-search .wp-block-search__input{
  background: var(--bg-color);
  max-width: 780px;
}

    I also styled the ‘read more’ link:

    ul.wp-block-latest-posts .wp-block-latest-posts__post-excerpt a{
  font-size: 80%;
  font-weight: 400;
  color: #888;
}

    I also brought in some adjustments for the navigation block, and social links as the default Gutenberg starter theme has some margins I didn’t want for those list styles.

    Adding dark mode switch

    The foundation of my theme was in place, but I wanted to add a few extras. I have only got around to one of those so far, and that’s adding dark mode. I remember having one on my blog that would change the season and having lots of others – they were such a part of sites for a while. I wanted to simplify back to a light and dark mode as for me often dark mode is easier to read, but it’s personal so having the option makes sense.

    My searching for a solution took me down the path of using CSS variables. I ended up finding a tutorial by Ananya Neogi ‘Create A Dark/Light Mode Switch with CSS Variables’. After some adjusting to suit my styling, I ended up with the switch that is here. It’s an exciting solution using:

    [data-theme=“dark”]

    Here are the variables I settled on for now:

    :root {
  --primary-color: #046b99;
  --secondary-color: #00cfff;
  --font-color: #191e23;
  --bg-color: #fff;
  --heading-color: #191e23;
  --border-color: #ddd;
}

[data-theme="dark"] {
  --primary-color: #046b99;
  --secondary-color: #00cfff;
  --font-color: #eee;
  --bg-color: #161616;
  --heading-color: #aaa;
  --border-color: #444;
}

    Always something to do

    I on purpose am ok with the theme being pretty rough and ready at this point. I want to see it as a work in progress over the coming months. As more features get added to the block editor, I want a space where I can explore them. I’ll try and share those as I do.

    Here is a list of a few things I want to do coming up:

    • Create some editor layout templates for the portfolio, reading list, speaking and front page.
    • Improve dark mode styling for blocks and form elements.
    • Iterate on smaller device styles.
    • Find a way to change quotes. Maybe a quotation block could be my next block to make.
    • Editor styles to reflect front: some don’t now so want to tie back.
    • Add a day/night option to the header. Possibly, also add weather to it.

    I also have a fair bit of styling to polish for things like comments and forms. As a bonus to doing this, I also got a few bugs and ideas for enhancements.

    If you’d like to see the work so far, it’s all up on GitHub, and I’ll be updating there.

    Block boost

    There is no doubt, creating a theme and the layouts were faster because I use blocks. I do recognise the considerable push forward that the Gutenberg starter theme gave me. It’s incredible how you can create almost a full layout using just blocks, a taste of amazing things to come with site-building this year.

    I am looking forward to from this base theme exploring as the months unfold.