zieladam 1:56 pm on October 14, 2021
Tags: block-editor ( 54 ), core-editor ( 433 ), gutenberg ( 284 ), 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.

Version	Time To Render The First Block	KeyPress Event (typing)
Gutenberg 11.7	3.7 s	24.68 ms
Gutenberg 11.6	3.5 s	25.88 ms
WordPress 5.8	4.0 s	34.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: block-editor ( 54 ), core-editor ( 433 ), gutenberg ( 284 ), 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.