Tag Archives: gutenberg-new

Riad Benguella 8:27 pm on December 8, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 12.1 ( 8 December)

“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 published following every Gutenberg release on a biweekly basis, discovering new 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.

Gutenberg 12.1 is here! the contributors continue to work tirelessly to prepare WordPress 5.9 and fix the remaining flows and bugs for the release.

Table of Contents

Template List View

This release marks the return of the template list view allowing users to navigate between the home page and the different templates and template parts in the site editor. It’s an important piece of the site editor puzzle. The current iteration of the design favors simplicity and usability. Iterations implementing client side navigation and mosaic view might be added in the future.

Global Styles

The global styles panel saw a big number of improvements in this cycle including:

  • The typography panel has been updated to show a simplified elements view allowing users to switch easily between text and link elements typography styles.
  • The color palette views now show the duotone presets. Also, users can now define custom gradients to be made available throughout the website.
  • Transparency support for the different color pickers in the Global Styles panel.

Gutenberg 12.1 includes several Navigation block improvements once again. For starters, users are not prompted to name their menus when adding starting a new one, as it is generated automatically, although the name can still be edited in 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.. Also, the UXUX User experience around configuring the menu dropdown options has been improved, only displaying the options when the selected menu actually has submenus, and disabling toggling the Show arrow option when `Open on click` is enabled, to avoid confusion.

Ensuring a frontend fallback in case no menu is selected in the Navigation block has received lots of thought in the last weeks. Thanks to this, the Navigation block will now render a Page List block when visiting a page with empty navigation. However, this default behavior can be changed by developers via the new block_core_navigation_render_fallback 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., and completely opt-out by simply adding:

add_filter('block_core_navigation_render_fallback', '__return_false');

Last, but not least, as the block becomes stable for its release in WordPress 5.9, an 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. change should be noted: the menuId attribute has been renamed to ref to better align with other blocks’ attribute names. A new deprecation has been added to accommodate this change and existing Navigation blocks will get migrated to the new version.

Miscellaneous editor UX improvements

If you ever tested the editor, you’ve probably already noticed these little plus buttons or what we call block appenders that appear as you navigate and click throughout the editor. These appenders would often create layout shifts and jumps as you select different blocks. The issue is now finally resolved as the behavior of the block appenders has been changed to rely on fixed positioning.

Another small but important change to the user experience in the editor is the addition of a new keyboard shortcut to unselect all blocks. Users could hit Escape to enter navigation mode for better keyboard navigation in the canvas, and starting in Gutenberg 12.1, you can also Escape a second time when in navigation mode to unselect all blocks.

Block Themes

The contributors also focused on improving the developer experience for block themes. If you’re a block theme author, there are two important changes that you should be aware of in Gutenberg 12.1.

First, the block-templates and block-template-parts folders have been renamed to just templates and parts respectively in preparation for upcoming features, like the addition of styles and patterns folders. Existing block themes will continue to work without any change, the former folders are still supported but we encourage you to use the updated names from now on. The documentation has been updated to reflect that change.

The second is the addition of a new flag to the theme.json settings section called appearanceTools. Theme authors can set this flag to true to opt-in into all the various appearance tools available including border color, radius and width, link color, block gap, margin, padding, line height and any appearance tool that might be added in the future. Generic block themes in the repository may consider enabling this flag automatically to avoid having to keep track of all the additions that come over time.

Changelog

Enhancements

Site Editor

  • Add Template List View. (36379)
    • Show theme, 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 or author in Added By column with appropriate icon or 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.. (36763)
    • Add success and error snackbars. (36808)
    • Implement “Add New”. (36592)
    • Use table layout. (36707)
    • Set the document title properly. (36805)
    • Add rename action. (36879)
    • Update delete template button. (36815)
  • Make Reusable blocks available in the Site Editor. (36511)
  • Remove the Styles link in Site Editor. (36637)
  • Update and align template descriptions. (36000)
  • Add icons to navigation sidebar items. (36893)
  • Allow editing custom template title. (36933)
  • Only render the site editor canvas when the global styles are loaded. (36643)
  • Remove extra border radius from the canvas. (37022)
  • Update navigation sidebar responsiveness. (36638)
  • Update resize handle styling in template part focus mode. (36410)

