“What’s new in Gutenberg…” posts (labeled with the #gutenberg-new tag) are posted following every Gutenberg release on a biweekly basis, discovering new features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.

---

Gutenberg 12.7 has been released and is available for download!

Table of Contents

• Improving the Patterns experience
• List View Improvements
• Changes to frontend HTML when using layouts and image blocks
• Other notable highlights
• Props to new contributors
• Changelog
• Performance Benchmark

---

Improving the Patterns experience

Gutenberg 12.7 includes new features that will make working with patterns even easier! 

Make Patterns easier to discover

The block quick inserter now prioritizes patterns instead of blocks when all the following conditions are met:

• We are editing a template, either on site editor or post editor.
• The inserter is at the root level.
• The content being inserted is between other blocks (neither as the first block nor as the last one).

The template part (e.g. Header / Footer / Sidebar) creation flow will now also show patterns, making it easier to create more advanced compositions than adding blocks one by one.

Work will continue improving the logic that decides to show a pattern or a block, so feel free to share your feedback in the Gutenberg repository!

Allow themes to highlight Patterns

Themes can now highlight specific patterns to their users!

Recommending patterns to the users is as easy as adding a pattern field to the theme.json file. When handling patterns from the Pattern Directory, you can find their slugs on the URL when browsing them individually.

List View Improvements

Once more, the List View keeps getting better! Gutenberg 12.7 includes a few iterative improvements to improve the block editor experience.

You will be able to select multiple blocks at the same level, and then drag and drop them to move them around. To select multiple blocks, the keyboard shortcuts are:

• Shift Key + Click 
• Shift Key + Up/Down arrow.

Also, when you click on a block in the editor, the List View will expand to show the selected block for better visibility of the selection’s context within the block tree.

Changes to frontend HTML when using layouts and image blocks

In order to add consistency to the block editor, we are removing some wrappers divs that were generated on the editor in order to add alignment to some blocks.

Keep in note that this div cleaning can affect themes that support layout and many blocks that have this alignment support. Many contributors helped with testing, but theme developers are encouraged to check their themes and leave any feedback they may encounter.

Other notable highlights

Gutenberg 12.7 provides a few other iterative enhancements worth highlighting.

• Now you can add border styles to the Columns blocks and margin to Group blocks.

• To avoid backward compatibility issues reported in WordPress 5.9, the automatic anchor generation for headings introduced in Gutengerg 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;
	}
);

Props to new contributors

Recognizing and celebrating contributors, both and new, becomes more efficient and effective! A contributor props list has been automated when creating the release and added to the changelog! Any user who merges a PR during a Gutenberg release cycle will be aknowledged.

In Gutenberg 12.7, up to 52 contributors merged PRs of any kind, including 6 new contributors. Props to @Alex-Kostov, @HasnainAshfaq, @mjstoney, @razwan, @sanzeeb3, and @Sisanu for their first PR! 🎉

Changelog

Enhancements

Block Library

• Columns: Add border support. (31737)
• Group Blocks: Add margin support (top/bottom). (37344)
• Comment Template: Improve comment pagination with nested replies. (38187)
• Comments Query Loop: Show placeholder comments on site editor. (38072)
• Navigation: Try unifying submenu arrow positioning. (37003)
• Submenu: Add revert button. (38203)

Components

• FocalPointPicker: Allow updating its value while dragging. (38247)
• General Interface: Simplify site icon animation on hover. (38783)
• Navigator: Add NavigatorButton and NavigatorBackButton components. (38634)
• Type Refactor: Use forwardedRef type for all forwarded refs in wordpress/components. (38948)

Block Editor

• Block Editor: Add settings to enable/disable auto anchor generation. (38780)
• Block Transforms: Keep additional HTML classes during a block transform. (38964)
• LineHeightControl: Enhance interactions by migrating internals to NumberControl on Style options. (37160)
• List View: Add multi-select behaviour for blocks when shift key is selected. (38314)
• List View: Expand block list tree on selection. (35817)

Styles

• Add initial version of the style engine. (37978)
• Style engine: Refine Box type. (38894)

Post Editor

• Enable tooltip for the main dashboard button. (38790)

Themes

