What’s new in Gutenberg? (2 December)

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.5 has been released. The big focuses throughout this release cycle were Full Site Editing and Global styles. This release also includes many fixes and some nice new features and enhancements.

Full Height Alignment

This control can be integrated in other blocks as well and you can set 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. to be displayed in full height. The Cover block is a lovely case to see it in action.

Font sizes support in Code block

You can now change the font size of Code block’s contents.

9.5.0 🇲🇪

Features

  • Full Height Alignment control: Implementation and Cover block integration. (26615)
  • Code block: Add support for font sizes. (27294)

Enhancements

  • Improve block patterns preview in the Inserter. (27204)
  • Enhance social links placeholder to look more like the end result. (26953)
  • Add labels to image zoom control. (24574)

New APIs

  • Data: Use store instance as param for select and dispatch. (26655)
  • Adds instance URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to wp-env start. (27282)

Bug Fixes

  • Fix crash when null date passed to TimePicker. (27316)
  • Add backward compatibility support for lightBlockWrapper in getSaveElement. (27189)
  • Restore the gray background in Post Editor. (27188)
  • Font size picker 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. that adds px units to empty string values. (27111)
  • Font size unit back-compatibility does not executes on post edit. (27106)
  • Drop zone: Fix infinite loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. in some contexts. (27090)
  • Interface regions: Fix focus style (on click). (27074)
  • Fix Separator editor styles. (27071)
  • Fix custom spacing support. (27045)
  • Fix jest process hanging. (27008)
  • Fix combobox suggestion list closure when clicking scrollbar. (27367)
  • Constrain tabbing to the popover in media replace flow. (26939)
  • Fix RangeControl mark placement and cursor styles. (26745)
  • New authors dropdown breaks author selection for editors. (26554)
  • 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.: Use own instance’s doAction for built-in hooks. (26498)
  • Inserter: Show preview in search results. (27193)
  • Gallery block:
    • Fix duplicate css class. (27311)
    • Adds back in icon and title for gallery block. (27293)
  • Search block: Fix icon strokeWidth properties. (27308)
  • Image block:
    • Fix the zoom slider width. (27285)
    • Fix double paste from clipboard. (27199)
    • Hide some controls on multi selection of Image blocks. (27105)
  • Columns: Align single half width column to left. (27142)

Performance

  • Minimize the calls in useSelect by subscribing to only the stores needed. (26724)
  • Update prefer lang constructs to functions. (27070)

