What’s new in Gutenberg 10.6? (12 May)

Two weeks have passed since the last 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/ release, which means the time has come for a new version! Gutenberg 10.6 introduces Duotone filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. supports, 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. Pattern suggestions in placeholders, colors, and borders for Table Blocks and a bunch of enhancements to Full Site Editing. Work on new features like Global Styles, 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. Editing and Navigation editing continues at a steady but firm pace.

Last but not least, support for Internet Explorer 11 has been dropped as of this release.

Support for Duotone filters block supports

Experimental support for applying a duotone filter to a block (or part of a block) has been added to the block supports. Check out the Image and Cover blocks for a demonstration.

If you would like to include this for your own blocks, be sure to check out the block supports documentation!

Block Pattern suggestions in placeholders

It is now possible to display suggestions for Block Patterns in the placeholder area of a newly created block. This opens up a world of opportunities to inspire the user with block patterns showcasing creative ways of making the most out of the created block. An excellent example of how this feature can be leveraged has been added to the Template Part block.

The original placeholder view can still be accessed from the ‘Start blank’ option.

Table Block enhancements

In this release, a couple of enhancements have been added to the styling capabilities of the Table Block. It is now possible to have fine-grained control over both the colors being used and the table border. The latter has been made possible thanks to the new useBorderProps hook.

Full Site Editing continues to mature

Working towards inclusion of Full Site Editing features in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., a lot of work has been done behind the scenes to stabilize and mature experimental features.

  • The theme.json configuration file has now reached stability level and work on its structure change has been completed. 
  • A couple of dozen blocks related to Site and Template editing have now also been promoted to stable blocks. 
  • To make the editor more accurately resemble the front end, the template editor now opens inside of an iframe

Dev notedev 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 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.: Loading the template editor inside of an iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. is an important step towards implementing this for the post editor as well. As challenging as this sounds, the benefits of taking this approach are far-reaching. If you are a block author, it is important to learn about how this impacts your blocks, and how to prepare them for this change.

Performance improvements

Thanks to a change in the way the block controls hooks panel renders, performance while typing has improved 26% compared to Gutenberg 10.5.

So long, and thanks for all the fish!

This release marks a milestone in modern web development. As of Gutenberg 10.6, we have officially dropped support for Internet Explorer 11, in accordance with the IE 11 Support Phase-Out Plan. This change effectively reduces the total build size by a whopping 6%.

10.6

Enhancements

  • Block Library:
    • Stabilize some theme blocks for WP 5.8 release. (31423)
    • Mark Log In/Out block as stable for 5.8 release. (31499)
    • Post date: Add link color option. (30827)
    • Table:
      • Add border block support. (31265)
      • Add colors block support. (30791)
    • Query Block:
      • Add semantic wrapper element. (31421)
      • Add wrapper and align support. (30804)
      • Show a spinner instead of the Loading text message. (31095)
    • Unify the post tags and post categories block under a unique post terms block. (31458)
  • Components:
    • Add component system context. (30877)
    • Use UnitControl for font-size. (31314)
    • Use vanilla emotion for view. (31099)
    • Promote Heading. (31299)
    • Promote Text to full components export. (31291)
    • Promote ui/Flex and deprecate isReversed prop. (31297)
    • Promote VisuallyHidden from ui into full components. (31244)
  • Core Data: Add experimental util to allow fetch remote URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org data from 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/.. (31085)
  • Design tools:
    • Add Block Border Support. (31264)
    • Add duotone block supports. (26752)
    • Spacing Support: configurable sides for padding support. (30607)
  • General Interface:
    • Display most used terms in term selector. (30598)
    • Rename “Modes” to “Tools” in the 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.. (31430)
    • RTL support for redo/undo icons. (31219)
    • Update “trashTrash Trash in WordPress is like the Recycle Bin on your PC or Trash in your Macintosh computer. Users with the proper permission level (administrators and editors) have the ability to delete a post, page, and/or comments. When you delete the item, it is moved to the trash folder where it will remain for 30 days.” icon. (31463)
  • Patterns: Suggest block patterns in block placeholder states. (29602)
  • Site Editor:
    • Add show more settings to block toolbars. (31305)
    • Check whether the data is loaded. If the data is loaded and the template is still unknown, give appropriate feedback. (30664)
    • A11yAccessibility 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): Constrain tabbing inside them multi-entity save panel. (31136)
    • Iframe the template editor. (31375)
    • Save panel – decouple Site Entity items for individual saving. (30816)
    • Template part:
      • Add patterns placeholder selection. (31155)
      • Register block variations and area selection inputs from original area definitions. (30821)
    • Site Tagline: Letter casing and padding. (31042)
    • Site title: Add padding. (31125)
    • Try: Blue parents. (31196)
    • Verify if php template exists for a hybrid/universal theme with a block-based parent. (31123)
  • Template Editing Mode: Use a darker frame for template mode and previews. (31044)