• Lowered specificity of alignment rules for support layout so wide alignments work. (38947)
• Remove data-align divs for themes that support layout. (38613)
• Remove the div wrapper from the aligned image blocks. (38657)

Patterns

• Quick Inserter: Prioritize showing patterns instead of blocks. (38709)
• Allow pattern registration from directory with theme.json. (38323)
• Template Parts: Show existing template parts and a list of block patterns at creation flow. (38814)

Bug Fixes

Block Library

• Block Transforms: Fix Image and Video to Cover block transformations. (38959)
• Cover: Fix gradient overlay (remove black background color) (38765)
• File: Fix PDF file block full content fixture. (38725)
• Latest Posts: Add missing class to post title. (38740)
• Logo: Avoid division by zero in site logo. (38808)
• Post navigation link: Use correct closing tag. (38976)
• Query Loop: Display nothing if we want only sticky posts but no stickies exist. (38909)
• Template Parts: Decode entities in labels. (38805)
• Social Links: Only apply the social links block migration if there’s a need for a migration. (38561)

Block Editor

• Backport from core: Global styles duotone not rendering in post editor. (38897)
• Block Editor: insertDefaultBlock should not trigger an error if the default block is not registered. (38886)
• Inserter: Fix focus loss after closing patterns explorer from modal. (38884)
• Multi-selection: avoid RichText instances becoming disabled after multi selection. (38821)
• Rehabilitate drag gesture in LineHeightControl. (38930)
• RichText: Fix wrong block merging when pressing delete consecutively. (38991)

Site Editor

• Add site editor initial redirect error handling. (38655)
• Add template check to ‘setPage’ action. (38656)
• Adds additional check to guard against incompete presets. (38902)
• Limit template part slugs to Latin chars. (38695)
• Template List: Decode entities in record titles. (38863)

Styles

• Allow child classes to be called instead of the parents. (38857)
• Backport: Allow for classic themes using default presets. (38701)
• Fix global styles loading logic. (38745)

Components

• Fix unexpected dragging triggered on spinner buttons on hover in Safari. (38840)
• Show tooltip on toggle custom size in FontSizePicker. (38985)

List View

• Fix error triggering after duplicating a block making it unselectable. (38760)
• Fix UI broken due to error when deleting first item in canvas. (38775)

CSS & Styling

• Fix button width on Widgets Editor. (38846)
• Load block support styles in the <head> for block themes. (38750)
• Reduce the margin of the block toolbar. (38746)

Block Directory

• Fix the block activation when metadata registered on server. (38697)

Colors

• Strip double # char on HexInput. (38335)

Packages

• Core Data: CanUser resolver always use the OPTIONS method. (38901)
• Dom: Avoid RangeError in findPrevious method. (38961)

Apps

• Fix Custom Palette colors and support multiple origins and theme cache issues. (38417)

Accessibility

• Adds aria-label to the search button, as accessibility enhancement. (38136)
• Avoid duplicate labels for “Save Draft” and “Save as pending” buttons. (38776)
• RichText: Reverse disableLineBreaks to determine aria-multiline state. (38652)
• TreeGrid: Add Home/End keys to jump to start/end of grid. (38679)

Performance

CSS & Styling

• Use wp_unique_id() instead of uniqid() to generate CSS class names. (38891)

Experiments

New APIs in Core Data

• Propose useEntityRecords (experimental). (38782)
• UseEntityRecord (experimental). (38522)

Documentation

Handbook

• Add documentation for deprecating styles. (38540)
• Add documentation about the patterns field of theme.json. (38700)
• Add more info about contextual patterns and pattern transformations. (38809)
• Add semantic patterns documentation. (38778)
• Clarify deprecations documentation. (38683)
• Fix hyperlink in block Metadata page. (38941)
• Improve point release documentation to include even more detail. (38631)
• Increase support for experimental-link-color until WordPress 5.9 is the minimum version. (38711)
• Group: Update block supports. (38962)
• Links changed for Developer.wordpress.org on block editor section. (38841)
• Removing comma so that the code snippet of theme.json represents standard JSON. (38938)
• theme.json Update version section docs to v2 (38937)
• Update Getting Started with more granular options. (38682)

Block Library

• Add instructions on how to add new core blocks to block-library. (38868)

