What’s new in Gutenberg 10.0? (17 February)

This is 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.0, which means it’s the 100th release of the 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, the 100th release of a journey that started more than 4 years ago when Matt announced the project on WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. US 2016. (It’s also almost to the mark the 4th anniversary of the initial commit to the Gutenberg repository.)

I’m not going to lie, it was not an easy journey. Shipping something that impactful is not easy and, going in, there was no reason to believe in success: WordPress had already tried to replace TinyMCE a couple of times already. What would be different this time around? Not much probably, so initially very few people actually joined the project.

Six months later came WordCamp Europe 2017 and the first release of the plugin. The editor was nowhere close to being usable but it “clicked” for some, and the reactions to the presentation were hopeful.

However, then quickly came pushback. With all the attention that the project received, it became difficult to discern constructive debate from mere opposition. We each come with our own context, and some people had a fixed idea about what they wanted for the project. Some wanted to just reuse an existing page builder, others wanted to revive the Fields 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. project, some wanted it to be front-end-first, others wanted it to just replace the content area of the classic editor, some wanted it to be in Vue.JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors., others wanted no change at all. With a product used by 40% of the web, we need to find consensus, and when we make compromises it can be so difficult for those involved to avoid the feeling that their voice is being ignored.

We also made quite a few mistakes: stability of some releases wasn’t so great, performance suffered in others, 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) as well… Nonetheless, we kept pushing forward, improving the editor and the project in all aspects until its first inclusion in WordPress 5.0, and we haven’t stopped since.

It’s a delight to see some people who had very strongly disagreed with the initial vision or approach to Gutenberg gradually come to enjoy using the editor and join the project to carry on its vision. Others might still not like it, some won’t ever use it. One thing is certain though, we’ll continue doing our best to push forward, improve what’s already shipped and ship new exciting features; we’ll continue making mistakes and hopefully continue learning from them.

Today marks the 100th release of Gutenberg. Nothing extraordinary, just a regular release: it improves on the existing features, fixes bugs, adds new features and experiments with new ideas.

What I personally retain is the people, the ones who were with us from the start, the ones who were with us but left, the ones who joined in our journey, everyone who helped along the way, everyone who provided feedback, everyone who got their hands dirty and everyone who tried to use this editor, extend it, and provide ideas.

Thank you all.

10.0 🤯

Features

  • Add basic pages 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.. (28265)
  • Make the parent block selector visible and offset in the block toolbar. (28598) (28721)

Enhancements

  • Update the social empty state for dark themes. (28838)
  • Add the 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.) name selector to the advanced panel of the Group block. (28576)
  • Categories block: Display message instead of empty content. (28697)
  • Show block patterns in the inserter for non-root level insert position. (28459)
  • A11y: Improve the keyboard navigation in the block patterns inserter. (28520)
  • Allow transforming Paragraph blocks to Buttons block. (28508)
  • Better top toolbar arrow gap. (28832)
  • Update layout icon to use the new design language. (28651)
  • Update the buttons icons. (28583)

New APIs

  • wordpress/data: Graduate the __experimentalResolveSelect function to a stable status. (28544)
  • wordpress/compose: Add useMergeRef ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. hook. (27768)
  • Components: Allow extra props for RadioControl component. (28631)
  • Add JustifyToolbar component to @wordpress/block-editor. (28439)
  • wordpress/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 new APIs for React bindings. (28784) (28725)

Bug Fixes

  • Fix block insertion a11y string. (28871)
  • Fix npm 7 compatability. (28824)
  • RangeControl: Fix input / slider widths. (28816)
  • Fix post title icon color. (28727)
  • Fix most used blocks usage persistence. (28694)
  • Use consistent icon width for the block icon in the block inspector. (28666)
  • Fix for Latest Posts focus not selectable. (28660)
  • Fix issue where gallery block requests all attachments when empty. (28621)
  • Fix handling of custom unit theme setting. (28603)
  • Fix wrong space-between style in the Buttons block. (28485)
  • Calculate insertion usage for block variations properly. (28663)
  • Fix the default Buttons block radius, and size. (28514)
  • Fix the Cover block height. (28455)