New APIs

  • Core Data: Add batched variants for start and finish resolution actions. (31005)
  • Block 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.: Allow “array of attributes to be compared” for isActive property in block variations. (30913)
  • Blocks: Introduce registerBlockTypeFromMetadata API. (30293)

Bug Fixes

  • Block Editor:
    • Block Support: Fix server-side border color support check. (31020)
    • Create useBlockRef and useBlockElement for better access. (29573)
    • Fix focus handler in Safari. (31103)
    • Fix selection clearer ref passed to motion.div. (31469)
    • Left-align query patterns in the carousel. (31233)
    • Persistent List View: Fix the list stealing focus from the canvas on item mount. (31058)
    • Try: Toolbar gap. (30983)
  • Block Library:
    • Allow for group and columns blocks to specify an unlocked template. (29916)
    • Button Block: fix 100% width buttons alignment with other buttons. (29794)
    • Image Block: Hide controls while in upload state. (30891)
    • Fix: Make media playable on video and audio block backend. (31257)
    • Prevent PostDate as link to load inside an iframe. (31350)
    • Post Content: Prevent infinite recursion. (31455)
  • Components:
    • Fix 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. with color picker input state for falsy values. (30799)
    • Fixed imports that resulted in build failing. (31106)
    • Stop auto-memo antipattern and remove senseless default values. (31246)
  • Compose: Fix parameter name typo in useRefEffect. (30597)
  • General Interface:
    • Remove tools dropdown menu from medium viewport when text labels mode is active. (31431)
  • PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party:
    • Call deprecated hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. only when new filters not present. (31027)
    • Fix core-block-patterns support on GB. (31546)
    • Use require_once instead of require when registering blocks. (31148)
  • Site Editor:
    • Fix popover/inspector scrolling. (31395)
    • List view improvements. (31092)
    • Render out HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. characters in post and categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. titles. (30661)
    • Use EditorNotices component for notices. (31303)
  • Themes:
    • Hook maybe_inline_styles in the footer. (31072)
    • Inlined core block styles should not override user-added inline styles. (31268)
  • Writing flow:
    • Fix edge detection in Chrome. (31150)
    • Fix RTL issues. (31159)

Performance

  • Improve the typing performance by render hooks panels for selected blocks only. (31381)