Components

• FormFileUpload: Add Storybook stories. (38734)
• Storybook: Move experimental components to correct section. (38640)
• Storybook: Remove story for Typography Panel. (38867)
• wp-env: Document some caveats when using xdebug with VSCode. (38882)

Code Quality

Block Library

• Cover: Remove unnecessary temporaryMinHeight. (38887)
• Cover block: Update deprecated gradient fixture. (38728)
• Gallery: Register gallery in block_names dynamic block array. (38689)
• Navigation: Improve consistency of block hook. (38705)
• Navigation: Select dropdown encapsulation and further consolidation. (38627)
• Navigation: Update wp_kses usage to be consistent (use wp_kses_post). (38732)
• Post Navigation Link: Prefer kses to blanket esc_html on label. (38696)
• Remove data-controls mock from Image block RN tests. (38852)

Components

• Block Supports: Improve image block regex. (38742)
• Block Supports: Load Styles on <head> backport to core. (38880)
• Context: Omit as prop in types. (38844)
• Core Data: Remove fallback for OPTIONS response headers in canUser resolver. (38881)
• Core Data: TypeScript definitions for entity records. (38666)
• Data: Normalize selector args when handling metadata selectors/actions. (38945)
• Edit Site: Migrate store to thunks. (38812)
• Icons: Deprecate duplicate icons. (38849)
• PostTrash: Call trashPost action with no arguments, rewrite to hooks. (38615)

npm Packages

• Packages: Automate cherry-picking to trunk commits created during publishing. (38977)
• Packages: Ensure that private packages do not update when publishing to npm. (38946)

Tools

Testing

• Add end-to-end test for merging paragraphs and soft line break afterwards. (39009)
• Post Visibility end-to-end test: Improve XPath selector to avoid reliance on DOM structure. (38717)
• Replace no-shadow eslint rule with @typescript-eslint/no-shadow. (38665)
• Remove client ID from fixtures. (38685)
• Remove originalContent from fixtures. (38638)
• RichText: Add test for merging and then splitting paragraphs. (39007)
• Site Editor Tests: Use REST API to delete templates and template parts. (38524)
• TreeGrid: Add tests for callback functions. (38942)

Build Tooling

• Build separate full contributors list. (38777)
• Bump @svgr/webpack from ^5.5.0 to ^6.2.1 (38866)
• Generate full release contributors list in release changelog. (38704)
• Generate sourcemap for production plugin builds. (33718)
• Mobile: Improve npm clean scripts for react-native-editor. (38752)
• PWA: Fix URL query param issue. (38755)
• Scripts: Do not exit build when no entry found in src directory. (38737)
• Scripts: Fix Entry points are not detected in Windows OS. (38781)
• Scripts: Copy PHP files from src into build. (38715)

Components

• BaseControl: Refactor stories to use Controls. (38741)
• Migrate Post Template Delete button from confirm() to ConfirmDialog. (37535)
• Migrate the Post ‘Switch to draft’ button to ConfirmDialog component. (37491)
• Storybook: Ensure rerender for RTL switcher. (38963)

Post Editor

• Edit Post: Migrate store actions to thunks. (36551)
• Editor store: Remove a noop SETUP_EDITOR action. (38622)
• Migrate editor store to thunks. (35929)

Styles

• Allow to extend the WP_Theme_JSON_Gutenberg class. (38671)
• Global Styles: Fix PHP warning in WP_REST_Global_Styles_Controller. (38888)
• Update Global Styles code to continue adding settings & styles. (38883)

Block Library

• Change Gallery block code ownership. (38722)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 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.

Post Editor

Version	Time to first block	Keypress event
Gutenberg 12.7	5.0 s	41 ms
Gutenberg 12.6	5.1 s	40 ms
WordPress 5.9	5.2 s	40 ms

Site Editor

Version	Time to first block	Keypress event
Gutenberg 12.7	4.7 s	30 ms
Gutenberg 12.6	5.2 s	29 ms
WordPress 5.9	5.2 s	29 ms

Kudos to all the contributors that helped with the release! 👏

Thanks to @javiarce for the visual assets!

Thanks to @matveb @priethor and @santosguillamot for proofreading.