“What’s new in 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. https://wordpress.org/gutenberg/…” posts (labeled with the #gutenberg-new 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 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.

---

The Gutenberg 13.6 release comes with four major highlighted features, many smaller enhancements, a number of accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) improvements, and twenty-six bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes. To make developing with Gutenberg easier, a number of refactors to the codebase occurred for typescript rewrites. Work around improving performance continues with many changes shipped in this release expected to lead to noticeable results when the broader efforts are completed in future releases. Finally, the Style Engine work has progressed with the option for extenders to use these features with the correct theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. shape for now and more options in the Styles UIUI User interface planned for future releases.

Table of Contents

• Provide patterns to select from when creating any post type
• Create more template types in the editor
• Other Notable Highlights
• Explore the expanding theme.json engine
• Changelog
• Contributor Props

Provide patterns to select from when creating any post type

In WordPress 6.0, an APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. was introduced that allows patterns to appear in a modal every time a user creates a new page so that, instead of starting from scratch, a user starts with content to work from. For example, this means a user could choose between patterns for a contact page or an about page and then just fill in the details that are unique to their site.

Thanks to feedback from the community, this release expands this feature to allow the same modal to be presented to a user on other post types. For example, if a user has a book post type, they could now be presented with different ways to show the book based on patterns in a modal (book cover on the left, description on the right, book cover in the center with description below, etc).

In order to take advantage of this new API powering the current experience, you need to include core/post-content in the blockTypes for your pattern and include the postTypes where you want the modal to show in the postTypes array. If postTypes are not provided the modal just appears on the page.

Create more template types in the editor

Expanding the types of templates that can be created from within the Site Editor continues to be a high priority to open up more creative options for folks to control every aspect of their site. With Gutenberg 13.6, it’s now possible to create a template for all of the posts of a specific post type (ex: single-$postType) and, to get more granular, a template for a specific post (ex: single-$postSlug). This is all handled with a very simple UI and doesn’t require needing to know post types identifiers or post slugs, making it easy to work with.

Other Notable Highlights

Gutenberg 13.6 includes several, more general enhancements and accessibility improvements.

Clearer layout controls

For example, the “Inherit Default Layout” controls have been updated to a more understandable toggle to help users and themers alike make the design decisions they want:

More keyboard shortcuts

Two keyboard shortcuts (Strikethrough or Inline Code) have been added and a previously missing keyboard shortcut to link to a post is now properly documented in the shortcuts modal:

Simplified post scheduler

The post scheduler UI has been updated to use “Today” and “Tomorrow” when possible to make the experience more readily understandable at a glance.

New template selection UI

Previously, the template selection options took up a lot of space in the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme. to allow you to pick and choose what you wanted. With Gutenberg 13.6, this experience has switched to being a popover allowing it to take up far less space and blend in better experience-wise with other post details.

Explore the expanding theme.json engine

Gutenberg 13.6 builds on previous work to expand theme.json to allow you to create a cohesive design across blocks by allowing you to change the styles of all buttons. This relies on targeting elements which are pieces of the UI that appear in multiple blocks and whose style you should be able to change across all implementations. With this work, it means you can control a button’s style across your site in everything from the general Buttons 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. to the Search block.

For anyone building third-party blocks with buttons, this same feature can be used to interact with your block assuming the block you create provides the correct markup. Keep in mind that there’s a difference between changing the styles of an individual block on a page, which will just impact that block, and changing the style at the element level, which impacts all button blocks.

Alongside the button element, captions have also been included so you can control the style of captions across all blocks with captions, from an Image block to a Video block. That element controls the styles of captions across all the blocks. For now, captions can only be controlled using theme.json but, in the future, there will be a way to manage this in the UI.

Keep in mind that this work around targeting elements will be fairly contained as it only impacts items that can’t be codified as blocks (links, captions, buttons, etc). Because these new features are in the early stages of development, please test your themes and blocks and report any issues you might find. It all helps as development continues.

Accessibility continues to be a focus and this release has some improvements to focus management and adding in previously missing aria labels.

Changelog

Enhancements

UI

• Increase fade intensity during spotlight mode. (40454)
• Improvements to “inherit default layout” toggle. (41893)
• Make it easier to select “Edit visually” when in “Edit as HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (41516)
• Abbreviate post schedule date when possible. (41738)

Global Styles

• Add support for caption elements. (41140)
• Add UI for button elements (41659) and fix the button element selectors. (41822)
• Support pseudo selectors on elements in theme json. (41786)
• Add the ability to unset duotone in themes with default duotone set. (39564)
• Allow references to values in other locations in the tree. (41696)
• Lower specificity of elements block css. (41931)
• Add border to frontend style engine. (41803)
• Add schema support for styles.filter.duotone. (41920)
• Add an API to make it easier to get class names. (41753)
• Update Theme JSON $schema to account for pseudo-selector support. (41936)

