Gutenberg inspired redesign

I set myself a little holiday project this year, to consolidate and create a theme to use across a few of my sites. With this move I merged my two writing blogs into one and began a long needed update to my portfolio. I wanted to do this using Gutenberg and the Gutenberg theme as a base. The Gutenberg theme is based on _s, open source and a community project, so a great starting point.

Gutenberg?

Gutenberg for those who don't know is the new publishing experience for WordPress. It's a block based approach to creating content that focuses on an easier experience for every user.

One of the big drives for me wasn't just that I am working on the project, focusing on the editor – although testing is always a strong motivation of mine. I was using Gutenberg already on this blog, I wanted to take it further. How much could be done just in Gutenberg with a simple theme style guide? How reduced could the theme go? 

A bonus reason in doing this project, was that I could add to the Gutenberg theme. It's worth saying that Gutenberg doesn't need a specific theme to work. The Gutenberg theme is designed to showcase what a theme could be with Gutenberg. It's an experiment into how close can both the front and back look and has the styling for blocks rolled in.

Boundaries

I wanted from the start to strip right back everything and then have a solid base to grow from. I knew I wanted a minimal theme and that the footprint should be as light as possible. I also want this coming year to learn more about performance optimising on the front end, so this is a good starting point. Where possible, as much styling and functionality was to come from Gutenberg, without adding in the theme. As far as it could be, this would be a pure CSS design.

I set myself some fairly strict boundaries. Firstly, I wanted to make sure this was released and live on the sites by the 29th December, this post was the final step. I wanted to use just one feature colour, that I haven't before so picked the Pantone 2018 color of the year, Ultraviolet. I also wanted to have an off-white background to make it easier to read longer posts. Typography wise, I restricted myself to one font, in this case Roboto.

Minimal Gutenberg

One of the big things I wanted to do was make as few changes as possible to the base of Gutenberg theme, to really make this as much just CSS as possible. This was fairly easy to do as the theme itself has styling for most blocks and as part of this exercise I got to commit some pull requests that added some additional styling.

I began sketching and this was what I came up with as a first version:

The following were the changes aside from colors and typorgaphy, that I made to the theme:

  • Social icon SVG menu: A good potential future block, but not one that exists today.
  • Removed menu and reduced header: I removed pretty much all the header and menu in the Gutenberg theme. I wanted this to come within the content so used a reusable block for this. Once Gutenberg has a menu block this can be changed to that, probably coming in the Customization focus.
  • Reduced footer: Again I wanted to use the social menu in the footer and remove as much there from the theme. In the Customization focus things like reusable layout blocks may become a reality, so this steps towards that. 
  • Animation for link and text loading on page: These animations are subtle but they load gradually content. Gutenberg allows me to add a style to each block and using this I can gradually fade in a page's content.
  • Distilled a lot of post meta: I only wanted to show the date for now.

What is up now will change over time and is very much a first step. I plan to iterate as I add content and Gutenberg nears release in WordPress 5.0. I now have a base to build up from and a great starting point. One of my 2018 goals is going to be to blog more, so it's a great start to that goal.

The result

Overall, it was a pretty smooth experience creating this theme and putting Gutenberg at the heart. I do know Gutenberg, so therefore the headstart was something I had. I also am ok with any rough edges at this point, there's a lot of experimenting here and I have that luxury with it being my own sites. This is very much a work in progress but that's a good thing as I can now take time iterating.

On the testing side, I have several issues I can report and some enhancements to suggest. Doing this reminded me how important using the products you are making is. When you are actually working with what you are creating, there are insights to be gained that when busy designing the product, you just don't get.

For those of you that want to explore it, the theme can be found here with all my styling changes. The vanilla Gutenberg theme can be found here, and is a better starting point, pull requests and issues welcome.

9 thoughts on “Gutenberg inspired redesign

  1. Thank you for the experiment. Does the theme support simple content features like “more” & “nextpage” within a post, selection of page templates, front end search (without unexpected results)?

    1. @gutenb15635 the Gutenberg theme is a basic starting point, not an entire framework, so it’s up to you to add page templates if you want. Gutenberg itself has yet to have page templates, but that will come for release.

      I can totally see a block being made in the future out of search, but I’m intrigued when you say ‘unexpected results’. What do you mean?

  2. Nice theme.

    I have 1 question: when Gutenberg has a menu block, or social icon block, do we have to add them on all pages manually? Or will it be integrated in the Customizer so users can add them only once?

    1. Good question Anh, right now there are some issues for making menu and social icon blocks. If that happens you’d add to each post/page. However, in the future there may be an option to globally set, that would all be decided in the Customization focus.

Leave a Reply

%d bloggers like this: