What’s new in Gutenberg (July 22)

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.6 has been released. Keeping with our July focuses, we’ve been working hard to get ready for WordPress 5.5 while continuing to ship various enhancements to continue to expand Gutenberg. In particular, this release focuses on local UIUI User interface improvements, performance improvements, and 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. As part of this work, some of these fixes have made their way to WordPress 5.5 BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. 3.

Cover 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. video position controls

8.6 🇯🇲

Features

• Cover Block: Add video position controls. (22531)
• Block pattern updates: Large 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. and paragraph, Large header, Text two columns, Three buttons, Two buttons, Quote. (23858) (23857) (23853) (23849) (23848) (23881)

Enhancements

• Editor: Display Site Icon (if one is set) in full-screen mode. (22952)
• Block Variations: Add support for finding variations using keywords. (24040)
• Classic Block: Move the “convert to blocks” option from menu to own toolbar button. (23704)
• 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): Use composite pattern to improve keyboard navigation on the inserter. (23610)
• Date: Add timezone hint to post-scheduling UI. (23400)
• Panel: Improve scroll view handling when expanding. (23327) (24046)

New APIs

• Support disabling coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block patterns. (24042)
• Make the line height and custom units theme support flags consistent and opt-in. (23964) (23904)
• Image: Add the ability for a 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 to disable Image Editor. (23966)

Experiments

• Site Editor:
  • Change references to section back to template part. (23765)
  • Post Date Block: Add style attributes and restructure the edit function. (23931)
  • Edit Site: Integrate quick inserter. (23516)
• Navigation screen and blocks:
  • Try: Customizable toolbar contents. (23613)
  • Navigation screen: Restore block movers for blocks with just one sibling. (23680)
  • Navigation screen: Add error boundary to experimental navigation screen. (23679)
  • Navigation screen: Show block appender by default. (23676)
  • Block Navigation: Use quick inserter. (23737)
  • Navigation screen: Add .editor-styles-wrapper. (23736)
• Fix Inserter on the widgets screen. (24045)

Bug Fixes

• Prevent 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/. error when using arrow navigation in URLInput. (24047)
• a11y: Persist tooltips on hover. (23959)
• a11y: Components: Fix Toolbar arrow key navigation in RTL contexts. (24043)
• a11y: RichText: Restore aria-multiline. (24041)
• a11y: Fix Copy block button focus loss and try to remove the visually hidden textarea. (24022)
• a11y: Fix radio control in Windows High Contrast mode. (23706)
• Block Patterns: Override patterns that were registered by Core. (24004)
• Fix block wrapper selector. (23991)
• Fix block icon mouse-out gesture issue. (23980)
• Fix components utils export for use-update-effect. (23969)
• Fix blocks dropping to incorrect position in inner block lists. (23950)
• RangeControl: Adapt slider color to color scheme. (23936)
  • (JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.) Color Values: Rename brand to theme. Add fallback values. (24059)
• Prevent content loss after refreshing an editor with unsaved auto-draft post. (23928)
• Fix edited Classic block’s content deletion when switching to Code editor. (23927)
• Fix drag and drop to empty block lists. (23923)
• Fix drag and drop for aligned blocks. (23916)
• Fix comment capitalization/punctuation. (23912)
• Fix block merging regressionregression A software bug that breaks or degrades something that previously worked. Regressions are often treated as critical bugs or blockers. Recent regressions may be given higher priorities. A "3.6 regression" would be a bug in 3.6 that worked as intended in 3.5.. (23901)
• Inserter: Order quick inserter items by frecency. (23900)
• Inserter: Set quick inserter content width to 100% on screens below 782px. (23896)
• Autocomplete: Fix closing slash inserter with ESC. (23859)
• Inserter: Hide inserter’s block preview when searching. (23827)
• apiFetch: Fix fetch-all preloading. (23807)
• Fix error triggered when a tab is removed from TabPanel component. (23784)
• Fix block movers in navigator on experimental navigation page displaying horizontally. (23779)
• Search: Fix attribute defaults. (23777)
• Apply the reset mixin to the inserter panel. (23744)
• 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. controls: Add more space for German and other locales. (23738)
• Block Library: Standardize post block placeholders. (23690)
  • 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.: Block Library: Translate post block placeholders. (23774)
