If you are following the editor project in WordPress, you might have heard the term design tools. I wanted to spend some time talking about what they are and why I think this is incredibly important.
Design tools are a term for anything relating to the appearance of blocks. Because ‘everything is a block’, this means all of your content’s appearance.
In this issue, Matías explains:
“Design tools encompass all tools related to the appearance of blocks and ranges from colours, typography, alignments, and positioning, to filters like duotone, cropping, and background media.“
https://github.com/WordPress/gutenberg/issues/33447
An essential part of this is providing tools for people to create patterns and give usable options to those making blocks.
Uniformity leads to creativity
By providing these standardised tools that people can know and trust, they will create and rely on a feature set. The tools are baked into core and iterated, predictable. A creator can move from block to block, knowing they can use the same tools to get the same results and learn the same styling mental models. This is crucial to empowering them to trust styling and truly feel the freedom to create.
Why is trust so crucial? Well, here’s the thing everyone is creative and has the ability to create some level of styling. Though, many are either hit early with a state of fear when creating or put in a position where they feel out of their depth, judged. As a result, they assume they can’t do it. By providing tools, a space of safe creation, you are empowered again.
The quality of the tools and output from them is also then something a user can trust. Which hasn’t always been something historically so easy for everyone to know what is or isn’t the right thing to use. Theme creators can also be assured of these foundations to create themes that support them and take full advantage.
Empowered without knowing code
For a long time, some styling has been gatekept by the fact you had to know code. This changes with design tools, powerful options are put right in the hands of creators. A key part of this, though, is it’s done within positive boundaries. The tools are given but not in a way that allows someone to really create problems. It’s a fine balance of enough options, not too many, and that’s going to be one battled throughout this feature.
The power underneath
The tools coming are not all that you will interact with, which becomes interesting. The underlying system is going to combine visible and invisible improvements. For example, positioning and layout might not be something many users ever interact with. That’s also key here; different users will likely interact with various tools at other times.
Viewport handling
I am incredibly excited about the proposal around viewports.
“these principles revolve around CSS features like flex and grid to ensure elements know how they need to flow and stack within containers without further instructions, leveraging properties like mixmax and calc for setting layout boundaries, etc. Ideally controls like font size, even if exposed as single values to users in the UI, are built as functions behind the scenes to accommodate different viewport ranges.”
https://github.com/WordPress/gutenberg/issues/33447
What pleases me about this is it’s something I think of as the way forward to genuinely adaptive design. We’ve been stuck on fixed points for too long to respond to, not truly adapting to any screen size and the experience that someone might be having around that different screen. You experience things on your phone different from at a desktop, for example.
Looking forward
One refreshing thing about these design tools is a lot of the work is progressive. Design tools are an integral part of the site editing focus. They have also to look forward from a product market view, not stay stuck with a background to text and a few simple gradients. It needs to go beyond, and the proposal for design tools does just that.
This is how WordPress pushes some boundaries and gets quite opinionated about what direction it will push those in. Some of the chosen formats underneath will need bets to be taken on progressive techniques to set paths forward for the project. For example, the way viewports and font scaling are handled.
Core first
To accomplish many of the proposed design tool features, you would have to now and historically combine plugins into a styling stack – many just weren’t available. As a result of this plugin Jenga, changing sites created problems; updates often broke things. People would have to learn different interfaces, which was much harder than it had to be. Design tools level the ground, providing everyone with a base to build up from.
This levelling is one thing that truly excites me in all of this. Beyond the usability, the possibilities. It allows expanding upon for those creating to take these tools and soar. That’s for the content creators and those creating themes, plugins that interact with the editor.
Leave a Reply