Experiments

  • Block-based Widgets:
    • API:
      • Remove widget screen dead code. (31411)
      • Set order of Widgets submenu item. (31214)
      • Use gutenberg_get_block_categories for getting block categories. (31486)
    • CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.:
      • Add white background. (31487)
      • Fix adding new legacy widget. (31490)
      • Fix Legacy Widget block. (31405)
      • Fix toolbar so that it overlaps preview. (31077)
      • Fix unable to publish edited legacy widgets. (31484)
      • Fix unable to get block refs in widgets customizer. (31262)
      • Focus control in widgets customizer. (31308)
      • Make the entire 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. have a white background. (31492)
      • Show blocks from plugins. (31406)
    • Legacy Widget:
      • Add ‘Convert to blocks’ button for text widgets. (31215)
      • Implement design iterations. (30889)
      • Ensure the control form’s IDs have a consistent number. (31485)
      • Refactor Form to not use ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.. (31444)
    • Widget Editor:
      • Ensure Hello Dolly plugin text doesn’t overlap the widgets screen UIUI User interface. (30729)
      • Fix entity deletion in widgets screen. (31404)
      • Fix move to widget area item checkmark. (31494)
      • Improve theme switching experience. (31407)
      • Move to widget area iterations and fixes. (31445)
  • Global Styles:
    • Add a new endpoint that exposes block editor settings through the REST API. (29969)
    • Add theme origin to getStyle. (31267)
    • Block Supports: Allow skipping serialization of font size. (30879)
    • Create block metadata for all blocks. (31590)
    • Cover against a block being unregistered. (31588)
    • Fix Possible CSSCSS Cascading Style Sheets. units not passed to useCustomUnits. (31057)
    • Make the configuration resilient to changes to safecss_filter_attr(). (30888)
    • Preset classes for site editor: Generate them like in the front-end. (31218)
    • Remove specificify for link color. (31497)
    • Remove tests and make utility methods private. (31224)
    • Rename experimental-theme.json to theme.json and add a fallback for backwards-compatibility. (29981)
    • Site Editor:
      • Fix generation of preset class for border color. (31217)
      • Fix preset class specificity. (31204)
    • Target global styles to the body element instead of :root. (31302)
    • Themes: only split block styles loading for block themes. (31309)
    • Update shape of 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.. (30541)
  • Navigation Editor and Block:
    • Block placeholder: fix font inheritance. (31410)
    • Correctly display menu used on location text. (31500)
    • Fix issue with missing styles for Page List in navigation. (31368)
    • Fix navigation screen collapsing 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.. (31228)
    • Fix navigation screen padding again. (31372)
    • Fix nav color regression. (31495)
    • Fix nav editor links to correctly persist new tab target attribute. (30956)
    • Fix padding and cursor for nav menu item placeholder. (31275)
    • Fix submenu direction justification regression. (31414)
    • Fix submenu hover issue. (31195)
    • Fix vertical alignment. (31376)
    • Indicate unsaved changes. (31119)
    • Move selected menu ID to the store. (31320)
    • Move the delete menu button at the bottom. (31026)
    • Standardise and fix parsing and serialization of blocks and nav menu items. (31004)
    • Sync menu name updates. (31093)
    • Try: Remove padding from menu items when no background. (30805)
    • Use ajaxurl global in batchSave action. (31028)

Documentation

  • Docs
    • Add in more high level overviews of major FSE projects. (31295)
    • Create a Full Site Editing overview document. (31065)
    • Fix the broken links of register block type documentation. (31285)
    • Global Styles: Update documentation for theme.json. (31507)
    • Link to CSS that wp-block-styles include. (30433)
    • Minor design updates using callout. (31398)
    • Organize and update block theme documentation. (31167)
    • Packages: Drop suppport for IE 11 and non-LTS Node.js versions. (31270)
    • Remove broken links to gutenberg-core team. (31161)
    • Update Versions in WordPress to include 5.7.1 & 5.8. (31439)
    • Update contributing documentation with callout notice usage. (31202)
  • Handbook:
    • Add a deprecation notice to metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. block attribute sources. (31389)
    • Block Patterns Doc Updates. (31060)