Patterns

• Add the ability to use creation patterns for other post types besides page. (41791)

Block Library

• Columns: Change the title of one third/two thirds column variation to 66/33. (41734)
• Navigation:
  • Adjust mobile close button position when adminadmin (and super admin) bar is visible. (41664)
  • Make additional top margin specific to open modal. (41949)
  • Move block CSSCSS Cascading Style Sheets. to JSON. (41898)
• Post Comments Form: Add button that enables commenting to warning. (41603)
• Cover:
  • Strip whitespaces in render_block_core_cover. (40859)
  • Implement axial top bottom margin. (41963)
• Image: Set Default state to media library for library button in image block. (41678)
• Classic: Remove CSS properties with vendor prefixes. (41995)
• Embed: Add Pocket Casts embed block variation. (41006)

Site and Template Editor

• Turn Template settings panel into a Template popover. (41925)
• Expand the template types that can be added – single custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. and specific posts templates. (41189)
• Add clear customizations to the template card. (41743)

Accessibility

• Make the site editor headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes. toolbar use the ARIA toolbar pattern. (41902)
• Allow defining an aria-label in group blocks. (41744)
• Add keyboard shortcut for Strikethrough (41910) and inline code (41816) in the format library.
• Navigation submenus: Allow Escape key to close the submenu and focus trigger. (41774)
• Show the link completer shortcut on the help modals. (41872)

Bug Fixes

• Fix incorrect ‘_n’ usage in the block Editor. (41886)
• BlockPreview: Fix ‘Infinity’ is invalidinvalid A resolution on the bug tracker (and generally common in software development, sometimes also notabug) that indicates the ticket is not a bug, is a support request, or is generally invalid. ‘minHeight’ value warning. (41766)
• Compare against default categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. in the settings instead of hardcoded slug. (41956)
• Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher 8.1 deprecation in the gallery block. (41193)
• Add ‘application/zip’ accept header. (41602)
• [Block Editor]: Fix content loss from replaceInnerBlocks with controlled blocks. (41948)
• Fix action button spacing on the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. editor. (41915)
• Render duotone presets in pattern preview. (41249)

Block Library

• List v2:
  • Fix impossible to outdent multiple list items. (41713)
  • Set selection to created block after split with Enter. (41899)
  • Transforms don’t take into account nested blocks. (41741)
• Comments: Fix issue with custom font sizes and links color. (41627)
• Navigation: Fix permissions warning. (41862)
• Post Template: Ensure layout classnames are not attached to inner li elements. (41827)
• Image block: Preserve alt text from media library. (41839)
• Search block: Remove double spaces. (41746)
• Fix issue of background min-height. (41693)
• Only use the post-title if the featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. is a link. (41775)
• Always load block CSS from __experimentalStyle on global styles output. (42005)

Components

• Border Controls/Color Palette: Ensure popovers remain within small viewports. (41930)
• ColorPicker: Remove horizontal scrollbar when using HSL or RGB color input types. (41646)
• DatePicker: Respect site’s ‘Week Starts On’ setting. (41648)
• BlockSettingsMenuControls: Fix ‘showLockButton’ check. (41788)
• Color Controls: Allow popovers to remain within smaller viewports. (41929)

REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.

• Fix retrieving autosaves when using a custom rest_namespace. (41542)
• Remove hardcoded references to rest namespace. (41950), (41951).

Performance

• Continued the work refactor away from lodash usages in order to reduce the build size.
• Remove Unrequired regex search on duotone supports. (42020)
• Ensure only the main query is modified when resolving template for new posts. (40799)
• Avoid calculating HTML block styles in useSelect. (42026)
• Fix performance regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5. pasting due to removeWindowsFragments. (41907)

Documentation

• Add an explanation of how to set up the environment to run the performance test. (41883)
• Add local dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include a description of the change, the decision that led to this change, and a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. to aid when doing work on schemas. (41968)
• Fix Minor documentation inconsistencies on block attributes. (41468)
• Add an example for the end-to-end tests snapshot update. (41999)
• Fix documentation of Flex component to no longer be experimental. (41926)
• Fix link to “Good First Review” issues in README. (41754)
• Fix link to Flex component in FlexItem Readme. (41928)
• Fix some small inconsistencies in the block editor documentation. (41861)
• Update terminology and documentation of Style engine. (41964)
• Update skip serialization documentation to reflect ability to target specific properties. (41277)
• Add supports to basic sample code documentation. (41589)
• Update nested-blocks-inner-blocks.md. (41962)
• Document fontFace and it’s values in theme.json schema for the Webfonts API. (41844)

