What’s New In Gutenberg 10.5? (28 April)

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 a new version is already available! Gutenberg 10.5 introduces many new 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. patterns, embedded PDFs, enhancements to the Template Editing Mode, improvements to Widgets in the 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., and many 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 as well.

New block patterns and pattern transformations

Gutenberg 10.5 puts the focus on bringing several new block patterns, revisiting the bundled block patterns as well as adding more opinionated Query Block ones. It also enables block pattern transformations that are contextual to the currently selected simple block, without inner blocks.

Enhancements to the Template Editing Mode

With the goal of editing templates with blocks, a “Template Editing Mode” was introduced in recent Gutenberg versions so that users can edit a template directly from the post editor, switching between post and template editing. This release provides several flow and interface enhancements to this feature, including the possibility to create custom block templates in classic themes. Other improvements include unifying the saving flow between Template Mode and Default Mode, moving the Template Mode Edit and New links to a dedicated new panel, and replacing the Document tab with a Template tab in Template Mode.

Embedded PDFs with File Block

The File Block now supports embedding PDFs in most major browsers. This option can be enabled or disabled through a 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. toggle.

Improvements to Widgets in the Customizer

While Gutenberg 10.4 enabled Block Widgets in the Customizer, this new iteration enhances the experience by enabling upload capabilities for media and Richtext formats.

No more auto-scrolling when selecting blocks

Before 10.5, when any block that was slightly out of view was selected, the page would automatically scroll so that the top of the selected block was visible, potentially disorienting the user. From 10.5 onwards, the scroll will only happen if the block is not selected directly by the user.

10.5

Enhancements

  • Buttons Block:
    • Add Typography support. (30394)
    • Explicitly add text-align-center to legacy buttons. (30525)
    • Update to use color support utils to retrieve classes and styles. (30870)
  • Columns Block: Add column count to the column block label. (30248)
  • File Block: Add support for embedding PDFs. (30857)
  • List Block: Add placeholder attribute. (30958)
  • Post Comments Link Block: New block added. (29564)
  • Site Logo Block:
    • Update the site logo description to be more illustrative. (30909)
    • Add a default width value. (30907)
  • Site Title Block:
    • Normalize the toolbar. (30999)
    • Normalize the toolbar (II). (31032)
  • Social Links Block:
    • Add text placeholder next to the appender. (29851)
    • Remove obsolete hardcoded focus style from Social Links. (30721)
  • Template Part Block: Add active block variation information in Block Parent Selector. (30731)
  • Term Description Block: Don’t output if there’s no description. (30564)
  • Verse Block: Add support for custom colors. (27736)
  • Video Block: Add uploading state. (30837)
  • Block Patterns:
    • Revisit the bundled block patterns. (29973)
    • Suggest block pattern transformations that are contextual to the currently selected ‘simple’ blocks (no InnerBlocks). (30469)
    • Small adjustments to bundled block patterns. (31105)
    • Query Patterns:
      • Try more opinionated query block patterns. (30763)
      • Add the small image and title pattern back in, fix excerptExcerpt An excerpt is the description of the blog post or page that will by default show on the blog archive page, in search results (SERPs), and on social media. With an SEO plugin, the excerpt may also be in that plugin’s metabox. length.. (30817)
  • Components: Add create-styles. (30509)
  • Design Tools:
    • Add border color, style, and width support. (30124)
    • BoxControl: Allow configurable sides. (30606)
    • Color Block Support: Add utilities to retrieve color classes and styles. (30869)
  • General Interface:
    • Animate the canvas transitions. (30802)
    • Include block title into block switcher label. (30808)
    • Inspector Controls: Rephrase, polish, and make consistent color labels. (30075)
    • Update design of the resize handles. (30339)
    • Icons: Update icons for text overlay and crop. (30673)
  • i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.: Add resetLocaleData method. (30419)
  • Publishing Flow: Show post events in the post schedule calendar. (29716)
  • Template Editing Mode:
    • Allow creating custom block templates in classic themes. (30438)
    • Move the template mode edit and new links to a dedicated template panel. (30900)
    • Replace the document tab with a template tab in template mode. (30860)
    • Unify saving flow between template mode and default mode. (30793)
    • Update the template mode canvas padding and adds a backlinkBacklink Incoming links to a web page. Search engines view backlinks as a reputation builder. The more quality (as determined by the search engine) incoming backlinks a site has usually helps a site to rank better in search engine results.. (30658)
  • Site Editor:
    • Add ‘area’ selection to convert to template part flow. (30395)
    • Add do_block_template_part function. (30345)
    • Add skip link to block templates. (30336)
    • Remove single-post from the default templates set. (29668)
    • Themes: Fix template-hierarchy fallbacks. (30599)
  • Writing Flow: Scroll selected block only if it has no focus. (30924)

