Tag Archives: gutenberg-new

Ryan Welcher 6:10 pm on November 29, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 12.0.0 ( 24 November)

These “What’s new in 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/…” posts (labeled with the #gutenberg-new 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.)) are an update every time a Gutenberg release is done (every 2 weeks more or less) and they explain the features included in each release. As a reminder, here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project.

It’s the end of November and Gutenberg 12.0.0 has been released! With contributor efforts being geared towards preparing for WordPress 5.9, this release is more maintenance-focused but still offers a few new features as well as many 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.

Table of Contents

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. Styles Preview

Until this release, Block Styles appeared in both the block’s toolbar and in the editor’s 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.. These previews, although rather small, added to the overall height of the sidebar accordion. Gutenberg 12.0 moves the sidebar previews so they only appear when the style is hovered or has keyboard focus. This reduces the overall sidebar footprint and also puts more emphasis on the style’s name.

Before this release, the Featured Image block did not provide a clear representation during its placeholder state, displaying a selection box with a fixed height. With Gutenberg 12.0 the block’s placeholder state is a better representation of how it would look when using real images, as it displays a placeholder image that respects both the height and width settings.

Paragraph block combined typography controls

As of 12.0.0, the Drop Cap setting for the paragraph block has been moved from its own section in the Block Settings sidebar into the Typography section. This change keeps all Typography related controls together for the block to provide a consistent experience.

Site Editor Welcome Guide

In preparation to stabilize and release the block theme Editor in WordPress 5.9, a new welcome guide has been added to help users get started with both the Editor and the Styles sidebar.

Site editor welcome guide modal.

Official 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. Schema updates

Official schemas for block.json and theme.json were introduced with Gutenberg 11.9.0. This release provides some updates as well as new URLs to easily access them:

The URLs above redirect to the latest version of the schema but as WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. versioned are released, they can also target specific versions of WordPress starting with WordPress 5.9!

Theme.json example.

New Developer Experience section in the Changelog

Recently, contributors have been putting an even bigger focus on improving the developer experience, and there is more to come. So much so, that we are introducing a new section for it in the changelog. This speaks to the commitment from contributors to not only create a great experience for users of Gutenberg but also those that extend it. To keep updated or contribute to the discussion, you can check the recent GitHub discussions on Developer Experience.

Enhancements

Block Library

  • Move WP_REST_Block_Navigation_Areas_Controller from Gutenberg to Core. (36374)
  • Change all the uses of “website” to “site”. (36220)
  • Featured Image: Let Featured Image block inherit dimensions, look like a placeholder. (36517)
  • Navigation: Enable Previews for Navigation Link Blocks. (36412)
  • Navigation: Apply 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. functions to Nav block menu drops when selecting existing Menu. (36301)
  • Navigation: Refactor and simplify setup state. (36375)
  • Navigation: Rename fse_navigation_area to wp_navigation_area. (36460)
  • Navigation: Return wp error from wp_insert_post. (36483)
  • Paragraph: Merge text settings into typography panel. (36334)
  • Remove textdomain from calendar block. (36500)

Site Editor

  • Add welcome guide. (36172)
  • Update back button URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (36313)
  • Improve compatibility with menu endpoints WordPress 5.9. (36372)
  • ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. to any errors coming up in gutenberg_migrate_menu_to_navigation_post. (36461)
  • Change edit links for templates and template parts. (36294)
  • Update site editor title truncation. (36436)
  • Add template_type guards. (36318)

Block 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.

  • Update schema to require either a type or an enum. (36267)
  • Add _wp_array_set and _wp_to_kebab_case to 5.8 compat. (36399)

Design Tools

  • Letter spacing: Update label copy. (36385)

Style

  • Add block icon next to blocks list. (36520)
  • theme.json: Adds a setting property that enables some other ones. (36246)
  • Block Styles: Show style preview when hovered or focused. (34522)

Icons

  • Add the missing comment edit link icon. (36565)
  • Remove hard coded color from query pagination icons. (35837)
  • Remove hard-coded values on icons. (36564)

Components

  • ToolsPanel: Allow additional props on ToolsPanel. (36428)
  • Typography Panel: Make letter spacing jsDoc and prop use consistent. (36367)

Bug Fixes

Block Library

  • Fix background colours in nested submenus. (36476)
  • Fix colour rendering in Navigation overlay. (36479)
  • Fix duplicate custom classnames in navigation submenu block. (36478)
  • Fix submenu justification and spacer orientation. (36340)
  • Group – Fix overzealous regex when restoring inner containers. (36221)
  • Hide visilibility and status for navigation posts. (36363)
  • Nav block menu switcher – decode HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. entities and utilise accessible markup pattern. (36397)
  • Navigation: Fix click-button size, submenu directions, scrollbars. (36215)
  • Page List block: Fix space before href attribute. (36505)
  • Page List: Use core entities instead of direct apiFetch. (36531)
  • Post Comments Form: Ensure typography styles are applied to child elements. (36425)
  • Post title block default CSSCSS Cascading Style Sheets.: Add a break-word rule by default. (35703)

Block API

  • Use firstChild and lastChild when parsing lists from MS Word. (36019)

Full Site Editing

  • Add the ability to opt-out of Core color palette V2. (36492)
  • Fix layout shift in core/post-featured-image block with isLink enabled. (36552)
  • Template Part Block: Add some guards. (36324)
  • Chore: Add rewrite false to global styles CPT. (36273)
  • Revert “theme.json: Adds a setting property that enables some other ones”. (36477)
  • Update more references to __experimental menu endpoints to make them stable. (36386)

Site Editor

  • Fix site editor reset styles in WP 5.9. (36390)
  • Site Editor – prevent loading state from showing the adminadmin (and super admin) menu. (36455)

Global Styles

  • Replace get_theme_file_path in theme_has_support. (36398)
  • Chore: Fix small typos on the rest endpoints. (36272)

Block Editor

  • Strip metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. tags from pasted links in Chromium. (36356)
  • Add webp extension in filePasteHandler and getPasteEventData. (36361)
  • Fix mobile horizontal scrollbar. (36567)
  • Polish metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. container. (36297)

CSS & Styling

  • Update theme styles for the code block. (36282)

Documentation

Handbook

  • “npm install” suggestion provides a better learning experience. (36217)
  • Added specific links to agenda and notes posts related to core editor meetings. (36199)
  • Schemastore – $schema is VS Code-specific. (36179)
  • Update GIF image in documentation with wp.org schema URL. (36456)
  • Update Versions in WordPress to include 5.9. (36156)
  • Update theme.json schema to refer to wp.org URL. (36332)

Components Package

  • Update combobox-control component readme. (36413)
  • Update wordpress/components changelog. (36448)

Developer Experience

  • Add block.json schema definition to core blocks. (35900)
  • Add pattern to name key in block.json Schema. (36343)
  • Update schema URL to wp.org domain. (36316)
  • Allow block.json attribute type to be an array. (36295)
  • Fix schema to allow for custom blocks in theme.json. (36341)

Code Quality

  • Change @Package to WordPress in block-library. (36494)
  • postcss-themes: Fix PostCSS 8 deprecation warning. (36284)
  • Data: Clean up registerGenericStore param names. (36300)
  • Prepare navigation php code for core patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing.. (36336)
  • Add comment to Remove 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. to allow WP variables after min version is 5.8. (36281)
  • Update: Centralize safe_style_css usages. (36280)
  • DEWP: Fix deprecation warning. (36285)

Tools

Testing

  • E2E: Add more Cover block tests. (36321)
  • Fix Performance CI tests and make them always use the latest major as base 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".. (36463)
  • Fix failing tests and compatibility with 5.9. (36368)
  • Add integration tests with core blocks schema validation. (36351)
  • Skip flaky image block test. (36446)
  • Theme switch on the global styles 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/. unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. (36277)

Build Tooling

  • Add TypeScript for builds and tests. (36260)
  • stylelint-config: Widen the acceptable version range for the ‘stylelint’ peerDependency. (36518)
  • Update Babel packages to 7.16 version. (36244)

Fix not transforming logical assignments for packages. (36484)

Performance  Benchmark

VersionTime to Render First BlockKeyPress Event (typing)
Gutenberg 12.06.18s39.99ms
Gutenberg 11.95.89s40.75ms
WordPress 5.86.56s49.54ms

Thank you to @shaunandrews for the assets included in this post, @priethor for coordinating the release process and proofreading, @vcanales for the moral support and answering questions about the release process, and to all those who contributed to this release!

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

Andrew Serong 12:48 am on November 12, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.9.0 (10 November)

It’s now November, which means this is the final 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/ release for WordPress 5.9! Included are several new Gutenberg blocks for working with post comments, along with a host of enhancements to existing blocks with a lot of focus going into improving the Navigation 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., which will feature heavily in block themes.

Finalizing the Site Editing entry point

In preparation to introduce Site Editing in WordPress 5.9 and following the site editing IA proposal, the Site Editor menu item has been renamed to “Editor”, and now sits under the Appearance menu.

Fullscreen pattern explorer modal

With the increasing number of block patterns available in the pattern directory and bundled with themes, there is now a full-screen modal pattern explorer that can be accessed via an Explore button in the pattern inserter. This explorer allows users to find patterns in a bigger, more advanced tool.

New comment blocks

This release includes a handful of new blocks to allow for granular control over the design of comments in templates for posts. The new Comments Query Loop and Comment Template blocks work similarly to the Query 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. and Post Template blocks, but for the display of comments via a default template composed of Post Comment Author, Post Comment Date, and Post Comment Content blocks. Site owners can lay out the blocks to suit their designs, for example, by including the newly added Comment Author Avatar block.

Outside of the display of the comments themselves, are two blocks for displaying the Comment Reply Link and Edit Comment Link.

With these new blocks now available, the existing experimental Post Comment block has been deprecated, with the block now hidden in the inserter.

Further iterations on the Navigation block

With its inclusion in 5.9 and all its recent enhancements, the Navigation block is no longer considered experimental. The block has now opted-in to the flex layout block support, the placeholder for the block has been simplified, and the UIUI User interface and naming of navigation entities have been refined. The data layer for the Navigation block has also been improved, as the block’s data is now saved to a wp_navigation custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept., allowing greater flexibility surrounding the management of navigation menus used for this block. Among these management improvements, there is an additional menu item for editing and managing navigation menus, found under the Appearance tab, and it is now also possible to create new menus from an existing Navigation block directly within the editor.

Typography tools enhancements

The Typography controls for blocks have been switched to use the ToolsPanel component, which allows blocks’ frequently used settings to be displayed by default, with more advanced controls able to be exposed via a menu. With this in place, typography support across the whole block library has been updated, with many blocks now opting into more controls. For example, most text-based blocks like paragraph, heading, and list blocks now support font style, letter spacing, and text transform, with only the most common font size displayed by default.

AccessibilityAccessibility 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) improvements

Performance and accessibility of the block list view have been improved by using a windowing technique that now renders a fixed number of items at a time instead of every block. The post title component is now covered for screen readers, and announcements have been added on formatting changes in rich text fields. Also, the “Save” keyboard shortcut has been rolled out to the site editor.

Other Notable Highlights

As part of contributors’ efforts to provide an outstanding editor performance, the initial loading of the site editor has been improved. A few features common to the block editor have now been rolled out to the site editor, including rich previews in the link editing UI, which also features an extra text field when modifying an existing link. The UI for saving multiple entities (e.g. site, template, and template parts) has also been improved with descriptive text added.

