Gutenberg design basics

Have you ever wondered what something is called within Gutenberg? This guide is meant to help by giving the names and the expected behaviour of some of the basic design elements. If you want to build blocks and extend Gutenberg, knowing what to use or not is important. This is meant as a starting point, not a full description of all design elements.

Toolbars:

There are two toolbars:

  • The Editor toolbar: This controls document tools like undo and information. Also within this toolbar are preview, publishing and saved state.
  • The Block toolbar: This controls block specific behaviour, for example in a paragraph block bold/italic and adding a link. As a guide, place common settings that a user would want for every version of that block in the block toolbar.

Settings:

These are also referred to as 'advanced settings' when linked from the block toolbar.

There are two settings:

  • Document: This gives you global settings for the entire document like visibility and reviewing. Think of this like your settings panel for your content.
  • Format: This is per block and changes depending on the block and if it even has settings. These differ from the toolbar as are secondary block settings, for example adding a CSS class (in most blocks) and doing styling that isn’t as common. 

More menus:

These come in 2 locations:

  • Document: These contain document settings such as switching display modes, position of toolbar. Anything that is not specific to a block or the document would go here, for example display modes or something like a spell check.
  • Block: When beside the block there are commonalities found in all blocks:
    • Hide Advanced Settings (if visible) or Show (if hidden)
    • Edit as HTML
    • Remove
    • Convert to Reusable Block
    • Convert to another Block and a list of those blocks.

As a guide you’d not be adding to these menus in a custom block. You’d ideally use something like the advanced settings here.

Add:

It's worth noting that insert is changing to add potentially. There are multiple ways to add a block in Gutenberg to content:

  • Toolbar (although this may be removed)
  • Above a block: a ‘+’ appears on hover
  • Below the block: a ‘+’ shows all the time to interact with

Library:

The library appears when you click to add and then you see all blocks available. You can also search for the block by name. Blocks are in sections both through tabs and in within each section there are categories.

Recent blocks

Recent blocks also shows all the blocks a user has been using frequently.

Document outline:

You can view information about a block by clicking ‘i’. This contains helpful document information like number or words written.

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.

The importance of triage practice

Every designer at Automattic is writing a monthly design post, this month my post was about triage practice. For me the process is an integral part of being a designer. Triage for me is a constant part of my journey within Automattic and in the wider WordPress community. It continues to be really important to me as a designer, it keeps my feedback and testing muscles healthy.

Read the entire post here.

Back to Qwerty

A few months ago I began a journey to learn Colemak. Yesterday I switched back to Qwerty. There were a number of reasons I stepped off my adventure into Colemak, but perhaps its better to start at the why I began that journey.

The luxury of trying

In my job I have the luxury of being able to experiment with what works for me. I had toyed with the idea of trying a different keyboard layout as a lot of colleagues had. They were split between Colemak and Dvorak.

The tipping point

There were a few factors that made me make the change

  • New MacBook key sounds: the keys are super loud, similar to a mouse in boots tap dancing loud, when I get a good conversational pace going.
  • Wrist pain: over the years I haven't been great to my wrists with typing strain and they were reminding me of this factor.
  • Wanting to reduce my typing speed: a maybe unexpected motivation was to add more thought to my typing by reducing the speed.

It begins

I began my journey into Colemak possibly naively by going 100% in with doing it all the time. I did however use a cover. There was a problem with this though quite early on, the cover began warping and it kept leaving marks on my screen – not great.

I moved onto using stickers and this may have been where one of my downfalls began. The only stickers I could find meant you saw 2 letters – the ones on the keys and the stickers. This got even worse at night because the keys highlighted the Qwerty ones. I was rapidly finding things more and more of a struggle

The end coming

I found my spelling mistakes went through the roof. I have a lot of spelling issues as it is and my comprehension can at times be creative. However, it was compounded by trying to learn Colemak, to the point not a sentence would go by without issues. Just writing this in Qwerty already I am back to my usual pace of mistakes.