Bug Fixes

  • Apply a StyleProvider around fills that can be used inside the 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.. (31073)
  • 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. Fetch: Make preloaded OPTIONS requests use parse setting. (28862)
  • Block Library:
    • Duplicate media types to avoid bad imports. (30973)
    • Image Block: Disable media buttons in the uploading state. (30863)
    • Query: Fix max-height to query pattern preview. (30757)
    • Post Title: Fix warnings for RichText in inline containers. (30666)
    • Site Title: Add default block after pressing enter at the end of Site Title. (30996)
  • Block Editor:
    • Bring back imageDefaultSize shim for WP 5.7. (30955)
    • Fix the position of vertical add a new block in RTL mode. (31035)
    • Template part: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 7.4 or higher notice for placeholder block. (30928)
  • Components:
    • Add a StyleProvider to support CSSCSS Cascading Style Sheets.-in-JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. components inside iframes. (31010)
    • Fix “RadioControl: checked” style outside of Gutenberg. (30670)
    • Fix Post Date component. (30790)
    • Fix Post Publishing Popover moving when certain dates are clicked. (30298)
    • Fix useForceUpdate Memory Leak: Only setState if the component is still mounted. (30667)
  • General Interface: Fix is-link style to take colors from wp-adminadmin (and super admin) theme. (30823)
  • Inserter: Stop event propagation for the select element’s onBlur to fix the behavior in iOSiOS The operating system used on iPhones and iPads. when selecting a pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (30717)
  • Site Editor:
    • Focus save button when entities save states panel is opened. (30873)
    • Remove call to wpautop that unintentionally alters block markup in template parts. (30552)
  • Template Editing Mode: Hide the template selector and template mode from non-viewable post types. (30861)

Experiments

  • Block-based Widgets:
    • API:
      • Don’t use deprecated widget_class property. (30429)
      • Fix null instance property when instance settings are empty. (30713)
      • Remove deprecated properties. (30853)
    • Customizer Integration:
      • Add media uploader capabilities to block-based 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. customize screen. (30954)
      • Add move to widget area dropdown in customizer. (30896)
      • Add rich text formats. (30952)
      • Fix editing performance in Widgets Customizer. (30654)
      • Fix block-based widget customizer initializing too soon. (30864)
      • Refactor the inspector in Widgets Customizer to use coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. controls. (30431)
    • Legacy Widget: Improve backward compatibility. (30709)
    • Widget editor:
      • Add a toolbar button to move between widget areas. (30826)
      • Fix the undo/redo buttons in the standalone block-based widgets editor. (30989)
  • Navigation Editor and Block:
    • Fix navigation placeholder height issue. (30824)
    • Fix alignment issue on the nav screen manage locations buttons. (30441)
    • Limit navigation nesting depth to 5. (30199)
    • Nav-created drafts should not render on the frontend. (29692)
    • Page List: Add ability to convert to navigation links. (30390)
    • Show justification controls for vertical variant. (30351)
    • Use theme locations description instead of the slug for navigation screen location labels. (30797)
  • Global Styles:
    • Absorb editor settings transformation in WP_Theme_JSON. (30610)
    • Clean cached data when switching themes. (30830)
    • Extract sanitize method. (30809)
    • Fix: CSS variable reference mechanism 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.. (31015)
    • Make the dependency of the star matcher explicit when translating theme.json. (30604)
    • Only remove the default font family in the editor from themes with theme.json file. (30895)
    • Refactor how we iterate over the tree. (30801)
    • Remove no longer needed translations handled in PHP for settings. (30605)
    • 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.: Add util to transform from a v0 schema to the latest. (30600)