Block enhancements include padding support for the Columns block, and the Post Author, Post Excerpt, Comment Author, and Code blocks now all have spacing support. Support for embedding Wolfram Cloud links has been added, and there is now transparency support in the Duotone 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. that can be applied to images.

In 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, there is a proposed new set of functions to make it easier for plugins and themes to extract data from theme.json settings and styles without having to use WP_Theme_JSON_Resolver. Also, usage of InnerBlocks.Content within blocks’ save functions has been replaced with useInnerBlocksProps.save for better consistency with behavior in edit components.

The full set of changes included in this release can be found below.

Gutenberg 11.9.0

Features

Block Library

  • New Block: Comment Reply Link. (35774)
  • New Block: Comment Link. (35965)
  • New Block: Comment AvatarAvatar An avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name.. (35396)
  • New Block: Comments Query Loop. (35231)

Enhancements

Block Library

  • Buttons: Add flex layout and new layout type. (35819)
  • Code: Add support for padding, color, and border styles. (27582)
  • Columns: Add padding support. (35701)
  • Comment Author Name: Add spacing to have same options as Post Author Name. (36213)
  • Comment Edit Link: Add alignment option. (36033)
  • Embed: Add Wolfram Cloud as an embed provider. (35656)
  • Gallery: Replace gallery experimental setting with a check for use_balanceTags. (34979)
  • Image: Add data-id attribute on server side render for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. galleries. (35975)
  • Navigation: Add create new menu button. (36245)
  • Navigation: Add delete nav menu button. (35981)
  • Navigation: Add featured transforms in Link Control for Navigation Link items. (35857)
  • Navigation: Add flex layout. (36169)
  • Navigation: Add missing menu item attributes. (35634)
  • Navigation: Create nav menu on pattern insertion or when the block has uncontrolled inner blocks. (36024)
  • Navigation: Migrate classic menus to block-based menus on theme switch. (36255)
  • Navigation: Mobile responsive navigation by default. (35917)
  • Navigation: Provide a way to manage wp_navigation posts from wp-adminadmin (and super admin). (36126)
  • Navigation: Reword navigation color labels. (35916)
  • Navigation: Save data to a wp_navigation post type. (35746)
  • Navigation: Show the placeholder again when moving from a valid menu to non-existing menu. (36210)
  • Navigation: Update block entity automatic name generation and refine naming UI. (36238)
  • Navigation: Use a single placeholder for the block. (36023)
  • Page List: Create a JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. version for the editor. (31670)
  • Post Author: Add spacing controls. (35963)
  • Post Comment: Deprecate the block now that the Comment Query Loop block has been added. (36032)
  • Post Comment Author: Add alignment options. (36045)
  • Post Comments: Even out the top margin inside the block. (35887)
  • Post Comments: Hide the “Comments Closed” message. (35743)
  • Post Comment Form: Adds in basic styling for post comment form. (35704)
  • 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.: Add spacing controls. (35959)
  • Post Excerpt: Don’t print the wrapper when there is no excerpt. (35749)
  • Post Title: Return no markup if title is empty. (35861)
  • Search: Add contextual defaults when inserted in Navigation block. (36125)
  • Gallery block: Add a dismissible warning about the need for versions >=18.2 of the mobile app. (36012)

Accessibility

  • Add announcement on formatting change for screen readers. (35896)
  • Add aria-current to navigation link, submenu, page list. (35880)
  • Link editing: Improve focus styles for Link UI preview title. (35853)
  • Site Editor: Enable the “Save” keyboard shortcut. (36138)
  • Try to communicate to screen readers that post title is textarea. (35898)

Block Editor

  • Block toolbar: Remove visual clue from text alignment icon. (35922)
  • Drag and drop: Show drag slot instead of hiding the block being dragged. (33950)
  • Enable rich previews in the Link UI for the Site Editor. (35951)
  • Link editing: Update Link UI design for preview action buttons to use icons for edit and unlink. (35833)
  • Multi-Entity Saving UI Improvements. (35933)
  • Use the block’s name in the “remove block” menu item in the block settings dropdown. (35872)
  • StripHTML: preserve leading and trailing spaces and strip script and on* attributes. (35539)

Full Site Editing

  • Improve the initial loading of the site editor. (36044)
  • Move the Site Editor menu item to sit under Appearance and rename to Editor. (36064)
  • Remove navigation panel in site editor. (36194)
  • Use Heading component on NavigationMenu and NavigationGroup components. (36009)
  • Use SearchControl component inside nav menu. (36011)

Components

  • ColorPicker: Implement new color palette editor component. (35783)
  • Duotone: Add description to clarify that the underlying image will not be affected. (36018)
  • Modal: Wrap the modal contents in a StyleProvider. (36261)
  • ToolsPanel: Update typography panel layout. (35911)
  • LinkControl: Split control for URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org and Text within Link UI. (33849)

Template Editor

  • Add resizer to template part focus mode. (35728)
  • Auto resize the height of template part focus mode. (35974)

Global Styles

  • Remove the duplicated title in background, text and link views. (35583)
  • Typography: Switch to ToolsPanel for block support UI. (33744)
  • Add a Global Styles endpoint and use it in the site editor. (35801)
  • Migrate 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. v1 to v2. (36155)
  • Update: Show all color and gradient origins (core, theme, and user). (35970)

Design Tools

  • Duotone: Enable transparency. (34130)
  • Layout: Add flex-wrap control to flex layout. (36003)
  • Typography block support: Add typography support and defaults. (34064)

Media

  • Remove “security” verbiage from warning when filetype does not pass on upload. (36226)

Patterns

  • Add an inserter flag to hide patterns from UI. (36108)

Themes

  • Remove experimental feature notice for block themes. (36083)

General Interface

  • Apply borders to canvas rather than other UI elements. (31081)

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/.

  • Respect fields param for global styles REST API requests. (36206)
  • URL Details: Update regex to include og:Description. (35875)

New APIs

Global Styles

  • Add API to access global settings, styles, and stylesheet. (34843)

Block Library

  • Inner blocks: Add useInnerBlocksProps.save function for edit/save symmetry, and stabilise API. (26031)

Bug Fixes

Block Library

  • Buttons: Address deprecation issues from Buttons flex layout PR. (36192)
  • Classic: Fix select all blocks side effect that overwrote paragraph block contents. (35999)
  • Column: Only add flex-basis if width contains a number. (35831)
  • Comment Template: Move inner blocks container to separate components. (36174)
  • Blocks: Fix relative URLs for inlined styles. (35538)
  • Navigation: Disable ability to edit wp_navigation menus via Appearance -> Navigation Menus for non-FSE themes. (36257)
  • Fix incorrect attributes definitions. (36264)
  • Fix saving template parts in the site editor by fixing controlled inner blocks parent block attributes updates. (35827)
  • Fix incorrect attributes definitions for Column, Cover, and Group blocks. (36140)
  • Gallery: Make sure the mobile warning notice only runs when images are added to a new block. (36326)
  • Gallery: Only show the gallery upload error message if mixed multiple files are uploaded. (35790)
  • Gallery: Remove the arbitrary alt text that is added to gallery images. (35936)
  • Group: Fix inner container regexes that relied on fixed div 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.). (36256)
  • Heading: Avoid error on split when the paragraph isn’t registered. (35871)
  • Image: Make sure the Image block border radius is inherited if the image is linked. (36289)
  • Navigation Submenu: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice caused by stale id reference. (35984)
  • Navigation overlay menu: Fix submenu spacing. (35823)
  • Navigation: Ensure menus exist before map operation. (36355)
  • Navigation: Fix accessibility issues. (36292)
  • Navigation: Fix dropdown indicator position. (36106)
  • Navigation: Fix issues with responsive justifications. (35913) and (36105)
  • Navigation: Fix padding for social links on mobile. (35824)
  • Navigation: Fix submenus not opening on click. (36290)
  • Navigation: Hide post attributes metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. box. (36358)
  • Navigation: Small styling fixes and tweaks. (36298)
  • Pattern: Remove wrapping div. (36090)
  • Post Comment: Handle the case where a comment does not exist. (35810)
  • Post Navigation Link: Do not translate HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. tag. (35930)
  • Post Template Block: Move inner blocks container to separate component. (35945)
  • Post Terms: Prevent the block from breaking on pages. (35957)
  • Site Logo: Fix center alignment. (35971)
  • Site Logo: Fix fatal error in Site Logo block in WP 5.9. (36195)
  • Prevent PHP notice in Elements block support for blocks with empty content. (35836)

Components

  • AnglePickerControl: Use admin color scheme. (35908)
  • BaseControl: Fix undefined Help text id if no id is passed to component. (35899)
  • ColorListPicker: Fix spacing to accomodate the new color picker. (36017)
  • ColorPalette: Fix className. (36016)
  • ColorPicker: Fix unexpected movements, and closing on first click in the color picker. (35670)
  • Popover: Check anchorDocument default view before removing events. (35832)
  • RangeControl: Fix style issue in RTL. (35777)
  • Storybook: Lazy load LTR/RTL styles for consistent specificity. (35771)
  • Text: Fix text color value to use correct gray color value for Link UI preview description text. (35851)

Global Styles

  • Fix navigation in 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.. (36203)
  • Fix presets data for themes that do not provide any preset. (36054)
  • Generate preset metadata for font-family in the site editor. (36022)
  • Hotfix for leftovers of WP_Theme_JSON_Resolver::Get_merged_data. (36173)
  • Lower the specificity of border & padding styles for the outline block style in the button block. (35968)
  • Theme.json: Remove custom prefixes from properties that did not land in 5.8. (34485)
  • Fix Rest global styles controller accessing configuration that may not exist. (36047)

Block Editor

  • Allow moving metaboxes to previously empty area. (25187)
  • Change console.error to console.warn for enqueued styles in the editor. (35914)
  • Fix inserter with block pattern categories. (36116)
  • Fix navigation block link control zero value in it. (36198)
  • Fix the update of link and suggestions in LinkControl. (32320)
  • Make Link UI inactive if selection extends beyond format bounds or encounters new link. (35946)
  • Fix selection by holding shift key for nested blocks. (35668)
  • Fix shift+click on a child block with its parent selected. (35988)
  • Fix: Crash when resetting user color palette. (36233)
  • Fix: Show user colors on palette indicator. (36232)
  • Fix getPxFromCssUnit test stability and test that memoized function works correctly. (35939)
  • Link editing: Account for link anchor no longer being present when generating unique link instance key. (36357)
  • Preserve highlighted text selection when changing colors (36263)

Design Tools

  • Font Appearance: Improve consistency of label in Typography panel. (35860)
  • Font Family Support: Fix skip serialization check. (36073)
  • Navigation: Force text decoration styles on nav item in editor. (35859)

Template Editor

  • Clear selected block when clicking outside in the template part focus mode. (35816)
  • Templates: Only include templates for the current post types. (35802)

Core Data

  • Avoid showing deleted records in editor saving flow. (36027)
  • Fix getEntityRecords to ensure resolution on REST API failure. (36353)
  • Fix Core Data using hardcoded baseURL prefix for taxonomies and post types API requests. (35850)
  • Make saveEditedEntityRecord use the entity key when available. (36212)

Patterns

  • Update unsaved navigation block flow. (35976)

