Gutenberg 6.1 Introduces Animation to Block Moving Actions, Adds Block-Based Widgets Screen Experiments

Gutenberg plugin users who update to version 6.1 should notice a considerable difference in how the UI reacts to block moving actions. This release brings in the animation experiments that Matías Ventura introduced in a post titled “Using Motion to Express Change.” The subtle animations add realistic motion to block changes, creation, removal, and reordering, creating a smoother transition between actions. It lends a bit of sophistication to what was previously an instant but more abrupt interaction.

Riad Benguella’s demo video shows the new animation for block reordering. When blocks are added or deleted, content moves around the screen more fluidly, with the surrounding blocks sliding into place. You can test it live and see it in action on the Gutenberg Playground, which is now hosted on GitHub Pages.

Version 6.1 also incorporates more experiments on the block-based widgets screen that is still in progress. A new widget blocks editor has been added to the Customizer under a panel labeled “Widget Blocks (Experimental).” At the moment, editing widgets in the Customizer in such a constricted space doesn’t seem to make much sense. It’s easy to get the controls jumbled up on top of each other. Live previews work but are much slower than the experience of using the post editor, and users may wonder why they can’t simply edit the content on the page where it appears. It’s important to remember that this is still an experiment.

The experimental widgets screen has also been updated to include the block inspector and a global inserter. This screen can be tested under the Gutenberg » Beta menu in the admin.

Gutenberg had taken a dip in performance in the previous two releases, but 6.1 recovers that with significant gains in typing performance. The latest version is 30% faster on long posts.

This update includes more than two dozen enhancements, fixes, and documentation improvements. Check out the 6.1 release post for a detailed list of all the changes. Better yet, take the latest Gutenberg features and experiments for a test drive and you’ll get a good sense of where the project is headed and what will be coming to WordPress core in the near future.


3 responses to “Gutenberg 6.1 Introduces Animation to Block Moving Actions, Adds Block-Based Widgets Screen Experiments”

  1. Can I ask a silly question only loosely connected to this post? In the gif, the editor looks like it’s bringing in nearly all of the front-end styles and like it’s this close to being a front-end editor. Can someone tell me how this is being achieved? (Like, I assume it’s set to Fullscreen Mode, but what else is going on here? Is that just Twenty Nineteen and how it has editor styles setup? How is it not looking like the generic Gutenberg UI?) Thanks in advance!

    • Are there specific elements you’re talking about?

      To me, this looks like a full screen mode with default blocks. Make sure to have the “Gutenberg” plugin installed, so you get the latest features (it takes precedence over the version shipped in WP core).

      We’re currently in the process of developing a large theme with Gutenberg. In our theme setup, most styles are shared between the editor and the frontend, where the editor receives some extra CSS rules (since nesting etc. is different there). With this we’re trying to achieve exactly that: Make the backend look as close as possible as the frontend will look – without code duplication.

      • @Martin TBH, maybe just the Twenty Nineteen-looking header typography threw me – I’m so used to seeing “Noto Serif” and almost only “Noto Serif” in my block editor and not seeing representative type when I’m editing vs. what appears on my front-end in the themes I’m used to working in. Is this just simply a matter of how themes share styles with the editor and that some do it more accurately than others?


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: