Nik Tsekouras 12:09 pm on March 2, 2021
Tags: , ,   

What’s new in Gutenberg 10.1? (3 March)

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/ 10.1 has been released! This release includes a number of nice enhancements and as usual 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. In addition Full Site Editing, Widgets and Navigation screens and Global Styles saw many improvements.

Reusable blocks improvements

With the ongoing effort to improve the different user flows related to Reusable blocks we’ve seen tons of enhancements recently that are worth mentioning 🙂 .

Visual clarity of Reusable blocks has been improved with the Reusable 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.’s title displayed next to the block type in toolbar, in Navigation List and in Breadcrumbs. Towards the same direction if a child block is selected, the Reusable block is outlined making it easier to identify where the block starts and where it ends.

Another enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. is the ability to modify the saved title of reusable block in 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. inspector and the newest one is the enhanced creation flow, that also allows you to cancel the action.

Better clarity on the Image toolbar

The Image block’s toolbar has now better clarity by following the “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 level, inline” order in the block toolbar. This makes the grouping so much clearer and other blocks are going to follow :).

Spacing options for Social Links and Buttons

You can now set how the space between and around Social Links will be distributed. In addition more options were added to Buttons block.

10.1

Features

  • Use a modal for the reusable blocks creation flow. (29040)
  • Normalize Image’s block toolbar. (29205)
  • Add Items Justification to Social Links. (28980)

Enhancements

  • Improve the sorting algorithm while searching parent pages. (29143)
  • Buttons: Add space-between justification controls. (29160)
  • Avoid focusing blocks when inserting them into the canvas. (28191)
  • Create Block: Use register_block_type_from_metadata to register blocks on the server. (28883)
  • Greatly improve dragging performance of the focal point picker. (28676)
  • Improve block search input’s accessible name and placeholder. (28393)

New APIs

  • Extend updateBlockAttributes to provide for different attribute changes for each block in the clientIds array. (29099)

Bug Fixes

  • Fix Slash Inserter position. (29288)
  • Fix issue with invisible reset template hover state. (28912)
  • InputControl: Fix labelPosition rendering with new ui/flex component. (29226)
  • Button sizing style fix. (29208)
  • Create Block: Fix the background color in esnext template. (29223)
  • Add border-collapse to default block styles in Table block. (27628)
  • Navigation Block:
    • Fix Navigation Links when post type is not Page or Post. (28892)
    • Fix inline style inheritance. (28868)
    • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice shown when rendering a navigation link block. (28999)
  • Fix is-hovered event listener. (28715)
  • Fix function call in justify toolbar. (28955)
  • Fix footer icon color. (29199)
  • Show page titles special characters in the parent page selector. (29104)
  • Edit Post: Automatically connect a menu item with the pinnable sidebar 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. (29081)
  • Make Modal component use the aria.labelledby prop. (29020)
  • Fix adminadmin (and super admin) menu scroll on editor page. (28959)
  • Prioritize coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks in the inserter. (28945)
  • Make the __experimentalCaptureToolbars option work reliably. (28905)
  • Ensure sticky tabs are in front of their panel’s descendants. (28562)
  • Navigation Component: Increase color and padding specificity. (28619)
  • Add note to indicate why priority queue callbacks may be undefined. (28337)
  • Keep initial formatting on paste for Preformatted and Verse components. (27781)
  • Rich text: Keep block ID on split. (28505)
  • Fix cursor on rich text blocks when outline mode is active. (29106)

