Gutenberg WordPress Editor Update – Gutenberg 7.1

WHY GUTENBERG MATTERS AT ALL

First, before going into any details on this update, we’d like to cover why these updates matter, and what is Gutenberg anyway.

In short, the new way of editing using online editors (inside CMSs, like WordPress) is to use “Block” technology.  For now, let’s just say that blocks make life easier.

HERE is a really cool demo of Gutenberg: https://wordpress.org/gutenberg, which you can click around in and try it out yourself.

Please read on to find out more…

A BIT ABOUT GUTENBERG

In the 15th century, the printing press was revolutionized using what’s called “movable type”.  The man that did this was none other than a fellow named Johannes Gutenberg.  A bloke harkening us from a Europe, soon-to-be transformed.  Since after this time the world has been morphed with the compounding effects of information and idea sharing (whether good or bad).  Innovation and progress have taken us far.  It seems fitting that WordPress decided to name their next generation editor after the man that revolutionized content sharing.

Like Gutenberg’s famous invention, the new WordPress editor also uses the concept of movable blocks.  With this transition to the use of blocks, WordPress brings into its core a more flexible, freeing page design  manager.  Up until now, complete page component and layout management tools have been available as plugins only.  And, recently the Gutenberg editor itself as a plugin.  However, with the release of WordPress 5.0 the Gutenberg editor is now the default WordPress page content editor.

ABOUT THOSE BLOCKS

The Gutenberg CMS Content Editor contains components and content sections in the form of “blocks.”  hence, creating a more visual representation of dynamic page content.  The blocks can be anything from text, media (images, video), buttons, widgets, social media pulls, tables and more.  Developers can also create additional custom blocks by extending the Gutenberg block system.  And of course there are tons of add-on plugins for Gutenberg as well.  In short, a Gutenberg post is essentially a series of blocks.

EDITING IN GENERAL

When it comes to users needing to update pages and posts in WordPress (whether it be admins, publisher or clients teams), it is critical to have an extremely excellent, beyond-awesome tool, …in our opinion.  You do not want to waste time using an ineffective WYSIWYG** editor for editing content on your site, right? 
**WYSIWYG is short for What-You-See-Is-What-You-Get.

Here at Seattle New Media we prefer WPBakery (formerly Visual Composer Website Builder) for our editing needs.  This is partly due to the fact that the latest version of Gutenberg actually broke some of our sites ability to even using Gutenberg or the older Classic Editor.

Back to the idea of editors in general… Again, our preference here is WPBakery for its near-perfect performance and functionality.  Yes, they have a funny name, but it’s one of single best WYSIWYG editors on the market today for WordPress content editing.  Runner-ups (other than maybe if Gutenberg is more stable now) are Elementor, Beaver Builder, Divi, and the newly updated Guttenberg editor.

OK, SO NOW ABOUT THIS UPDATE

Gutenberg 7.1 is a big release with 161 separate code contributions from various developers.

This release contains many rewrites to the code base to make future changes possible.  By restructuring existing computer code—changing the factoring—without changing its external behavior it is intended to improve non-function-specific attributes of the software.  This way it is possible to use new hooks that are available, or meet other future needs.  This was very important.

This release tries to make block development easier using features like color picking UI easier.  To do that the release expands the a “color hook” (useColor) to have new functionalities like color contrast checking (this is to meet Web Content Accessibility Guideline (WCAG) standards) and default color detection.

There was progress on the FSE (full site editing) work, especially in regards to template part blocks.

Gutenberg 7.1 brings a new welcome UI for new users:

This release also Introduces table captions and implements a UI mechanism to toggle between edit and select modes:

The new fixed-mobile toolbar experience:

The improved multi-block selection experience:

 

Those are the last of the enhancements to note here.  To see more (not-so-interesting) improvements, check out wordpress.org.

More details from wordpress.org  (see tabs below)

7.1 Features

Enhancements

Documentation

Bug Fixes

APIs

Experiments

Performance

 

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

Version Loading Time KeyPress event (typing)
Gutenberg 7.1.0 7.45s 88.56ms
Gutenberg 7.0.0 6.84s 94ms
WordPress 5.3 6.33s 75.19ms

 

Miscellaneous