Helping developers care
Design Systems are a great tool to have, although they are usually reserved for bigger projects. Maintaining an updated and comprehensive library of patterns and components requires a great effort that is easier to justify when different teams use and contribute to the system.
WordPress has co-opted the language used for Design Systems: blocks, patterns, templates… But it does not stop with the language.
On my blog’s home page, there are two paragraphs about the posts I write and the projects I work on. Each of them includes a button that links to the archive for that type of post — posts for the blog, and projects, a custom post type, for projects — and a link to the last post of that type. Since I published my blog, I have been updating the home page each time I write a new post.
There is a block called Latest Posts which gave me the functionality I needed, except it does not have the option to display a custom post type, only categories. I could also have used the Query Loop block. But both blocks had the same issue: HTML output. In my design, last post is just a link inside an existing paragraph, and both Latest Posts and Query Loop blocks have an output which includes an unordered list. Query Loop also does not allow titles to have a tag different from a heading tag — h1 to h6.
In classic themes, we have templates — that more or less correspond to different pages —, and template parts — that allow for parts to be used in different templates.
In block themes, we have the blocks, and also the same templates and template parts. In addition, we have block patterns. In short, a block pattern is a predefined group of blocks, used to create a specific layout.
User experience, like behavioural economics, was a big change from focusing on what we produce and sell, to how it is used or bought. It means putting the end consumer in the centre of the design process. It includes understanding how to use our perceptions and emotions when buying and using the product to make the process more efficient or enjoyable.
Bad actors also started using the lessons learnt from these disciplines to be deceptive. In design, this is called a dark pattern. For example, when an advertisement includes a button you may mistake for a button of the interface of the site it is placed on.