• Fix issue where block inserted in wrong place when selection is in nested block list, but root appender is used. (23668)
• Fix an issue where dragging while the page has no scrollbar results in a console error. (23666)
• Updated styling to match the post editor. (23525)
• UnitControl: Fix internal unit parsing to handle incoming unit prop. (23521)
• Table block: Fix focus loss in between row/column insertions. (23508)
• Editor: Fix block highlight rendering after block is moved. (23425)
• Inserter: Fix line to show again. (20792)
• Button: Properly handle border radius reset. (23887)
• Block Directory: Remove “contact adminadmin (and super admin)” messaging. (23948)

Performance

• Optimize more selector calls. (23930)
• Performance testing: Cover Site Editor loading time. (23842)
• Avoid re-rendering the PostSavedState component on each change. (23829)
• Small performance tweaks. (23825)
• Env: Only perform expensive install work when required. (23809)
• Env: Improve install performance. (23806)

Documentation

• Expand and update block-based themes documentation page. (23750)
• Docs/update button component props. (24013)
• Docs: Update plugin FAQ with versions link. (24005)
• Remove the experimental flag from the block patterns documentation. (23954)
• Docs: Add links for Create a Block Tutorial. (23946)
• Adds basic documentation for the ToolbarButton component. (23909)
• Docs: Title and markdown formatting for table. (23850)
• Update documentation contributors guide. (23840)
• Create new page listing Gutenberg releases in each WordPress version. (23773)
• Docs: Clarify the interactive mode for create-block. (23752)
• Docs: Add a tutorial on how to create a block-based theme. (23732)
• Docs: Move ESNext to JavaScript tutorial. (23725)
• Docs: Move DevEnv to own section for documentation. (23593)
• Added readme to matrix alignment toolbar. (23341)
• Update nested-blocks-inner-blocks.md. (23935)
• Update block-registration.md. (23933)
• Link to theme-experiments repo in block-based theme documentation. (23748)

Code Quality

• Refactor URLPopover to use 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. (23918)
• Refactor Disabled component to use React 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.. (23917)
• Refactor More block. (23758)
• Remove navigation block styles. (23678)
• Refactor MediaPlaceholder to function component. (23671)
• Remove duplicate selectors. (23466)
• Refactor Tag Cloud block to use React Hooks. (23426)
• Convert PostSavedState to functional component. (23038)
• Types: Improve project setup. (21581)
• Refactor ReusableBlockEditPanel to use hooks (and add type info). (21181)
• Updates text, buttons colors and labels. (23855)

Build Tooling

• Env:
  • Allow wp-env to start without configuration. (23913)
  • Add support for different options in each environment. (22568)
• Build: Use .min.js suffix for bundled JavaScript. (23926)
• Try running the performance tests as a 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/ action. (23818)
• Improve the performance tests setup. (23817)
• Automation:
  • Limit tests to not run on documentation-only changes. (23834)
  • Add paths-ignore **.md for unit tests checks. (23845)
  • Switch workflows to use paths-ignore and **.md. (23843)
• Fix action GitHub action workflow YAML syntax errors. (23844)

Various

• Embeds: Remove unsupported core-embed/hulu block. (23984)
• E2E: Remove duplicate blocks in setup file. (23981)
• 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/.: Check for WP5.5 and skip registering routes. (23880)
• LinkControl: Extract reusable parts. (23869)
• Updates image size to match columns width. (23854)
• InputControl: Add prefix prop. (23824)
• Block Navigation: Change the visible labels for “Block navigation” to “List view”. (23796)
• Site Tagline Block. (23788)
• Image Editor: When editing, pass the edited image src. (23703)
• Replace SEO settings nofollow toggle with rel text 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.. (23682)
• Use global registry on the experimental navigation screen. (23675)
• Env: Mark breaking change in changelog. (23776)
• Cancel previous running workflows when a new commit is made. (23587)
• Add title to image and video selection sheets. (23083)
• Site Title: Add support settings for colors, fonts, and line height. (23007)
• Add fix to make inputs of type email return true from isTextField. (21162)
• Full Site Editing: Add a Site Logo block. (18811)

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 8.6	9.62 s	35.05 ms
Gutenberg 8.5	10.38 s	37.55 ms
WordPress 5.4	13.48 s	54.65 ms

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

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