Code Quality

• Fix: Double condition on or on block editor reducer. (42019)
• Remove WP 6.0 WP_REST_Block_Patterns_Controller class. (41914)
• Remove leftovers of legacy query-loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. block. (41891)
• Remove startBlankComponent from __experimentalBlockPatternSetup. (41721)
• Move setting registration into WP 6.0 compat. (41985)
• Add __experimentalUseResourcePermissions to make code simpler. (38785)
  ))
• Remove Unnecessary ‘&& check’ as ‘optional chaining (authorDetails?.avatar_urls) check’ is already used in the AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. Block. (41779)
• Refactor NavigationItem component to pass exhaustive-deps. (41639)
• Move generation of layout util classes to existing method to avoid adding global public method WP. (41885)

Tooling

Static analysis

• ESLint: Enable ignoreRestSiblings option for no-unused-vars rule. (41897)
• Fix a prettier error. (41916)
• SerializeBlock fix ESLint warning. (41763)

Testing

• Test migrations toPlaywright:
  • spacer (41590)
  • table block (41945)
  • preview end-to-end tests (41380)
  • style variations (41427)
  • Button Block (41494)
  • RTL test cases (41495)
• InputControl: Add tests and update to use @testing-library/user-event. (41421)
• Skip flaky navigation end-to-end test. (41829)
• Fix the image rotating flaky test. (41808)

Storybook

• Add 40px size variant to NumberControl. (41997)
• Convert knobs to controls in NumberControl. (41849)
• Convert knobs to controls in the spacer. (41851)

IDEIDE Integrated Development Environment. A software package that provides a full suite of functionality to software developers/programmers. Normally an IDE includes a source code editor, code-build tools and debugging functionality.’s integrations

• Autocompletion support for useSelect (via jsDoc annotations). (41596)

Migrations to typescript

• ColorIndicator (41587),
• FormToggle (41729)
• Spinner(41540)
• Truncate (41697)
• VStack (41850)
• BorderControl (41843)
• Heading (41921)

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 the first block	KeyPress Event (typing)
Gutenberg 13.6	4.51s	41.02ms
Gutenberg 13.5	4.34s	38.81ms
WordPress 6.0	4.66s	37.70ms

Site Editor

Version	Time to the first block	KeyPress Event (typing)
Gutenberg 13.6	5.22s	32.30 ms
Gutenberg 13.5	5.05s	32.59 ms
WordPress 6.0	4.82s	31.07 ms

Contributor Props

The following PRs were merged by first-time contributors – thank you and congrats!

• @adambasa-dp: #30930 – Make it easier to select “Edit visually” when in “Edit as HTML. (41516)
• @arturgrabo: Change case. (41792)
• @hz-tyfoon: Block Library (Avatar Block): Remove Unnecessary ‘&& check’ as ‘optional chaining (authorDetails?.avatar_urls) check’ is already used. (41779)
• @inc2734: Add supports to basic sample code. (41589)
• @kbrown9: [RN Mobile] RichText: Return early when content has changed in onSelectionChangeFromAztec. (41682)
• @mcliwanow: Fix link to “Good First Review” issues in README. (41754)
• @navigatrum: Strip whitespaces in render_block_core_cover. (40859)
• @pavanpatil1: Migrate rtl test case to it’s playwright version. (41495)
• @petitphp: #40675: Ensure only the main query is modified when resolving template for new posts. (40799)
• @phcp: Add Pocket Casts embed block variation. (41006)
• @vasartam: Block attributes docs: Minor documentation inconsistencies. (41468)
• @xylocone: Update nested-blocks-inner-blocks.md. (41962)
• @zaerl: Fix: Add ‘application/zip’ accept header. (41602)

The following contributors merged PRs in this release:

@aaronrobertshaw @adambasa-dp @adamziel @afercia @ajlende @alexstine @andrewserong @aristath @arturgrabo @chad1008 @ciampo @dcalhoun @derekblank @fabiankaegy @fluiddot @georgeh @getdave @glendaviesnz @grappler @hz-tyfoon @inc2734 @jorgefilipecosta @kbrown9 @kevin940726 @MaggieCabrera @Mamaduka @matiasbenedetto @mcliwanow @mcsf @mikachan @miminari @mirka @mtias @navigatrum @noisysocks @ntsekouras @ockham @opr @pavanpatil1 @petitphp @phcp @pooja-muchandikar @ramonjd @scruffian @SiobhyB @spacedmonkey @stokesman @sunil25393 @t-hamano @talldan @tellthemachines @tomjn @tyxla @vasartam @walbo @xylocone @zaerl

Thank you to all who helped make this release happen.

#gutenberg, #gutenberg-new