Code Quality

  • Block Editor:
    • BlockList: Normalise useSelect selectors for callbacks. (31078)
    • Default appender: Try editable paragraph instead of text area. (30986)
    • In-between inserter:
      • Use useRefCallback and showInsertionPoint. (30285)
      • On hover: Preserve original behaviour. (31266)
    • Move block tools components and styles to separate folder. (31313)
    • Multi-selection:
      • Move shift+click logic to hook. (31358)
      • Move handlers to block ref callback. (31334)
    • Simplify insertion point. (30301)
    • Writing flow: Move selector calls to event handlers. (31332)
  • Block Library:
    • Remove no longer necessary render_callback for Cover block. (31503)
    • Move translatable fields to block.json files. (31120)
  • Components:
    • Remove all remnants of wp-g2. (31292)
    • Remove wp-g2 from scrollable. (31207)
    • Remove G2 portal and refactor Popover to no longer use G2. (31209)
    • Remove wp-g2 fontsize control. (31287)
    • Remove wp-g2 from flex, vstack, hstack, spinner and contr…. (31243)
    • Remove wp-g2 from surface. (31238)
    • Remove wp-g2 from form-group and control-label. (31234)
    • Remove wp-g2 from tooltip. (31232)
    • Remove wp-g2 imports from elevation. (31230)
    • Remove wp-g2 imports from shortcut. (31229)
    • Remove wp-g2 imports from ui/divider. (31212)
    • Remove wp-g2 imports from visually-hidden. (31210)
    • Remove ui/button and ui/button-group. (31205)
    • Deprecate the heading prop for the CheckboxControl component. (30594)
  • Compose: Add types to createHigherOrderComponentifCondition and pure. (30881)
  • Core Data: Specify context=edit only when needed. (30482)
  • Data: Update redux dependency to the latest version. (31318)
  • Mark the __experimentalBlockSettingsMenuFirstItem slot as unstable. (31420)
  • Remove the block wrapper component. (31419)
  • General Interface: Fix typo – toogle / toggle. (31225)
  • Packages:
    • Fix linting warnings for core/block-editor store. (31146)
    • Update lodash to the latest patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing. version. (31686)
  • Plugin:
    • Add missing textdomains. (31131)
    • Cleanup unused function parameters. (31130)
  • Rich text:
    • Extract undo automatic change. (31449)
    • Move format boundaries to ref callback and separate file. (31409)

Tools

  • Build Tooling:
    • Also rebuild block-specific styles in dev mode. (31274)
    • Remove support for IE11. (31110)
    • Fix recursive filewatching on linux. (31102)
  • Testing:
    • end-to-end wpDataSelect: Explain why it returns undefined sometimes. (31227)
    • end-to-end testing: Use JSON serialization for getAllBlocks. (31199)
    • end-to-end tests for Widgets Customizer. (31185)
    • end-to-end Site Editor: Evaluate getEditedPostContent on the page. (31121)
    • Fix entity saving intermittent test failure. (31157)
    • Fix tests failing on expected site tagline snapshot. (31473)
    • Fix not getting correct computedName with labels in chromium 91. (31175)
    • Fix snapshots broken in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. (31247)
    • Fix undo end-to-end test. (31160)
    • Stabilise typewriter end-to-end test. (31472)
    • Use puppeteer-testing-library in end-to-end tests. (28380)
    • Use jest-circus in unit tests. (31178)
    • Upgrade puppeteer-testing-library version. (31133)
  • Scripts:
    • Add .prettierignore, use in format script. (30844)
    • Add postcss as a dependency to ensure a correct version is used. (31364)
    • Update puppeteer-core to the latest version. (31138)
    • Update PostCSS minimum version to ensure it is secure. (31685)
  • Workflows:
    • Run tests on release branches. (31354)
    • Adds reporter that shows JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. test errors on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/. (31041)
  • wp-env: fix can’t checkout git repositories of a specific 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.). (31271)
  • Native:
    • Moves hermes and react-native mirror to S3. (31441)
    • Publish android artifacts to s3. (30421)
  • Storybook: Update BoxControl stories. (31029)

Various

  • Plugin: Tweaks to accommodate the latest changes in core for styles loading. (31702)
  • Site Logo: Rename sitelogo to site_logo. (31511)

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.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 10.66.1527.68
Gutenberg 10.56.1238.52
WordPress 5.75.6128.55

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

Special thanks to @priethor and @youknowriad for guiding me through this release!

#block-editor, #core-editor, #gutenberg, #gutenberg-new