Global Styles

  • Add elements support to the typography panel. (36718)
  • Add the gradient palette editor. (36820)
  • Add transparency support to the colors panel. (36840)
  • Add read-only duotone palette. (36920)
  • Do not show default palette if theme opts-out. (36639)
  • Make user able to change all color palette origins. (36674) (36747) (36817)
  • Rename core origin key to default for presets. (36645)
  • Count all color palette origins on the palette counter. (36922)
  • Add appearanceTools flag in 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 opt-in into appearance UIUI User interface controls. (36646)
  • Switch the borders panel to ToolsPanel for displaying UI. (33743)
  • Improve the design and copy of the color panels. (36959) (36994) (37015) (37016) (36921) (36963) (36622) (36965) (36819) (36748) (36940) (36684)
  • Schemas: Allow custom blocks in theme.json styles. (36411)

Block Editor

  • Improve the position of the block appenders and behavior. (36656) (36605)
  • Keyboard shortcuts: Double escape unselects all blocks. (36945)
  • Adjust order of theme blocks and reorder inserter items. (36719)
  • Block Editor List View: Use anchor elements instead of buttons. (35655)

Block Library

  • Block Library: Add the Comments Pagination block. (36872)
  • Comment Author Avatar block: Add spacing support. (36322)
  • Navigation block: Only show submenu options and Show arrow button when relevant. (36826)
  • Navigation block: Implement suitable fallback for Nav block on front end of site when no menu selected. (36849) (36724) (36850) (36854) (36740)
  • Navigation block: Rename navigationMenuId to ref. (36739)
  • Navigation block: Automatically generate navigation post title. (36760)
  • Template Part block: Remove color, spacing, layout options and reusable block conversion. (36571) (36918)
  • Gallery block: Turn on auto-migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies. of v1 Gallery blocks to v2 format when edited. (36191)
  • Update 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. placeholder graphic. (36712)
  • Post Featured Image: Move width and height controls into the Dimensions panel via SlotFill. (36540)

Components

  • Font Size Picker: Allow non-integers as simple CSSCSS Cascading Style Sheets. values and in hints. (36636)
  • Divider: Improve vertical and RTL support. (36579)
  • ItemGroup: Experimenting with chevron icon. (36654)
  • Toggle Group Control: Add tooltip. (36726)
  • Modal: Support ref forwarding. (36831)
  • ZStack: Support RTL layouts when applying offset. (36769)

Themes

  • Move the theme editor under tools for FSE themes. (36723)
  • Update the block theme folders to templates and parts. (36647)

Bug Fixes

Global Styles

  • Make the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. color palette opt-in for themes with not theme.json. (36496)
  • Fix: Apply by slug on all origins. (36841)
  • Fix: Theme colors cannot override defaults. (36811)

Block Library

  • Cover block: Fix undo trap. (36807)
  • Navigation block: Add page list to navigation direct insert conditions. (36591)
  • Navigation block: Fix Nav block editing wrong entity on creation of new Menu. (36880)
  • Navigation block: Scale submenu icon. (36714) (36948)
  • Navigation block: Fix non existent menu handling. (36507)
  • Navigation block: Fix page list missing button styles when set to open on click. (36601)
  • Navigation block: Include cascading properties in deprecation. (36432)
  • Navigation block: Remove absorb toolbar prop. (36990)
  • Navigation block: Add accessible labelling to submenu buttons. (36631)
  • Navigation block: Fix space-between. (36441)
  • Template Part block: Fix slug generation when creating through the block placeholder. (36764)
  • Gallery block: Allow clicks within replace media placeholder state. (36804)
  • Gallery block: Fix stuck image size options loader. (36806)
  • Post Featured Image: Add a “Reset” button. (36572)
  • Post Title block: Fix render error when setting Page to homepage. (36786)
  • Query Pagination Next/Previous blocks: Remove text and link color support. (36954)

Site Editor

  • Stabilize theme export 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/. endpoint. (36559) (36908)
  • Template list view fixes. (36947) (36822) (36705)
  • Templates Rest API endpoint: Add missing ‘is_custom’ prop. (36911)
  • Templates Rest API endpoint: Add origin and author. (36896)
  • Validate the postType query argument. (36706)
  • Fix site editor region navigation. (36709)
  • Navigation Sidebar: Add aria-current=”page” to active navigation item. (36946)
  • Navigation Sidebar: Highlight “Site” in the navigation panel. (36762)
  • Navigation Sidebar: Show all templates and template parts on the site editor list screens. (36761)