A different voice

One thing I did not expect to discover was a change in my writing voice. In the past my use of punctuation was somewhat lazy. It has on more than one occasion been suggested I should purchase a box of commas. As I was writing in Colemak this strange thing happened, I found commas.

Beyond my discovery of commas, the voice was slightly different. This was an unnerving effect. Not one I was sure I wanted. I did not feel it was a positive change either. In some respects I felt it lacked personality, it lacked emotion. Because I was having a lot of issues with typing the words, I became minimal to a point that wasn't always good. It also tested my patience, although that was a nice thing to test at times, at others it could have created a bad response from me.

Mental model comfort

I never have learnt to touch type, I have this kind of weird half memory, half some fingers typing method. Its clumsy and inelegant to view, but it sure gets the job done.

I find touch typing very hard and the lessons to do it close torture. They make me panic, which has this awesome side effect of my Dyslexia going into overdrive. As I switched to Colemak, I began typing lessons that seemed like old scary ghosts back to haunt me.

Lessons learnt

I did try for several months but it came to a point where the benefits were not out weighing the gains. I had less wrist pain, yet the mistakes and brain hurdles I was causing myself were not worth the change. Even the keyboard sound was loud once I took the cover off and the covers don't work yet well with the new MacBooks.

Reverting doesn't mean other issues have gone away. I suspect my wrist pain will surface soon enough. Yet, I will combat this in other ways such as specific exercises and actually being better at breaks. I may have changed my keyboard layout but I did not get better at taking breaks. A keyboard layout isn't a magic cure all.

What I have learnt is this:

  • Exercising my wrists and taking breaks is more important than switching a keyboard layout.
  • The ghosts of typing lessons need to be conquered. I plan on finally learning to properly touch type.
  • Experiments don't have to succeed and I am lucky to be able to do them where I work.
  • I have more respect for those with slower typing speeds, for whatever reason. I want to try and keep the pace more considered and hold onto that respect.
  • Commas are great, I should use them more.

Selling to the herd

One of the things about humans is we are whether we like it or not a herd animal. We have an instinct to move as a group and our primitive brain responds just like a herding animal. When creating interaction paths even in digital purchasing, you can use this aspect of human nature. Supermarkets are a shining example of how you can sell to the herd.

Human herd

Humans display herding behaviour in a number of ways. Whilst I’m not going to cover it too much in this post, herding behaviour is a really interesting thing to look into. Crowd psychology is something along with the Information Cascade, I’d really suggest as interesting reading. Supermarkets are masters of getting us to buy things. They do this in a vast number of subtle and less subtle ways – some good and some questionable. From the music used to the size of the basket and position of the goods. Psychological tricks and guides are at play in all areas of the supermarket.

One exit

The most obvious one is the path that supermarkets take you on. There literally is one exit. This is also clearly marked and you without thinking are guided through to it. The key here is without thinking. Each aisle is placed with thought but requires you as a human to not think about it. The supermarket equivalent of a and b testing is moving an aisle around. The aisles are clearly marked, there is no guessing. Big graphics guide you through if you look up, product types guide you if you just follow the shelves. The journey they are taking you on is carefully planned. Think of how a farmer guides their herd into milking or sheep into a pen using a sheep dog. This is what supermarkets are doing to us.

Positioning and highlighting

Where a product is displayed not only in aisle order but in shelve order is also key to purchase. A simple example would be placing more expensive things at eye level. Same goes with the ‘gut purchase’ shelves put at the end of aisles that highlight special offers. The way the shelf and aisle is designed too is important. Think about lighting for example shining down on specific things or designed to make it’s aisle’s contents more appealing. A good example of this is the fruit and vegetable section. This is often very different to the other areas of the supermarket. It’s more the ’market’ designed and usually has more natural spot lights. In a short but interesting article on ’The Psychology behind Supermarkets’, Dr Harrison uses the term “psychological funnels” for aisle and how they prepare shoppers for what is at the end. This is a really interesting way to see this and think about how you can use this with interactive paths. In part you are setting up a reward status at the end through focusing.

