What’s new in Gutenberg? (13 May)

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/ 8.1 release mostly contains developments/enhancements on experimental screens, 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, and performance improvements.
It also contains some new features available on the general editor screens, described bellow.

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. pattern features

Gutenberg 8.1 brings pattern search to make it easier to insert the desired patterns and a new pattern: the testimonials.

Copy block action

The copy block action is a small quality of life improvement for touchscreen users or users who don’t use keyboard shortcuts. Gutenberg 8.1 adds a button to the collapsed block actions (next to duplicate, etc.) to copy the selected block(s). The feature is quite similar to the “Copy all blocks” but then for the selected block.

8.1 🇹🇷

New features

  • Pattern search (21944)
  • Testimonials block pattern. (20894)
  • New Transforms:
    • Embed blocks into Paragraph blocks. (17413)
    • Code to HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block and the opposite. (21779)
  • Add copy action to the blocks. (22214)

Enhancements

  • Implement Block Navigator selection on the Nav Menus page. (22017)
  • Write block patterns in PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher to allow 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.. (21946)
  • Post title: handle paste as blocks. (21758)
  • Clear Publish Date Button. (20914)
  • Add gap between nested submenus. (22227)
  • Block Library: enhance the author’s block. (19894)
  • Add “black” and “white” color options to the default color palette. (22082)
  • Light blocks: social links. (22078)
  • CustomSelectControl: set aria-hidden to empty option list. (21298)
  • Add some more g2 icons. (21825)
  • Allow the column block in the inserter. (20502)
  • Delete menus in nav menus experimental screen. (21486)
  • Visual and experience improvements to existing sub-navigation flow. (22107)
  • Reduce font-size and line-height of “it’s time”. (21627)
  • Template Loader: Introduce get_template_hierarchy(), drop gutenberg_template_include_filter(). (21980)
  • Make parts of the BlockNavigationList overridable using slots. (21948)
  • Change the color alpha input step to match the slider step. (21953)
  • Navigation: fallback for undefined orientation. (22057)
  • Remove the subscription button from the blogblog (versus network, site) template. (22129)
  • Move the Entities Saved States from Modal to 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.. (21522)

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

  • Update the Patterns API to avoid ambiguity. (21970)
  • Expose the registered pattern slugs in get_all_registered. (21619)
  • Fix doc-building pre-commit API hook issue. (22116)
  • 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/.: Block directory – Typecast author_block_count as integer. (17594)
  • Block API: Block Context: 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. content, prepare attributes at render, pass a block to render. (21925)

Experimental

  • Add undo-redo UIUI User interface to edit-site and edit-widgets. (21955)
  • Light blocks: site title. (22069)
  • Update: Use EntityProvider on the 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. area. (22008)
  • Site editor:
    • Extract gutenberg_find_template_post helper. (21959)
    • Fix default editor background. (22182)
    • Refactor close button slot. (22179)
    • Make close button replaceable. (22001)
    • Add home icon to template switcher. (22004)
    • Updated template content. (22044)
    • Fix spelling mistake. (21991)

Performance

  • Reduce re-renders from block nodes context. (22134)
  • Move memo() from BlockStyles to BlockPreview. (21993)
  • Avoid rerenders of the entire BlockInspector when block attributes change. (21990)
  • Optimize BlockStyles by using 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. and React.memo (instead of HOCs). (21973)