Experiments

  • Site Editor:
    • Fix empty content when creating a new template. (28882)
    • Fix complementary area not opening. (28732)
    • Fix inserter can’t be closed. (28590)
    • Fix gray screen on refresh when editing pages and posts. (28413)
    • Show single post template in posts templates in the navigation 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.. (28229)
    • Allow searching pages, posts and categories in the navigation sidebar. (27280)
  • Full Site Editing Architecture:
    • Iterate on the public API of WP_Theme_JSON_Resolver. (28855)
    • Rename pageTemplates configuration to customTemplates in 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.. (28830)
    • Move theme.json support check to class. (28788)
    • Improve performance on file access of experimental-theme.json. (28786)
    • Load page templates via theme.json abstractions. (28700)
  • Full Site Editing blocks:
    • Post 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. block: Render nothing if featured image doesn’t exist. (28625)
    • Add a description to the template part block. (28839)
    • Move template part title field to the block inspector. (28835)
    • Use display title for template part block type toolbar anchor. (28691)
    • Allow the query block to work on singular pages when inheriting the global query. (28351)
    • Query Pagination block: cleanup. (28831)
    • Enqueue comment-reply script when post-comments-form block gets rendered. (28826)
  • Navigation Block:
    • Fix transparent navigation block submenus. (28904)
    • Polish social links when inside navigation. (28836), (28448).
    • Add block variation matcher to display information from a found match. (28626)
    • Add new Post Navigation Link block. (28602)
  • Navigation screen:
    • Fix failing request for menu items. (28764)
    • Design Iteration. (28675)
    • Clear block selection in the navigation editor when clicking editor canvas. (28382)
  • Block-based widgets screen and 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 experimental flag and enable widgets screen in customizer. (28618)
  • Global Styles:
    • Use context when translating entries in theme.json. (28246)
  • 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/.:
    • Add URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org Details endpoint to REST API to allow retrieval of info about a remote URL. (18042)
    • Pattern Directory API: Return the block pattern value as content. (28799)
    • Pattern Directory API: Add a keyword 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. parameter. (28794)
  • UIUI User interface Components:
    • Group all experimental components in the ui folder. (28624)
    • Fix types. (28571)
    • Add VStack component. (28798)
    • Add HStack component. (28707)
    • Add Flex component. (28609)

Documentation

  • Theme.json Documentation: Clarify naming schema for CSSCSS Cascading Style Sheets. Custom Properties. (28639)
  • Update Versions in WordPress to include 5.6.1 & 5.7. (28641)
  • Typos and tweaks: (28667), (28657), (28655), (28898), (28894), (28762), (28877).

Code Quality

  • Improve ButtonBlockAppender styles. (28464)
  • Blocks: Move the logic for Template Part label to the block. (28828)
  • wordpress/block-directory package: Replace string store names. (28777)
  • wordpress/block-editor package: Replace string store names. (28775)
  • Site Editor: Replace coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./edit-site store name with store object. (28722), (28695)
  • Relax JSDoc validation for typed packages. (28729)
  • Change apt command to apt-get command. (28840)
  • Refactor Buttons block to use JustifyToolbar controls. (28768)
  • i18n 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.: Don’t use typeof to check value falsiness. (28733)
  • Components: Set a default for the ComboboxControl onFilterValueChange. (28492)

Tools

  • List all dependencies when checking licenses in NPM 7. (28909)
  • Allow blank 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/ issues again. (28866)
  • wp-env.json: Pin tt1-blocks dependency to v0.4.3. (28741)
  • Add eslint rule for preventing string literals in select/dispatch/useDispatch. (28726)
  • build-worker: Extract the functions that build CSS and JS. (28724)
  • Unit Tests Workflow: Enable for documentation-only PRs. (28696)
  • Fix end-to-end failures on ‘Front Page’ template. (28638)
  • Fix lint issues (proper number of spaces). (28629)
  • Fix legacy settings tests for custom spacing. (28628)
  • end-to-end tests: Handle upgrade screen. (28592)
  • Add eslint rules to guard against unexpected imports/exports. (28513)
  • Add a welcome comment to first time contributor PRs. (28118)
  • end-to-end Tests: Document Settings. (27715)
  • Updating composer packages for php8 compatibility. (28623)

Various

  • Adjust defaults for COMPONENT_SYSTEM_PHASE variable. (28772)
  • build-worker: Call callback with error when no task for extension. (28723)

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.07.6 s27.72 ms
Gutenberg 9.98.0 s30.25 ms
WordPress 5.65.65 s33.2 ms

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

Thanks @mcsf for your help on the release post.

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