Components

  • Color Picker: Re-instate debounce and controlled value to fix issue with gradient picker. (36941)
  • ColorPicker: Replace hardcoded “blue” with theme color. (36153)
  • Tools Panel: Fix race conditions caused by conditionally displayed ToolsPanelItems. (36588)
  • DateTimePicker: Set PM hours correctly. (36878)
  • LinkControl: Fix wordbreak for URLs. (36993)
  • Offset the parent 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. when computing Popover position. (36876)
  • ToolsPanel: Prevent tools panel menu increasing empty panel height. (36895)
  • Update destructive tertiary button styles, and template list. (36915)

Themes

  • Block Templates: Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notices on WP 5.8. (36964)
  • Don’t try and render unstable location if Nav block has ID. (36863)

Design Tools

  • Border panel: Update to display multiple palette origins. (36753)
  • Cover: Move BoxControlVisualizer in the markup to make it visible. (36635)
  • Fix duotone first render in Safari. (36754)

Icons

  • [Icons]: Fix Comment Author Name icon. (36738)
  • [Icons]: Fix property names for Comment Author Avatar icon. (36737)

Milaceanous

  • Block Styles: Add a separating margin to the default picker. (36976)
  • Block Styles: Check for existence of scroll container. (37010)
  • Data package: Update types and fix type error. (36190)
  • Writing Flow Multi-select: Ensure post title content editable after multi-select. (36843)
  • Insertion point bar: Hide onBlur and onMouseLeave. (36798)
  • Dependency Extraction Webpack Plugin: Make the plugin work when using optimizations.runtimeChunk = 'single'. (26214)
  • Fix document typo. (36776)
  • Prevent CleanWebpackPlugin webpack plugin from deleting webpack assets. (35986)
  • Hide the columns inserter in pattern previews. (36626)
  • Update theme.json version. (36917)
  • Multi-entity save: Only set site entity to pending if really saving. (36573)
  • Widgets Editor: Add CSS fix for wp_footer called multiple times. (36759)
  • Fix the templates REST API endpoint for the almost pretty permalink config. (36881)

Performance

  • Improve performance of wp_navigation lookup. (36891)

Experiments

  • Add __unstable-large size variant on InputControl SelectControl UnitControl. (35646)
  • Add experimental ConfirmDialog. (34153)

Documentation

  • Add brief information about blockGap to the theme.json how-to guide. (36558)
  • Add placeholder in URLInput documentation. (36799)
  • Block Supports: Update block supports documentation after typography reshaping. (36894)
  • Alphabetize the How to Guides section. (35904)
  • Fix broken link to wordpress/stylelint-config. (36936)
  • Improvements on Create a Block Tutorial from Block Editor handbook. (36553)
  • Update history.md with description of the page. (36888)
  • Update Getting Started with info to stay informed. (36498)
  • Update Pattern block categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. and add documentation. (36144)
  • Various inline docblockdocblock (phpdoc, xref, inline docs) corrections. (36793)
  • ToolsPanel: Update panel readme and stories. (36557)
  • Change .nvmrc and documentation for Node.js version (LTS to 14.18.1). (36744)

Code Quality

  • Blocks: Refactor generator-based actions to thunks. (36468)
  • Remove useless bubblesVirtually prop from BlockInspector. (37024)
  • Remove EditPostSettings context provider. (36949)
  • Report dependencies externalized with Dependency Extraction Plugin. (35106)
  • Comment Author Avatar block: Escape styles attribute. (36988)
  • Clarify 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. context for PostTemplateActions’s “New” label. (36679)
  • Data: Remove usage of deprecated register methods. (36344)

Global Styles

  • Move Global Styles code to lib/compat/wordpress-5.9 folder. (36978)
  • Rename gutenberg_ to wp_ for some functions that land in WordPress 5.9. (36913)
  • Update global styles public API. (36610)
  • Update the WP_Theme_JSON_Gutenberg class to be like the core one. (36973)
  • Update the WP_Theme_JSON_Resolver_Gutenberg class to be like the core one. (36974)
  • theme.json: Sort keys alphabetically. (36968)
  • Update function names for the public global styles API functions. (36907)

