Core Editor Improvement: Smoother Site Editing

These “CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor Improvement…” posts (labeled with the #core-editor-improvement tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.)) are a series dedicated to highlighting various new features, improvements, and more from Core Editor related projects. 

Over the last few GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. releases, a few more deeply technical changes have unlocked some big improvements across the experience of exploring and using site editing. The result is a smoother experience of exploring blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. themes, making changes, and entering the Site Editor. The work mentioned here addresses key areas of feedback that have been raised over the months and years with the FSE Outreach Program, particularly around revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision. and the ability to preview themes. While what’s shared here is available in the Gutenberg pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the Plugin Directory or can be cost-based plugin from a third-party (in some cases as an experiment with block theme previewing), please help explore and test these features to ensure they each make it into the official WordPress 6.3 release come August 8th, 2023. 

Rely on revisions for templates, template parts, and styles

While the undo and redo buttons have a role to play, having access to full revision history allows for a much greater understanding of changes, their impact, and actions one can take. Revisions have been added across the Site Editor to templates, template parts, and style changes providing an across the board safety net for changes you’d like to make (or undo). For styles, changes are shown in a timeline alongside a reference for who made the changes.

This work has addressed a longstanding piece of feedback from the FSE Outreach program, mostly recently shared in the following call for testing:

With all the various changes I’ve done, I couldn’t help but notice the need of “what if” and wanted to use a previous style, but because I refreshed the editor, I couldn’t use a previous setup so I really felt the need of a revision system.

@jordesign in this comment.

Expect more to come here when phase 3 work gets underway to improve the revision experience, including making them more visual. Of note, a bug fix backport will land in Gutenberg 15.9 to resolve a key pain point in the current experience.

Preview block themes before switching

A while back, @poena shared the following in an FSE Outreach Program exploration that imagined the future of block theme switching:

When I choose a theme to switch to, before I activate it, I can preview it in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. But it is difficult to view other pages than the frontpage that way. I feel like the “live preview” for block themes should be in the site editor, not the customizer, and that the flow should be the same; I should be able to “publish” to activate the new theme.

That vision has been reached with a theme preview option built into the Site Editor itself, allowing folks to check out block themes before activating, resolving a major blockerblocker A bug which is so severe that it blocks a release. to exploring block themes in general. While this is currently listed as an experiment to enable under Gutenberg > Experiments, when stabilized it should have a far reaching effect with folks being able to explore block themes and get an early taste of the Site Editor experience all in one. 

Please help test and give feedback as work continues to refine this experience. The current FSE Outreach Program Rapid Revamp call for testing explores this option and is a great place to offer relevant feedback.

Enjoy loading state improvements

While 6.2 brought improvements to the loading state, the work hasn’t finished with a recent update greatly improving the editor canvas loading experience. While subtle to some, these improvements help make entering the Site Editor less jarring and more cohesive, showing a fully loaded state before you start interacting. Below are before and after visuals to demonstrate the changes and the smoother experience that exists today as of Gutenberg 15.8. 

Video of prior experience:

Video of updated experience: 

Alongside the improvements to the loading state, additional animation related changes and general fixes, like removing a screen flash upon deleting templates and template parts, offer a refined, calmer workflow. 

Stay tuned for more as work continues for the WordPress 6.3 release