Documentation

  • docgen:
    • Add support for TS exported static non-function variables. (30971)
    • Add support for assignment patterns. (30681)
    • Add support for object-destructuring. (30675)
    • Find parameters by index rather than name and handle array destructuring. (29945)
  • Handbook:
    • Add documentation for border block supports. (31039)
    • Add documentation for border styles. (31040)
    • Add fix to suggested prefixes of the branchbranch A directory in Subversion. WordPress uses branches to store the latest development code for each major release (3.9, 4.0, etc.). Branches are then updated with code for any minor releases of that branch. Sometimes, a major version of WordPress and its minor versions are collectively referred to as a "branch", such as "the 4.0 branch".. (30953)
    • Change references from Block Style Variations to Block Styles. (30911)
    • Fix Block Editor 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) link. (30569)
    • Fix more examples for register_block_type – apiVersion to api_version. (30819)
    • Fix PHP example for register_block_type – apiVersion to api_version. (30818)
    • Fixed a type and made the whole explanation more clear. (30487)
    • Fixes broken GitHubGitHub GitHub is a website that offers online implementation of git repositories that 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/ links to commonly used labels. (30875)
    • Improve semantics in the block-based theme guide. (30946)
    • Include a note about is_default property for register_block_style. (30792)
    • Organize Block API Reference. (30980)
    • Packages: Further clarify the npm publishing process. (30733)
    • Update getting started with code. (30447)
  • Libs:
    • Blocks: Fix PHPDocs of gutenberg_block_has_support. (31050)
    • Query Utils: Fix return type of construct_wp_query_args(). (30611)
  • License: Interim dual license of future contributions. (30383)
  • Packages:
    • Block Library – Social Links: Update param type. (30652)
    • Components: Add documentation for the text prop on the Button component. (30796)
    • Core Data: Fixes return type for getEntitiesByKind. (30639)
    • Block Editor: Update import statement of ImageSizeControl component. (30704)
    • 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.: Add namespace param clarification. (30501)

Code Quality

  • Block Editor:
    • Simplify focus capture. (31036)
    • Standardize loading default block editor settings. (30245)
  • Block Library:
    • Button Block: Use hook-based border support. (30194)
    • Cover: Rename isBlogUrl to isUploadingMedia. (30435)
    • Cover: Use ALLOWED_MEDIA_TYPES shared constant. (30977)
  • Block Patterns: Clean up bundled pattern titles & categories. (30998)
  • Components: Remove create-styles in favor of vanilla emotion. (31048)
  • dom:
    • Add types to caret placement functions. (30750)
    • Add types to document-has-selection. (30386)
    • Add types to is-edge and dependencies. (30546)
    • Add types to miscellaneous files. (30774)
    • Add types to removeInvalidHTML and stripHTML. (30752)
    • Only assert defined in development. (30807)
    • Type the remaining files. (30841)
  • Drop zone: Rewrite without provider. (30310)
  • Gutenberg 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:
    • Account for editor styles file removal on WP 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.. (30894)
    • Format all markdown files using Prettier formatter. (30715)
    • Format all JSON files using Prettier formatter. (30714)
    • Updated .editorconfig files to work with automatic file formatting. (30794)
    • Update WP compatibility check in gutenberg_pre_init(). (29938)
  • Improve get_merged_data() code. (30612)
  • Remove unnecessary semicolons in PHP. (30780)
  • Replace older-style PHP type conversion functions with typecasts. (30531)

Tools

  • Testing:
    • Cover Block:
      • Add edit media integration tests. (30270)
      • Replace media end-to-end test. (30306)
    • Fix end-to-end test failure screenshots not capturing at the right time. (28449)
    • Fixture regeneration: Infer tabs use from the prettier configuration. (30813)
    • Skip unstable template part end-to-end test. (30748)
    • Trim block fixture HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. when generating other test fixture files. (30981)
    • Wire PHP tests for block editor settings. (30984)
  • wp-env:
  • Build Tooling:
    • Add comments to the webpack entry point function. (30629)
    • Create frontend entry points for block-library, outputting code loadable from the browser. (30341)
    • Perf Workflow: Trigger upon release publishing. (30628)
    • Pull trunk before pushing. (30615)
    • Remind about required cherry-picks after npm publishing. (30868)
    • Update development tools to work with PostCSS (try 2). (30347)
    • Use consistently the latest keyword for npm publishing. (30866)
  • Scripts:
    • Allow CSS modules in the build commands. (29182)
    • Include YAML files in prettification. (30240)

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.57.86s55.86ms
Gutenberg 10.47.25s42.51ms
WordPress 5.76.86s37.1ms

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

Thanks @youknowriad and @priethor for helping with the release and the release post, respectively.

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