Bug Fixes

  • Popover: Fix closest().parentNode null error. (22264)
  • Correct color palette in color settings. (22138)
  • Remove import of inexistant component. (22130)
  • Build Tooling: Run packages build before lint. (22088)
  • RangeControl: Fix number input change interaction. (22084)
  • Fix entity selection through save panel. (22011)
  • 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: Relax check for i18n-text-domain rule. (21928)
  • Block Library: Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. does not recognize isSelected prop in Spacer block. (21924)
  • Reinitialize 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. after the parent block is moved around. (21916)
  • Configure the navigation editor with correct __experimentalFetchLinkSuggestions. (21873)
  • Create the proper shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. on paste. (21864)
  • Refactor FontSizePicker component. Fix bug on undo. (21757)
  • Move caret to the end of pasted content. (21755)
  • Embed: use the same SmugMug URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org regex as the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (21744)
  • Navigation block: use new icon in placeholder. (21713)
  • Fix Template Part placeholder preview. (21623)
  • Restore the missing background color on the nested submenus. (22228)
  • fix: [#21777] Prevent focusing of FireFox address bar. (22215)
  • Fix flaky test in rich text. (22202)
  • Fix flaky test: tag “target” attribute. (22200)
  • Fix extra tab stop on Modal component. (22063)
  • Writing flow: fix vertical arrow nav in table (and generally grid). (22105)
  • Gallery block / media-placeholder – Preserve changes made while upload in progress. (19134)
  • Add missing dependency. (22086)

Tooling

  • Build Tools: Validate package-lock.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. for “resolved” errors. (22237)
  • Build Tools: Disable ESLint no-console for bin directory. (22033)
  • Build Tools: Changelog: Normalize entry to end with period. (22010)
  • Add analyze-bundles script. (21827)
  • Add changelog generator script. (19866)
  • Add a method for publishing patches to the Lerna scripts. (21844)
  • Add additional e2e debugging option. (21845)
  • Replace espree with babel. (21853)
  • Update diff to 4.0.2 and work around tree-shaking issues. (21994)
  • Increase the severityseverity The seriousness of the ticket in the eyes of the reporter. Generally, severity is a judgment of how bad a bug is, while priority is its relationship to other bugs. of jsdoc/no-undefined-types. . (21942)

Code Quality

  • Block: move new props to hook. (22212)
  • Block: avoid useLayoutEffect. (22108)
  • Try: Reduced specificity base block margins. (22051)
  • Update the audio and video blocks to use a light wrapper in the editor. (22028)
  • Remove unused animation lingering in paragraph file. (22020)
  • Columns. Remove the top and bottom margin from individual column blocks. (22018)
  • Try better inserter toggle styling. (22016)
  • Block Editor: Rename block context in BlockListBlock. (21922)
  • Remove duplicate CopyHanddler. (21817)
  • Types: Restore element, icons, primitives types. (21781)
  • Convert core toolbar buttons into ToolbarButton. (20008)
  • Block Directory: Add end 2 end tests. (20023)
  • ClipboardButton: use hooks. (22220)
  • ClipboardButton: remove wrapper span. (22218)
  • Block Library: Update FSE blocks to use block context. (21696)
  • Group: Zero out the intrinsic margin set to every block in the editor. (22209)
  • Unset the inherit for links. (22160)
  • Template Loader: Get rid of _wp_current_template_part_ids globals. (22143)
  • Block Library: Post Author: Reference attributes by argument. (22114)
  • Remove pass by reference of the $scripts and $styles attributes in client-assets.php. (21987)
  • Use optional chaining, optional catch binding. (21967)
  • Extract block mover buttons so that they can be individually imported. (22122)sss

Documentation

  • Scripts: Mark env script as deprecated. (22158)
  • Docs: Use InspectorControls from wordpress/block-editor. (22153)
  • Fix bundle analysis change location in the changelog. (22136)
  • Documentation: Improve the way CHANGELOG files are maintained. (22126)
  • ESLint Plugin: Add missing rules to root README. (22042)
  • Fix props, in example, code for Edit Post module. (21976)
  • Document e2e test command options. (21962)
  • Add an example for how to choose a style variation for a block variation. (21927)
  • Add documentation for onSelectURL property. (20799)
  • Document the old patterns API deprecation. (22177)
  • Coding Guidelines:
  • Document JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. language support commitment. (22030)
  • Add “gotchas” section about ES2020 optional chaining. (22029)
  • Recommend function components. (22090)

Various

  • Expose presets declared via add_theme_support in global styles. (22076)
  • Update is-promise package to the latest version. (21940)
  • Blocks: Register FSE blocks if the experiment is enabled. (21536)

Mobile App

  • Add missing RTL support for some mobile components. (21502)
  • Remove separatorType prop from TextControl, RangeControl… (21365)
  • Color settings. (21326)
  • Global styles provider. (21637)
  • Update existing templates to use new blocks. (21857)
  • Enable pullquote block. (21930)
  • Merge release 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". back to master for v1.27.1. (22234)
  • Wrap button blocks with buttons blocks in page templates. (21939)
  • Components: Create a separate .native entry for ToolbarItem. (22229)

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~ 36000 words, ~ 1000 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 8.1.010.88s43.61ms
Gutenberg 8.0.013.30s42.97ms
WordPress 5.410.80s52.87ms
#core-editor, #editor, #gutenberg-new