Gutenberg receives another update with version 12.7. With peeled eyes, especially after the launch of WordPress version 5.9 with much-awaited full-site editing, block themes, and much more.
Gutenberg 12.7 offers intuitive and necessary enhancements that will make working with patterns even easier! Let’s see what version 12.7 of Gutenberg holds for us.
Select Multiple Blocks in List View. 📜
The list view keeps getting interesting updates. Now there is an option to select multiple blocks. You can do this by holding the shift key and clicking on multiple blocks to select them. One can also use the up and down arrows ↕️ to select multiple blocks.
All this goes on to increase the block editor experience, and provide a more effective way to drag and drop blocks, change multiple blocks into a group or a list, etc.
Block Transformations Maintain Classes
Gutenberg version 12.6 got improved and enhanced block transform features. This includes maintaining font size and color while selecting between different blocks like list, quote, etc.
Gutenberg 12.7 adds custom CSS classes to this, allowing you to maintain custom block styles.
Group Border Control
Who doesn’t like some customization? Well, now we have a solution with one of the most popular blocks – Group. You can have border control, which was earlier done by a spacer, but only if it didn’t just increase the space between blocks.
Although border support is still missing for many other blocks like a paragraph, etc. Users can always wrap them within a Group and modify it for now.
Bye-Bye Alignment Wrappers! 👋
Gutenberg 12.7 removes the extra <div> wrapper for wide and full-width blocks in the editor, for themes that support the layout feature. This was necessary as it created a tussle between the back and front-end designs. This <div> also barred theme authors from styling themes consistently.
This brings a new dawn for designers, allowing them to get an immersive designing experience, and move past one of the major roadblocks!
Themes Can Register Patterns from the Directory
Gutenberg 12.7 allows theme authors to load patterns from the WordPress.org pattern directory. They appear in the block inserter under patterns, as shown below:
These patterns appear in the order of registration, and featured patterns from WordPress.org get higher on the list. This is a great first step to allow theme authors to provide feedback and contribute to creating a rock-solid foundation.
Broken Images 🩹
WordPress site editor with stretched images does not conform to its container. Image from a pattern is not responsive.
The default block library stylesheet CSS now only targets <img> tags if they include wp-image- in a class. This is a reason for concern in some block patterns and may be the case for other image instances as the previous selector was overly broad and broke images in third-party plugins.
Tip: Add CSS for images:
img {
max-width: 100%;
height: auto;
}Changes to Frontend HTML when using Layouts and Image Blocks
To get consistency with the block editor, some wrappers divs were generated on the editor to add alignment to some blocks.
Note: This div cleaning can affect themes that support the layout and many blocks that use this alignment support. Although many contributors have helped with testing, theme developers are encouraged to check their themes and report any feedback or issues.
Anchor Generation for Headings
The anchor generation for headings, now comes disabled by default. Earlier anchors were generated for headings by default.
To avoid backward compatibility issues reported in WordPress 5.9, the automatic anchor generation for headings introduced in Gutenberg 11.8 is now opt-in. To enable this feature, simply add:
add_filter(
'block_editor_settings_all',
static function( $settings ) {
$settings['__experimentalGenerateAnchors'] = true;
return $settings;
}
);Conclusion
The latest update also includes early work for a new style engine. The Columns block now supports border width, style, color, and radius options. To get the complete list of changes, read: Changelog.
The pedal is on the metal, and Gutenberg is going all out to rectify issues and push new and innovative features, to provide a seamless editor experience.
There are some interesting developments underway, sign up to get the latest updates, and exclusive resources to All Thing Everything WordPress.