• The WordPress design system exists and needs nurturing

    The WordPress design system exists and needs nurturing

    It’s hard to miss something small if you walk past it or don’t look. The shoot of green in the ice thick grass as the first melt of the season occurs, perhaps, the drop of water might have fallen on the desert where the rain hasn’t fallen for so long.

    Even maybe for that needle, you dropped on the thick carpet, and now you need to find it. Perhaps it’s that tool you put in the shed and long forgot about, yet now need to do the task it fits. The WordPress design system is a bit like that.

    Back what seems so long ago at WordCamp Europe, I stood up and talked about how the WordPress design system needs careful tending and care. What exists today in the project isn’t what you’d call a design system. I think that’s where I’ll start this because, all too often, when people talk about the two words together, they can mean far more. There is a difference between Apple’s HIG guidelines and a system for a brand – it’s not clear and defining the need of the system is the start. The projects issue is in part the success, organic growth of a system. I am writing this today because I haven’t written the talk up and after reading a recent post my thoughts feel still very of the moment.

    A design system encompasses so much, from pattern libraries, and style guides through to any other artefacts and in my talk I went through a lot of this, including the excellent maturity model for design systems that John Gully and Marcel Somers. The design isn’t the design system; it’s part of it.  There’s a lot of nuance and opinions that whilst I dance with in my talk, right now probably distract. The system also needs a start, nurturing and a process to grow it. WordPress currently has the start, and it has that foundation in the block.

    Now, that might seem a bit strange to say. Not everything is ‘blocks’ in WordPress. No, but a block is a component, and if you think about components as the macro-level of our system, the blocks are. If you think about how those block principles are and have started to slowly translate through older experiments and newer audits in the Figma libraries (again, Figma isn’t a design system, and neither are experiments, frameworks or many things even I have put a badge on in the past and called a system). The green shoot poking through is a block shape – it’s a component, and we have those. We also have a lot documented. Shoots! There are absolutely principles and foundations, many of them refined overtime now and matured around those. Those shoots have begun to form roots.

    WordPress likely needs a decoupled approach to the system. One in code, detached from the design, but rooted in strong principles that already are shooting up from the ice. It’s winter and cold here, so I am going with that visual. What is needed though still from my talk in June, is an audit and that collaboration, the uniting. What isn’t needed, I would gently persuade with an open ear to conversation, is to throw out the shoots or not see them; casting light and using them is far more sustainable. They are there you just have to look or collaborate with those that know they are there and they can help – open source grows so well when we do that.

    I’ll share a section from my talk at WCEU here that perhaps is apt for now.

    Imagine a space where every component (front and editor) was visibly, easily, documented, up to date, where anyone could extend that, spin it out and add their own styling layer. There is a lot of potential and with things like package management perhaps this could be.

    If nothing else, having a reliable source to pull into your own design system is powerful. Right now, that’s just not something possible. There isn’t that flexibility, reliability, or extendability.

    Back then, I was working with ideas around this in a role I have moved on from as life like seasons change. I still see the strong need for that truly open source approach to the system. I also see it happening within core, I see those green shoots, which like most things, have grown organically and are fragile. Design is an area many of us would love investment and support around contribution to the system. In my talk, I touch on needing to know user cases because they matter – this is in many ways creating a product and that’s how all the design systems have been typically worked on eventually with a product mindset.

    I am going to close today with what I shared in the talk as my close because it feels what is in my heart as I look forward to the year ahead still and what needs nurturing. This is more about a base of truth, than a source of truth because many agencies to plugin creators are going to need to be able to adapt and form on top of this foundation. This is a challenge, and one many other systems don’t have. Like many things in open source, this needs to be done a little differently.

    “We get there through collaboration, and that’s something we are pretty amazing at in WordPress. We get there by all roles being included because that is how we are stronger…..

    This isn’t a single ownership, this isn’t a single user base. This is not a technical project. This system needs to be collaborative…. To truly get the benefits of a WP design system once and for all that isn’t problematic, we are going to need to put it at the heart of work across disciplines.

    We have started already, we have begun various auditing tickets, we have Figma, storybook.. A lot of this is just bringing it together.

    The organic path can rapidly spiral so we need to be cautious. If we realise now, we can bake in strong accessibility and usability patterns that benefit everyone, raise the entire ecosystem. We can raise up the quality of anything built on WordPress. Make contributing easier and set up for the future through easy extending and experimentation.

    Let’s democratise design by growing the WordPress design system and empowering as many as possible to create with it, contribute to it and nurture it together.”

    I will conclude this longer than intended post by sharing simply an offer of conversation and collaboration if this resonated with you. The same one I did back in June and have for many years. I am not alone in seeing the possibilities, many are even much further along working on it now in core and that’s how we get it done, because also this is a need and we are good at working on those. Who knows, maybe we can tend to those shoots together.

  • A new path to explore

    A new path to explore

    This year has been an incredible ride for me. It looks like it’s not done with the adventure because I am pleased to announce that I have joined XWP as a Senior Product Designer.

    The heart and passion of those within XWP is hard for me to put into words; I am so thrilled to be joining a group of people that put performance and experience at the heart of everything they do. This change will allow me to work on sites implementing Gutenberg and learn how people use it to create with. Not only that, but I feel so fortunate to also be through XWP, having sponsored contribution time. It feels like the perfect combination for me.

    I have created tools and the product for quite some time; becoming part of creating sites is such a positive shift. My passion for Gutenberg and art direction now I get to explore at scale, and that’s thrilling. Not only that, but the people within XWP are each so incredibly talented and energising. It truly is a company where everyone is an expert in their field. I feel lucky to get to work with so many as passionate as I am about this work. I am so excited about how far we can explore the new features in WordPress together on client projects and bring those insights back to the project.

    I couldn’t be more excited about this new chapter in my life, and one of the incredible things that XWP will allow is me time for exploring my projects, so more to come on those as I grow my ideas from seeds. Combining great projects for clients with sponsored contributions and then exploring in my own space is a mixture I feel lucky to enter into.

    For now, I am so delighted to be settling into a new home in WordPress where I can bring the work I’ve been part of creating for so long to client projects, take those lessons back to the product and help improve for everyone. It’s easy to forget what we create for; I look forward to rediscovering that by learning from those that publish daily, use WordPress. This will be such fun, and it couldn’t be at a more exciting time for the project!

    If my new adventure sounds like something you’d want to join in, XWP is hiring – there even is an opportunity to join design right now.

  • The need for standardisation

    The need for standardisation

    It’s almost adorable the way we accept in most of our theme processes in WordPress the lack of standardisation. However, it has to stop for business, productivity and sheer sensibility. Standardising doesn’t mean removing creativity; in fact, lack of it often does. Which means the need for it is even more urgent.

    What do I mean by standardising? Well, from a theme perspective, an excellent place to start is naming conventions. For example, in his series of posts, Rich Tabor explores three possible areas, consistent, reliable colour slugs, font sizes and spacing. However, it doesn’t have to limit to those; they are a great starting point for thinking about a dependable theme design system we can all benefit from.

    I am skipping down a side street a little here; however, it’s worth exploring this tangent of a dependable core theme design system. The concept is a step from standardisation. Having a set of things, starting with naming, that you can use as a toolbox is powerful to build using.

    You could imagine it just like lego. The theme brings the styling; this keeps that separation: the blocks, the tools, template fallbacks, all in core. This system is growing with design tools and can grow more with a grid and other opportunities. This is the future, but it’s one possibility that starts with standardising.

    Let’s focus back, though, on the now. Why does standardisation make sense on a human level, though? Well, there are a few reasons. The biggest is clarity. It removes the ambiguity, the questions over naming, or the debate around what things could be called. That doesn’t link to creativity, though. How does this all allow for more creativity? To show that, I want to go right back to how we create colours.

    There are three primary colours: red, yellow and blue. The three secondary colours are a mixture of two primary colours, the six tertiary a combination of primary and adjacent secondary colours. You can already see how this is increasing just from the base of three colours. You have neutrals (achromatic colours) of black, white, grey. By combining all of these, you get almost infinite possibilities – but you start with those three, and the three neutrals make it lighter/darker.

    The human brain doesn’t do so well with unlimited choice. We experience guilt over what we didn’t choose, and we lose the ability to pattern match, impacting creativity. So by limiting options, creativity is more effortless; you can have more space for pattern matching – less worry or concern about options you might have made and spiral thoughts there.

    There is psychological proof that limiting increases creativity. There are countless stories of people finding their path through limits. Most art is taught this way, starting with very rigid limitations, building up to more freedom and often, the artist will set their confines. Maybe it’s materials, subject or time – the limits, though, lead to more creativity. Designers don’t create projects without specifications – the more substantial the specification, the better the brief, the better the project. Every creative will tell you the death to creativity: the open brief and a blank canvas. It sounds delightful but is a curse.

    If you are given unlimited options, what often happens is procrastination. This is a direct impact of survival instincts kicking in. You have nothing to compare against, so everything to lose. You have no boundaries, so nothing to measure. You can see how this rapidly leads the mind to want to preserve and enter the number one way to stop something being a problem – just don’t do ever start it.

    That’s the human aspect, but there is an experiential aspect to standardising. Having the foundations clear provide easier interchanging with no matter what theme someone is using – someone can change their theme without losing content or settings. For those creating, they can know and learn easier because of those reliable foundations.

    One final practical aspect that is often overlooked in a global project is that you can ease the linguistic issues when you standardise. Translation of one term is more straightforward than the translation of multiple. This feels like a minor point, but it’s vital to think of education and the global nature of a project like WordPress. Particularly, themes have for a long time been a space that has embraced international creators.

    Limitations are freeing on so many levels, from psychological empowerment to just making it easier to be creative – which leads me back to why it’s essential to set some boundaries and foundations in themes today. Starting with naming conventions in theme.json, spacing conventions, but it does not end there. I would like to see standardising go a step further, but that’s a conversation for another day. Another day where talk might be of a core parent theme or how far the fallbacks can go that exist today. Whatever the conversation, it needs to be focused on how we can unlock more creativity and a better experience for everyone through anything that happens.

  • Let themes be themes

    Yesterday I was lucky enough to give a talk at the WordPress Cheltenham Meetup. The topic was something close to my heart, I got to share why the changes in themes matter, what they are and how hopeful I am for the future.

    I took some time to write up this talk transcript and you can also find the video here.

  • Theme resources

    I don’t know about you, but I find so many good resources around themes lately that I feel I am constantly juggling links and saving things in the best way. I wanted to solve that a bit as I prepared for a talk this week, so I created a GitHub repo and have begun filing a page with the links that I come back to.

    I chose to create a repo as my thinking was that others likely had links to share, and I wanted to be open to catching those by allowing people to add issues and even their own links. I have no big plans for this beyond it serves a useful purpose for myself and might, therefore, others. Things get lost in my bookmarks, so it’s great to surface them out of there.

    I’ve linked the resources to the top of this site as a guide because it’s going to be something I know I’m going to come back to.

  • Controlling styling support states

    Being able to control elements of your theme through the theme.json is super powerful; however, you can also turn on and off what is supported or not. There might be an instance where you don’t want custom palettes or link colors, for example. How do you do this? Well, you can through theme.json.

    These examples need the Gutenberg plugin with WordPress, and some use experimental features.

    Custom colors

    This refers to the custom color option by pallettes.

    "color": {
    	"custom": true,

    You can rely on default states, but I actually find declaring even the default state useful in my theme.json as I know what set. The downside of that is a longer theme.json file.

    By declaring in theme.json, you can globally declare over per block, although each block has setting options. This is a great way to override block defaults and give a cohesive experience to the creator. Some blocks have certain options; others don’t, so this creates a unified experience.

    Custom link coloring

    This depends on the block, and if it has the capacity for link colors, it might need the experimental feature in the Gutenberg plugin itself – always check the block supports.

    "color": {
           "link": false,

    Typography specific

    These are again if the block supports.

    "typography": {
    	"dropCap": true,
    	"customFontSize": false,
    	"customLineHeight": true,

    Experimental borders

    This is a new feature, so it comes with a ‘use knowing it might change’ notice, but you can activate border controls where they are supported. Some blocks have this supported for certain border features and not others, so always check which works – not many do all yet.

    "border": {
            "customColor": true,
    	"customRadius": true,
    	"customStyle": true,
    	"customWidth": true
    },	

    Simple control

    By having these controls, you can not only get to explore the new features but also decide what you should (or shouldn’t) support in your theme. I can see, for example, some on live sites absolutely deciding only to have color palettes and removing a lot of custom features. With these options, amazing defaults are delivered, and branding is kept to pallettes, set options.

    If you want to really explore and play with everything possible, turning it all on is great fun, and I’ve not covered everything here, just a few to get you started. Have fun and know it’s easy to activate as it’s all controlled through theme.json.

  • The implications of set forced play spaces in work

    I was listening to the Post Status podcast this week where Cory Miller and David Bisset discussed creating time for play within work. I write this not thinking they were advocating for what I disagree with, but the podcast inspired me to share my perspective.

    Creating space for play absolutely resonates; we learn through play and grow as a child through it – play stages are a critical part of human development and even used in many therapeutic practices. However, I think aspects often get overlooked in the enthusiasm to create a space for play, those of cultural and wider inclusion. As a result, those spaces become exclusionary and sometimes daunting to participate in when the opposite was intended.

    A set time, a set space where everyone is designated to be social, can be problematic. First up, if you have a team across timezones, someone will be suffering either bleary-eyed morning, juggling child feeding times or needing sleep. Second, culturally being told to do things by your boss can impact heavily. Even if it’s fun, you might think there’s a performance measure aspect here. Depending on your language barriers, the activity also might be incredibly stressful.

    One approach to deal with time zones is to split the team or group into sub-teams to play. This is almost even worse at times. This likely sees certain people with some leads and others with none. It can make people feel they haven’t got time with some and if you regularly do playtime like this, it forces divides. I would strongly advise avoiding splitting people ever like this.

    Remote work enables people, so forcing a set time to do anything can remove some benefits. What if that person has a medical condition which remote work allows them to work around, and they have a flair for that hour of designated playtime? Sure, they can miss it, but they both might then feel guilt, and they missed out on bonding or, even worse, some communication shorthand that others gain through that activity.

    Another aspect to understand is what work means to many. Being able to play within work is a concept not all cultures or mindsets will find natural. If your team is diverse across timezones and types, you have to understand each person probably comes to play differently as an adult. Children are open to play; adults get more closed the older they get in many respects unless they practice it or are given space. This is shaped by their lived experiences, their type and the culture around them. You also need to have a space of trust to play; as a leader, you can assume trust where maybe others don’t feel it all the time.

    Our brains have different experiences of social play. Some might have been bullied when younger, so picking teams even is a trigger point for them; imagine how they might feel if a team picking happens and gets picked last. Or if they do badly in front of their team and now get memories of that happening when they were a child. What for some are incredible social experiences aren’t for others. This needs to be considered in whatever activity takes place. Give options for participation.

    Don’t get me wrong, I am not against play space or even designating and setting time for it for everyone. It can work in several situations very well. I actually think it should be a part of work constantly. My biggest point is that play space should become a space of exploring and also constant.

    One other aspect of this is that it needs to start slowly, be earnt. I honestly think if you can start with instantly it working, that’s incredible but rare. You have to probably start by setting some boundaries, which I know goes against the idea of true play. This is about safe trust-building though, here are some recommendations:

    • Allow everyone to set the time to work for them.
    • Set themes for exploring as a leader: this removes the worry from others. Mix in a combination of work and learning a new skill.
    • Allow space for simply sharing. This is far easier for many than play and gets them learning to trust. Always give alternatives for example just saying share a book you’ve read that month and if someone struggles to read every month – that’s a worry. By saying ‘share a book, film, piece of music or something you liked this month’ – suddenly that’s less stressful.
    • Create a devoted playspace where people can share things as they create async. This lets everyone have comfort and nobody gets put on the spot in a meeting. Sharing can be the start of play and is often overlooked as a starting point – it’s a key stage in play for chidren.
    • Encourage collaborative play but find ways as a leader to make it async. If you do this right you can even combine to increase communication across roles/areas.
    • Start using play formats in meetups/workshops and retros. By incorporating play thinking closely into work practices it says to everyone that play is part of working here and welcome.
    • Always set a start and end point if you set play topics. Open and close the designated play even if async.
    • Your experience as a leader or person that sets the play won’t be the true measure, so open all your senses to others.

    As people learn to trust, increased connections will be made, and likely self-organised play will happen. You should leave space for suggestions for play because that is when the magic happens when those playing start directing it.

    There are various types of play; lean into those. I don’t see play just as a set time to play an online game remotely. I like this definition to start exploring a bit more:

    “Play is a free activity standing quite consciously outside ‘ordinary’ life as being ‘not serious,’ but at the same time absorbing the player intensely and utterly. It is an activity connected with no material interest, and no profit can be gained by it. It proceeds within its own proper boundaries of time and space according to fixed rules and in an orderly manner.”

    Johan Huizinga

    Play is magic; the effects of someone realising they can safely play within work, on their terms, will be felt not only in how much better they will work but also in their improved relationships and ideas. However, it’s not something instant. The space also needs curating, tending and nurturing. Play has a lot of benefits, so it’s worth taking those considerations.

  • Patience and the art of design tools

    I want all the design tools now. There I said it! I want everything today on all the blocks right now. However, I know it’s a process and whilst that knowledge makes me feel and act like a grumpy toddler, the reality is today, some things have features, and others don’t.

    Anyone working right now creating themes and experimenting also feels the same. There’s excitement, a desire to push and use the shiny. However, if I think for a moment about the sheer impact of these features and scale, I realise why things might take a little longer. The editor has been around a while now, and we are starting to add things not even thought about at the start. That’s quite a thought to unpack when you realise it.

    Many of the directions taken now philosophically were wanted initially, but the how might not have been possible then. To create things now needs foundation changes and then interface. For example, the choice to not bring group flex controls yet. Whilst I want to play with these things today, I appreciate they are being considered, not just thrown in without caution.

    The thing is, the editor today is an established piece of software. It’s out, released, and even the plugin is running on many sites. These features being created need space to mature and also people to test. They also need the time afforded to the other aspects of the editor that maybe weren’t so eagerly waited.

    This all doesn’t stop me from wanting them; it does help me have patience, though. It makes me excited when I see a PR I can test or call for feedback. It makes me want to write about each new thing I see and shake it out in my own experiments.

  • Keeping up with block supports

    One of the trickier things I’ve found in my experiments is finding out what is supported or not in various blocks. I tried to solve that a little for myself by creating a very rough table going through the block.json file of each block.

    Block.json is an amazing file, it’s the recipe for the block, and in it, you can see everything easily that is supported. For example, it shows where the experimental font treatments are or layout. I will share this page, however, this is just a resource created as I discover myself. It is not meant to replace actually looking in the block.json or knowing the blocks yourself.

    In addition, I decided to pull out some of the theme.json terms that turn on/off the support features. So it is a useful resource for me going forward, and perhaps someone else might find it useful. This section is not complete, yet so please consider that a work in progress.

  • Fun with group block borders

    There are all sorts of useful tools appearing across blocks, and just one of those is the variety of borders you can do on several blocks, group blocks and pull quotes, for example. I wanted to take a little exploration today into what you can create using those.

    Adding borders to your theme.json

    If you want to have the full border capability on as many blocks as you have right now, you can set the following to your theme.json. This can be set per block also.

    "settings": {
    	"border": {
    		"customColor": true,
    		"customRadius": true,
    		"customStyle": true,
    		"customWidth": true
    	},		

    You can of course choose to not set any of those if you want to limit options.

    What that does is enable the following controls.

    As you can see it is picking up the colors I have in my theme. Note that there is no custom color? We can change that also by simply turning that functionality on in the theme.

    "color": {
    	"custom": true,

    By giving this type of on/off control you can set boundaries but still give powerful customization options to creators.

    Setting the borders

    Changing a border is a simple matter of setting the width, picking a style and then color. It will update real-time, but don’t forget to save! If you want to have a border-radius you can also change that. At any point you can click ‘clear’ to go back.

    A little note about radius, the little ‘link’ icon enables you to unlink and control all sides of the radius, which can create interesting effects using group block.

    Have fun

    One thing these tools allow us to do is to play. There’s an opportunity to see what could be. I would encourage you to let your mind wander and really even if it feels far out there, you are getting to know the tools. I share these not as examples to use but to show what could be, the code is ‘overly enthusiastic for some’.

    <!-- wp:group {"style":{"border":{"style":"dotted","width":"40px"},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}},"borderColor":"foreground"} -->
    <div class="wp-block-group has-border-color has-foreground-border-color" style="border-style:dotted;border-width:40px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:group {"style":{"border":{"width":"20px","style":"dotted"},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}},"borderColor":"secondary"} -->
    <div class="wp-block-group has-border-color has-secondary-border-color" style="border-style:dotted;border-width:20px;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px"><!-- wp:group {"style":{"border":{"width":"10px","style":"dotted"},"spacing":{"padding":{"top":"10px","right":"10px","bottom":"10px","left":"10px"}}},"borderColor":"background"} -->
    <div class="wp-block-group has-border-color has-background-border-color" style="border-style:dotted;border-width:10px;padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px"><!-- wp:heading {"style":{"typography":{"lineHeight":"1.2"}}} -->
    <h2 style="line-height:1.2">Hi I am a group</h2>
    <!-- /wp:heading -->
    
    <!-- wp:paragraph -->
    <p>This is some text in a group</p>
    <!-- /wp:paragraph --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group --></div>
    <!-- /wp:group -->

    Who knows what you will create and learn in doing, distil down to actually use in something later.

    <!-- wp:group {"style":{"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"100px"}},"border":{"style":"solid","radius":{"topLeft":"100px","topRight":"100px","bottomLeft":"1px","bottomRight":"100px"}}},"borderColor":"foreground","backgroundColor":"background","textColor":"foreground"} -->
    <div class="wp-block-group has-border-color has-foreground-border-color has-foreground-color has-background-background-color has-text-color has-background" style="border-top-left-radius:100px;border-top-right-radius:100px;border-bottom-left-radius:1px;border-bottom-right-radius:100px;border-style:solid;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:100px"><!-- wp:heading -->
    <h2>I am a heading in a group</h2>
    <!-- /wp:heading -->
    
    <!-- wp:paragraph -->
    <p>This is some group text</p>
    <!-- /wp:paragraph -->
    
    <!-- wp:spacer {"height":51} -->
    <div style="height:51px" aria-hidden="true" class="wp-block-spacer"></div>
    <!-- /wp:spacer --></div>
    <!-- /wp:group -->