Engaging the primitive

Most of the techniques used to sell to us are aimed directly at our basic instincts. They aren’t designed to get us thinking, they are designed to get us to not think and just purchase. It’s an unconscious drive that they are trying to cause. The state of ‘just doing’ is one that leads you to make the purchasing decisions they want. To buy the product they highlighted, to go down the aisles they want you to.

Out of the real world

How does this apply to digital interactions? Well you still have paths. One of the most important things you can do is to know your user paths. What journey are you taking them on? What funnels are you leading them down to get to which reward? You can also use things like positioning and highlighting.

Friction caution

A big thing you need to be careful of is to make something subtle enough to not cause friction. Humans don't do well with friction. If you think about herd mentality and what happens when something spooks the herd. Making something too obvious a herding technique and the herd will turn. The key is to make it natural and appear to be a choice. Whilst humans love to be guided, the idea that we aren't being unsettles us. It's when that idea is obvious we then loose faith, we refuse to bond or purchase as to us trust has been broken. That leads to all manner of seperation from the seller. As a result, often that can't be regained. This has happened with a lot of brands in the past.

Psychologically questionable

It has to be noted that a lot of the methods used to make us purchase could be labelled questionable. However, it’s just like anything, also able to be used to avoid friction and help someone get to their purchasing choice. As with anything, it’s about using responsibly.

Further reading

How we are guided to buying what we do I find really interesting. I thought I would share some further reading.

There is a book also called Buyology that I'm reading at the moment and recommend if nothing else for some eye opening reading. It’s a little bit wordy to get through but there are some really interesting insights hidden in those words.

People source

Every open source project is made up of more than code. It’s more than pixels, more than binary. People create the code, craft the experience, test and support. Open source really is people source and the trouble is we keep forgetting that.

Assumptions

One of the biggest things you can do wrong when interacting with someone is assume anything you don’t know. If you don’t know their history, don’t assume. Don’t even think you can guess – because you probably can’t. Assumption is another word often for judgement and nobody likes that.

Learning to just see the human and not try and make up the extra parts is a constant life learning process. As humans, our brains try and fill in gaps. When written communication is our only format those gaps quickly become vast chasms of wrong.

Unique snowflakes

Whilst we all may be cut from the same ancient genetic cloth to a variable percentage, that’s where the connection ends. I am not you, you are not me. We all travel this great adventure of life with different backpacks, we all take different paths. That’s part of the amazing that is the human race. The difficulties in trying to communicate with your polar opposite often becomes delight when you gain a different view through talking.

As the old idea goes, sometimes walking in someone else’s shoes means they fit better. In open source we should cherish the differences and protect them. Give space for everyone to be able to communicate. Some of us are shouters, some of us take a little time, some of us just need a bit of space for our voice to be heard. Giving that space for someone to be heard in their way, that is something we should all try and provide.

Impact of projects on lives

What we create has weight and impact on lives. This code, this non-existent digital flotsam. It has real physical and mental impact on real human lives. People feed their families with it. They have been enabled to make something that without projects they wouldn’t have. That’s kind of amazing to realise, but it’s also kind of deep to think about. Those interactions, the choices, they matter because of the impact on people's lives.

The human behind screen

Non-verbal communication online really isn’t great for remembering your interacting with a person. Sure, you have this tiny static avatar, but it’s too easy to get caught in your own head and not see the human your interacting with. Real time methods are a little better, but it’s all various degrees of numbing to the fact your interacting with a real human.

Remembering and not assuming is the only way projects get through ups and downs. Remembering the project is made of humans and not assuming anything about those humans. A culture where respect is given to all is a hard one to ensure, but it’s one worth striving for. A project that recognises the lives beyond commits are just as important.

Saying thanks