Block Library

  • Navigation: Remove outdated separate “Home” link styles. (36608)
  • Post Featured Image: Remove withNotices HOC. (36596)
  • [Comment Author Avatar]: Remove extraneous color link support flag. (36956)
  • Deprecate navigation areas. (36981) (36727)
  • Remove unstable max pages attribute from Nav block. (36877)
  • Remove reference to gutenberg_, swap with wp_. (36652)
  • Add plugin 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. data to Nav Area block deprecation notice. (36777)

Testing

  • Reorganize end-to-end tests folders and files. (36734)
  • Scripts: Upgrade Puppeteer to v11. (36040)
  • Update template controller 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. now that author support is in WP core. (36987)
  • end-to-end Tests: Fix failing image end-to-end test by waiting for required element. (36982)
  • Remove block template resolution unit tests. (36855)

Performance  Benchmark

VersionTime to Render First BlockKeyPress Event (typing)
Gutenberg 12.17.22s38.68ms
Gutenberg 12.06.96s38.34ms
WordPress 5.87.46s48.96ms

Thank you to @critterverse for the assets included in this post, @priethor for coordinating the release process and proofreading and to all those who contributed to this release!

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

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

What’s new in Gutenberg 12.0 ( 24 November)

“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 posted following every Gutenberg release on a biweekly basis, discovering new 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.

Changelog

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).
    • This was incorrectly added to the 12.0.0 milestone.
  • 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

Vicente Canales 7:51 pm on August 18, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.3? (18 August)

Two weeks have passed since 11.2, so here we are again for a new 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.3.0. This update includes inserter performance improvements, new controls for 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. Dimensions, and some enhancements around how we handle Featured Post Images.

New Dimensions Panel

Replacing the Spacing Panel, this new Dimensions Panel gives us a deeper control over supported spacing, size, and other related style options. It also offers the ability to customize what you’d like to have shown. This is a great addition that builds on the overall dimension controls work across blocks.

Block inserter performance improvements

The block inserter is getting a big performance boost! Enjoy searching and inserting blocks with speed and ease.

Dimension controls for 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

There are now new height, width, and scale controls for the featured image block, bringing it into greater parity with the Image block. This change impacts 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. block in a big way by allowing even more layout options.

New icons for Reusable Blocks and Template Parts

New icons are now available for Reusable Block and Template Parts to make them each more recognizable and more intuitive to interact with.

11.3.0

Enhancements

  • Block Library
    • Button: Add padding block support. (31774)
    • Post Featured Image: Add basic dimension controls. (31634)
    • Template Part: Try new icons for reusable blocks and template parts. (34002)
  • Block Patterns
    • Add translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. context on titles. (33734)
  • Block Editor
    • Enable rich previews for internal links. (33086)
  • Components
    • Add new ColorPicker. (33714)
    • Promote ItemGroup. (33701)
    • Polish the focus style for the segmented control. (33842)
    • Tune appender margin. (33866)
    • Update snackbar to use framer motion instead of reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. spring. (33717)
    • Use updated range styles. (33824)
  • CSSCSS Cascading Style Sheets. & Styling
    • Reduce specificity of reset & classic styles. (32659)
  • Document Settings
    • Disable spellcheck and autocomplete in permalink slug field. (33708)
  • Global Styles
    • Dimensions Panel: Add new ToolsPanel component and update spacing supports. (32392)
  • 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/.
    • Improve the likelihood of getting rich link previews by modifying UA string for URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org Details REST API endpoint. (33747)
  • Site Editor
    • Add error boundary. (33921)
  • Template Editor
    • Template Mode: Add busy state to template creation modal. (33076)
  • Widgets Editor
    • Add error boundaries to 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. screens. (33771)