Full Site Editing

  • Add fallback handling for plugins or themes using the 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.. (35877)
  • Fix missing <MainDashboardButton> slot fill in site editor. (36369)
  • Remove duplicate Editor menu item. (36342)
  • Theme resolver: Fix crash from calls to undefined functions. (36248)
  • Unhook _block_template_render_title_tag to prevent duplicate title tags from rendering. (36133)

Widgets Editor

  • Fix layout styles not applying in widgets customizer. (35865)

CSSCSS Cascading Style Sheets. & Styling

  • Editor defaults for themes with no editor styles and when user disables theme styles. (35736)

History

  • Support disabling autosave for native Unsupported Block Editor. (35639)

Performance

List View

  • Fix pagedown/pageup and improve scrolling. (36063)
  • List View: Render a fixed number of items. (35230)

Block Editor

  • Improve opening of the block inserter via manual token-based analysis of reusable blocks. (35763)

Widgets Editor

  • List View: Avoid re-rendering all items on block focus. Enable persistent List View in 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. editor. (35706)

Experiments

Block Library

  • Navigation Area block. (36178)

Full Site Editing

  • Always display Customizer menu item. (36168)
  • Revert “Always display Customizer menu item”. (36189)
  • Remove slug and status columns from templates list in Appearance > Templates. (35996)

REST API

  • Show a warning when trying to save unsupported blocks. (35993)

Documentation

  • Added link to Ways to keep up with Gutenberg & Full Site Editing. (36077)

Handbook

  • Add Thunks Tutorial. (36051)
  • Add a more detailed guide for reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. native development. (35529)
  • Blocks: Add view script to block schema and documentation. (36175)
  • Blocks: Document changes to style and editorStyle in block.json. (36218)
  • Add Getting Started level for documentation. (35891)
  • Add section about using the schema during development. (35835)
  • Fix a small typo in the “Getting started” documentation. (36109)
  • Fix Typos in widgets/overview.md. (36078)
  • Fix wording in the Authoring Experience documentation. (35969)
  • Improve Getting Started landing page. (35893)
  • Release Docs: Remove consecutive RCs warning. (35855)
  • Theme.json: Fix typo. (36139)
  • Theme.json docs: Add missing settings & styles. (36137)
  • Tweak organization for getting-started documentation. (34091)
  • Update the recommendation for the cadence of npm releases. (35925)

Packages

  • Components: Update Components CONTRIBUTING.md indentation. (35866)
  • Create Block: Move create-block changelog entries back to Unreleased section. (35886)
  • DOM: Backtick added around <textarea> input tag in readme file. (34813)
  • Env: Update wordpress-develop example to clarify src/build location. (35978)
  • Rich Text: Add usage documentation for Rich Text package. (35885)
  • Schemas: Fix schema file URL. (36157)

Code Quality

REST API

  • Add Theme’s base global styles endpoint. (35985)
  • Improvements for the global styles endpoint. (36071)
  • Remove “experimental” from URL details REST controller and promote to v1 namespace. (35915)

Block Library

  • Heading: Auto-generated anchors hide implementation details. (35747)
  • Mark FSE blocks as non experimental. (35979)
  • Mark Post Comments as stable and Comments Query Loop as experimental. (36132)
  • Mark Post Navigation Link and Term Description blocks as stable. (36163)
  • Remove post- prefix from Comment Template inner blocks. (36171)

Global Styles

Post Editor

  • Migrate to thunks. (35720)
  • Refactor FlatTermSelector into a functional component. (33459)
  • Remove GB prefixed functions from template part. (36180)
  • Translated site properties. (36097)

Components

  • ToolsPanel: Use Grid component to handle layout. (35621)
  • Update spacing in CircularOptionPicker. (36014)
  • Use small button on tools panel toggle. (35935)

Other Packages

  • Create Block: Add block.json schema to generated file. (35843)
  • Data: Rename types file from .d.ts to .ts. (36062)
  • Url: Move getStablePath function into the wordrpess/url package. (35992)
  • Schemas: Add schemas package. (35998)
  • Schemas: Theme.json – Add title to templateParts. (36145)

CSS & Styling

  • 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. buttons block CSS property. (33793)

Tools

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 and backporting to WordPress core

  • Updates WP_Theme_JSON_Resolver and tests to be equal to core. (36223)
  • Changes for FSE backportbackport A port is when code from one branch (or trunk) is merged into another branch or trunk. Some changes in WordPress point releases are the result of backporting code from trunk to the release branch. in core. (36201)
  • Temporarily pin .wp-env.json to WP 5.8.1. (36333)

Testing

  • Add a method to disable auto-accepting dialogs. (35828)
  • Skip broken widgets test. (36239)
  • Skip flaky test for loading block stylesheets in 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.. (35961)
  • Tests: Run block fixtures through KSES. (35611)
  • theme.json: Make sure tests are pure. (36253)
  • theme.json: Update test data. (35883)
  • Scripts: Increase timeout for end-to-end tests to 30 seconds. (35983)
  • Improve unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression. coverage for REST API menus endpoints. (36177)
  • Update child theme.json merge test to match core. (36329)

Debugging

  • Wp-env: Disable Xdebug by default unless specified by user. (34324)

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.

VersionTime to Render First BlockKeyPress Event (typing)
Gutenberg 11.95.58s40.22ms
Gutenberg 11.85.53s38.89ms
WordPress 5.85.86s47.3ms

Thank you to @critterverse for the assets included in this post, @priethor for coordinating the release process, @ramonopoly and @aaronrobertshaw for proofreading the release notes, and @glendaviesnz, @zieladam, @noisysocks, @mamaduka, and @isabel_brison for assisting with troubleshooting and pushing the release to the plugin directory, and to all those who contributed to this big release! 🎉

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

Vicente Canales 4:18 pm on October 28, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.8.0? (27 October)

October is almost over, and we’re really close to WordPress 5.9, with this version of 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/ being the second to last to make it into that release. This time around we have plenty of enhancements to the editing experience, including a way to discover Featured 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. Patterns, spacing tools for heading blocks, new animations for some elements (such as Dropzone, and Insertion Point), and more.

The Pattern Directory is the go-to source for great Block Patterns, and with this enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. to the inserter, users get direct access to a selection of featured Patterns, making it easier to find rich Patterns to use or get inspiration from.

Spacing Tools now available to more blocks

Spacing controls are an important piece when getting your Posts, Pages, and Templates looking just right. In Gutenberg 11.8 we’re getting great Improvements in this area.

Spacing on Heading Blocks — Spacing controls were already available for the Site Title Block, and it made sense to add this possibility for all blocks that generate headings, including the Navigation Block, as seen below! With this enhancement, it’s no longer necessary to manually add padding or margin support to each Pattern or Template that uses heading blocks.

Gap support on the Navigation Block — Enables us to control the space between elements of a Navigation Block, taking advantage of the Block Gap support added in Gutenberg 11.5.

Button Block gap and vertical margin — Also related to Block Gap support, this enables us to control the space between buttons, as well as adding vertical margin support in order to adjust the space above and below the Buttons container. As a side note, the discussion behind this change shows off how Contributors come together to add these useful features to Gutenberg; a big thank you to everyone involved!

Enable always-on burger menu for Responsive Navigation Block.

This update is two-fold: users can now hide a Navigation MenuNavigation Menu A theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for giving various control options to get users to click from one place to another on a site. behind a button at all times, and they also get a new and improved Navigation Block Display options panel.

Other notable improvements

Allow child 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. to be merged with parent theme.json

Child themes containing a theme.json file will now apply their styles on top of those defined by the parent theme’s theme.json, allowing them to easily overwrite certain styles while maintaining the parent’s base ones. If no theme.json file is present on the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/., the parent’s styles are applied, and the other way around as well.

More control over Cover and Column blocks’ inner blocks

Starting in Gutenberg 11.8, there is more control over which types of blocks are allowed inside some container blocks, as allowedBlocks support has been added to the Cover Block and to the Column Block.

Enable the Slash Inserter for heading, list, and quote.

The Slash Inserter is the fastest way to find, and add blocks to your content, and from now on users are able to utilize it to add blocks within a Heading, List, and Quote blocks, similarly to how it works in basic Paragraph blocks.

Animations for insertion point, drop zone, and other elements

This release adds a nice touch by providing animations for insertion points and drop zones, among others. For extra clarity, and flair. ✨

Show the ellipsis menu in the ListView

Last but not least, this release also enables the List View’s ellipsis menu (block settings menu) in the Site Editor. Not only does this menu let users copy, duplicate, remove, and perform a bunch of options to blocks from within the List View, but it also helps access the recently revamped Template Part Focus Mode.

11.8.0 Changelog

Spacing tools

  • Buttons: Add gap and vertical margin support. (34546)
  • Add spacing controls to all heading blocks. (35772)
  • Feature Image: Add spacing controls to the 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. (35775)
  • Navigation block: Add block gap support. (35277)

More control over inner blocks

  • Column: Allow the specification of blocks allowed within columns. (35342)
  • Cover: Add allowedBlocks and TemplateLock attributes in Cover Block. (31326)

Child theme support for theme.json

  • Allow child theme.json to be merged with parent theme.json. (35459)

Featured Patterns from the directory

  • Featured patterns from the pattern directory. (35115)

Other Improvements

  • Enable slash inserter for heading, list, and quote. (35360)
  • Show the ellipsis menu in the ListView. (35170)
  • Add animations for insertion point, dropzone, and other elements. (33132)
  • Heading: Autogenerate heading anchors. (30825)
  • Enable always-on burger menu for responsive navigation menus. (35568)

Gutenberg 11.8

Enhancements

Block Library

  • Add spacing controls to all heading blocks. (35772)
  • Enable slash inserter for heading, list, and quote. (35360)
  • Unify theme block placeholder content. (35517)
  • Buttons: Add gap and vertical margin support. (34546)
  • Categories: Add support for showing only top-level categories. (35726)
  • Column: Allow the specification of blocks allowed within columns. (35342)
  • Comment Content Block: Add typography, color, and padding support. (35183)
  • Cover: Add allowedBlocks and TemplateLock attributes in Cover Block. (31326)
  • Cover: Add an option to set opacity when the background color is used. (35065)
  • Cover: Allow setting the height from the placeholder state. (35068)
  • Cover: Change dimRatio to 50 if media is added and dimRatio is set to 100. (35789)
  • Cover: Only use white text when the background of the cover block is dark. (33541)
  • Cover: Use the description in the placeholder. (34970)
  • Embed: Add Pinterest as an embed provider. (34895)
  • Feature Image: Add spacing controls to the featured image block. (35775)
  • Featured image and Image: Remove descendent space. (35466)
  • Gallery Block: Get media data in a single request. (34389)
  • Heading: Autogenerate heading anchors. (30825)
  • Quote: Update deprecation to expect style block supports. (35615)
  • Page List: Show empty placeholder if no items. (35441)
  • Post Date: Add more typography options. (35422)
  • Post Comment Author: Add link settings and block supports. (35595)
  • Post Comment Date: Add link setting and block supports. (35112)
  • Quote: Added a “plain” style for quote blocks. (29856)
  • Search: Enable inheritance in the search block. (35723)
  • Site Logo: Add a basic example to the site logo block. (35588)
  • Site Logo: Move the Reset button to the Replace menu dropdown. (35372)
  • Site Logo: placeholder tweaks. (35397)
  • Site Tagline: Add `fontStyle` control to Site Tagline block. (35507)
  • Site Tagline: Add wide + full support to the site tagline block. (35589)
  • Site Title: Add a basic example to the site title block. (35590)
  • Site Logo: Remove the “Reset” button icon. (35434)
  • Social Icons: Add top and bottom margin support. (35374)
  • Social Links: Polish logos only style. (35586)