When was the last time you said thank you to a core contributor? When did you say thanks to someone for silently manning the forums? Perhaps rather than focusing on #drama of any sort, thank someone. They don’t have to be only core either. Every open source project is deeper than those that have the ability to make a patch live. Recognising people rather than using a tag that just perpetuates the drama it points to, that’s a positive move in anyone’s book. In thanks, you are recognising a person. You are recognising that open source is made of people.

Next time you interact on Twitter or on trac, take a moment. Think about the person you are writing to. Maybe they’ve had a bad day, maybe they care about the thing you disagree with for a real reason. We all live complicated lives. When you respond, take a moment to really see the people, really understand that open source is about connections. You don't have to agree with everyone – nobody does. The point is how you disagree. Open source is about people joining together to create something amazing. Without people, there is no open source.

Knitting as meditation

One of the big things I have focused on this year is doing more offline things. As a result I have rediscovered knitting. Whilst this has helped in logging me off its also had an unexpected benefit. I’ve found that by knitting a little at night my brain churns through things and unclogs itself.

I’ve always been convinced where my brain is concerned it is a case of letting me in on the thinking somewhere near the end, than an active thinker. I tend to get stuff swirling around brain and after it does the rounds of my neurons, at some undetermined point it pops up with an actionable. This has its benefits and drawbacks. I tend to most of the time be in a 70% pondering state. Doesn’t help focus and adds to my already natural state of permadistraction.

I’ve experimented with meditation. The most I’ve ever managed to keep up is tied to my yoga practice. I find sitting still akin to torture. Hatha yoga is about as passive as my brain can handle. I’m that fidgety kid at heart, not doing makes me almost have to distract myself even with an itch.

My brain I have come to learn over the years doesn’t like to be rushed. It isn’t fond of on the stop thinking, nor a fan of rapid fire questions. Words and me aren’t always friends when time is poor. As a result my thinking times tend to be on the dawdling side. I’ll get there but be a while before anything worth sharing brews.

For me finding a way of depondering my brain and getting those thoughts out in a timely manner is a great benefit. I don’t want to force myself or rush the process though, that never ends well for me. I’ve discovered for me, knitting is oddly a perfect meditation tool.

When I knit my mind whirls into action. I get wave upon wave of thoughts and this ebbs and flows as things come into focus. Often after knitting I will find I write notes, enter to do tasks or in one shot write a blog post like this.

Perhaps it comes down to both the logging off and the action. This may be why sitting still meditation and me never were a good fit. A few years ago I started using beads on my wrist to calm myself in groups. It works really well, but as a side effect helps me muster my brain a bit in the difficult one on one quick fire times. Knitting is a little like that, I’m doing something so my brain is able to free wheel.

Whatever the reason though, I’m enjoying the ability to sort my thoughts out each day. I’m finding it increases my productivity too. A clogged distracted brain is not so useful. In conjunction with the nightly task list dumping I do, I’m getting more out there than stuck in my head.

Musings from a device free designer on appropriate tools

Note: This is in part a response to ModemLooper’s post ‘Responsive WordPress themes are back assward’ and also a collection of my thoughts on the way to approach sites across devices.

I think one of the issues as illustrated in articles like ModemLoopers is an easiness to jump to the worst examples and broad stroke a solution. My own thoughts are a more flexible ‘per situation’ solution is the best one. Just like you don’t repeat the same design over and over again – responsive, adaptive… mobile apps all have their place it’s picking from the toolset and using the right one for the case.

Unique Snowflakes.

Before I go on, my thinking has cemented lately against a ‘one size fits all’ approach to pretty much anything. Take themes, yeah sure they kind of work out of the box for a range of cases – but should anyone be doing something that’s ‘kind of’? Those of us making this our profession certainly shouldn’t.