Bug Fixes

  • 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)
    • Fix some JAWS bugs. (33627)
  • Block Library
    • Button: Fix justification for button block when selected. (33739)
    • Image: Fix issue with canInsertCover not being set to false for empty arrays. (33863)
    • Query Pagination Numbers: Fix first page’s link. (33629)
  • 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.
    • Dimensions Support: Switch dimensions block support back to using spacing key. (34030)
  • Block Editor
    • Closing the block inserter decrements block type impressions. (33906)
    • Fix block appender position in classic themes. (33895)
    • Fix positioning discrepancy with draggable chip. (33893)
    • Force link text to wrap in the Link UIUI User interface when encountering extra long link text. (33753)
    • Improve display of LinkURL menu and fix spacing. (33652)
    • Only show rich preview for image and description if data is available. (33660)
    • URL Details: Avoid PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice when parsing protocol-relative icon URLs. (33779)
  • Components
    • useBreakpointIndex: Attach resize event listener to window instead of document. (33902)
    • Components: Fix RTL on custom gradient picker. (33831)
    • FontSizePicker: Use number values when the initial value is a number. (33679)
    • FormTokenField: Avoid error when maxLength value is hit. (33623)
  • CSS & Styling
    • Fix navigation block placeholder preview markup. (33963)
  • Global Styles
    • Avoid rendering duplicate elements stylesheet. (33680)
    • Fix presets for blocks with multiple selectors. (33951)
    • Fix Global Styles transient key clash. (33844)
  • 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
    • Fix Safari 13 metaboxes from overlapping the content. (33817)
  • Navigation Editor
    • Avoid React warning when creating a new menu. (33843)
    • Fix regressed menu selection dropdown placeholder value for Nav Editor menu locations UI. (33748)
  • Site Editor
    • Fix the site editor breaking in firefox. (33896)
  • Post Editor
    • Editor: Safer isPreviewingPost check. (33840)
  • Template Editor
    • Only show post template actions to users with correct capabilities. (33392)

Performance

  • Block Library
    • Improve the rendering/update performance of the image block. (33974)
    • Do not add to the block-library CSS bundle the colors that come from theme.json. (33924)
  • Block Editor
    • Lazy render the inserter search results. (33868)
    • Lazy render block types in the inserter. (33749)
  • Parsing
    • Improve the performance of the parser by removing the automatic custom classnames handling. (33903)
  • Post Editor
    • Refactor the HierarchicalTermSelector so that it does not cause unnecessary loading of terms. (33418)
  • Template Editor
    • Template Mode: Remove ‘per_page’ argument from the template data selector. (33742)

Experiments

  • Full Site Editing
    • Site Editor: Implement a settings object 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.. (33737)
    • Template part selection popover – minor style updates for visiblity. (33733)
    • Template Part placeholder – Add title step to creation flow. (33703)
  • Navigation Block
    • Navigation: Fix navigation block appender 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. htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (33964)
    • Enable the ability to remove a link from the Nav Link block in the Nav Block. (33777)
    • Fix navigation margin collapsing. (33021)

Documentation

  • Handbook
    • Add documentation to disable remote calls for block patterns. (33930)
    • Add missing comma. (33764)
    • Add more details about block attributes. (33880)
    • Add spaces in add_theme_support documentation code. (33796)
    • Correct spelling and grammar in documentation. (33860)
    • fix: supports.color.gradients is plural. (33781)
    • fix: Broken link in documentation to block support mechanism. (33780)
    • Update documentation to reflect new automated process for feature grouping. (33573)
    • link fix: Block editor 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. Tutorial. (33308)
  • Library
    • Fix gutenberg_resolve_template() return documentation. (33800)
    • Fix misspelling of “queries” in filter documentation. (33799)
  • Packages
    • Example for rest_endpoints filter in PHP. (33738)

Code Quality

  • Block Library
    • Site Logo: Use getMedia shorthand. (33992)
    • Featured Image: Use getMedia shorthand. (33943)
    • Search Block: Removed components class from icon button and polished css. (33961)
  • Components
    • Components utils: rtl() return type, rtl.watch() utility. (33882)
    • InputControl to TypeScript. (33696)
    • Use the __unsafe_useEmotionCache in the useCx hook. (33982)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data
    • Deprecate getAuthors in favor of getUsers. (33725)
  • Global Styles
    • No longer read from experimental-theme.json. (33904)
    • Remove the experimental prefix and rename theme.json files. (33925)
  • Post Editor
    • Refactor MetaBoxesArea to to functional components using hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (30542)
  • Scripts
    • Fix typo in format change message. (33945)