Design Tools

  • ToolsPanel: Switch to the plus icon when no controls are present in the panel body. (34107)
  • Block Supports: Add panel-specific className. (35793)
  • Block Supports: Switch dimensions inspector controls slot to bubble virtually. (34725)
  • Inspector Controls: Resort the order of the design tools associated with styles 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.. (35574)

Styles

  • Allow users to store duotone data. (35318)
  • Allow child theme.json to be merged with parent theme.json. (35459)
  • Extract the three color panels to their own global styles view. (35400)
  • Font family: Switch from CSSCSS Cascading Style Sheets. Custom Property to classes. (31910)
  • Move the global styles reset action to a dropdown menu. (35559)
  • Update descriptions for the different screens under global styles. (35429)
  • Update 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.’s root view to use Card components. (35547)
  • Use text color to render the Aa preview in global styles. (35631)

Theming

  • Add [data-block] to appender. (35356)
  • Enable theme supports automatically for block themes. (35593)
  • Remove default padding/margin on the body of the page and editor canvas. (35421)
  • Support title in `templateParts`. (35626)
  • CSS: Add a reset for image heights. (30092)

Patterns

  • Increase the number of items per page for default Query 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. Block. (35603)
  • Featured patterns from the pattern directory. (35115)

Block Editor

  • Add animations for insertion point, dropzone, and other elements. (33132)
  • Adjust Link UIUI User interface visual styling. (35414)
  • Add some top margin. (35717)
  • Show the ellipsis menu in the ListView. (35170)

Template Editor

  • Add more options to template areas in template details. (35577)
  • Add template areas to template inspector. (35239)
  • Add template details to template parts. (35444)
  • Align the layout of the template card with the block card. (35391)
  • Update site editor block placeholder styling. (35513)
  • Use a dark background for the site editor. (35520)
  • Try: Remove dotted ancestor border. (35637)

Components

  • Add shortcut provider. (35652)
  • Iterate on the design of the colors and gradients panel. (35535)
  • Navigator: Update Navigator styling to facilitate sticky positioning. (35518)
  • Repositioned RangeControl tooltip and adjusted image zoom control dropdown height. (27374)
  • Remove segmented control vertical separators. (35497)
  • Storybook: Add RTL switcher to toolbar. (35711)
  • Storybook: Add story for TypographyPanel. (35293)
  • Storybook: Enable Controls and disable Knobs by default. (35682)
  • Storybook: Remove outdated decorator configuration. (35678)
  • Support “any” step in NumberControl and RangeControl. (34542)
  • ToggleGroupControl: Allow custom aria-label. (35423)
  • Update range control metrics. (35540)
  • Update FontSize control. (35395)

Packages

  • Create Block: Add PascalCase slug to create-block template strings. (35462)
  • Create Block: Allow local directories to be passed to –template as relative paths. (35645)
  • Test Setup: Add more complete mocks of common timer functions. (35368)
  • Scripts: Allow customization of the ARTIFACTS_PATH via WP_ARTIFACTS_PATH env var. (35371)

AccessibilityAccessibility 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)

  • Rich text popovers: Move to block tools to fix tab order. (34956)
  • Save button: Prevent focus loss. (34731)

Performance

Global Styles

  • Pass only the data the site editor uses. (35458)
  • Use a context provider for global styles configuration. (35622)

Bug Fixes

Block Library

  • Block Settings: Don’t render ‘Move to’ if the block cannot be moved. (35463)
  • Cover: Update placeholder minHeight style to support non-px units. (35614)
  • Cover: Update ‘templateLock’ attribute. (35671)
  • Featured Image: Center placeholder chip contents. (35417)
  • Heading: Fix undo/redo “trap”. (35767)
  • Heading: Remove anchor map when block unmounts. (35761)
  • Site Logo: Fix site logo block on dark backgrounds. (35718)

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.

  • Fix HelpHub link i18n for page-jumps. (35404)
  • Fix template part block untranslated strings. (35715)
  • Translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. note for Home/end to avoid mistranslations. (35669)

Packages

  • Server Site Render: Prevent empty renders in `ServerSideRender` component caused by changing props while already fetching markup. (35433)

Components

  • Color Picker: Fix some issues on the color picker component; Remove tinycolor2;. (35562)
  • Navigator: Hide horizontal overflow in Navigator. (35332)
  • Popover: Fix __unstableBoundaryParent. (35082)
  • RawHTML component: Allow multiple children. (35532)
  • Rich text: Fix internal paste across multiline and single line instances. (35416)
  • Toggle Group Control: Fix the visual state when no option is selected. (35545)
  • Toggle Group Control: Fixed condition to show separator correctly. (35409)
  • Toggle Group Control: Fix ToggleGroupControlOption not passing ref to the underlying element. (35546)
  • Tooltip: For Tooltips, prevent emitting events to child elements if they are disabled. (35254)
  • Tooltip: Remove extra comma character from Tooltip when the underlying component is disabled. (35247)

Themes

  • Custom Templates: Use “title” from the theme.json. (35592)
  • Elements block support: Fix link color rendering on-site front end. (35446)
  • Move the link color styles to the footer. (35425)
  • Reset margin for all children of flow layouts. (35426)

Template Editor

  • Use slug as template parts area item key. (35796)
  • Fix missing titles in general areas. (35657)

Block 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.

  • Blocks: Apply the most recent filters to previously registered blocks. (34299)
  • Fix class serialization of font size and colors in dynamic blocks that use block supports. (35751)

Design Tools

  • Border Radius Control: Fix undefined value on the first click into RangeControl. (35651)

Block Editor

  • Fix updating the block list after block removal. (35721)
  • Fix sibling inserter animation. (35729)
  • Inserter: Fix gap between Search and Tabs. (35537)
  • Saving post: Transparent disabled button. (35542)
  • FSE: Coding standards: DOCTYPE should be the first line/character of any HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. document. (35442)

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/.

  • Fix preloading middleware referencing stale data for OPTIONS requests. (35527)

List View

  • Fix expand and collapse when the icon is clicked. (35526)

Global Styles

  • Fix presets that use a callback to validate user data. (35255)

CSS & Styling

  • Remove font size classes that are enqueued in the global stylesheet. (35182)

Block API

  • Allow more than 1 block stylesheets. (32510)

Experiments

  • Add block gap support. (35277)
  • Enable always-on burger menu for responsive navigation menus. (35568)
  • Fix issue with space-between. (35722)
  • Submenu item paddings & fixes. (35716)
  • Fix navigation gap & padding issues. (35752)
  • Remove color inheritance specificity. (35725)
  • Remove deprecated class names from the Navigation Link block. (35358)
  • Use new coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. functions in menu items REST API. (35648)
  • Navigation: Preload more API requests. (35402)

Documentation

Handbook

  • Add categories to TOC to help digest the FAQ. (35519)
  • Add missing documentation for the wrapperProps property for the BlockListBlock component returned by the editor.blockListEdit 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.. (26961)
  • Add section on using theme.json schema. (35739)
  • Add Table of Contents to the FAQ page. (35455)
  • Clarify documentation for InnerBlocks orientation prop. (35712)
  • CustomRadius – Remove 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-only text. (35582)
  • Update block categories. (35523)
  • Update npm run build command for developing with Gutenberg locally. (35681)

Packages

  • Block Editor: Update default value of the `viewportWidth` attribute in documentation. (35659)
  • Components: Add the storybook link to the /components README. (35493)
  • Components: Add readme for SkipToSelectedBlock component. (32958)
  • Componentes: Add CHANGELOG entry for the fieldset removal from FontAppearanceControl. (35585)
  • Components: Add an entry to CHANGELOG regarding the new ColorPicker. (35486)
  • Components: Fix markdown highlighting on components CONTRIBUTING.md. (35633)
  • Components: Mark CustomSelectControl hint option as experimental. (35673)
  • Components: Polish ToggleGroupControl. (35600)
  • Components: Small tweaks to contributing guidelines. (35620)
  • Components: Update README for SelectControl. (28811)
  • Components: Update DateTimePicker component README to remove reference to isDayHighlighted callback. (35363)
  • Components, feat(SelectControl): Add children prop. (29540)
  • Create Block: Update documentation and readme post-merge of #35645. (35679)

Code Quality

  • Block Editor: Fix odd usage of transform-styles wrap function (and tighten types). (23599)
  • Constrained tabbing: Simplify. (34836)
  • Compose: Convert `usePrevious` hook to TypeScript. (35597)
  • Update Callers to handle when getBlockType return undefined. (35097)
  • Components: Polish ResizableBox and convert it to TypeScript. (35062)
  • Components: Remove `tinycolor` object usage from the gradient picker. (35544)
  • Components: Remove duplicated className in the Card component. (35333)
  • Components: Remove unused useJumpStep utility. (35561)
  • Components: Use new color picker props. (35566)
  • Components: Replace the color picker component with the new version. (35220)
  • Components, FontAppearanceControl: Remove fieldset wrapper. (35461)
  • Components, ToolsPanel: Remove hardcoded classnames. (35415)
  • Components, UnitControl component: Refactor JSX components to TypeScript. (35281)
  • Global Styles: Refactor how the Global Styles access and sets data. (35264)
  • Post Editor: Fix-up Post Editor’s preferences modal. (35369)
  • Remove Tinycolor usage from component color utils. (35553)
  • Reusable Blocks: Thunkify `reusable-blocks` store. (35217)

Tools

Packages

  • Scripts: Remove inject polyfill by default. (35436)

Testing

  • Child theme.json: Update test to better capture that children can update single parts in isolation. (35759)
  • Border Radius Control: Add fallback px unit and add utils tests. (35786)
  • Fix preview end-to-end tests. (35565)
  • Flaky Tests: Fix taxonomies flaky tests. (35534)
  • Flaky Tests: Try another fix for the flaky nav test. (35443)
  • Performance tests: Add more detailed loading metrics. (32237)
  • Components, Panel: Improve unit tests. (35658)
  • Enable/skipped metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. test. (35594)

Build Tooling

  • Revert version bump if build job fails. (33239)
  • Updates `reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-native-aztec` android to use S3 dependency for the Aztec editor. (35606)

A note to extenders on the Navigation Editor

Bugfix #35527 fixed preloading on the Navigation Editor; now cache gets deleted after the first cache hit for OPTIONS requests, potentially affecting 3rd-party plugins.

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.

VersionTime To Render First BlockKeyPress Event (typing)
Gutenberg 11.86.21s40.2ms
Gutenberg 11.76.29s43.13ms
WordPress 5.86.74s51.54ms

Thanks to @critterverse for the assets on this post, @priethor for shepherding the process along, @dd32 for assisting with the release to the plugin directory, and to those who contributed to this release! 👏

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

zieladam 1:56 pm on October 14, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.7 (October 13th)

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/ 11.7 has been released! This release includes a number of nice enhancements and as usual many 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.

Navigation 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. And Navigation Editor Advances

The Lighter Navigation Block Experience and the Navigation Editor efforts led to many quality of life improvements in Gutenberg 11.7! 

The Navigation Block underwent a series of changes intended to provide a more intuitive navigation management experience. New links are now added instantly after clicking the “+” icon without an additional block selection step. There is also an additional new way of adding links: using a slash inserter. It is worth noting that a slash inserter can be enabled for any block using a new, experimental flag called __experimentalSlashInserter. In addition, navigation links may now be transformed into other allowed block types, such as Site Logo, Home Link, or Social Icons. Finally, it’s easier for users to notice linking mistakes thanks to the squiggly line highlighting empty links similarly to grammar errors. 

