WordPress Releases Gutenberg 13.7 – Focus on Workflow and Better UI

WordPress has released Gutenberg 13.7, which includes many improved workflows, more granular control throughout the site editor, and numerous improvements to the user interface.

As with any other version of WordPress, this is a cumulative update, not a brand new experience.

That said, the editing experience should be more intuitive and natural.

Block locking provides more fine-grained control

13.7 contains further improvements to the ability to lock block elements to prevent them from changing.

The latest improvement is that users can now apply locking to block elements contained within a locked block.

By selecting a toggle, the locking function applied to a block can be inherited by its containing block.

Block lock menu

Block lock function

Selecting to lock a block produces another menu that provides options for finer locking control of the blocks contained within the locked block.

Gutenberg block lock modal

Gutenberg block lock modal

Block lock modal close-up

Close-up view of block lock modal

Close-up view of block lock modal

Improved popup modal menu

Pop-up menus, called Modals, can be generated at the top of the page being worked on, from which various changes can be made, such as updating preferences.

What this change does is apply blur to documents below the menu.

The page below the blur mode popup menu improves focus.

Concerns have been raised about this new feature (though it’s still in development) that users might lose context of what’s being changed due to ambiguity.

They suggest that in some cases blurring the background removes the context by preventing the user from seeing what is being changed.

The person wrote:

“I just ran into a potential usability issue where elements outside the modal are contextually relevant to the modal’s content.

For example, if you adjust an item in the list view to apply or remove a lock, you will no longer be able to see the (specific) block you highlighted with the modal open…”

The solution to this problem is the observation that modal (popup) menus are not the best user interface if you need to preserve context. This means that ambiguity won’t be a problem, since modals are not used in cases where the user needs to refer to the underlying document.

“…generally speaking, if you need to observe both the modal content and the rest of the UI, then a modal may not be the best choice.”

Blur example behind modal

New modal screenshot

New modal screenshot

Formwork system provides more design control

This change enables users to create more templates specific to individual categories, tags, pages, and custom post types.

According to WordPress:

“For example, you could use a different template for all your personal blog posts, a second for all your developer-related blog posts, and a third for all your travel posts.

If your site has other post types registered, such as books or products, your editor instance will automatically list them in the select box of the “Add New Template” button. “

This is a welcome addition because it removes an obvious limitation and expands the ability to make better websites when using the Gutenberg full site editor.

Workflow Improvements

There are other improvements aimed at improving and simplifying the workflow by providing additional options.

One of these changes is the ability to select featured images from media placeholders instead of uploading or selecting from the media library.

Screenshot of Featured Improved Modal

Featured Image Modal Screenshot

Featured Image Modal Screenshot

The reason for this improvement is documented in the pull request:

“This PR allows support for media blocks, giving users the option to start with a featured image in placeholder state.

why
To avoid having to select other media to get options, and because featured images are now hidden behind the “Add Media” block control in the media replacement flow. “

NEW: Reading Time

The ability to check how long it takes to read a document is also a new feature added.

This new feature has been added to the information bar of the post editor screen and currently provides feedback on the number of words, characters, heading elements used, paragraphs and blocks.

The time it takes for the average reader to read the document is very useful information.

Screenshot of update information bar

Screenshot of information bar reading time

Screenshot of information bar reading time

Sidebar settings panel UI improvements

Another example of an improved user interface is in the sidebar settings panel, which has been updated to make it easier to use.

The layout of the settings panel is more intuitive, making it easier to navigate and choose from menu options.

Before and after screenshots

Screenshots of the improved user interface

Screenshots of the improved user interface

WordPress describes the improved interface:

“The result is a cleaner, more organized display that should help you more easily access all the important information about your post/page at a glance.”

so many improvements

The new Gutenberg 13.7 is a cumulative update, not a radical change from the previous version. These improvements may not come overnight, but they will contribute to a more natural editing experience.

This update touches almost every area of ​​the Gutenberg Editor, from new components like the color picker, improved document settings, a better full-site editing experience, and tons of bug fixes.

Citation

Read the full WordPress announcement

What’s new in Gutenberg 13.7?

Read the block lock pull request

Block locking: add “Apply to inner blocks” option #41876

Background blur on modal

Update modal design #40781

Start with a Featured Image Pull Request

Start with featured images in media placeholders #41722

Featured Image by Shutterstock/Vulp
Edited by the author

window.addEventListener( ‘load’, function() {
setTimeout(function(){ striggerEvent( ‘load2’ ); }, 2000);
});

window.addEventListener( ‘load2’, function() {

if( sopp != ‘yes’ && addtl_consent != ‘1~’ && !ss_u ){

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version=’2.0′;
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window,document,’script’,
‘https://connect.facebook.net/en_US/fbevents.js’);

if( typeof sopp !== “undefined” && sopp === ‘yes’ ){
fbq(‘dataProcessingOptions’, [‘LDU’], 1, 1000);
}else{
fbq(‘dataProcessingOptions’, []);
}

fbq(‘init’, ‘1321385257908563’);

fbq(‘track’, ‘PageView’);

fbq(‘trackSingle’, ‘1321385257908563’, ‘ViewContent’, {
content_name: ‘gutenberg-13-7’,
content_category: ‘news wp’
});
}
});

Leave a Reply

Your email address will not be published. Required fields are marked *