Tools

  • Testing
    • Add search performance measures and make other measures more stable. (33848)
    • Avoid double parsing the content when loading the editor. (33727)
    • Block Hierarchy Navigation waits for the column to be highlighted. (33721)
    • Widgets Editor: Try to fix flaky 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. inspector test. (33890, 33965)
  • Build Tooling
    • Readable JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. assets 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: Fix webpack 5 support. (33785)
    • Scripts: Use cssnano to minimize CSS files with build. (33750)
    • Scripts: Webpack configuration update to minimize CSS. (33676)
    • Scripts: Update webpack to v5 (try 2). (33818)
    • Scripts: Add missing fallback for target in webpack 5 configuration. (34112)
  • ESLint
    • Include .jsx extenstion when linting import statements. (33746)
  • 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
    • Update 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. issue template to use forms. (33713, 33786, 33761)
  • Plugin
    • Plugin: Fix jsdoc/check-line-alignment ESLint warnings. (33901)
    • Correct function_exists() check typo introduced in #33331. (33513)

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.37.23s38.57ms
Gutenberg 11.27.82s37.89ms
WordPress 5.87.99s41.44ms

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

Thanks to @javiarce for our preview assets, @cbringmann and @mkaz for proof reading this post, @annezazu‘s great copy edits, @priethor for shepherding the process along so helpfully, @youknowriad for helping 🧑‍🚒 with the release, and everybody else who contributed to this release for your wonderful work!

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

Daniel Richards 6:07 am on August 5, 2021
Tags: , , , gutenberg-new   

What’s new in Gutenberg 11.2.0? (4 August)

Two weeks have already passed since 11.1, so this week 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.2 was released. This release seems to have had more of a focus on bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes and tooling, but nevertheless there are still some great features to highlight. Color support has been expanded on two blocks, a new layout option is being tested for parent blocks, and there’s now an option for creating a new post after publishing.

Search 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. – button and border colors

The range of options for customizing blocks continues to improve. The search block now has additional options for customizing button and border colors.

Group block – flex layout

An experimental flex layout option is being beta tested on the group block. This is an early glimpse at a feature that would give parent blocks the capability of defining the layout of their inner blocks.

In the near future the intention is to provide options for changing the orientation, alignment, justification, and spacing within a flex layout.

New button for creating posts as part of the publishing flow

If you’re creating more than one consecutive posts, you can now create a new post from the editor as part of the publishing flow.

11.2.0

Features

  • Search Block: Add color support to search button. (32416)
  • Search Block: Add border color support. (31783)
  • Pullquote: Add border and color support. (30951)

Enhancements

  • Post Editor
    • Add a new page/post button on publish panel. (33276)
  • 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. inserter: Clarify that the button toggles the inserter. (33561)
    • Update widget editor help links to point to the new support article. (33482)
  • Components
    • Spacer: Change props override order, split types. (33555)
    • Elevation: Reduced motion styles, updated documentation and README. (33551)
    • components: Add unit values utils. (33514)
    • components: Add isValueNumeric util. (33206)
    • [Components]: Add SegmentedControl. (31937)
    • Components: Promote VisuallyHidden from ui into full components (#31244). (31902)
  • 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)
    • Inserter: In text label mode, use “Close” label when inserter is open. (33534)
  • Data
    • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Pass query argument to data selector shortcuts. (33689)

Bug Fixes

  • Block Library
    • 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.: Allow authors to select images uploaded by other users. (33567)
    • Template Part: Avoid button layout shift. (33362)
    • Remove instagram reference from embed block’s description. (33519)
  • Block Editor
    • Fixed that the block is selected instead of the title when using the select all shortcut. (33621)
  • Post Editor
    • Most Used Terms: Avoid 403 error for non-administrators. (33569)
    • Editor: Set ‘hide_empty’ for the most used terms query. (33457)
    • HierarchicalTermSelector: Use TextControl component. (33545)
    • PWA manifest: icon: Fix error when adminadmin (and super admin) bar is gone. (33702)
  • Widgets Editor
    • Fix 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/theme incompatibility, call onChangeSectionExpanded conditionally. (33618)
  • Components
    • Fix: Native UnitControl to handle single unit configuration. (33641)
    • NumberControl: Allow empty values. (33485)
    • BoxControl: Prevent 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. style values. (33444)
    • FocalPointPicker: Check if value is NaN. (33637)
    • UnitControl: Set correct unit when units has one option. (33634)
    • components: Use useCx to fix 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. support. (33301)
    • Card: Add missing box-sizing CSSCSS Cascading Style Sheets. rules. (33511)
    • CardBody: Change default value of isScrollable to false. (33490)
    • ItemGroup: Fix padding, split types, rename boolean props. (33553)
  • Themes
    • 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 broken loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop. in WP_Theme_JSON_Resolver. (33624)
  • Site Editor
    • Site editor: Check template resolution. (33527)
    • FSE: Fix content height. (33698)
  • Media
    • Format Library: Remove style from inline image if width not set. (32516)