On the frontend front: The navigation link now supports custom font size and line-height. Link labels, such as “Previous post,” may now be a part of the link to the post itself. Mobile menus now reflect the justification settings of the desktop menus. 

Global Styles And Full Site Editing

The site editing experience got polished in this recent release. The template part editor gained a convenient back button to ease returning to the site editor. Switching between editing different template parts was made more accessible by listing the available areas in template details. Also, the custom gradient picker was refreshed.

There’s more! The Site editor was equipped with padding settings for specific template parts. Color palette settings are now available in a separate panel in the global styles sidebar. In addition, Duotone support was extended to the site logo block.

While we’re talking about Duotone, Gutenberg 11.7 enables theme authors to customize the default Duotone 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. using theme.json styles:

{
	"styles": {
		"blocks": {
			"core/site-logo": {
				"filter": {
					"duotone": "var(--wp--preset--duotone--blue-filter)"
				}
			}
		}
	}	
}

Columns Block Support For Tweaking The Gaps And Margins

The Columns block now allows you to adjust the space between the columns and the margins surrounding the block. Combined with customizable template part padding, it is the most flexible layout-building experience Gutenberg ever had.

Other Notable Highlights

As a part of the effort to get the LinkControl component out of the “experimental” state, 11.7 adds the ability to create pages directly from the link popup. So far, this was only possible in the Navigation block, but now this feature is exposed on every link. The popup also underwent subtle visual adjustments. In addition, empty links can no longer be added, making adding one by mistake harder. The ones that fall through the cracks are now clearly denoted as empty. 

Gutenberg 11.7 also ships a few formatting improvements. One of them is the ability to highlight text. Another is a new alignment option called “none,” intended for resetting alignment settings.

It is also worth noting that a breaking change the post pagination markup was introduced in PR 35092.

11.7

Enhancements

AccessibilityAccessibility 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)

  • Adjust wording for post format suggestions. (14124)
  • Add a visually hidden label for the Search block. (35034)
  • Add an accessible label to the Back button in preferences. (35340)
  • Global Styles: Add accessible label to Back button. (35325)
  • Template title: Include a button and label text when there is no post/page title. (35148)

Block Editor

  • Allow other blocks to use the slash inserter. (35196)
  • Enable ability to create Pages from the inline Link UIUI User interface. (35083)
  • Polish quick inserter. (35339)
  • Remove visual clue from alignment toolbar. (35080)
  • Remove native block inserter onboarding tooltip. (35150)

Block Library

  • Site Logo: Add duotone support. (35344)
  • Columns block: Enable blockGap and vertical margin support. (34630)
  • File Block: Only display PDF preview height RangeControl when embed is enabled. (35207)
  • Navigation: Add transformations from a link to other allowed nav blocks. (34978)
  • Query 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.: Include a Query Pagination option on the block variations. (35347)
  • Show “none” as an alignment option and use contextual text to clarify settings. (34710)
  • Social Links: Add block gap support. (35236)
  • Site Title: Add option to toggle home link. (31540)
  • Site title: update block description. (34474)
  • Transform Nav Links with children into Submenus. (34831)
  • Add an option for displaying the label inside the Navigation Link block. (34952)
  • Add typography settings for the Navigation Link block. (35324)
  • Add option to remove/clear logo from the Site Logo block. (34820)

CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. data

  • Add ‘context’ to the query parts type definition. (35069)

Components

  • Add new Navigator components and use them in 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.. (34904)
  • Use _builtin property of classes in navigation link PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (35166)
  • Item: Remove isAction and use onClick to decide if it should render as button. (35152)
  • Make tooltip delay configurable with a property. (35246)

Design Tools

  • Block gap: Only render CSSCSS Cascading Style Sheets. variable if corresponding theme setting is enabled. (35209)
  • Format library: Add background color. (34680)
  • Update: Custom gradient picker design. (34712)

Global Styles

  • Add Padding to the root level of global styles. (35241)
  • Add duotone 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. styles support. (34667)
  • Extract the color palette to its own global styles screen. (35109)
  • Update the rules to hide/show blocks in the global styles sidebar. (35178)
  • Synchronize user custom post typeCustom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. registration and UI visibility. (35427)
  • Enqueue preset styles for all themes in the editor. (35424)

Icons

  • Add color icon. (35187)
  • Rename globe icon to url. (35032)

Site Editor

  • Remove warning box from post terms. (35242)

Template Editor

  • Add back button for isolated template part editor. (34732)
  • Add template areas to template details. (35202)

Bug Fixes

Block Editor

  • Block Editor: Fix duplicate clientIds when dragging patterns. (35124)
  • Disallow creation of empty links using Link UI directly. (35060)
  • Fix Link UI when hyperlink has an empty href value. (35043)
  • Fix missing border in the quick inserter. (35307)
  • Fix toggle off for Duotone control and Post Date block’s date picking control. (35024)
  • useMultiSelection: Avoid crashing editor when block refs aren’t available. (35177)
  • Rich text: fix internal paste across multiline and single line instances. (35416)

Block Library

  • Embed: Remove meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area.-com from variations. (35146)
  • 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.: Remove descendent space. (35273)
  • Fix: Broken disabled select style in the editor area. (35135)
  • Fix native BlockAlignmentControl. (35191)
  • Gallery block: Fix Safari image sizing issue. (35309)
  • Gallery block: Fix problem with caption showing encode tags when not selected. (35131)
  • Gallery block: Unset alignment on new images to prevent it breaking layout. (35132)
  • Post Template: Remove margins from the block. (35193)
  • Post Title: Always use blockProps. (35286)
  • Post Title: Only render link element if we have a post. (35284)
  • Query Pagination: Don’t render an empty container. (35092)
  • Navigation Link: Fix PHP notice in the Navigation Link block. (34984)
  • Fix Post Comment Content block’s edit function. (35190)

Components

  • Color Picker: Match figma metrics. (35039)
  • Remove shift-stepping from range in RangeControl. (35020)
  • Popover: fix __unstableBoundaryParent (35082)

Design Tools

  • ToolsPanelItem: Add panelId check before calling toggle methods. (35375)

Media

  • MediaUpload: Ensure current images in a gallery are selected after opening media library. (35070)

Post Editor

  • Fix missing save label. (34948)
  • Keyboard shortcut: Prevent post saving through keyboard if post saving locked. (35361)

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/.

  • 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. Fetch: Improve isMediaUploadRequest check. (34417)
  • Fix slashing when creating or updating a menu item. (35147)

Server Side Render

  • Prevent empty renders in ServerSideRender component caused by changing props while already fetching markup (35433)

Template Editor

  • Fix the styling of template details. (35285)

Widgets Editor

  • inspector-section: Track isOpen to make a better isContextuallyActive() function. (35055)

Performance

  • Edit Site: Optimize useSelect calls. (35213)
  • Memoize entity records selectors properly. (34323)
  • Widgets: Optimize useSelect calls. (35256)

Experiments

Block Library

  • Polish responsive navigation modal, inherit justifications, fix submenu direction. (35077)
  • Polish submenu indicator button. (35030)
  • Fix: Adding nav items from existing menu. (34837)

Navigation Screen

  • Remove 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. of help link in navigation editor. (35313)
  • Add a tooltip to Navigation items in a setup state. (35139)
  • Fix gap 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. in navigation screen. (35234)
  • Truncate long menu names. (35188)
  • Insert Navigation Link blocks by default in Navigation block. (34899)
  • Migrate resolvers to thunks. (35044)

Full Site Editing

  • Remove extra styling around “Post content” placeholder. (35243)

Documentation

Handbook

  • Docs: Update testing overview with minor fixes. (35232)
  • Fix typos, grammar in contributors release doc. (35268)
  • Update nvm to latest 0.38.0 version in Handbook. (35125)
  • Adding example readme template to contributing guidelines. (34847)
  • Fix erroneous usage of the word master. (35392)

Packages

  • Add instructions for installing plugins/themes with wp-env. (35064)
  • MediaUpload: Reflect the correct filter name in the readme. (35240)
  • Update LinkControl documentation with additional examples. (35199)
  • Update doc block in block editor to fix documentation generation lint error. (35295)
  • Add missing doc blocks for the exported members of edit-widgets store. (35263)

Code Quality

