Gutenberg Team is Exploring Adding Motion to Block Moving Actions

In a post titled “Using Motion to Express Change,” Gutenberg designer and engineer Matías Ventura takes a deep dive into how animation can be applied to interfaces to replicate realistic motion. These animations can sometimes more clearly communicate changes, particularly in relationship to the action of moving or reordering items on a page.

“Even though the instant transformation of the interface is accurate it may not be the clearest expression of the change that just occurred,” Ventura said. “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.”

This creates an interesting choice for an interface designer. Although instantaneous changes are possible to implement, they may require more time for the user’s brain to process. In the case of an editor, any added cognitive processing can pull a user out of the flow of writing. Ventura sets a good practical rule of thumb for determining if an animation adds value to an interaction:

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.

Ventura illustrates this concept with two video demos in his post – one showing how block reordering currently looks in WordPress’ editor and a second with an example of how it could be improved with subtle, tasteful animations. It’s an early prototype but very convincing:

When Gutenberg was still in the selling phase before being merged into core, some said that moving forward was simply a matter of retraining your muscle memory to work with the new editor. However, at that time there were still a number of markedly flawed interactions that didn’t feel natural and were even jarring for the user. The legacy editor didn’t have blocks to reorder or many of the other interactions introduced by the new block paradigm, so there wasn’t much prior context for comparison.

User reviews have complained about the cognitive load that Gutenberg adds and have continued to identify problematic interactions with the core blocks. Unfortunately, in many heated exchanges that took place in comments and discussions prior to WordPress 5.0’s release, these concerns were often brushed aside as coming from people who were resistant to change.

Many of the reviewers may not have had the right words to communicate what it was they were experiencing, but the cognitive load may be one of the strongest reasons why the Classic Editor plugin has more than 5 million active installs.

Matías Ventura’s proposal to add motion to express change in the editor has the potential to solve some of these unintuitive interactions. The Gutenberg repository now has an issue dedicated to exploring and discussing the use of motion to add clarity to the action of reordering blocks.

Ventura’s post is an encouraging read that demonstrates the thought and craftsmanship that go into architecting an interface that is required to meet the needs of millions of users. If you have been impatient with Gutenberg’s progress, as I have been, it’s important to recognize that these kinds of refinements to interactions take time to percolate. Replicating realistic motion comes from contemplating how we interact with the known world and understanding how that informs users’ digital expectations.

Would you like to write for WP Tavern? We are always accepting guest posts from the community and are looking for new contributors. Get in touch with us and let's discuss your ideas.


  1. Oh no, please don’t, it’s already laggy. Gutenberg badly needs to reduce the amount of JavaScript – lazy load more modules.


  2. 5 million sites are using the Classic Editor plugin because it provides a way of editing text which doesn’t require animation to understand basic interactions such as moving a paragraph.

    Adding animation on top of a user interface where people find simple interactions confusing isn’t the answer.

    Please stop over-engineering.


  3. I hope that the prefers-reduced-motion media query is included with anything that ships with that kind of motion in core because that could after a while become quite jarring to see.


    1. Matías does mention this media query in his post, and it is definitely a priority for the team. `prefers-reduced-motion` support is active for all animations and transitions in Gutenberg, including the ones driven by `react-spring` (the js animation library that Matías mentions in his post).


  4. these concerns were often brushed aside as coming from people who were resistant to change.

    And they continue to be brushed aside. Nothing has changed.


  5. I find this statement here: “…it’s important to recognize that these kinds of refinements to interactions take time to percolate…” to be quite incongruent considering how fast and furiously Gutenberg in its highly flawed state was forced onto users with no option to avoid it unless we installed some OTHER plugin to get rid of it.

    Our company currently uses Disable Gutenberg to get rid of Gutenberg, and I am actively following the Classic Press fork, as well as pushing for a complete redesign to get away from WordPress–due to what the “team” did by forcing this terrible block interface onto users. What a disaster–and I suspect it is the reason why WordPress was noted as the most dreaded platform by developers this year.


    1. Nah, WordPress has had a long history of not ranking well on StackOverflow long before Gutenberg was around.


Comments are closed.