There has been a lot of talk about device independence and to me this is step one and the first thing as a designer you should do. Don’t think in terms of wiggling browser up and down to media query points. Think of it as a fluid mighty morphing site. The focus away from pixels is one I’m keen to keep in sight as in the great A List Apart article ‘Vexing Viewpoints’. After that come the more ponderous considerations of a mobile approach. Even the term mobile is being used by me with caution as doesn’t hit the spot fully either – we can’t assume (the mantra of the device free designer).

Responsive got itself a bad name.

A point against responsive that has happened in the past is the loading everything and kitchen sink. First up, if you are saying this let me introduce to you the ‘Mobile First’ approach. Secondly, if you’re not creating sites that are mobile first … let me introduce a concept to you MOBILE FIRST. Don’t give responsive a bad name, if you are going to do it – do it right.

I would like to add I love responsive. To me it is a movement (and yes I see it as one) which has turned my designer world upside down and raised all our bars. What I do not like is responsive without brains. This is what I think is the cause of much of the stick shaking at responsive. It’s not something you should see as a ‘feature’ either in my book – just do it like you’d bother to test in a range of browsers. Also, don’t charge extra for it. That’s just plain wrong as your costs should adapt with technology not be fixed and have bolt ons every time something should have – you’re not a mobile phone contract.

Templates are just another possible tool.

Modemlooper makes a case for using templating for showing different versions depending on devices. This isn’t a bad approach but it is hidden under the pile of kicking responsive in the head and that doesn’t really help. It does bring up a few issues. One of these being the blur in terms. Responsive can (and should) mean you remove things and move them about – that’s just doing responsive right period. The lines of adaptive and responsive are blurred by their very definitions and even ‘device independent’ doesn’t fully cut it as an explanation.

At the root of what a lot of he says is a matter of education needed to not create lesser but more appropriate experiences on mobile. Heck maybe we need a new technique called ‘Appropriate’ (or maybe we are all going to drown in terms soon). Mobile themes such as the drop and go plugins / themes have for a long time caused a wide range of misinformation over what should be a mobile experience. I would cheerfully click a button and see mobile themes like that vanish as they are brainless. We can do so much better than that as a mobile solution.

Modemlooper’s post does read a bit of a ‘throwing the baby out with the bath water one’ and whilst I do realise this post was written in a rant format it tars all with the same damning brush. This is the other point that really needs to be underlined. Responsive has its place – it did and still does. Brainless responsive (like brainless adaptive, like brainless mobile apps) doesn’t have its place.

The joy of tools we can all play with.

Performance junkies will chew on the ‘what method’ (looking at mobile first and all the best practices not brandishing broad brushes) is best over time and that’s kind of the cool thing with this device un-centric approach. It’s a revolution not just in the design world but the development world also. I don’t know the facts so I’m staying away from that one. My focus is on looking at the tools and seeing which one works from project to project. On using my designer brain and not just blindly applying anything.

Appy Elephant.

The elephant in the room is apps. Responsive has been argued as blindly ignoring apps almost to the point of seeing the world as ideally app free. I don’t think that ever was the case and whilst it has been levied against even me, it never was my thought process either. I love apps but I love (wait for it) apps that have brains… do something different from a responsive site and work for the purpose better than a responsive, adaptive, ‘hamsteraptive’ site (hedging my bets on any new terms there).

I do not believe just because you are on any thingy be it mobile or not you should get an experience just because you’re there. You can’t assume that every site needs the same mobile experience. You also while we’re at it can’t assume ‘ithingies’ are mobile. You can’t force a cookie cutter template onto them either they can’t get out of. You know what excites me in the app world? Apps that work for the mobile device when a site wouldn’t, that do something sites can’t / don’t / won’t. That bring something beyond a browser to the table.

Me?

Where does this leave me as a designer? It leaves me excited that’s what it does. It leaves me with so much to learn, so many new playgrounds and tools to build things with. So many platforms I can create on and build things that make sense for humans. It also leaves me as 2013 approaches dropping one part of the job description I’ve used for so many years. It started last year and I no longer see myself as a web designer. I am just a designer and it’s kind of liberating to realise that. I am just a device free designer.