Block Editor

  • Add colord package to block editor; Replace tinycolor2 with colord on duotone. (#34616), 34605, 35165, 35164)
  • Migrate the toggleFeature action to a thunk. (35075)

Block Library

  • Migrate store actions to thunks. (35031)
  • Post Title Block: Fix argument numbering in ‘sprintf’. (35338)
  • Replace tinycolor2 with colord on block library package. (35184

Components

  • Refactor Navigator* folder structure, rename Navigator to NavigatorProvider. (35160)
  • Replace tinycolor2 with colord. (35185)
  • ToolsPanel component: Refactor to typescript. (34028)
  • UnitControl component: Refactor utils to TypeScript. (35138)
  • Do not export SimpleColorSwatch in Storybook examples for Item Group. (35179)
  • Refactor Navigator to TypeScript. (35214)

Global Styles

  • Simplify code that deals with user data for clarity. (35248)
  • Simplify how we register preset metadata. (35228)
  • Reorganize the global styles UI code base. (35218)
  • Don’t output preset classes for colors defined by the theme (35514)
  • Clean up logic to retrieve GS settings depending on context. (35437)

Post Editor

  • Keyboard Shortcuts: Use a new selector getter method. (35385)

Navigation Component

  • Refactor the preferences modal to use the new Navigator components. (35142)
  • Navigation Editor: Remove duplicated stripHTML. (35189)

Widgets Editor

  • Migrate edit-widgets store to thunks. (35110)

Tools

Build Tooling

  • Remove polyfills from view.js block scripts. (35038)

Testing

  • Add tests for Navigator*. (35163)
  • Enable flaky tests reporter bot in PRs. (35029)
  • Replace tinycolor2 with colord on getMostReadableColor util. Add unit testunit test Code written to test a small piece of code or functionality within a larger application. Everything from themes to WordPress core have a series of unit tests. Also see regression.. (34625)
  • Try fixing flaky navigation test. (35380)
  • Fix not archiving failure artifacts for flaky tests. (35379)

Plugins

  • Add oandregal and tellthemachines to codeowners file. (35233)

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.

VersionTime To Render The First BlockKeyPress Event (typing)
Gutenberg 11.73.7 s24.68 ms
Gutenberg 11.63.5 s25.88 ms
WordPress 5.84.0 s34.06 ms

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

Thanks to @priethor, @matveb, and @javiarce for helping with the release!

Want to know more about recent Gutenberg releases? Check out the release post for Gutenberg 11.6!

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

Nik Tsekouras 10:50 am on October 1, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.6 (29 September)

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/ 11.6 has been released! This release includes a number of nice enhancements and as usual many 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.

Site Logo cropping and rotating within the editor

Before Gutenberg 11.6, the image used as the site logo had to be edited before being uploaded to your site. With the goal of providing a wide array of tools to adapt your logo without leaving the editor, it is now possible to crop, zoom, and rotate the image you choose for the site logo directly in the Site Logo 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.’s toolbar!

Locking control at block level

Alongside template level locking, now you can lock individual blocks to prevent moving or removing them; you can do this by adding a lock attribute on the block settings. Block-level lock takes priority over the templateLock feature and currently, you can lock moving and removing blocks.

The toolbar of locked blocks will have the movers hidden, and the Remove block option won’t be available either.

Query Pagination uses Flex Layout

Following previous releases bringing Flex Layouts to blocks, Gutenberg 11.6 improves the Query Pagination block to support the flex layout along with a justification option, for automatic best-fit.

Other Notable Highlights

Regarding Full Site Editing and Global Styles, basic support for child themes has been added. This means the 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. Site Editor is available when the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. of a block theme is active, and its templates, template parts, and 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. are inherited.

The writing flow has also received some enhancements in this release: the Richtext format toolbar now shows a visual clue for hidden active items and, when using the quick inserter and clicking the Browse all button, your current filter value is now passed to the main inserter without the need to type it again, making this switch between inserters seamless.

Template Part Focus Mode refers to the view that lets you focus and work on a single template part, like a 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 is available for any template part. This isolated template part editing is now accessible from the ellipsis menu in the Template Part toolbar. More Template Part Focus Mode improvements are coming soon, so make sure to check its tracking issue here.

11.6

Enhancements

Block Library

  • Post Title block: Add typography formatting options. (31623)
  • Query Pagination block: Use flex layout. (34876)
  • Site logo: Add site logo crop. (31607)
  • Cover: Move cover min-height into dimensions panel via SlotFill. (34065)
  • Group Block: Add information about selected element types for Group Block. (33976)
  • Image Block: Create two-way data binding for ImageSizeControl. (34649)
  • Columns Block: Update block description of columns block. (34705)
  • Gallery block: Add toolbar button to convert old galleries to new format. (34606)

Block Editor

  • Format toolbar: Visual clue for hidden active items. (21892)
  • Increase Link UIUI User interface search results to 10 on the Navigation Editor screen. (34808)
  • Inserter: Pass 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. value when clicking Browse All. (34912)

Components

  • ColorPicker: Enhance the new color picker design. (34598)
  • ColorPicker: Add reset timeout to ColorPicker’s copy functionality. (34601)
  • ToolsPanel: Refine component behaviour. (34530)
  • Resize Handles: Fix stroke width of resize handles. (34949)
  • ServerSideRender: Improve ServerSideRender Component to retain preview of the component while it is loading new state. (28289)
  • ServerSideRender: Delayed loading state of ServerSideRender component. (35033)

Global Styles

  • Add a simple Global Styles preview to the 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.. (34991)
  • Update the Global Styles Icon and use it in the site editor’s panel. (34871)
  • Update the global styles sidebar to use a navigation component. (34885)

Widgets Editor

  • 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. Group: Make title directly editable. (34799)

Template Editor

  • Add edit template part menu button. (34679)

Themes

  • FSE: Add basic support for child themes. (34354)

New APIs

Block 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.

  • Introduce lock control at the block-type level. (32457)

Design Tools

  • InspectorControls: Wrap block support slots in ToolsPanel. (34157)

AccessibilityAccessibility 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)

  • Improve file block accessibility by adding aria-describedby to download button. (28062)
  • Button Block: Add prefix to the description ID. (34900)
  • Snackbar: Fix focus loss on dismiss. (34736)

Performance

  • List View: Try disabling async mode provider around selected block in ListView. (34519)

Bug Fixes

Block Editor

  • Copy Handler: Only handle paste event once. (34430)
  • Fix save-state indicator appearance. (34947)
  • MediaReplaceFlow: Avoid 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 when selecting media. (34618)
  • Remove .has-link-color class upon clearing the link color. (34700)
  • Rich Text: Fix arrow navigation with consecutive formats. (35014)
  • Rich Text: Also strip object replacement character when removing padding. (34851)
  • Writing flow: Fix focus trap on non-text input types. (32714)
  • Fix bug in the receiveBlocks action resulting in a broken block list. (35076)

Block Library

  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. block: Prevent external styling of editing UI. (34727)
  • Page List Block: Fix gap in vertical page list. (35026)
  • MediaPlaceholder: Fix media library button opening the file upload modal. (34894)
  • QueryPagination: Fix layout support. (34897)
  • Query Pagination: Fix center alignment. (34739)
  • Group block: Lower CSSCSS Cascading Style Sheets. specificity of padding declaration. (34854)

Global Styles

  • Cache global stylesheet keyed by theme. (34704)
  • Clean theme data when switching themes in the 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.. (34540)
  • Fix dimensions panel default controls display. (34828)
  • Fix for link color in containers. (34689)

Components

  • Fix Dropdown/DropdownMenu toggle closing in all UAs. (31170)
  • Font Appearance Control: Fix selectedItem downshift uncontrolled prop warning. (34721)
  • ToolsPanel: Allow SlotFill injection of panel items. (34632)
  • ToolsPanel: Remove / re-register panel items if the panelId changes. (34726)
  • ToogleGroupControl: Fix update when unmounted. (34756)
  • Unit Control: Always display current unit value if valid. (34768)

Template Editor

  • Fixes left & right floats for blocks that are direct children of .wp-site-blocks. (34635)
  • Fix new template form onSubmit logic. (34988)

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 missing field _invalid in menu item REST API. (34670)
  • Fix ‘menu_exists’ response status code. (34888)
  • Remove parent and position validation from menu item REST API endpoint. (34672)
  • Filters are incorrectly applied in the __experimental/menu-items controller. (34857)
  • Fix the parent menu item field in REST API responses. (34835)

Themes

  • Fix block gap added to the block templates skip link. (34986)

Widgets Editor

  • Fix disabled blocks logical error on Widgets screen. (34634)
  • Prevent welcome guide overflow x scroll. (34713)

Experiments

Navigation Block

  • Add a Submenu block for use in Navigation. (33775)
  • Initialize responsive modals with window onload event. (34544)
  • Enable open on click for Page List inside Navigation. (34675)
  • Hide theme-provided underlines when menu item is in setup state. (34486)
  • Only capture toolbars on the parent Navigation block when not in vertical mode. (34615)
  • Polish wavy underline. (34954)

Navigation Editor

  • Add initial navigation editor user documentation. (34985)
  • Adjust header toolbar icon styles. (34833)
  • Consolidate menu name and switcher. (34786)
  • Update Navigation Editor to support new submenu block. (34281)
  • Use response messages returned from API for notices. (34903)
  • Add global inserter to Navigation Editor. (34619)
  • Save menu items using the REST API. (34541)
  • Add space between menu name and switcher button. (34960)
  • Keep Navigation Editor snackbar from overflowing notices. (34661)
  • Navigation Editor: Avoid crash when transforming navigation link. (34980)
  • Correctly display notices. (34852)
  • Display error notice inside modal. (34884)
  • Fix navigation editor missing appender not showing appender when no blocks selected. (34678)
  • Fix navigation editor undo button being active when editor loads. (34839)
  • Open link control if submenu parent is link. (34798)
  • Stop submitting Create Menu form in busy state. (34983)
  • Fix saving locations using the “Manage Locations” popup. (34714)

Site Editor

  • Site Editor – add basic 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 support. (34460)

Documentation

Handbook

  • Minor copy improvements. (35015)
  • Update versions to include 5.8.1. (34789)
  • Fix typography.customLineHeight value in the compatibility table. (34791)

Packages

  • Update the note about using polyfill for ES2015+ features. (34878)
  • Components
    • Add Compound Components section to components CONTRIBUTING.md. (34697)
    • Dropdown: Tidy up documentation. (34861)
    • Fix small typo in the component’s CONTRIBUTING guidelines documentation. (34753)
    • ItemGroup: Add story showcasing more complex layouts. (34708)
    • Update wordpress/components package’s contributing guidelines. (33960)
    • Update AlignmentMatrixControl documentation post merge. (34662)
    • Update components CONTRIBUTING.md structure. (34877)
    • Update documentation for ClipboardButton component. (34711)
  • Create Block: Remove wp-cliWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/ callout since not recommended and outdated. (34821)
  • Navigation Editor:
    • Fix inconsistencies and errors. (34682)
    • Update the 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. section in documentation. (35035)
  • Scripts: Add CHANGELOG entry for jest-dev-server upgrade. (34657)

Other

  • Update overall plugin description. (34850)

Code Quality

  • Add tests for slug to class/css variable conversion. (34787)
  • Refactor the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.-data store to thunks. (28389)
  • Remove some low impact APIs that were deprecated on WP 5.3. (34537)
  • Rewrite FocusableIframe as hook API. (26753)
  • Rich text: Only merge neighbouring equal formats when applying a format. (35016)
  • Writing Flow: Merge place caret at edge functions. (30481)
  • Site editor: fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice: Undefined index: __unstableType. (34735)
  • Use rest_is_field_included function in menu endpoints. (34673)
  • Remove duplicate Theme JSON block gap key. (34774)

Block Editor

  • Global shortcuts: Use React events (portal bubbles & contextual). (34539)
  • Rename experimental prop used in BlockControls. (34644)
  • Update callers to handle when getBlockType returns undefined. (34891)

Block Library

  • Latest Comments: Add missing parameter to widget_comments_args. (29403)
  • Navigation submenu block: Replace global shortcut event handlers with local ones. (34812)

Components

  • ColorPicker: Replace global shortcut event handlers with local ones. (34508)
  • Delete the createComponent utility function. (34929)
  • Refactor away from the createComponent function: CardMedia (34915), ControlLabel (34927), Elevation (34916), FlexBlock (34917), FlexItem (34918), Grid (34919), HStack (34920), Heading (34921), Scrollable (34922), Spacer (34923), Surface (34924), Text (34925), Truncate (34926), VStack (34928).
  • Remove all dashicon usages from Storybook stories. (33984)
  • Mark ControlLabel, FormGroupLabel and FormGroupContent as non-polymorphic. (34966)

Global Styles

  • Fix Global Styles double border. (34906)
  • Rename globalStyles to styles. (34946)

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 a “translators:” comment in the core class used to implement a Block widget. (34840)

Tools

Testing

  • Add editor onboarding tests. (34431)
  • Fix flaky navigation editor test by waiting for required elements. (34767)
  • Fix native Latest Posts end-to-end device tests. (34715)
  • Iframed editor: Add jQuery integration end-to-end test. (33007)
  • Navigation Editor: Migrate from response mocking to rest api util. (34869)
  • Navigation Editor: Fix failing end-to-end test. (34874)
  • Navigation Editor: Add end-to-end tests for global inserter to the Navigation Editor screen. (34804)
  • Navigation Editor: Update new navigation editor test to use REST API to create a menu instead of response mocking. (35025)
  • Try reporting flaky tests to issues. (34432)
  • Try to fix flaky 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. test. (34776)
  • Test that add_theme_supports are loaded for themes without theme.json. (34998)

Build Tooling

  • Fix package lock inconsistencies. (34790)
  • Update caniuse package to the latest version. (34685)
  • VSCode integration: Update var ${workspaceRoot} to ${workspaceFolder}. (34269)
    • Replace usages of workspaceRoot with workspaceFolder. (34887)
  • Bump jest-dev-server to v5. (34560)
  • ESLint Plugin: Update eslint jsdoc dependency. (34338)
  • Storybook: Remove G2 prefix from the Components section. (34734)
  • Block Editor: Update react-spring to 9.2.4. (30979)
  • Move react-native-url-polyfill to dev dependencies. (34687)
  • Use Jest related rules only when the package is installed. (33120)
  • Ensure that all *.asset.php files are included in plugin.zip. (34875)

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 11.67.6 s38.38 ms
Gutenberg 11.57.2 s38.54 ms
WordPress 5.87.9 s45.97 ms

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

Thanks to @priethor, @mcsf, @matveb, and @jameskoster for helping with the release!

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

Mike Schroder 7:56 pm on September 17, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.5? (16 September)

It’s been two weeks since 11.4, so it’s time for another 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/ release, 11.5!

This update includes 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. Gap support, improved support for Flex Layouts, performance improvements, and additional design tools.

Theme / Block Gap Support

Block Gap support adds the ability for blocks to opt-in to a control that allows users to choose the distance between items within a block.

The groundwork for this feature was introduced in 11.4, and was initially opt-out for themes. Following feedback, this feature is now opt-in. Thanks so much for the testing and feedback!

With Block Gap support in place, it has also been added to the Columns, Title, and Navigation blocks.

Buttons in the the Buttons Block move closer together or farther apart as the Block Gap is changed.

Flex Layout Highlights

Following the introduction of Flex Layout in 11.2.0, now Flex Layouts are supported within the Social Links and Group blocks! The Social Links block now has a ‘flex’ justification option, for automatic best-fit. 

There is also a new variation of the Group block that allows for flex layout. You can try it out by choosing “Row” from the block inserter.

Social Icons change flow when flex justification is selected.

Site Title and Logo Inside Navigation Block

It’s now possible to build your site logo or title directly into menus, enabling new design possibilities! Insert, and modify the title or logo that you prefer, using design tools, then re-order for your ideal look.

A Site Logo is added to a Navigation Block, then resized and placed.

Global Styles 

Global styles are now available to themes by default, allowing block, theme, and patterns to have a reliable set of styles provided by coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

Themes are now able to selectively disable text and background colors. This allows theme authors to provide exactly the experience they’d like to provide users, whether allowing custom colors, gradients, or only their curated selections.

Other Notable Highlights

The Heading Levels menu has been redesigned, and is now vertical, making it easier to visualize the hierarchy.

There is a new setting to customize the Next and Previous Page indicators in the Query Pagination block, allowing the addition of an arrow or a chevron to your designs.

New vertical Heading Levels menu, with H2 selected.

11.5.0

Features

Design Tools

  • Block Support: Add gap block support feature. (33991)

Enhancements

AccessibilityAccessibility 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)

  • Font weight screen reader description. (34312)

