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.
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!