Thoughts on Themes

Recently, Vlad Olaru wrote and shared with me a thoughtful piece on the place of themes and the advent of Gutenberg in WordPress. While exchanging impressions via email he encouraged me to share my own more broadly, so here I am, true to the days in which discussion happened across blogs.

Themes, mainly premium ones, have been the integrators of the WordPress world.

This made me smile. I started my WordPress journey with themes years ago. I believe it’s important, while Gutenberg evolves to give better design tools to people, to take the perspective of theme authors for a bit. What does it mean for themes that blocks allow more design tools to be available to users?

The fact themes have been the ones to essentially establish page builders as a paradigm is a testament that their role as “integrators” has pushed the ecosystem forward and lead them to implement — often in idiosyncratic ways — what the WordPress platform wasn’t paying much attention to. Themes have the privilege and responsibility of being the closest to the user and how they experience their site, leading developers, in turn, to try to overcome shortcomings in the customization experience offered by the platform. (The difficulties of making your site look like the demo of a theme are notorious.) However, in solving these issues in a multitude of ways, often incompatible with each other, it contributes to creating a faint locking effect that permeates and hurts the user in the long term. Integration can then become the shackles of inescapable experiences.

Which brings us to the conversation about how the evolution of Gutenberg interacts with themes. There is a difference between standardizing the final interaction point (in our case, the block) and giving all integration decisions to the user (the theme role, in Vlad’s examples). That seems to be the main point of discussion and it’s worth clarifying it: providing consistent integration points through blocks, design tools, etc, shouldn’t mean handling control of the design minutiae to the user, nor removing agency from themes, but instead promoting a common way of expressing site elements that ensures a consistent customization experience.

A lot of the conversations about themes have been cast, perhaps all too eagerly, in doom-colored clouds by focusing on the underlying infrastructure and perceiving the shift at play (giving more tools to users) as one that makes every user responsible for their site design. That shouldn’t be the reality. The role of themes is not really changing. They are still meant to provide template resolvers, design parts, styles, and all its various layout decisions; the only difference is that blocks would be at the center, making things more portable and easier to customize given the editor engine understands them better. Users, in turn, will see a familiar interface for all aspects of their site’s appearance.

Perhaps the only new concept being introduced is patterns. These are design helpers to achieve more difficult layouts or beautiful designs faster, which the theme can also control and provide its own. It can be as simple as a few blocks put together or can encompass a larger area of a page. Since themes are made of blocks, it’d also be feasible to swap parts of it with another. Whether a theme is built through markup, CSS, and PHP templates, or expressed through blocks, patterns, styles, and block templates it’s still the responsibility of the theme to integrate, curate, choose, and prepare the experience in the ways it thinks it can better deliver its possibilities and its safeguards. This is not going away. If anything, it becomes more present.

Patterns aim to bring ready-made block designs to users’ hands.

Actually, the general consensus in Gutenberg is that everyone should “Embrace and enhance users being in control”.

I think this is a mischaracterization lost in the sea of impressions that is the day to day process of developing the main ingredients at play. The question is not about giving all power and responsibility to the user but about absorbing the common so that the specific can be better nurtured. That is, building the design tools that would let users interact with themes and blocks in a coherent manner, and giving themes control over its mechanisms. WordPress should provide a familiar and easy to use platform but it’s also the theme builders (soon also pattern builders), site creators, and so on, the ones that shape the final solutions users will often experience.

The systems that might be implemented (block based themes, a block style system, design tools, etc) are not necessarily to be seen as targeted directly to the end user but to the theme creator as well; and passing through them to the final user. It will remain up to the theme and site creators to decide what should be exposed and in what degree, which might vary from “absolutely nothing” to opening and locking certain aspects of the experience in a controlled and familiar way. The overarching decisions (typography, colors, design balance) should be coming primarily from themes.

If the new editor gets its way, this de-facto packaging standard for distributing whole site solutions to end-users will be gone.

Definitely not! The aim is that it would give better and more supported tools to establish these solutions in ways that are inherently compatible with the platform at large. Standardizing on these design tools should help us integrate and expand a common system but shouldn’t imply taking control away from themes. Quite the contrary, a large part of the work is going into ensuring themes can have overarching control over several visual aspects of blocks.

More to the top, a global system of styling and layout will be (eventually) put at your disposal — again, nice for one part, cognitive-freeze for the other. WordPress is becoming more capable, which is a blessing and a curse.

The styling system is primarily a way to establish a direct relationship between the theme and unaware blocks — that is, blocks that have not been created with a specific theme in mind —, in a way that the platform can recognize as appearance attributes in order to render things accurately while allowing the creation of controls to manipulate them visually on the block interface. But this is something for the theme to ultimately oversee, the same way that having a “theme editor” in the dashboard doesn’t mean it should be exposed to every end-user.

The aim is to provide a better and more integrated engine to power the theme experience, not to expose all its inner workings to all people or make it easy to “ruin a design”. That spectrum should always be in the control of those that provide the final solutions, which could be tightly determined or more open ended, depending on the needs at play.

In the end, WordPress contains multitudes and we ought to design systems that are meaningful to all.

Percy Shelley wrote in A Defence of Poetry that poets were the unacknowledged legislators of the world. To borrow the sentiment, let’s hope themes can be the acknowledged curators of the WordPress world.

WP Block Talk

Tune in for the first WPBlockTalk tomorrow, a free virtual event with speakers from all across the WordPress community. Matt Mullenweg and I will start by presenting on the latest adventures of Gutenberg and hopefully doing some live demos, so there could be dragons 🐉

Mercury and Argos

It tends to be common in the aching philosophy of our time to hide a treasure and then celebrate its finding as a wondrous discovery of intellect. This error seems particularly prevalent in the world of philosophy of art, where the violence of reason is wielded as a hammer to shape reality.

Arthur Danto, for example, characterized painting — ever since the Renaissance and until the avant-garde movements beginning at the turn of the 19th century — as a practice in the pursuit of increasing realism in art. An imitation of the world seeking always higher degrees of fidelity. What concerned artists, Danto would say, was depicting the world as it looked. This allowed him to state there was a fundamental conceptual shift when art “learned” that it could be more than just imitation.

On principles of Renaissance theory, paintings were windows on the world — pure, apparently transparent openings through which one saw the world as if from outside. So a picture drew its beauty from the world, ideally having none of its own to contribute to what one saw, as it were, through it.

Arthur Danto, Abuse of Beauty, 2002.

Such a resolute conviction in his theoretical model (that illusionism was the primary objective of painting) shows a disregard for the actual reality of art and those that made its history. Leonardo wrote among his notes for a book on painting:

The painter who draws merely by practice and by eye, without any reason, is like a mirror which copies every thing placed in front of it without being conscious of their existence.

Leonardo da Vinci, Treatise on Painting.

It is also evident when looking at some of our greatest painters that the development of their craft was not one of increasing fidelity but often quite the oposite. Their earlier work tends to exhibit more faithful attention towards depicting details of the world than their later work does. At their zenith and the more they dominated the medium, the representation becomes more dynamic, portraying elements with varying degrees of emphasis in a symphony of shapes.

Velázquez final works display this quality with extreme eloquence and sensibility. His forms attain both freshness and aplomb through his extraordinary and varied brushwork. Composition becomes tangibly cinematic built out of impressions of reality. That ability to synthesize and express couldn’t be further away from a quest to depict the world as if paintings were mere mirrors standing in front of it.

Unfortunately, three of his compositions on mythology were lost centuries ago to the fires at the Alcázar of Madrid, with just one remaining: Mercury and Argos. It is a magnificent work that should elude on its own the mischaracterization of mimetic progress as a valid project. It contains that ingredient which eludes the philosopher chasing conceptual simplification: that porosity and style in expression that shine over pale and cold imitation.

Using Motion to Express Change

A lot has been written about the concept of visualizing the user interface as a reflection of the application’s state. Ushered in the last couple years by an emergence of code libraries — leaning on declarative patterns that describe the what instead of the how — that seek to absorb the task of managing changes so that programmers can focus on expressing the different states of their interfaces. This mental model can drastically reduce the complexity of managing views as changes occur through time.

Such a paradigm works particularly well in reducing the overhead of having to imperatively apply updates to an interface as the result of user interactions. However, there is an effect that has been generally at odds with this stance: if the interface is an expression of the application state, then changes to the state tend to be experienced discreetly. That is to say, the progression of change is perceived instantaneously by the viewer.

Sometimes this is alright and a desired outcome. Others, though, it can lead to an unintuitive experience as the change becomes abrupt and disconcerting. There is no trail explaining how something changed and the difference between the states has to be elucidated by the user, which can suppose a considerable cognitive burden that distracts.

Even though the instant transformation of the interface is accurate it may not be the clearest expression of the change that just occurred. The relationship between intention and effect might become harder to grasp. Motion can be a great aid in communicating relationships and clarifying the changes experienced in a more intuitive way. All in all, we experience reality — quantum substrate aside! — as a continuum that flows through changes. Moving interfaces can help people connect how A transformed into B.

In the realm of the digital, this has been made particularly evident with tactile devices where gestures and changes are intertwined in their cause and effect. This can be vastly more intuitive for people as it emulates more tangibly the fabric of reality people are used to interacting with.