Block Editor

  • Media Placeholder: Change media URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org input type to allow a local URL path. (29138)

Block Library

  • Columns Block: Use blockGap between Columns blocks. (34456)
  • Group Block: Add a row variation. (34535)
  • Heading Block: Vertical heading levels menu. (32926)
  • Navigation Block: Allow Site Title and Logo inside Navigation block. (33316)
  • Navigation Block, List View: Do not show appender and avoid closing the modal on block select. (34337)
  • Navigation Block: Remove horizontal and vertical navigation block variations from inserter. (34614)
  • Navigation Block: Use gap instead of margin. (32367)
  • Post Author Block: Add duotone suport. (34408)
  • Query Pagination Next/Previous: Add an arrow attribute and sync next/previous block’s arrow. (33656)
  • Site Logo Block: Update block description to be concise. (34471)
  • Site Title Block: Update block description to be concise. (34475)
  • Social Links Block: Use the new flex layout. (34493)
  • Video Block: Use existing video poster image on insert. (34415)

Components

  • MenuItem: Add right padding for unchecked radio and checkbox items. (34406)
  • ToggleGroupControl: Update stories to use knobs. (34497)

Core Data

  • Add isRawAttribute to entity configuration. (34388)

Design Tools

  • Add wide alignment control only if theme provides layout.wideSize. (34586)
  • Update justification control in flex layout. (34651)
  • ToolsPanel: Change icon from horizontal to vertical ellipsis. (34369)

Full Site Editing

  • Limit FSE adminadmin (and super admin) notices to the Themes screen. (34353)

Global Styles

  • Allow disabling text and background color via theme.json. (34420)
  • Make global styles available to all themes. (34334)

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 context to ‘none’ strings for better translations. (34341)
  • Make permalinks documentation URL translatable. (34282)

Post Editor

  • Expose ThemeSupportCheck component. (20506)
  • Title block gap. (34570)

Themes

  • Add default editor styles applied to themes without theme.json and without editor styles. (34439)

Widgets Editor

  • Add ‘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. Group’ block to widgets screens. (34484)
  • Legacy widget rendering endpoint. (34230)

New APIs

Design Tools

  • Allow themes with theme.json to opt-out of block gap styles. (34491)

Bug Fixes

Accessibility

  • Fix button block focus trap after a URL has been added. (34314)

Block Editor

  • Fix menu item padding 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.. (34435)
  • Fix text-menu min widths. (34532)
  • Keep id on paste if internal link points to it. (31107)
  • Fix caret position on block merging. (34169)

Block Library

  • Heading Block, Paragraph Block: Fix long strings of text without spaces overflow the block. (34222)
  • Gallery Block: Fix 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. with stalled upload when image size too large. (34371)
  • Gallery Block: Fix media placeholder height in site editor. (34629)
  • Gallery Block: Fix problem with overflowing captions on new gallery block format. (34402)
  • Latest Posts: Fix various ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warnings in development log. (34428)
  • Navigation: Fix navigation block classname issues. (34344)
  • Navigation: Fix Page List styles inside responsive Navigation. (34517)
  • Navigation: Fix responsive menu height regression. (34488)
  • Navigation: Fix submenu layout in navigation page list. (34342)
  • Navigation: Fix submenus to only take up space when visible. (34382)
  • Navigation: Fix undo/redo ‘trap’ in navigation link block. (34565)
  • Site Title: Allow empty title in edit mode. (34274)
  • Social Links Block: Fix deprecation. (34639)
  • Video Block: Fix TypeError when removing poster. (34411)

Components

  • Align labels on focal point picker position controls above the inputs. (34209)
  • Check if in browser env before calling CSS.supports. (34572)
  • Combobox Component: Only force expanded state if the input has focus. (34090)
  • CustomSelectControl: Add describedBy fallback. (34385)
  • DateTime Component: Fix sizing of help info. (34370)
  • Fix ToggleGroupControlBackdrop not updating size when isAdaptiveWidth prop changes. (34595)
  • Fix selected value computation in CustomSelectControl when no initial value is set. (34490)
  • Fix subheadings from wrapping. (34319)

Design Tools

  • Border Controls: Display color indicator and check selected color. (34467)
  • Border Support: Fix check for displaying border support panel. (34516)
  • Gap block support: Force gap change to cause the block to re-render (fix Safari issue). (34567)
  • Letter Spacing: Group letter spacing correctly under typography supports. (34515)

Global Styles

  • Fix block-level global styles color panels. (34293)
  • Font Appearance Control: Fix error in global styles for Site Title in TT1-Blocks. (34520)

MetaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. Boxes

  • Change default value of enableCustomFields to undefined. (33931)
  • Fix metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. reordering. (30617)

Packages

  • Blocks: Register block when 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. value provided for the icon. (34350)
  • Core Data: Add ‘include’ to the query key. (34583)
  • Core Data: Use resolveSelect instead of select in saveEntityRecord. (34584)
  • Interface: Block Toolbar & Popover component – Prevent sticky position from causing permanently obscured areas of the selected block. (33981)
  • Scripts: Only use svgr/webpack in js files. (34394)
  • Scripts: Convert legacy entry point arguments for compatibility with webpack 5. (34264)

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/.

  • Default batch processor: Respect the batch endpoint’s maxItems. (34280)

Widgets Editor

  • Fix Block Settings 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. unexpectedly collapsing. (34543)
  • Legacy widget’s preview functionality is broken when the page is moved. (34384)
  • Prevent focus trap in Legacy Widget block’s preview 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.. (33614)

Performance

Block Editor

  • Improve the getBlock and getBlocks performance. (34241)
  • Remove duplicated useValidAlignment hook. (34593)

Core Data

  • Move locks state from store to local variable. (34374)

Global Styles

  • Remove colors classes from the packages that are already provided by global styles. (34510)

Experiments

Navigation Editor

  • Add undo redo buttons in navigation editor. (34533)
  • Decode entities in the menu names. (34263)
  • Disable “block-nav-menus” feature for the purposes of removing the “experimental” status on the Navigation Editor. (34444)
  • Preload menu REST API requests on new navigation editor. (34364)
  • Update navigation editor placeholder. (34568)

Documentation

Handbook

  • Replace withSelect references with useSelect. (34549)
  • Updated Template Section copy. (34383)
  • Update block variations documentation about block scope. (34455)

Packages

  • Blocks: Correct typo in Blocks Documentation. (34396)
  • Componentes: Fix/update documentation alignment matrix control. (34624)
  • Componentes: Update DuotonePicker documentation for accuracy. (34494)
  • Eslint: Add no-unsafe-wp-apis to rules list in the documentation. (34416)
  • Prettier: Correct syntax in README.md for prettier-config. (34600)

Code Quality

Block Editor

  • Code cleanup to the getBlock refactoring. (34326)
  • Ensure that blockType is defined when accessing apiVersion. (34346)
  • Migrate lightBlockWrapper support to apiVersion for blocks. (34459)
  • Fix Animated warning log. (34197)
  • Rich Text: Replace global event handlers with local ones. (34492)
  • Rich text (core): OnFocus method can be replaced with HTMLElement.focus. (32054)
  • Use Setting: Consolidate the PATHS_WITH_MERGE constant to one instance. (34407)

Block Library

  • Gallery Block: Add docblockdocblock (phpdoc, xref, inline docs) comments to the new gallery 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.. (34562)
  • Gallery Block: Remove IE specific CSSCSS Cascading Style Sheets. hacks. (34372)
  • Button Block: Replace global shortcut event handlers with local ones. (34498)
  • Navigation Block: Refactor to use generic classnames. (34171)
  • Navigation Link Block: Replace global shortcut event handlers with local ones. (34500)
  • Gallery Block: Remove redundant css selector. (34277)

Components

  • CustomGradientBar: Replace global shortcut event handlers with local ones. (34505)
  • Guide: Replace global shortcut event handlers with local ones. (34503)
  • Navigate regions: Use React events for shortcuts (portal bubbles & contextual). (33633)
  • Rename PolymorphicComponent* types to WordPressComponent*. (34330)
  • Simplify Modal with hooks. (34412)
  • Simplify & polish heading levels. (34378)

Core Data

  • Fix linting errors. (34596)
  • Fix linting error in trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision.. (34464)
  • Migrate canUser resolver to thunks. (34580)
  • Migrate entities.js to thunks. (34582)
  • Migrate getAutosaves resolver to thunks. (34581)
  • Migrate getEntityRecord resolver to thunks. (34576)
  • Migrate getEntityRecords resolver to thunks. (34578)
  • Migrate resolvers to thunks: GetAuthors, _getCurrentUser, __getCurrentTheme, __getThemeSupports. (34579)
  • Refactor deleteEntityRecord to use thunks instead of generators. (34386)
  • Refactor editEntityRecord, undo, and redo to be thunks instead of generators. (34387)
  • Remove the PROCESS_PENDING_LOCK_REQUESTS action. (34343)
  • Refactor saveEntityRecord from redux-rungen to async thunks. (33201)
  • Remove extraction of raw values in saveEntityRecords. (34502)

