What’s new in Gutenberg? (6 January)

First release of 2021 🎉. A number of contributors enjoyed some well earned time off but it didn’t stop them from shipping exciting features for the 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. editor.

Block Patterns Drag and Drop

Similar to blocks drag and drop that shipped in the previous release, 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/ 9.7 allows user to drag block patterns from the inserter right into the desired position in the canvas.

Reusable blocks

The release also so an important change to how reusable blocks are shown and edited in the editor solving some of the old issues around block inspector, and block toolbars for the reusable blocks. Based on these changes, the UIUI User interface for reusable blocks is most likely going to see some iterations on the upcoming weeks.

Matching block variations

Block variations are a great 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. that can be used to build a generic block and ship several variations on top of it. That’s how the embed blocks or social link blocks are built. In Gutenberg 9.7, if you insert a block variation, the editor is going to match the block being used and show the “icon” and “description” of the said block variation in the different elements of the interface. (Block navigation, block inspector…)

9.7 😅

Features

  • Support drag and dropping block patterns from the inserter. (27927)

Enhancements

  • Improve the Reusable Blocks UI by relying on multi entity save flow. (27887) (27885)
  • Show the insertion point indicator bellow the inbetween inserter. (27842)
  • Add block transforms previews. (27861)
  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: RemoveQueryArgs should remove the ? char after removing all args. (27812)
  • Deburr the input of the Post Author and Parent Page controls when filitering results. (26611)
  • Display block icon, description and name by matching block variations. (27469)
  • RSS Block: Add an explicit border-box CSSCSS Cascading Style Sheets. rule. (27767)

New APIs

  • Create block: Allow to list npm packages to be installed in the template. (27880)
  • wordpress/url: Add a maxLength argument to filterURLForDisplay. (27530)
  • Add new package @wordpress/stylelint config. (22777)

Bug Fixes

  • Show all taxonomies in Tag Cloud block. (27930)
  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Block: Fix editor styles. (27627)
  • Don’t ignore extra edits made in the server when saving posts. (27929)
  • Remove the animation of post publish button during autosaving. (27874)
  • Prevent the inserter from closing when switching the pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (27792)
  • LinkControl: Fix horizontal scrollbar within block toolbar. (27777)
  • Create Block: Fix support for external templates. (27776) (27784)
  • Fix text color dropdown not opening. (27596)

Experiments

  • Full Site Editing Framework:
    • Add support for custom templates in FSE themes. (27778)
    • Refactor the edit-site store to clarify the purpose of templateId and templatePartId. (27839)
  • Full Site Editing Blocks:
    • Site Logo: Remove duplicate link. (27924)
    • Post 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. block: Fix incorrect quotes for the class attribute in the wrapper. (27895)
  • Global Styles: Add padding control to the Global Styles 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.. (27154)
  • Navigation block: Fix the text color for links in the navigation block. (26698)

Documentation

  • Improve documentation for withNotices HOC in components package. (27863)
  • Add ContrastChecker component readme. (25570)
  • Remove default style information from the documentation. (27811)
  • Storybook: Fix broken import statements for DateTime component. (27794)
  • Add additional information about lock inheritance. (27834)
  • Typos and tweaks: (27909), (27799)

Code Quality

  • Use a consistent way to check isRTL. (27838)
  • Update the minimum required WordPress version to 5.5. (27807)
  • Remove unused redux-optimist dependency. (27798)
  • Storybook: Perform cleanup in the Storybook setup. (27786) (27813)
  • Raw handling: Remove duplicate code. (27758)
  • Refactor BlockSwitcher as a functional component. (27674)
  • Rich Text: Replace store name string with exposed store definition. (27820)

Tools

  • Remove overrides for JSDoc rules downgraded to warnings. (27912) (27879)
  • 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 release tool: Fix svn add/rm commands for release tool. (27886)
  • Add types to the wordpress/keycodes package. (19520)
  • end to end tests:
    • Make end to end tests do not rely on font size picker classes. (27825)
    • Remove expect.assertions count from multi-entity-saving tests. (27802) (27818)
    • Testing: Remove axe verification executed after every test case. (26626)
    • Improve font size end to end tests to work with input changes on blur. (27871)

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 9.75.41s31.1ms
Gutenberg 9.65.45s28.8ms
WordPress 5.65.45s30ms

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

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