Experiments

  • Full Site Editing Framework:
    • Fix template resolution priorities. (27303)
    • Update default templates. (26941)
    • Add Support for Templates Default and Custom Titles and Descriptions (JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. side – 27038, PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher side 27036)
    • Add theme taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. to templates and template parts. (27016)
  • Full Site Editing Blocks:
    • Make the post title block editable. (27240)
    • Post Comment: Update placeholder. (27013)
    • Enable 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. to be set and replaced. (27224)
    • Add alignment controls to Post Featured Image block. (27076)
    • Query block:
      • Add grid view. (27067)
      • Add Posts List variation. (26990)
      • New settings icon in block toolbar. (27057)
      • Fetch all available post types (#27049). (27056)
      • Update Query block’s icon. (27048)
      • Query and QueryLoop use useInnerBlocksProps. (27014)
  • Site Editor:
    • Avoid throwing warnings if there are no terms for a template or template part. (27210)
    • Replace adminbar customize link with site-editor in FSE themes. (27135)
    • Update the new templates dropdown list. (27235)
    • Remove .block-editor selector dependency. (27063)
    • Remove unused FullscreenModeClose component. (26997)
    • Navigation:
      • Fix item color and padding. (27096)
      • Hide empty menus. (27141)
      • Add isText prop to NavigationItem. (27003)
      • Handle the no search results state. (27160)
      • Add search to templates and template parts. (26665)
      • Hide navigation item if target menu is empty. (25746)
  • Global Styles:
    • Sort Global Styles block panels by panel title. (27163)
    • Font Appearance should be enabled globally. (27150)
    • Restrict edition of theme colors by users. (27250)
    • Update mechanism that resolves Global Styles data. (27237)
    • Include px units on default font sizes defined on 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.. (27083)
    • Update stylesheet generation at edit site. (27065)
    • Add button to reset color palette. (26975)
    • Abstract preset variable retrieving and setting. (26970)
    • Update metadata and add support for padding. (27099)
  • Templates and Template Parts wp-adminadmin (and super admin) lists:
    • Update the template parts admin list with new columns and views. (27156)
    • Add the theme source to the templates wp-admin list. (27108)
    • Extend the wp_template admin list with new views and columns. (27034)
  • Support registry inheritance with atomic stores. (27162)
  • Code block: Paste plain text. (27236)
  • Generalize the atom family concept as an atom selector concept instead. (27147)
  • Bugs:
    • Query block: Fix dirtying post on load. (27323)
    • Preserve ‘Your homepage displays’ settings when updating the ‘general’ settings. (27206)
    • Make sure templates and parts queries 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. by tax_query. (27113)
    • Fix Template Part Not Found message on Windows server. (26772)
    • Respect filtered settings when they’re ported to theme.json format. (27010)
    • Preset controls need the preset CSSCSS Cascading Style Sheets. variables in scope. (27119)
    • Site Editor:
      • Show document title on small screens with nav 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. open. (27051)
      • Fix block toolbar positioning. (27266)
      • Fix app 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. on small-medium screens. (27310)

Documentation

  • Expand on the Deprecations documentation. (27286)
  • Publish MainDashboardButton documentation to handbook. (27317)
  • Update: Creating a block-based theme tutorial. (27257)
  • ESLint 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: Include a note about the minimum version required. (27203)
  • Docs: Update @wordpress/data README with 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. changes. (27180)
  • Data: Improve documentation for new API added around stores. (27061)
  • wp-env: Improve documentation for “run” command. (27053)
  • Code block: Update the documentation. (27333)
  • Add block toolbar component readme. (25245)
  • Add block patterns list component readme. (24983)
  • [Contributors docs] JS meetings were shifted to 15:00GMT. (27047)
  • Typos and tweaks: (271202708127062270602703927153)

Code Quality

  • Replace store name string with exposed store definition:
  • Search block: Remove 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. prop which was causing a ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning. (27306)
  • Refactor click redirect to avoid trailing div. (27253)
  • Editor styles: Convert to hook. (27080)
  • Add: PHP util function equivalent to lodash set. (27077)
  • Interface: Remove regions wrapper div. (27066)
  • Refactor typing observer. (27043)
  • Visual editor: Remove 4 wrapper divs. (27035)
  • Insertion point: Avoid wrapper div. (26994)
  • Typewriter: Rewrite with hooks. (26986)
  • Deprecate the withGlobalEvents HoC. (26749)
  • Edit Post: Refactor effects to action generators. (27069)

Build Tooling

  • Add eslint rule to prohibit unsafe APIs. (27301)
  • Update package lock to fix CI failures. (2709827102)
  • 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/ Actions: Build Plugin zip, store as artifact on every PR. (26746)
  • Scripts: Unpin ignore-emit-webpack-plugin dependency. (26739)
  • Adds Support to wp-env for setting the PHP version. (25268)
  • Configure phpunit-watcher to improve devex. (27058)
  • Run phpunit even when phpcsPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. fails. (27024)
  • Scripts: Auto format TypeScript files with format-js. (27138)
  • End 2 End Tests:
    • Fix randomly failing end-to-end test. (27358)
    • Fix multi entity editing test. (27347)
    • Add end-to-end tests for image editing tools. (27262)

Various

  • Simplify CSS for the code block. (27314)
  • Update the block variation widths in the block placeholder. (27255)
  • Don’t split translatable strings in block templates. (27361)
  • Reduce margin on placeholder for media. (27252)
  • Interface package: Move MainDashboardButton slot. (27213)
  • Decrease scrim when in a modal overlay. (27054)
  • Replace ‘Remove from Reusable blocks’ with ‘Manage Reusable blocks’. (27026)
  • Mark AWAIT_PROMISE as unstable API. (26852)
  • Block Support: Separate opt in for font style and weight options. (26844)
  • Latest Posts: Don’t use target="_blank". (25730)

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.

Version Loading Time KeyPress Event (typing)
Gutenberg 9.5 5.3s 28.6ms
Gutenberg 9.4 5.4s 32.6ms
WordPress 5.5 5.9s 27.1ms

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

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