Other Packages

  • Compose, useDropZone: Ensure drag event targets HTMLElement. (34272)
  • Editor: Replace hardcoded store key. (34296)
  • Env: Clarify config error within parse-config.js. (34322)
  • Post Editor: Fix gray W menu color. (34318)
  • URL: Add getFilename method to the URL package. (34313)

Tools

Build Tooling

  • ESLint: Add useSelect to direct function calls list. (34301)
  • ESLint: Update error message for @emotion/css with info about the useCx hook. (34418)
  • Fix build hang on Windows 10. (23589)
  • Linting: Remove global event listener warning. (34528)
  • More work on the stability of the performance metrics. (34229)

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

  • Added janw-me to the Codeowners for the PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher FSE folder. (32990)
  • Fix title missing in bug report form. (34504)
  • Update bug form to use drop downs. (34458)
  • Update the minimum supported WordPress version to 5.7. (34536)

Testing

  • Add unit tests for edit site editor utils. (34401)
  • Debug e2e-tests in vscode. (29788)
  • Jest Preset: Restore the default setting for the verbose option. (34327)
  • Make Test_Widget compatible with WP_Widget. (34355)

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 11.56.71s40.42ms
Gutenberg 11.46.80s44.79ms
WordPress 5.87.53s50.72ms

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

Thanks to @beafialho and @joen for the release post assets, @priethor for coordination and review, @youknowriad for release and tools wrangling, @mamaduka for answers and help throughout, and @talldanwp for inviting me to shadow a release in preparation.

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

ramonopoly 8:08 pm on September 1, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.4? (1 September)

Depending on where you live, it’s the first day of Spring. Or Autumn. Or, if you live on Venus, just another season of sulphuric acid showers.

No matter where you are, 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/ 11.4 has been released with new features to brighten your mood including the refactored Gallery 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., duotone filters for featured images, and more block design tools!

Gallery Block now uses Image Blocks

The Gallery Block now acts as a wrapper for coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Image Blocks.

Individual gallery images will therefore feature all existing and future functionality of not only Image Blocks – for example, the ability to add custom links, filters, and styles – but also standard block behavior such as move, drag and drop, copy, and keyboard navigation.

For now, the new Gallery Block can be enabled on the Gutenberg Experiment page, but the plan is for the Gallery Block to ship with WordPress 5.9.

Theme and 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 authors can get wise about backward compatibility recommendations over in the Gallery Block Refactor Dev Note.

Duotone filters for featured images

Duotone filters were introduced to image and cover blocks in 10.6. By extending duotone filters to 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. blocks, 11.4 enables us to set consistent effects across post and page templates, recent posts lists, and Query Block content.

Padding support for Button Blocks

As of 11.4, we can define padding for Button Blocks with the further option of linking padding values to vertical and horizontal axial sides.

The aim is to provide greater control as well as uniformity in the way we display button elements. We can still set a single padding value for all sides – adding extra vertical or horizontal padding just gives us that extra flexibility to create variations on our design patterns.

Support for block gap spacing

Having a consistent way to tweak the margin/gap between blocks has been a long-standing feature requestfeature request A feature request should generally begin the process in the ideas forum, on a mailing list, as a plugin, or brought to the attention of the core team, such as through scope meetings held for each major release. Unsolicited tickets of this variety are typically, therefore, discouraged.. 11.4 introduces the groundwork for adding gap spacing control to blocks such as Buttons, Images, and Columns, opening up the possibility of more powerful and precise layout tools.

There’s work in progress to bring this to the editor so stay tuned for updates in upcoming releases!

Other notable highlights

Font weight support is now available for the Post Date and Post Terms Blocks.

An “early 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.” feature has also made it into 11.4: the ability to expose a parent block’s toolbar controls to its child blocks. A use case would be changing the alignment of Buttons when editing a single Button. Keep an eye out for a request for feedback on this developing feature soon.

11.4.0

Enhancements

  • AccessibilityAccessibility 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)
    • Cover Block: Allow alt text in Cover blocks. (33226)
    • Add aria-describedby to custom select control component to describe currently-selected font size. (33941)
  • Block Editor
    • Block Lists: improve 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. block, pattern and template previews. (28165)
  • Block Library
    • Query 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.: update Post Template sub-block icon. (34204)
    • Convert Gallery block to use Image blocks. (25940)
    • Post Featured Image: add duotone block supports. (34113)
    • Post Featured Image: add contextual help text to the scaleproperty. (34158)
    • File block: update transform from image to use image filename if caption is empty. (34256)
    • Post date Block: add font weight support to the block. (34070)
    • Post terms: add font weight support to the block. (34142)
    • Site Tagline: add font weight support. (33983)
    • Button: update spacing support to use axial padding. (33859)
  • Components
    • Add deprecated props adapter for ColorPicker. (34014)
    • Wrap SegmentedControl in a BaseControl with an added help property. (34017)
    • Combobox: update the current selection if the list of suggestions is filtered. (33928)
    • Post Title: use rich text hook and updating 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.) to h1 (31569)
  • Design Tools
    • Add layout default value support for blocks. (34194)
    • Dimensions Panel: add padding tool as default for blocks where this is a common setting. (34026)
  • Navigation Screen
    • Update navigation screen topbar. (34166)
  • Packages
    • Updates the “settings” icon, which toggles the display of additional controls in an interface. (34165)
  • Post Editor
    • Migrate post editor feature preferences to the interface package. (34154)
  • Widgets Editor
    • Migrate customize widgets feature preferences to interface package. (34135)
    • Refactor editor ‘feature’ preferences to interface package. (33774)

Bug Fixes

  • Block 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.
    • Spacing/Dimensions Supports: separate spacing from dimensions for compatibility purposes. (34059)
  • Block Editor
    • Font-size adjustment for tablet and mobile device previews. (33342)
    • Fix single block selection by holding shift key. (34137)
    • Fix unwanted additional spaces added around pasted text on Windows. (33607)
    • Inserter: prevent non-deterministic order of inserter items. (34078)
    • Try: Fix multiselect toolbar indent and reformat BlockContextualToolbar(). (34038) (34173)
  • Block Library
    • Latest Comments: use site localeLocale A locale is a combination of language and regional dialect. Usually locales correspond to countries, as is the case with Portuguese (Portugal) and Portuguese (Brazil). Other examples of locales include Canadian English and U.S. English. in the editor. (33944)
    • Navigation: fix vertical layout on the frontend. (34226)
    • Navigation: add z-index value to responsive menu overlay. (34228)
    • Navigation: enable flex on container to fix space between. (34258)
    • Navigation: fix submenu icon positioning. (34168)
    • Navigation block: add missing </ul> closing tag. (34077)
    • 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.: remove interactive formatting. (34083)
    • RichText: fix space key for button and summary elements. (30244)
    • Search Block: add space between generated border class names. (34025)
  • Build Tooling
    • Webpack: Fix watch on .json and .php files. (34024)
    • Pin TypeScript dependency to a specific version to avoid pulling in breaking changes. (34422)
  • Components
    • Fix RTL on Flex component. (33729)
    • NavigationSidebar: fix template content for content-navigation-item preview. (34203)
    • Remove deprecated import style for storybook/addon-docs. (34095)
    • ToolsPanel: add tools panel item deregistration. (34085)
    • Post Title: remove wrapper div and fix border style. (34167)
  • Core Data
    • GetEntityRecords returns items even if some included IDs don’t exist. (34034)
  • Design Tools
    • Allow zero values for theme.json styles. (34251)
  • Global Styles
    • Site editor: fix for how CSSCSS Cascading Style Sheets. custom properties are generated. (33932)
  • Packages
    • Rich Text: add check to toTree() in replacements before accessing its type. (34020)
  • Post Editor
    • Fix selector params in isPluginItemPinned() selector. (34155)

Performance

  • Data Layer
    • Data: Add a batch function to the data module to batch actions. (34046)

Experiments

  • Block API
    • Block Editor: absorb parent block toolbar controls. (33955)
    • Block Editor: use groups for InspectorControls. (34069)
  • Block Library
    • Add generic classnames to children of Navigation. (33918)
  • Global Styles
    • Add slashes back to the 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.. (33919)
    • Add block spacing gap configuration to theme.json and add support for this CSS variable to the “flow/default” layout. (33812)

Documentation

  • Handbook
    • Alphabetize glossary entries. (34058)
    • Correct minor typos in wp-plugin.md (34185)
    • Remove extraneous params from block_type_metadata hook. (34151)
    • Update incorrect settings examples in “Global Settings & Styles”. (34084)
    • Use block.json to add attributes in create block tutorial. (33978)
    • Fix typo in block gap documentation in theme-json.md. (34231)
    • Fix broken mobile testing documentation link in testing-overview.md. (34187)
    • Fix typo in legacy-widget-block.md. (34103)
    • Update spelling and fontSize examples in create-block-theme.md. (34152)
  • Library
    • Bump mobile version in experiments page for Gallery. (34220)
  • Packages
    • Add documentation for mobile components directory. (33872)

Code Quality

  • Block Editor
    • Render head and body with single portal for block previews. (34208)
    • BlockList: refactor element context for style/svg appending. (34183)
    • BlockList: use InnerBlocks internally. (29895)
  • Components
    • Unit Control: add unit tests for getValidParsedUnit utility method. (34029)
    • Rename SegmentedControl to ToggleGroupControl. (34111)
    • Dropdown Menu: remove min-width from the dropdown component and add whitespace rule to avoid wrapping (33995)
  • Core Data
    • Allow passing store definitions to controls. (34170)
  • Site Editor
    • Remove extra DOM element used for template part overlay. (34012)

Tools

  • Build Tooling
    • Automated Changelog: force group all documentation tasks under Documentation. (34042)
    • Automated Changelog: rename “Editor” grouping to “Post Editor” to avoid ambiguity with other editors. (34093)
    • Automated Changelog: sort feature groups by issue name. (34071)
    • Automated Changelog: use nested headings for feature groups instead of indenting lists. (34040)
    • Automated Changelog: remove Uncategorized 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. in output and place items at top. (34037)
    • Add Typescript extensions to watched files. (34094)
    • Remove obsolete step that pushes tags in NPM publishing flow. (34114)
    • Release workflow: only commit modified changelogs. (34211)
  • ESLint
    • Eslint plugin: use @typescript-eslint/no-duplicate-imports in TS projects. (34055)
  • GitHubGitHub GitHub is a website that offers online implementation of git repositories that can 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/ Contributor Templates
    • Issue Forms: simplify the 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. report form template. (34007)
  • Logs
    • Hide deprecation logs under a console group. (34163)
  • Testing
    • Emulate reduced-motion in end-to-end tests. (34132)
    • Re-enable Android end-to-end tests. (34243)
    • Remove extra props from Cover deprecations. (34066)
    • Remove the ENVIRONMENT_DIRECTORY env variable that was added to the performance jobs. (34086)
    • Add snapshot test for changelog formatting. (34049)
    • Experiment with using 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/. in end-to-end tests to build up states. (33414)

Performance benchmark

VersionLoading TimeKeyPress Event (typing)
Gutenberg 11.46.35s36.87ms
Gutenberg 11.36.29s36.97ms
WordPress 5.86.91s35.48ms

Thanks to @critterverse for our release preview assets, @priethor for guiding the release, @noisysocks, @talldanwp, and @andrewserong for their help with the release build and deployDeploy Launching code from a local development environment to the production web server, so that it's available to visitors., and to all who contributed to this release. Thank you for your splendid work!

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