Performance

  • Drag and drop
    • Set passive listener option for use popover scroll to avoid affecting scrolling performance. (33478)
    • Drag items via transform property to avoid layout and re-paints. (33395)

Experiments

  • Full Site Editing
    • Query Pagination: Update the arrows on the Next and Prev pagination blocks. (33626)
  • Block Library
    • Add flex layout support to the block editor. (33359)

Tools

  • Testing
    • E2E: Navigation wait for links before counting them. (33704)
    • Automation: Track Gutenberg performance metrics over time. (33694)
    • Re-enable “Save flow should work as expected” end-to-end test. (33548)
    • Skip some widgets editing related tests. (33547)
    • Enable the reusable blocks skipped test. (33510)
    • Skip end-to-end tests. (33503)
    • Tests: Run Prettier after regenerating test fixture. (33502)
    • Fix screenshots not being captured when snapshots failed. (33448)
    • Add coverage folder to .gitignore. (33413)
    • Automated Testing: Disable remote patterns in tests. (33160)
    • Improve function widgets test. (33489)
    • Make the performance CI job more stable. (33710)
    • Update button block corner radius test to px. (33562)
    • Add unsupported block title translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. test. (33340)
    • Re-enable skipped widgets end-to-end test. (33449)
  • Build Tooling
    • Update sass version to 1.35.2 with fixes. (33433)
    • Improve Feature mapping in automatically generated changelog. (33625)
    • Add depth to git fetch in npm publishing. (33595)
    • Release docs: Add process for creating a point releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. of the Plugin. (33546)
    • Docs: Run Prettier after updating 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. in documentation. (33498)
    • Publish android artifacts with publish to s3 gradle plugin. (33441)
    • Build: Split configuration into two parts – blocks and packages. (33293)
    • Automate grouping of release Changelog PRs by feature. (33229)
    • Fix dependency extraction webpack v5 deprecation. (33090)
    • Scripts: Update eslint-plugin-markdown version. (33432)
    • Replace CRLF with LF when generating unminified assets. (33509)

Documentation

  • Add missing space in documentation. (33690)
  • Added common steps of plugin translation. (23535)
  • Packages: Ensure changelog entries are attributed to the correct release. (33590)
  • Add i18n filters to documentation table of contents. (33556)
  • Update the create a block theme how-to guide. (33382)
  • Block API: Improve how blocks assets are versioned. (33075)
  • Update the tested up to version in the readme file. (33760)
  • Correct {% end%} 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.) – missing a space. (33189)
  • Use tabs instead of spaces in block transform doc example. (33549)
  • Fix flaky widgets end-to-end tests by waiting for the snackbar correctly. (33317)
  • Scripts: Add changlog entry for module update. (33473)
  • Create block: Update “Tested up to” in readme.txt. (33493)

Code Quality

  • Block Library
    • Fix optional params in page list rendering. (33639)
  • Block Editor
    • Block editor: Use ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. events for shortcuts (portal bubbles & contextual). (32323)
    • Block editor: Remove focus stopPropagation from appender. (32003)
    • Block editor: iframe: Incorporate writing flow. (33497)
    • Escape key sanity (avoid event.stopPropagation). (33630)
    • Writing flow: select all: Remove early return for post title. (33699)
    • Remove event.stopPropagation for past WritingFlow/ObserveTyping compatibility. (33632)
  • Post Editor
    • Editor: Refactor Post Author component. (33695)

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.28.48s37.89ms
Gutenberg 11.18.54s38.17ms
WordPress 5.88.43s39.71ms

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

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