Consider the case of a list containing a set of items: the action of moving, reordering, and so on, doesn’t just affect the single item being acted on but the rest of the set as well, particularly the one it is “swapping places” with. Reality conveys to us that in order to put something in the place of something else both things have to move. The change in overall state for the entire group can be harder to grasp by just changing the order instantly. It takes a moment to reorient. Transitions and gesture based interactions generally help connect these two states in a way that makes the interaction (the “what just happened”) more immediately understandable.

Yet there is also a tension between communicating clearly and taking too much time to communicate. Motion, wrongly applied, can lead to a feeling of slowness and unresponsiveness. Particularly if the animation is divorced from the interaction itself (its intensity, velocity, direction, etc). For example, when turning a light on or off, it is generally not necessary to describe the changes in an artificially delayed way. The relationship between intention, effect, and familiarity is enough, even though the switch and the light might not be closely connected spatially. (Dimming a light, on the other hand, follows the speed of the action, giving a more tangible feeling of control over the change.)

Once an action has become extremely familiar, the transition between states can be less of a requirement and more of an impediment. That is one of the reasons why gestural motion is so valuable. It is not merely an imperative statement of the like “animate from A to B” but an actual mapping of the interstitial states resulting in motion that is concurrent to the action being performed — the faster the action, the faster the transition occurs.

One could say that an animation is worth being present if the clarity of change it provides is greater than the time it would take to adjust cognitively to the new state in its absence.

Beyond the cognitive load benefits, other studies show that animation can improve decision-making and even help people learn and remember spatial relationships. Animating between states can also help prevent change blindness. In short: animation can free up your brain power and make an interface easier to understand—the benefits can’t be ignored.

Val Head, A List Apart.

A Scent of Spring 🦋

It is challenging to bring realistic motion control to the web in a way that is ergonomic to implement and at the same time performant to execute. Mobile operating systems have baked many of these interactions in their frameworks and their gesture models so it is a more natural and expected resource, optimized at a more profound level. The web, however, remains a lot more barebones with its animation toolkit.

If declarative patterns proved convenient in managing complex application design, they have shown limitations in representing interstitial states as performant motion. For example, APIs that trigger re-renders for every calculated micro-state between changes, while offering great development experience is too much of a penalty to pay in common usage.

On the other side, one could connect time-defined transitions to different states of the interface. However, time based transitions can be quite a poor tool when looking to represent fluid interactivity or natural motion. They take duration as a parameter so they tend to escape the control flow and anchor of the view. They are harder to map to consistent interstitial states of the application. They become awkward to interrupt and they are unable to adapt to the intensity of the user action.

Generalizing physical motion through the application of motion curves is also quite hard to model reliably. Time based animation gravitates on its own fictional space. So when it comes to portraying realistic motion, traditional CSS transitions based on duration and easing curves are largely ineffective.

Some libraries have looked elsewhere to replicate realistic motion consistently and continuously. One such case is the use of “springs” to express natural motion as a result of tension, mass, and resistance rather than duration and curves. But physics-based APIs can be harder to integrate in any sufficiently complex interface system. It is not trivial to express these values within the encapsulation provided by render functions and still retain clean user interface components. This tension has gone largely unresolved in the web space.

The recent development of React hooks offers one way of encapsulating the physics of spring motion while retaining component views largely uncluttered by the added complexity. There is also a wonderful library called react-spring that integrates all these ideas, seeking to bring the benefits of physics based animation, declarative APIs, and performant solutions, that is quite a joy to use.

Browsers are also bringing more control into the user’s hands — like the reduced motion media query — to help tune the experience to the user’s needs or preferences.It becomes more feasible to use motion in sophisticated interfaces.

The tools available for both declaring interfaces and using motion to connect state changes are maturing to the point where it is both convenient and manageable to take advantage of them. It casts a more auspicious path forwards for bringing meaningful motion control to web interfaces with a good developer experience.

Demo!

Let’s bring it all together with an example. Consider the case of moving blocks in the new WordPress editor. The ability to move content is very powerful and a crucial part of the editing experience. However, the interaction itself can at times be disorienting because two blocks have instantly moved. Under the new state, there is a brief period of reorientation happening to make sense of where things have moved and what the new order is. This can be exacerbated when moving a group of blocks all at once. Bringing motion into this fundamental interaction could help explain it better.

The first video is how block reordering looks today in the editor. The second one shows the same interactions but using motion to describe the changes, giving a better sense of flow and clarity.

Note — this is currently an experiment and not indicative of something meant to be shipped as is. Also props to Riad for helping build this prototype.