Experiments

  • Improve loading method for block styles. (28358)
  • Do not use __experimentalSelector to check the panel title. (29264)
  • Update documentation for social links & 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.. (29294)
  • Navigation Screen:
    • Add block deselection when clicking canvas background. (28876)
    • Improve experience for user creating their first menu. (28767)
    • Fix positioning of nested submenus. (28934)
  • Full Site Editing:
    • Use a modal for the template part creation flow. (29108)
    • Add an ‘area’ term for Template Parts. (28410)
    • Add content menu items preview in Navigation. (29225)
    • Replace locate_template method. (28942)
    • Site Editor:
      • Inject theme attribute into template parts too. (29080)
      • Organise semantic template parts. (29030)
      • Show contextual icon in the Inspector’s template tab. (29195)
      • Add template tab to sidebar. (28633)
  • Global Styles:
    • Support skipping serialization in the color hook (block supports mechanism). (29142)
    • Fix 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. font-family list. (28960)
  • Widgets:
    • Use textarea for editing block widgets. (24899)
    • Set container classname dynamically depending on 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. block. (26375)
    • Add Widgets 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/. changes from Core-51460. (29242)
  • UIUI User interface Components:
    • Add Surface Component. (28596)
    • Add Elevation Component. (28593)
    • Add FormGroup + ControlLabel components. (28568)
    • Add spinner. (29146)
    • Rename ui files to match simpler scheme. (28948)
    • Add 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. based Scrollable component wrapper. (28979)
    • Add createComponent unit tests. (28949)
    • Add hooks based VisuallyHidden. (28887)
    • Add ControlGroup. (28982)
    • Add Portal. (28981)
    • Update documentation (README + inline docsinline docs (phpdoc, docblock, xref)). (29128)
    • Update color-picker snapshot tests to use diff matching. (28925)
  • Bugs:
    • Fix Site Logo Styles. (29227)
    • Template Part: Fallback to missing state if slug or theme is invalid. (29041)
    • Site Editor:
      • Fix misalignment with navigation toggle and 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.. (29093)
      • Fix navigation editor block selection clearing. (29293)
      • Fix navigate to link error. (29239)
      • Fix position and style of “Dashboard” link. (29034)
      • Fix end-to-end test errors introduced by template sidebar. (28950)
    • Widgets:
      • Fix widgets preview URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org typo. (29062)
      • Fix php error in the widget screen. (29137)
      • Fix legacy widgets not previewing and widgets saving issue. (29111)
      • Fix server rendered widget not previewing. (29197)

Documentation

  • Add 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) testing instructions. (28947)
  • Updates to Outreach Page. (28929)
  • Update Create a Block tutorial to use block.json. (29027)
  • Expose Block Directory references in the handbook. (29025)
  • Update “key concepts”. (28973)
  • Remove Font style, weight, decoration, and transform presets from the theme.json documentation. (29200)
  • Combobox Control: Update 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. doc. (28787)
  • Add block variations to FAQ. (29154, 29170)
  • Add templates and global styles to key concepts. (29071)
  • Update block metadata section to promote PHP API. (29023)
  • Fix the header links, add link to user documentation. (28857)

Code Quality

  • Replace store name literals in block-library. (28975)
  • Fix typos in PHP comments. (29198)
  • Format TS files according to coding styles. (29064)
  • WP_Theme_JSON_Resolver: Update translate terminology. (28944)
  • Improve code readability by not passing variables by reference. (28943)
  • Convert navigation link to use hooks and context. (28996)
  • Block props: Avoid memo (block mode). (29139)
  • Reduce memoized context:
  • Use ref callback:
    • 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., selection clearer, typing observer. (29114)
    • Canvas click redirect & typewriter hooks. (29105)
    • Clipboard handler. (29090)
    • Hover hook. (29089)
    • useBlockProps. (28917)
    • Block nodes. (29153)

Tools

  • Add support for native TypeScript. (28879)
  • Limit the npm version to be 6. (29204)
  • Run CI jobs on wp prefix branches. (29194)
  • Eslint plugin: Add suggestions to “data-no-store-string-literals” rule. (28974)
  • Update codeowners. (29280)
  • Scripts:
    • Coerce live reload port to integer. (29196)
    • Add Python 2.0 to other OSS licenses in license checker. (28968)
  • Create Block: Fix issue with processing unrelated engines. (29066)
  • Fix spacing in new contributor welcome message. (28958)
  • Add reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-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. package with i18n React bindings. (28465)
  • babel-plugin-makepot: Don’t transpile the package code. (28911)
  • docgen:
    • Don’t transpile the package code. (28910)
    • Replace doctrine with comment-parser. (28615)
  • wp-env:
    • Use Simple GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. instead of NodeGit. (28848)
    • Fix issue where mappings sources were not downloaded. (28930)
  • Changelog script: More fine-grained Changelogs for 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. releases. (28424)
  • End 2 End Tests:
    • end-to-end Tests: Add gallery caption coverage. (29127)
    • Add basic block preview coverage for inserter. (29117)
    • Make navigation editor end-to-end tests more robust. (28936)
  • Testing: Add snapshot-diff. (28897)

Various

  • Add a 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. icon. (29232)
  • Update text color icon. (29212)
  • Blocks: Map block type definitions that use PHP naming convention for keys. (28953)
  • Safe access to window/document when in node context:

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.15.3 s30.11 ms
Gutenberg 10.05.7 s29.62 ms
WordPress 5.64.1 s35.47 ms

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

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