What’s new in Gutenberg 10.4? (14 April)

Two weeks have passed since the last 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, which means a new version is already available! Gutenberg 10.4 introduces cool features like 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. widgets 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., enhancements to the Site Editor, improvements to rich text placeholders, and, as always, 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 as well.

Block widgets in the Customizer

As part of the Block-based 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 project, one goal is to enable block widgets in the Customizer, with Gutenberg 10.4 introducing the first iteration of this feature.

List View design updates

This release brings us a set of design updates to the Site Editor List View, including updates to icon sizes and spaces and new colors for hover, focus, and select states.

More descriptive publishing UIUI User interface

The publishing content UI found in block editors now includes the site icon and name so that it’s clearer in certain cases, such as full-screen or mobile, where you are publishing to.

Revert template to theme defaults within the Site Editor

Until now, to revert a template to the default provided by a theme, it had to be done outside the Site Editor. Thanks to this new feature, it is now possible to revert template customizations directly in the editor.

Rich text placeholder enhancements

To improve the editing experience, rich text block placeholders have seen a few tweaks in this release. Starting in Gutenberg 10.4, blocks containing rich text will display a shorter placeholder text that will remain shown even when being focused.

Improvements to Navigation Block

The Navigation Block has good momentum and has received many improvements in this release, including a new “Post Format Link” variation, a clearer placeholder state, and more style polishing. 

Editor and frontend parity refinement

Providing a consistent markup between the editor and the frontend is key to deliver a smooth editing experience. Gutenberg 10.4 iterates towards this goal by ensuring a frontend-editor parity in blocks such as Quote, Separator, and Archives, among others.

10.4

Enhancements

  • Ensure Frontend/Editor block styles parity:
  • Block Library:
    • Latest Comments: Remove list padding and margin. (29402)
    • Post Date: Add option to make it a link. (30499)
    • 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.: Fix toolbar for post excerpt warning. (30280)
    • Post Title: Fix “‘length’ of undefined” error. (30208)
    • Preformatted: Add color controls. (28396)
    • Query: Use a WordPress 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. for the query block. (30405)
    • Search: Add border radius support. (30227)
    • Site Logo: Style polishing. (30526)
    • Template Part: Add padding support to template parts. (29779)
    • Update placeholder text across blocks. (30404)
  • RichText:
    • Add min width to show caret for empty inline container. (30224)
    • Always show placholder on focus. (30393)
  • General Interaface:
    • Add site icon and name to the publish flow. (30231)
    • Use a darker canvas color. (30282)
    • Update the save button label in the site editor. (30439)
  • Icons:
    • Polish media & text icons. (30239)
    • Update “close small” icon so that its shape matches the “add” icon dimensionally. (30014)
    • Update site-logo block icon. (30211)
  • Inserter: Clarify that when the Inserter is open clicking the + button in the top bar will close it again. (29759)
  • Writing Flow: Use a shorter writing prompt. (29611)
  • List View: Improve the spacing, colors and icons (30455) (30303)
  • Block Themes: Clarify the empty block templates message. (30145)
  • Site Editor:
    • Allow reverting custom templates to their original theme-provided files. (28141)
    • Use “Custom Styles” label to signal there are global styles changes in the saving panel. (30521)

Bug Fixes

  • Inserter: Show only the patterns that use allowed blocks. (30300)
  • Block Library:
    • Buttons: Prevent overlapping button blocks in the frontend. (30253)
    • Columns: Prevent having a width > 100%. (30229)
    • Cover: Add ‘object-position’ to allowed inline style attributes list. (30243)
    • Gallery: Avoid adding all media items in galleries using external URLs. (30122)
    • Image: Do not preserve custom sizes when replacing images. (29919)
    • Query:
      • Fix undo trap during creation. (30203)
      • Pagination Numbers: Print nothing if content is empty. (30554)
    • RichText: Fix arrow navigation around emoji. (30206)
    • Search block: Fix alignment issues. (30444)
    • Site Logo: Delete sitelogo option when custom logo does not exist or was removed. (30427)
  • Block List: Fix mover position in the docked toolbar. (30242)
  • Code Editor: Revert save editors value on change (#27717). (30524)
  • Post Editor:
    • Avoid focus attempt on a non-existent post title in code editor. (29922)
    • Fix the post author selector for contributor roles. (30218)
  • Gutenberg 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: Ensure that plugin does not error with older versions of WordPress. (30230)
  • Inner blocks: Memoize allowedBlocks to prevent needlessly updating settings. (30311)
  • Server side renderer: Fix errors in template part editor context. (29246)
  • Writing Flow:
    • Fix copy pasting non textual blocks. (30225)
    • Fix horizontal caret placing for empty editable with placeholder. (30463)
    • Fix multi-selection copying in Safari. (30202)
  • Site Editor:
    • Fix nested template parts. (30416)
    • Fix media upload behaviour and error state. (30436)
    • Select the block inspector top upon selection. (30387)
  • Components: Stop matching autocompleter upon mismatch. (30649)

APIs:

  • Add padding server-side block support. (30332)
  • Remove small APIs deprecated in WordPress 5.2. (30283)
  • Block Patterns: Remove scope from Query patterns and introduce blockTypes. (30471)

Experiments

  • Customizer
    • Add customize widgets inserter. (29549)
    • Add Legacy Widget block. (30321)
    • Fix adding blocks in the widgets customizer. (30221)
  • Navigation Editor and Block
    • Apply mover tweaks to navigation and widgets. (30284)
    • Add src/navigation-link/index to side effect whitelist. (30200)
    • Add post format variation to navigation link block. (30403)
    • Avoid creating a new array/object on every render. (30374)
    • De-emphasize “Link” block. (30172)
    • Fix arrow inheritance, polish. (30287)
    • Fix hardcoded color in navigation submenu icon. (30385)
    • Fix Navigation Link block constantly updating its inner block list settings. (30274)
    • Fix navigation link block dragging error. (30219)
    • Fix snackbar list component blocking clicks to UI it overlaps. (30381)
    • Flip orientation of submenus that are towards the right of the viewport. (30342)
    • Indicate when a menu is deleted and show the menu switcher afterwards. (29201)
    • Make the navigation placeholder clearer. (30281)
    • Polish 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. submenus. (30335)
    • Replace arrow with chevron. (30180)
    • Save theme location on button click. (30340)
    • Use same default implementation of __experimentalFetchLinkSuggestions in post, site, navigation, widget editor. (29993)
  • Widgets Editor
    • Add manage with live preview link. (29839)
    • Handle when $instance is empty and use str_replace instead of sprintf in the Widget block. (30217)
    • Iterate on Legacy Widget block. (29960)

Documentation

  • Handbook:
    • Add description for templateParts 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.. (30118)
    • Add instructions for finding attributes for use in templates. (30258)
    • Added a practical example of adding a component 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.. (30379)
    • Clarify what is meant by “block wrapper”. (30315)
    • Fix broken links to typescript documentation. (30188)
    • Fix code snippet for disabling the block directory. (30365)
    • Fix formatting. (30309)
    • Fix typos in block-controls-toolbar-and-sidebar.md. (30513)
    • Rename, changed URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org Link. (30483)
    • Rich Text: Add section for disabling specific format types. (29383)
    • Updated documentation to reflect the output created currently by npx wordpress/create-block gutenpride. (30353)
    • Update feature deprecation guide. (30220)
  • Packages:
    • Api-fetch: Fix example code for apiFetch middlewares. (30534)
    • Block supports: Fix typos in layout supports comment. (30537)
    • Block Editor: Fix block-editor typo. (30401)
    • Components:
      • Remove references to __experimental* in the DateTimePicker component documentation. (29322)
      • Update CustomSelectControl component README.md. (29854)
  • docgen:
    • Components: Add types to Draggable. (29792)
    • Add types to clean-node-list. (30412)
    • Add types progressively to dom modules. (30103)
    • Add types to phrasing-content. (30102)
    • Export all types from api-fetch. (30539)
    • Fix arrow functions and TS index module support. (30028)
    • deprecated: Export DeprecatedOptions to align with DefinitelyTyped. (30677)
    • api-fetch: Align exported type names with DefinitelyTyped types. (30570)

Code Quality

  • Block Editor: Use proper insertion point for drop. (29933)
  • Block Library: Fix Post Excerpt warnings for RichText in inline containers. (30498)
  • Components: Simplify ScrollLock, adding types. (29634)
  • Gutenberg Plugin:
    • Prettify YAML scripts. (30409)
    • Remove deprecations planned for 10.3 release. (30417)
    • Update the objectFitPolyfill vendor library. (30507)
  • PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Coding Standards fixes. (30346)

Tools

  • Add /packages/stylelint-config to CODEOWNERS. (30264)
  • Build: Ensure non-JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. changes are processed in the watch mode. (30343)
  • Testing:
    • Added end-to-end tests for navigation menu name editor. (29774)
    • GHA workflow improvements when setting up NodeJS. (29078)
    • Include NodeJS version in the cache key. (30512)
    • Remove button from forbidden elements. (30223)
    • Remove cache restore-keys. (30510)
    • Skip flaky end-to-end tests. (30344)

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 10.45.94s35.14ms
Gutenberg 10.35.98s32.58ms
WordPress 5.75.05s31.34ms

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

Thanks @youknowriad for managing the release and @critterverse for helping with the release post assets.

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

What’s new in Gutenberg 10.3? (31 March)

The first quarter of the year is coming to an end, and with it, 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/ 10.3 comes as well! This release brings us some important changes to Global Styles, as well as several improvements to blocks such as 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., enhancements to the inserter, an editor performance boost, and even a few new blocks! As always, 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 are included, too.

Improving the Block toolbar

In order to provide a consistent UIUI User interface across blocks, blocks have seen their toolbars rearranged following a standard grouping layout. While the last release saw the Image block have its toolbar standardized, this time a whole set of blocks have been normalized as well, including blocks such as Button, Buttons, List, Heading, Paragraph, Quote, Audio, File, Media and Text, Video, Site Logo, Cover, and 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.

Introducing layout configuration 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.

Themes have always had the responsibility of defining alignments in the frontend through CSSCSS Cascading Style Sheets. rules. They also define different widths for both the editor and frontend. The content width, whether they support wide alignments or not, and the CSS to support all these combinations can be very hard to write properly.

With Full Site Editing, the templates are written in blocks and edited in the site editor. This means that the editor has to match the front end as much as possible while allowing theme authors to tweak these alignments and widths in the editor. If this doesn’t happen, it causes confusion and frustration as seen in the feedback from the FSE Outreach Program

To address these requirements and to simplify the way themes define and style alignments, Gutenberg 10.3 introduces the concept of layout and layout configuration, a feature automatically enabled when you rely on a theme.json file (experimental-theme.json file at the moment).

Theme authors should be able to make use of this feature by adding a layout config to their theme.json file and indicating in their block templates which containers inherit that config. The layout config is also automatically applied to the post editor.

If you’re using the experimental theme.json file already, you should be able to follow these two pull requests that update the empty theme and the twenty twenty-one blocks theme to use this feature.

Changes in theme.json block supports and supported styles 

Block supports are no longer used to decide whether the styles in the theme.json file for a block should be used or not. However, block supports are still used to show UI controls in both the block & 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., but themes can now use any theme.json style property that exists in any block:

"core/paragraph": {
  "typography": {
    "fontFamily": "var(--wp--preset--font-family--cambria-georgia)"
  }
}

Improvements to Navigation Block and Navigation Editor

Gutenberg 10.3 brings a number of improvements to the Navigation block and Navigation editor experience, including the list view in the Navigation editor, in-between inserter, and a better flow to build nested menus.

after, editor

Inserter enhancements

This release also brings updates to inserting blocks, including improvements to keyboard navigation and accessibility for the Block Inserter, and a new “theme” category for template parts and their variations. Moreover, the slash inserter now allows typing multiple words when searching for blocks. Each of these enhancements help make it easier to find and use the blocks you want.

More theme blocks

With the goal of providing classic template 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.) features with blocks, up to three new blocks are introduced in this release. The LogIn/Out block is now available to provide login and logout links. Optionally, it can display the login form instead of a link by setting the available block attribute.

Two new blocks for archive pages are also available. The Term Description block displays the description of categories, tags, and custom taxonomies. On the other hand, the Archive Title block displays the title of the archive itself.

Cover block improvements

The Cover block now supports drag and drop for replacing the background image.

Editor performance improvements

In recent releases, the time it took for the editor to load increased slightly due to the growing number of patterns available in the Inserter. Gutenberg 10.3 fixed this so that the editor performs well regardless of the number of available patterns!

10.3

Enhancements

  • Add since versions to the deprecated features. (30072)
  • Blocks: Add “theme” category and better present Template Parts in the inserter. (30020)
  • Block Editor:
    • Add drag handle to select mode. (28815)
    • Improve block inserter keyboard navigation. (26938)
    • Open adminadmin (and super admin) sidebar menu over editor on small screens. (29955)
  • Block Library:
    • Cover: Allow drag and drop media replacement. (29813)
    • File: Make the editor markup match the frontend. (30148)
    • Social Links: Improve selected state of empty block. (29756)
    • Standardize the groups in the block toolbar. (300122924729863)
    • Verse block: Add support for the padding to the verse block. (29820)
  • Components: Allow multiple words in the autocomplete phrase matcher. (29939)
  • Gutenberg 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: Improved cache bust without filemtime for assets. (29775)
  • Icons: Hint the lowercase icon by 0.15px to correct the font weight appearance. (29754)
  • Media: Use image default size from settings. (29966)

New APIs

  • Compose: Add new useCopyToClipboard hook. (29643)
  • Deprecated: Add since option to deprecated function. (30017)

Bug Fixes

  • Block Editor:
    • Ensure that uncategorized block types are properly handled. (30125)
    • Fix mover width/size regressions. (29889)
    • Fix navigation mode focus. (30126)
    • Fix 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. with multi select style. (30128)
    • Fix the issue with block style preview when example missing. (29894)
    • Fix sibling block inserter displaying at end of block list. (29920)
    • Revert showing empty paragraphs on fronted. (29809)
    • Show the active block variation’s icon in Select mode. (30143)
  • Blocks: Adding onRemove event to verse block. (30104)
  • Block Library:
    • Cover: Improve disabled media buttons check for placeholder. (29858)
    • Embed:
      • Fix overzealous aspect ratio scaling for embeds. (29510)
      • Embed: Fix select on focus. (29431)
    • Gallery: Fix gallery item clicking. (29860)
    • Image:
      • Fix block reset sizes on external URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org change. (26879)
      • Fix undo step with temporary URL. (30114)
    • Social Link: More accessible labels. (29659)
    • Video: Fix kind attribute missing subtitle value in video text track. (30040)
  • Components:
    • Don’t display Guide’s page control if there is only one page. (29629)
    • Prevent PanelBody title from being overlapped by arrow. (29914)
  • Compose: Call useMergeRefs when dependency changes after ref change. (29892)
  • Copy:
    • Restore dot at the end of a sentence. (29897)
    • Update the layout alignment description for better clarity. (29974)
  • Gutenberg Plugin: Update “requires at least” value to 5.6. (29646)
  • E2E Tests: Stabilize randomly failing tests 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.. (29836)
  • Navigation Component: Align item text to the left/right. (30083)
  • Post Editor:
    • Fix post editor layout regression. (30093)
    • Keep post publishing popover open when a date is clicked. (2973829893)
  • RichText: Fix inline display warning. (30193)
  • Themes: Restore the default editor font for the non FSE themes. (30080)
  • Raw Handling: Fix pasting special spaces. (28077)
  • Storybook: Fix block editor shortcuts. (29750)
  • Writing Flow:
    • Fix caretRangeFromPoint. (30031)
    • Fix tab behavior. (30000)
    • Remove arrow nav limitations. (30057)

Performance

  • Block Editor:
    • Optimise multi-selection select calls. (30140)
    • When inserting Block Patterns they get parsed when the browser is idle. (29444)
  • Block Library: Use early return in the Button block to optimize save.js. (29781)

Experiments

  • Components:
    • Add Heading. (29592)
    • Button: Add a default type of button. (29900)
  • 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.: Add widgets customize inspector. (29755)
  • Full-Site Editing:
    • Add a layout configuration to the Group block and theme.json and make alignments declarative. (29335)
    • Add client ID trees selectors in block navigation. (29902)
    • Add description field to Post Content block. (29971)
    • Add Log In/Out block. (29766)
    • Add Query Title block and Archive Title variation. (29428)
    • Add Term Description block. (29613)
    • Add preload_paths 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. for widgets screen and full site editing. (28701)
    • Add support for experimental layout in Post Content block. (29982)
    • Add layout support to the Template Part block. (30077)
    • Add link color option in Site Title block. (29924)
    • Always use full screen mode. (29489)
    • Automatically open the sidebar to the appropriate menu. (2696430098)
    • Close navigation panel after template selection. (29956)
    • Expose Template Part block variations to the Inserter. (30032)
    • First step towards hybrid themes – fallback to PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher templates. (29026)
    • Fix block toolbar from overlapping navigation panel. (29918)
    • Fix different markup in the editor and on the frontend for the Site Title block. (29021)
    • Fix edge case where the default layout could be undefined. (30024)
    • Fix persistence of Preferences in site editor. (30019)
    • Fix Post Comment Count block attribute. (30056)
    • Fix 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 margin. (30078)
    • Fix Template Part alignments behavior. (30099)
    • Fix template saving issue after switching themes. (29842)
    • Polish site button focus/hover styles in post and site editor. (29888)
    • Prevent navigation panel focus when hidden. (29600)
    • Refactor the Post Content block. (29898)
    • Remove alignments from the root level of the site editor. (30079)
    • Remove 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. toolbar transition in reduced-motion mode. (29764)
    • Remove unused QueryProvider in Query block. (29947)
    • Template Part: Identify template parts in error messages. (28398)
    • Update Post Content icon, unuse justify. (29867)
    • Update Post Title markup so that editor and front match. (29824)
    • Update template details popover. (29439)
  • Global Styles:
    • Allow themes to use any styles in the theme.json whether or not the block supports it. (29941)
    • Better CSS reset style loader order. (30034)
    • Block Supports: Allow skipping serialization of border. (30035)
    • Optimistically continue with empty data when user data for global styles is not a JSON. (30088)
    • Remove kebab-case camelCase transformations. (29986)
    • Skip null when translating settings. (30171)
    • Translate custom templates in theme.json. (29828)
  • Navigation Editor and Block:
    • Add line-height to Navigation block. (30010)
    • Add padding to Navigation Link placeholder. (29832)
    • Allow vertical inserter in the Navigation block. (28833)
    • Consistently provide fallback variations for the block. (30117)
    • Enable list view. (29936)
    • Fix flyout background color in Page List block. (29932)
    • Fix link items in navigation screen. (30009)
    • Fix minor styling issues with nav editor. (30129)
    • Fix Navigation block styles in the navigation editor. (29748)
    • Fix navigation editor link search suggestions. (29707)
    • Fix navigation editor saving. (29749)
    • Fix navigation screen font. (30085)
    • Fix navigation screen inserter horizontal scrollbar. (29930)
    • Fix navigation editor block toolbar not visible on small screens. (29967)
    • Fix padding issues with nav screen. (30183)
    • Fix paragraph margin specificity inside layout containers. (30038)
    • Fix popover anchor in Navigation Link block. (30173)
    • Improve default label of location select. (29908)
    • Increase importance of submenus staying open. (30169)
    • Keep submenus open on select in the editor. (29713)
    • Match editor markup to rendered in Navigation Link block. (29935)
    • Move theme location settings to navigation editor sidebar. (29458)
    • 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.: Show submenus only on select in the editor. (29869)
    • Polish navigation screen. (2992630168)
    • Simplify focus style in Site Icon block. (29872)
    • Show all menus in manage locations. (29906)
    • Unset font weight and text decoration inheritance in Navigation block. (30011)
    • Use the interface package for the navigation screen. (30013)
    • Visual and design improvements for List View. (29769)
  • Widgets Editor:
    • Fix warning when widgets block editor is disabled. (30318)
    • Iterate on widgets 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/. endpoints. (29649)
    • Load block editor assets in the navigation and 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. editors. (30076)
    • Unify menu item styles for Navigation Block and Page List blocks. (29975)
    • Use a default sans serif font for the widget screen. (30084)

Documentation

  • Block Editor: Fix renderAppender documentation. (29925)
  • Handbook:
    • Fix broken image link in the documentation main README. (29857)
    • Fix broken link to developer resources in README.md. (#29795). (29796)
    • Fix link to native-mobile.md in pull request template. (29923)
    • Fix rebase error. (29753)
    • Remove superfluous sentence in create block tutorial. (30062)
    • Update block design principles with a new section on how to group controls. (29816)
    • Update broken link to Getting Started for the 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 based Mobile Gutenberg. (30162)
    • Update the quick view image on the documentation homepage. (29808)
  • Editor: Clarify the purpose of the @wordpress/editor package. (30136)
  • 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.: Replace dead link in README.md. (29699)
  • Interface: Fix typos in interface package. (29740)

Code Quality

  • 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:
  • Block Editor:
    • Avoid isInsideRootBlock (DOM query) in useFocusFirstElement. (30178)
    • Focus mode: Fix opacity for inner blocks, move classes. (30130)
    • Move class for navigation mode. (30181)
    • Move is-typing and is-outline-mode classes up the tree. (30106)
    • Move nav mode exit from writing flow to block props. (30175)
  • Block Library:
    • Refactor ServerSideRender to use React hooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same.. (28297)
    • Remove obsolete editor styles for List block. (30094)
    • Rename loginOut variable to logInOut. (29979)
  • Blocks:
    • Ensure theme category is only added when not provided. (30089)
    • Rename getBlockContent to getBlockInnerHTML internally. (29949)
  • Components: Fix React warning in Text Control. (29724)
  • Date: Add types. (29789)
  • DOM:
    • Add types to focusable. (2978730030)
    • Split into smaller modules to facilitate typing. (30044)
  • Gutenberg Plugin:
  • Packages: Add types directive to api-fetch and date packages. (30252)
  • RichText: Remove dead and deprecated setFocusedElement. (29877)

Tools

  • Babel Preset: Update Babel to v7.13.x. (30018)
  • Create block: Require WordPress 5.7 by default and source it from the main plugin file. (29757)
  • E2E Tests:
    • Cover the case when using multiple words in the inserter. (29978)
    • Fix test plugin clash. (2974429745)
    • Set delay to zero in the reduce-motion mixin and tests. (29762)
  • Eslint Plugin: Add TypeScript as peer dependency and make it optional. (29942)
  • 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/ Workflows:
    • Release: Allow triggering manually. (28138)
    • Remove path ignore configs from CI. (30090)
    • Use Gutenberg token for version bump, changelog commits. (30212)
  • Packages: Enforce version bump for production packages after WP major. (29903)
  • Unit Testing: Allow TypeScript modules for transpiled packages. (29873)

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 10.34.90s31.86ms
Gutenberg 10.25.15s31.41ms
WordPress 5.74.88s25.24ms

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

Thanks @gziolo for managing the release, and @annezazu and @melchoyce for helping on the release post.

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

What’s new in Gutenberg 10.2? (17 March)

It’s that time of the fortnight again: We’ve just published a new release 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/! Version 10.2 brings to you a number of additions to Full-Site Editing (FSE) and Global Styles, and a sizeable list of improvements to the editing experience, as well as 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.

Offering Patterns on 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. setup

Introducing some initial explorations on how specific patterns can be better surfaced from a block’s placeholder state. Upon inserting a Query block there’s now a setup step that allows picking a block pattern for it to use. This allows users to start with a good design basis. Note that this goes beyond what block variations afford, as it’s 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. that can directly connect with a block pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. The candidate block patterns are fetched via a new API that allows querying for patterns that include a given block type.

Alternatively, the user has the option to “start empty”, in which case they’ll be able to choose from the existing CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. block variations (e.g. Title & Date, Title & 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., etc).

Spacer Block width can be adjusted (in Navigation Block)

When inserted into a parent block that dictates a horizontal orientation (such as the Navigation Block), the spacer block’s width (rather than height) can now be adjusted. This makes some new cool customizations possible on horizontally-stacked blocks.

Transform Media & Text to Columns

It has been possible for a while to transform any single block into a Columns block (with a single column). For the Media & Text block, that behavior is unlikely to produce the desired outcome. Thus, when transforming a Media & Text block into a Columns block, it will now result in two columns (and all the relevant fixings from the original block).

Hide writing prompt from subsequent empty paragraphs

Rather than showing the “Start writing or type / to choose a block” prompt in each of a number of subsequent empty paragraphs, we now only show it in the first one.

10.2

Features

  • Template part block: Add category panel. (29159)

Enhancements

  • Add check for button text before rendering button block. (29717)
  • Skip CSSCSS Cascading Style Sheets. minification via PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher. (29624)
  • Restore the margins of blocks relying on the figure element. (29517)
  • Add Columns transform from Media & Text. (29415)
  • Fix: Invert gallery gravity. (29367)
  • Components: Try to make the order of fills stable in regular slots. (29287)
  • Add expandOnFocus, showHowTo and validateInput experimental props to FormTokenField. (29110)
  • Hide writing prompt from subsequent empty paragraphs. (28275)

New APIs

  • Plugins: Add scoping functionality to the Plugins API. (27438)

The registerPlugin() function (in the @wordpress/plugins package) now accepts a scope argument that will limit that pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party to be displayed only by <PluginArea /> components with a matching scope prop. See #27438 for more details.

Bug Fixes

  • Reusable Blocks:
    • Fix editor crash when converting block with visible styles to reusable (after a save and page reload). (29059)
    • Fix reusable block crash when converting a just created reusable block to blocks. (29292)
  • Buttons Block:
    • Buttons: Fix links inside links. (29273)
    • Fix legacy button center alignments inside the buttons block. (29281)
  • Cover Block:
    • Fix cover block content position not migrating correctly from deprecated version. (29542)
    • Fix solid-color only cover has small gray border in the editor only. (29499)
  • Social Icons and Links:
    • Fix social icons vertical spacing issue. (29657)
    • Yelp: Fix foreground color, make background transparent. (29660)
    • Social Links: Replace CSS variables with block context approach. (29330)
  • Table of Contents block:
    • Fix links when in archive 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. or when using “Plain” permalink structure. (29394)
    • Fix class attribute. (29317)
  • Add theme styles in the site editor. (29704)
  • Fix broken links to the block editor developer handbook. (29663)
  • Fix in between inserter edge case. (29625)
  • Fix the button component styles when used with a dashicon. (29614)
  • Revert moving is-typing class. (29608)
  • Fix inline block styles minification issues with calc(). (29554)
  • Packages: Update the publishing command for npm with next dist 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.). (29379)
  • Ignore build folders when native unit tests. (29371)
  • Fix mobile issue template label. (29344)
  • Interface: Fix ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warnings triggered in ActionItem component. (29340)
  • Search block: Add missing space to provide valid HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers.. (29314)
  • Blocks: Ensure that metadata registered on the server for core block is preserved on the client (try 2). (29302)
  • Fix off-center appender in some themes. (29290)
  • Add enableCustomSpacing to block editor settings. (29277)
  • Border Radius Support: Fix application of zero radius values. (28998)
  • Fix Document Outline mouse click. (28589)
  • Fix typos in template part area tags. (29937)
  • Gallery Block: Fix the crop images setting. (29823)
  • Fix Error: Could not process the ‘wp-config.php’ transformation. (29800)

Performance

  • Revert “Block edit: Avoid memoized block context in favour of useSelect”. (29621)

Experiments

  • Global Styles:
    • Do not add padding sub-properties if there’s no values 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.. (29712)
    • Fix specificity conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. of blocks with single classes as selectors. (29378)
    • Fix specificity issue between theme and user styles. (29533)
    • Custom Link Color: Do not apply to buttons. (29557)
    • Implement skip serialization for color key in style att. (29253)
  • Full-Site Editing:
    • Site Title: Add text decoration and text transform controls. (29622)
    • Make border work on the site editor. (29618)
    • Prevent clicking on tag and category links in the site editor. (29583)
    • Print nothing in the front end if there are no results in Query block. (29521)
    • [Query block] Remove exclusion of current page id. (29432)
    • Handle missing categories/tags in Query block. (29424)
    • Query block setup with block patterns integration. (28891)
    • Update template descriptions for clarity and humanity. (29531)
    • 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 the template area unassigned type string. (29617)
    • Template Part: Prevent infinite recursion. (28456)
    • Update title, description, and icon of Post Categories. (29400)
    • Show Site Logo’s block toolbar when selected, after the editor loads. (29336)
    • Remove delete toolbar option from Site Logo. (29331)
  • Navigation Editor and Block:
    • Allow very thin menus. (29555)
    • Refactor and simplify navigation block CSS. (29465)
    • Make navigation placeholder state visible in dark themes. (29366)
    • Update navigation editor menu selection dropdown. (29202)
    • Make Spacer block width adjustable and add it to Navigation block. (29133)
    • Navigation: Try adding navigation link variants via server. (29095)
    • Navigation Editor: Allow menu renaming. (29012)
  • Group Block: Add support for custom border settings. (29591)
  • Pass block settings to the client for all blocks. (29474)
  • Button block: Add color support via block.json. (29382)
  • Add/new nav link icon. (29369)
  • Temporary hack to render blocks in 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.. (29365)
  • Fix shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. not showing in the widgets screen. (29282)
  • Fix: More resilient appender CSS. (28908)

Documentation

  • Add block variations page to Block API summary. (29725)
  • Update Readme of Animate Component to remove todo comment. (29702)
  • Docs; Organize contributors section using READMEs. (29688)
  • Remove mid-paragraph newlines. (29674)
  • Update Versions in WordPress to include release notes. (29532)
  • Extract block variations API into its own handbook page. (29515)
  • Docs: Fix deprecation message to be clear. (29451)
  • Fix typo in block-based-themes.md. (29410)
  • Fix typo in modularity. (29405)
  • Fix typos in git workflow documentation. (29324)
  • Docs: Table of contents – fix typos. (29319)
  • Add NVDA instructions to the 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) testing documentation. (29312)
  • Component Systems: Update references to external module. (29233)
  • Docs: Add info about npm release types and their schedule. (29028)
  • Docs: Update slug for block-based theme tutorial. (25839)

Code Quality

  • Rename load_separate_block_styles to load_separate_block_assets. (29703)
  • Update the minimum WordPress version required by the gutenberg plugin too 5.6. (29701)
  • Components: Ensure that SlotFill does not use portals in React Native. (29631)
  • Remove the subheading block. (29627)
  • useFocusFirstElement: Include useRef. (29435)
  • Include PHP: Replace dirname( __FILE__ ) with __DIR__. (29404)
  • Run phpcbf to fix PHP CS issues. (29368)
  • Register style attribute when any color property is supported. (29349)
  • Block context:
    • Remove unused onFocus block context. (29318)
    • Reduce memoized block context: Class names. (29186)
    • Remove obsolete block context. (29313)
    • Block edit: Avoid memoized block context in favour of useSelect. (29333)

Tools

  • Scripts:
    • Fork jest-environment-puppeteer to use puppeteer-core directly. (29418)
    • Add TypeScript support to linting command. (27143)
  • Needs Info / Stale bot
    • Add stale issues bot to help triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors. efforts. (29321)
    • Do not automatically close message, update stale message. (29310)
  • Tests:
    • Temporary skip flaky test. (29601)
    • Paragraph block: Add test to ensure unwrapped editable paragraph. (29299)
    • Testing: Use snapshot-diff serializer to remove noise in snapshots. (29270)
    • Inserter: Add end-to-end test to make sure last inserted block is being focused. (29187)
  • Blocks: Preprocess validation log with util.format instead of sprintf. (29334)
  • Docs: Update release.md. (29091)
  • Docs/Tools/CI: Update references from master to trunk. (28433)

Various

  • Full-Site Editing
    • Site Editor: Browsing 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. templates menu restructure. (28291)
    • Site Editor: Persistent List View. (28637)
    • Template part block: Add variations based on areas. (29122)
    • Template Part: Update switching trigger. (29257)
    • Template part ‘area’ term – reword confusing ‘type’ terminology. (29679)
    • Add i18n support for template part variations’ descriptions. (29612)
    • Multi entity save panel – remove dynamic copy. (29637)
  • Table of Contents block
    • Add Table of Contents block (dynamic rendering + 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. version). (21234)
    • Deregister TOC block until issues are resolved. (29718)
  • Components:
    • Add next Button, ButtonGroup. (29230)
    • Add Card. (29350)
    • Add Divider. (29433)
    • Add Popover. (29084)
    • Add TooltipButton. (29523)
    • Add Tooltip and Shortcut. (29385)
    • Do not use ViewOwnProps for Portal. (29345)
    • Update Elevation story. (29454)
  • Component System:
    • Add basic tests for style system. (29320)
    • Add tests for color utils. (29301)
  • Types
    • api-fetch: Add incremental type checking. (29685)
    • docgen: Add TypeScript support. (29189)
    • docgen: Incrementally add types. (29684)
    • Dom: Add type-checking to data-transfer. (29682)
    • Components: Add types to Shortcut. (29633)
  • Button Block: Removes “Link settings” panel. (29664)
  • Add 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. test for editor JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. crash caused by rtlcss parsing exception, take 2. (29598)
  • Reset all WP Adminadmin (and super admin) styles in the wrapper of the editor styles. (29590)
  • Revert “[Mobile] – Fix splitting/merging of Paragraph and Heading”. (29587)
  • Try updating the minimum required WordPress version for the plugin. (29579)
  • Documents how the widgets editor works. (29572)
  • Drop zone: Fix media lib duplicate issue. (29567)
  • Update the category icons. (29553)
  • Try: Remove important on disabled switcher state. (29552)
  • Remove base control negative help text margin. (29550)
  • Navigation: Re-enable navigation block end-to-end tests. (29543)
  • Accessibility improvement on #29530 issue. (29534)
  • Pin SHA values as version numbers for 3rd party GHAs. (29485)
  • Update the visual design of the Sidebar Menu. (29476)
  • Focus on block selection: Skip inner blocks. (29434)
  • Use correct classname for nested Navigation Link container. (29380)
  • Integrate AztecEditor-iOSiOS The operating system used on iPhones and iPads. 1.19.4. (29355)
  • Block context: Separate native context. (29315)
  • Focus input when InputControl spinner arrows are pressed. (29305)
  • WP Block Styles: Only load in the editor if a theme opts in. (29252)
  • Add new overlay text icon, and use for image. (29215)
  • Add Missing URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org state to Navigation Link Block. (28861)
  • Improve dropcap behavior. (28685)
  • Improve the block editor handbook table of content. (28665)
  • RN: Add Bottom Sheet Select Control component. (28543)
  • RichText: Bypass paste filters for internal paste. (27967)
  • Block Directory: Update search results list UIUI User interface. (25521)

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 10.25.25s25.8ms
Gutenberg 10.15.01s23.1ms
WordPress 5.75.13s22.3ms

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

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

What’s new in Gutenberg 10.1? (3 March)

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/ 10.1 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. In addition Full Site Editing, Widgets and Navigation screens and Global Styles saw many improvements.

Reusable blocks improvements

With the ongoing effort to improve the different user flows related to Reusable blocks we’ve seen tons of enhancements recently that are worth mentioning 🙂 .

Visual clarity of Reusable blocks has been improved with the Reusable 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 title displayed next to the block type in toolbar, in Navigation List and in Breadcrumbs. Towards the same direction if a child block is selected, the Reusable block is outlined making it easier to identify where the block starts and where it ends.

Another enhancementenhancement Enhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. is the ability to modify the saved title of reusable block in 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. inspector and the newest one is the enhanced creation flow, that also allows you to cancel the action.

Better clarity on the Image toolbar

The Image block’s toolbar has now better clarity by following the “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., block level, inline” order in the block toolbar. This makes the grouping so much clearer and other blocks are going to follow :).

Spacing options for Social Links and Buttons

You can now set how the space between and around Social Links will be distributed. In addition more options were added to Buttons block.

10.1

Features

  • Use a modal for the reusable blocks creation flow. (29040)
  • Normalize Image’s block toolbar. (29205)
  • Add Items Justification to Social Links. (28980)

Enhancements

  • Improve the sorting algorithm while searching parent pages. (29143)
  • Buttons: Add space-between justification controls. (29160)
  • Avoid focusing blocks when inserting them into the canvas. (28191)
  • Create Block: Use register_block_type_from_metadata to register blocks on the server. (28883)
  • Greatly improve dragging performance of the focal point picker. (28676)
  • Improve block search input’s accessible name and placeholder. (28393)

New APIs

  • Extend updateBlockAttributes to provide for different attribute changes for each block in the clientIds array. (29099)

Bug Fixes

  • Fix Slash Inserter position. (29288)
  • Fix issue with invisible reset template hover state. (28912)
  • InputControl: Fix labelPosition rendering with new ui/flex component. (29226)
  • Button sizing style fix. (29208)
  • Create Block: Fix the background color in esnext template. (29223)
  • Add border-collapse to default block styles in Table block. (27628)
  • Navigation Block:
    • Fix Navigation Links when post type is not Page or Post. (28892)
    • Fix inline style inheritance. (28868)
    • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher notice shown when rendering a navigation link block. (28999)
  • Fix is-hovered event listener. (28715)
  • Fix function call in justify toolbar. (28955)
  • Fix footer icon color. (29199)
  • Show page titles special characters in the parent page selector. (29104)
  • Edit Post: Automatically connect a menu item with the pinnable sidebar 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. (29081)
  • Make Modal component use the aria.labelledby prop. (29020)
  • Fix adminadmin (and super admin) menu scroll on editor page. (28959)
  • Prioritize coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks in the inserter. (28945)
  • Make the __experimentalCaptureToolbars option work reliably. (28905)
  • Ensure sticky tabs are in front of their panel’s descendants. (28562)
  • Navigation Component: Increase color and padding specificity. (28619)
  • Add note to indicate why priority queue callbacks may be undefined. (28337)
  • Keep initial formatting on paste for Preformatted and Verse components. (27781)
  • Rich text: Keep block ID on split. (28505)
  • Fix cursor on rich text blocks when outline mode is active. (29106)

Experiments

  • Improve loading method for block styles. (28358)
  • Do not use __experimentalSelector to check the panel title. (29264)
  • Update documentation for social links & 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.. (29294)
  • Navigation Screen:
    • Add block deselection when clicking canvas background. (28876)
    • Improve experience for user creating their first menu. (28767)
    • Fix positioning of nested submenus. (28934)
  • Full Site Editing:
    • Use a modal for the template part creation flow. (29108)
    • Add an ‘area’ term for Template Parts. (28410)
    • Add content menu items preview in Navigation. (29225)
    • Replace locate_template method. (28942)
    • Site Editor:
      • Inject theme attribute into template parts too. (29080)
      • Organise semantic template parts. (29030)
      • Show contextual icon in the Inspector’s template tab. (29195)
      • Add template tab to sidebar. (28633)
  • Global Styles:
    • Support skipping serialization in the color hook (block supports mechanism). (29142)
    • Fix 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. font-family list. (28960)
  • Widgets:
    • Use textarea for editing block widgets. (24899)
    • Set container classname dynamically depending on 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. block. (26375)
    • Add Widgets 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/. changes from Core-51460. (29242)
  • UIUI User interface Components:
    • Add Surface Component. (28596)
    • Add Elevation Component. (28593)
    • Add FormGroup + ControlLabel components. (28568)
    • Add spinner. (29146)
    • Rename ui files to match simpler scheme. (28948)
    • Add 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. based Scrollable component wrapper. (28979)
    • Add createComponent unit tests. (28949)
    • Add hooks based VisuallyHidden. (28887)
    • Add ControlGroup. (28982)
    • Add Portal. (28981)
    • Update documentation (README + inline docsinline docs (phpdoc, docblock, xref)). (29128)
    • Update color-picker snapshot tests to use diff matching. (28925)
  • Bugs:
    • Fix Site Logo Styles. (29227)
    • Template Part: Fallback to missing state if slug or theme is invalid. (29041)
    • Site Editor:
      • Fix misalignment with navigation toggle and 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.. (29093)
      • Fix navigation editor block selection clearing. (29293)
      • Fix navigate to link error. (29239)
      • Fix position and style of “Dashboard” link. (29034)
      • Fix end-to-end test errors introduced by template sidebar. (28950)
    • Widgets:
      • Fix widgets preview URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org typo. (29062)
      • Fix php error in the widget screen. (29137)
      • Fix legacy widgets not previewing and widgets saving issue. (29111)
      • Fix server rendered widget not previewing. (29197)

Documentation

  • Add 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) testing instructions. (28947)
  • Updates to Outreach Page. (28929)
  • Update Create a Block tutorial to use block.json. (29027)
  • Expose Block Directory references in the handbook. (29025)
  • Update “key concepts”. (28973)
  • Remove Font style, weight, decoration, and transform presets from the theme.json documentation. (29200)
  • Combobox Control: Update 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. doc. (28787)
  • Add block variations to FAQ. (2915429170)
  • Add templates and global styles to key concepts. (29071)
  • Update block metadata section to promote PHP API. (29023)
  • Fix the header links, add link to user documentation. (28857)

Code Quality

  • Replace store name literals in block-library. (28975)
  • Fix typos in PHP comments. (29198)
  • Format TS files according to coding styles. (29064)
  • WP_Theme_JSON_Resolver: Update translate terminology. (28944)
  • Improve code readability by not passing variables by reference. (28943)
  • Convert navigation link to use hooks and context. (28996)
  • Block props: Avoid memo (block mode). (29139)
  • Reduce memoized context:
  • Use ref callback:
    • 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., selection clearer, typing observer. (29114)
    • Canvas click redirect & typewriter hooks. (29105)
    • Clipboard handler. (29090)
    • Hover hook. (29089)
    • useBlockProps. (28917)
    • Block nodes. (29153)

Tools

  • Add support for native TypeScript. (28879)
  • Limit the npm version to be 6. (29204)
  • Run CI jobs on wp prefix branches. (29194)
  • Eslint plugin: Add suggestions to “data-no-store-string-literals” rule. (28974)
  • Update codeowners. (29280)
  • Scripts:
    • Coerce live reload port to integer. (29196)
    • Add Python 2.0 to other OSS licenses in license checker. (28968)
  • Create Block: Fix issue with processing unrelated engines. (29066)
  • Fix spacing in new contributor welcome message. (28958)
  • Add reactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/.-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. package with i18n React bindings. (28465)
  • babel-plugin-makepot: Don’t transpile the package code. (28911)
  • docgen:
    • Don’t transpile the package code. (28910)
    • Replace doctrine with comment-parser. (28615)
  • wp-env:
    • Use Simple GitGit Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning fast performance. Most modern plugin and theme development is being done with this version control system. https://git-scm.com/. instead of NodeGit. (28848)
    • Fix issue where mappings sources were not downloaded. (28930)
  • Changelog script: More fine-grained Changelogs for 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. releases. (28424)
  • End 2 End Tests:
    • end-to-end Tests: Add gallery caption coverage. (29127)
    • Add basic block preview coverage for inserter. (29117)
    • Make navigation editor end-to-end tests more robust. (28936)
  • Testing: Add snapshot-diff. (28897)

Various

  • Add a 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. icon. (29232)
  • Update text color icon. (29212)
  • Blocks: Map block type definitions that use PHP naming convention for keys. (28953)
  • Safe access to window/document when in node context:

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 10.15.3 s30.11 ms
Gutenberg 10.05.7 s29.62 ms
WordPress 5.64.1 s35.47 ms

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

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

What’s new in Gutenberg 10.0? (17 February)

This is 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/ 10.0, which means it’s the 100th release of the Gutenberg 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, the 100th release of a journey that started more than 4 years ago when Matt announced the project on WordCampWordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more. US 2016. (It’s also almost to the mark the 4th anniversary of the initial commit to the Gutenberg repository.)

I’m not going to lie, it was not an easy journey. Shipping something that impactful is not easy and, going in, there was no reason to believe in success: WordPress had already tried to replace TinyMCE a couple of times already. What would be different this time around? Not much probably, so initially very few people actually joined the project.

Six months later came WordCamp Europe 2017 and the first release of the plugin. The editor was nowhere close to being usable but it “clicked” for some, and the reactions to the presentation were hopeful.

However, then quickly came pushback. With all the attention that the project received, it became difficult to discern constructive debate from mere opposition. We each come with our own context, and some people had a fixed idea about what they wanted for the project. Some wanted to just reuse an existing page builder, others wanted to revive the Fields 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. project, some wanted it to be front-end-first, others wanted it to just replace the content area of the classic editor, some wanted it to be in Vue.JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors., others wanted no change at all. With a product used by 40% of the web, we need to find consensus, and when we make compromises it can be so difficult for those involved to avoid the feeling that their voice is being ignored.

We also made quite a few mistakes: stability of some releases wasn’t so great, performance suffered in others, a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) as well… Nonetheless, we kept pushing forward, improving the editor and the project in all aspects until its first inclusion in WordPress 5.0, and we haven’t stopped since.

It’s a delight to see some people who had very strongly disagreed with the initial vision or approach to Gutenberg gradually come to enjoy using the editor and join the project to carry on its vision. Others might still not like it, some won’t ever use it. One thing is certain though, we’ll continue doing our best to push forward, improve what’s already shipped and ship new exciting features; we’ll continue making mistakes and hopefully continue learning from them.

Today marks the 100th release of Gutenberg. Nothing extraordinary, just a regular release: it improves on the existing features, fixes bugs, adds new features and experiments with new ideas.

What I personally retain is the people, the ones who were with us from the start, the ones who were with us but left, the ones who joined in our journey, everyone who helped along the way, everyone who provided feedback, everyone who got their hands dirty and everyone who tried to use this editor, extend it, and provide ideas.

Thank you all.

10.0 🤯

Features

  • Add basic pages 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.. (28265)
  • Make the parent block selector visible and offset in the block toolbar. (28598) (28721)

Enhancements

  • Update the social empty state for dark themes. (28838)
  • Add the 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.) name selector to the advanced panel of the Group block. (28576)
  • Categories block: Display message instead of empty content. (28697)
  • Show block patterns in the inserter for non-root level insert position. (28459)
  • A11y: Improve the keyboard navigation in the block patterns inserter. (28520)
  • Allow transforming Paragraph blocks to Buttons block. (28508)
  • Better top toolbar arrow gap. (28832)
  • Update layout icon to use the new design language. (28651)
  • Update the buttons icons. (28583)

New APIs

  • wordpress/data: Graduate the __experimentalResolveSelect function to a stable status. (28544)
  • wordpress/compose: Add useMergeRef ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. hook. (27768)
  • Components: Allow extra props for RadioControl component. (28631)
  • Add JustifyToolbar component to @wordpress/block-editor. (28439)
  • wordpress/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 new APIs for React bindings. (28784) (28725)

Bug Fixes

  • Fix block insertion a11y string. (28871)
  • Fix npm 7 compatability. (28824)
  • RangeControl: Fix input / slider widths. (28816)
  • Fix post title icon color. (28727)
  • Fix most used blocks usage persistence. (28694)
  • Use consistent icon width for the block icon in the block inspector. (28666)
  • Fix for Latest Posts focus not selectable. (28660)
  • Fix issue where gallery block requests all attachments when empty. (28621)
  • Fix handling of custom unit theme setting. (28603)
  • Fix wrong space-between style in the Buttons block. (28485)
  • Calculate insertion usage for block variations properly. (28663)
  • Fix the default Buttons block radius, and size. (28514)
  • Fix the Cover block height. (28455)

Experiments

  • Site Editor:
    • Fix empty content when creating a new template. (28882)
    • Fix complementary area not opening. (28732)
    • Fix inserter can’t be closed. (28590)
    • Fix gray screen on refresh when editing pages and posts. (28413)
    • Show single post template in posts templates in the navigation 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.. (28229)
    • Allow searching pages, posts and categories in the navigation sidebar. (27280)
  • Full Site Editing Architecture:
    • Iterate on the public API of WP_Theme_JSON_Resolver. (28855)
    • Rename pageTemplates configuration to customTemplates 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.. (28830)
    • Move theme.json support check to class. (28788)
    • Improve performance on file access of experimental-theme.json. (28786)
    • Load page templates via theme.json abstractions. (28700)
  • Full Site Editing blocks:
    • 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. block: Render nothing if featured image doesn’t exist. (28625)
    • Add a description to the template part block. (28839)
    • Move template part title field to the block inspector. (28835)
    • Use display title for template part block type toolbar anchor. (28691)
    • Allow the query block to work on singular pages when inheriting the global query. (28351)
    • Query Pagination block: cleanup. (28831)
    • Enqueue comment-reply script when post-comments-form block gets rendered. (28826)
  • Navigation Block:
    • Fix transparent navigation block submenus. (28904)
    • Polish social links when inside navigation. (28836), (28448).
    • Add block variation matcher to display information from a found match. (28626)
    • Add new Post Navigation Link block. (28602)
  • Navigation screen:
    • Fix failing request for menu items. (28764)
    • Design Iteration. (28675)
    • Clear block selection in the navigation editor when clicking editor canvas. (28382)
  • Block-based widgets screen and 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.:
    • Add experimental flag and enable widgets screen in customizer. (28618)
  • Global Styles:
    • Use context when translating entries in theme.json. (28246)
  • 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 URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org Details endpoint to REST API to allow retrieval of info about a remote URL. (18042)
    • Pattern Directory API: Return the block pattern value as content. (28799)
    • Pattern Directory API: Add a keyword 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. parameter. (28794)
  • UIUI User interface Components:
    • Group all experimental components in the ui folder. (28624)
    • Fix types. (28571)
    • Add VStack component. (28798)
    • Add HStack component. (28707)
    • Add Flex component. (28609)

Documentation

  • Theme.json Documentation: Clarify naming schema for CSSCSS Cascading Style Sheets. Custom Properties. (28639)
  • Update Versions in WordPress to include 5.6.1 & 5.7. (28641)
  • Typos and tweaks: (28667), (28657), (28655), (28898), (28894), (28762), (28877).

Code Quality

  • Improve ButtonBlockAppender styles. (28464)
  • Blocks: Move the logic for Template Part label to the block. (28828)
  • wordpress/block-directory package: Replace string store names. (28777)
  • wordpress/block-editor package: Replace string store names. (28775)
  • Site Editor: Replace coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress./edit-site store name with store object. (28722), (28695)
  • Relax JSDoc validation for typed packages. (28729)
  • Change apt command to apt-get command. (28840)
  • Refactor Buttons block to use JustifyToolbar controls. (28768)
  • i18n 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.: Don’t use typeof to check value falsiness. (28733)
  • Components: Set a default for the ComboboxControl onFilterValueChange. (28492)

Tools

  • List all dependencies when checking licenses in NPM 7. (28909)
  • Allow blank 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/ issues again. (28866)
  • wp-env.json: Pin tt1-blocks dependency to v0.4.3. (28741)
  • Add eslint rule for preventing string literals in select/dispatch/useDispatch. (28726)
  • build-worker: Extract the functions that build CSS and JS. (28724)
  • Unit Tests Workflow: Enable for documentation-only PRs. (28696)
  • Fix end-to-end failures on ‘Front Page’ template. (28638)
  • Fix lint issues (proper number of spaces). (28629)
  • Fix legacy settings tests for custom spacing. (28628)
  • end-to-end tests: Handle upgrade screen. (28592)
  • Add eslint rules to guard against unexpected imports/exports. (28513)
  • Add a welcome comment to first time contributor PRs. (28118)
  • end-to-end Tests: Document Settings. (27715)
  • Updating composer packages for php8 compatibility. (28623)

Various

  • Adjust defaults for COMPONENT_SYSTEM_PHASE variable. (28772)
  • build-worker: Call callback with error when no task for extension. (28723)

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 10.07.6 s27.72 ms
Gutenberg 9.98.0 s30.25 ms
WordPress 5.65.65 s33.2 ms

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

Thanks @mcsf for your help on the release post.

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

What’s new in Gutenberg 9.9? (5 February)

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/ 9.9 is out now! Get those bytes into your website while they’re hot. This is the 99th(!!) release of the Gutenberg 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 will be the latest release that is bundled into WordPress 5.7.

The team has been hard at work implementing Full Site Editing, Global Styles, 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., the Widgets screen, and it shows. We also have plenty to offer for all you lovers of “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 enhancements”.

Yee-haw!

Custom icon and background colors in Social Icons

Does “Twitter blue” conflictconflict A conflict occurs when a patch changes code that was modified after the patch was created. These patches are considered stale, and will require a refresh of the changes before it can be applied, or the conflicts will need to be resolved. with your blogblog (versus network, site)’s aesthetics? You can now set a custom background color and/or icon color for all of the icons in a Social Icons block.

Preferences redesign

The Options modal is all grown up, has a brand new look, and is now called Preferences.

Text labels in the Block Toolbar

Prefer text to icons? Now if you turn on the “Display button labels” setting you’ll see text labels in the block toolbar.

9.9 🤠

Enhancements

  • Preferences modal redesign. (28329)
  • Add “Show block breadcrumbs” preference. (28133)
  • Show text labels instead of icons in block toolbars when option is set. (26135)
  • Social Icons: Add icon & background color options. (28084)
  • Image Block: Add border radius support. (27667)
  • Improve visual clarity of reusable blocks. (28318)
  • In-between inserter: Support both horizontal and vertical layouts. (27860)
  • Automatically turn Dark Mode on or off depending on theme’s background colour. (28233)
  • Show the Spacer block’s background on hover. (28129)
  • Switch to a more muted sibling inserter design. (28550)
  • Show tooltips on disabled elements. (27529)
  • Use system font for vanilla editor styles. (26822)
  • Only consider legal block types for the block list when transforming files to blocks. (26816)
  • Social Link: Add a class to the anchor element. (28494)
  • Image block: Add flow for converting to cover block from toolbar. (28414)
  • Cover block: Improve toolbar button labels. (28384)
  • Show reusable block parent border when child is selected. (28283)
  • Change the quick inserter border color. (27866)

New APIs

  • Add disabled support in ToggleControl and FormToggle. (28228)
  • 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.: Allow overriding the categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. for block variations. (28482)
  • Add ability to 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. the return values of 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. (27966)
  • (Experimental) Add thunk actions to replace rungen and controls. (27276)
  • (Experimental) Add __experimentalBatch(). (28210)
  • Component System: Add Grid Component. (28531)
  • Alow setting the crossOrigin attribute for the image transform’s image using a filter. (28255)
  • Add Truncate component. (28176)
  • Add buttonProps to PanelBody. (28147)
  • NavigationMenu: Add isSearchDebouncing prop. (28102)

Breaking Change

The format of the experimental-theme.json has been updated as per:

  • Split global block selector into root and defaults. (28533)
  • Make settings and style top-level keys. (28110)

Before:

{
  "global": {
    "settings": { ... },
    "styles": { ... }
  },
  "core/paragraph": {
    "settings": { ... },
    "styles": { ... }
  }
}

After:

{
  "settings": {
    "defaults": { ... },
    "root": { ... },
    "core/paragraph": { ... }
  },
  "styles": {
    "root": { ... },
    "core/paragraph": { ... }
  }
}

Bug Fixes

  • Fix sibling inserter color. (28579)
  • Fix issues causing the cover block to black out with a fixed background. (28565)
  • Fix site editor pins. (28547)
  • Resolve issue where insertion point is in incorrect position after changing block selection. (28542)
  • Components: Fix truncate export. (28527)
  • Fix 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. with pinned plugin items on mobile. (28521, 28526)
  • Fix margins and width of 100%-width buttons. (28467)
  • Fix aborted rendering of non-nested reusable blocks. (28461)
  • Show insertion point after the last block in a container. (28418)
  • Reusable blocks: Prevent infinite recursion. (28405)
  • Fix block inserter automatic reorder. (28392)
  • Create Block: Extract the package name from the template value. (28383)
  • Fix handling of raw transforms that return multiple blocks. (28371)
  • Fix repeated backgrounds with transparent images. (28362)
  • Ensure inline image width popover doesn’t appear over media library modal. (28333)
  • Fix repeated backgrounds for cover srcset. (28310)
  • Fix typo in default template type descriptions. (28288)
  • Fix allowedFormats in RichText component. (28282)
  • Fix backwards compatibility issue with Inline Image format. (28223)
  • Inserter: Fix left padding on Block Pattern Inserter dropdown. (28150)
  • Fix toolbar keyboard navigation after pressing alt+F10. (28068)
  • Image Block: Update linkDestination when editing image link URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org. (27801)
  • Interface Skeleton: Limit the editor width to prevent some blocks to grow infinitely wide. (27695)
  • Button component: Add margin around the dash icon. (27461)
  • Fix issue where resetBlocks can result in an incorrect block selection. (21598)
  • Make custom spacing work with CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. (28548)
  • Block Validation: Allow unitless zero CSSCSS Cascading Style Sheets. lengths. (28501)
  • Add check for zero to the FocalPointPicker mediaRef which prevents a division by zero error. (28499)
  • Update HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Anchor description to refer to block instead of heading. (28367)
  • Warning component: Remove extra margin. (28316)
  • Block Directory: Silently avoid re-installing local blocks. (28304)
  • Inserter: Add description to content used in search. (28301)
  • Make empty paragraphs take up the same space on the frontend, as in the editor. (27995, 28268)
  • Fix potential data loss in Code Editor. (27717)
  • Adjust borders on gallery to prevent overlap. (27312)
  • Block Directory: Filter out disallowed blocks before showing available blocks. (25926)
  • Fix Cover block position. (28653)
  • Add minHeightUnit to latest core/cover deprecation. (28627)

Experiments

  • Full Site Editing
    • Mark Post Comments Warning as block. (28511)
    • Update theme attribute injection and removal. (28368)
    • Template Part labels: Use title instead of slug. (28330)
    • Parse the template before gets rendered. (28319)
    • Use correct title property in snackbar after inserting Template Part. (28306)
    • Fix templates export. (28292)
    • Add template part missing state. (28277)
    • Hide resize handle. (28272)
    • Fix template part border states. (28241)
    • Fix entity spotlight system. (28239)
    • Post Title block: Add placeholder state. (28198)
    • Template Parts: Fix loading issue. (28088)
    • Add support for border configuration via theme.json. (28049)
    • Update the layout of the title in the top bar while template editing. (27845)
    • Expose group/ungroup buttons in site editor. (27611)
    • Global Styles: Root element & border radius. (28320)
    • Query block: Hide query block toolbar settings if query is inherited. (28290)
    • Query block: Pagination with InnerBlocks. (28125)
    • Add end-to-end tests for templates export. (28324)
    • 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. for site templates export. (28323)
    • Add more tests for processing theme.json logic. (28202)
    • Fix button outline in Navigation component. (28230)
    • Fix template parts loading on frontend. (28752)
  • Navigation
    • Fix menu item word wrap. (28516)
    • Fix URL cutoff. (28515)
    • Remove new navigation block features in the navigation editor. (28378)
    • Fix save, undo and redo keyboard shortcuts in navigation editor. (28257)
    • Fix the nav menu justify controls menu style. (28222)
    • Polish the appender focus style. (28219)
    • Fix navigation editor error. (28190)
    • Try: Allow space between on menu items. (28169)
    • Disable alignment for innerBlocks of Navigation block. (27365)
    • Placeholder empty state. (26947)
    • Open dropdown before focus on submenu item. (25322)
    • Improve robustness of nav screen test. (28344)
  • Widgets
    • 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. id to blocks in the widgets screen. (28379)
    • Fix categorization not showing in the global inserter. (28036)
    • Fix end-to-end tests in widgets screen. (28375)
    • Fix widgets screen end-to-end tests. (28264)
    • Add some basic end-to-end tests for the widgets screen. (28160)
  • Pattern Directory: Create endpoints to proxy api.w.org/patterns. (26578)

Documentation

  • Add new page for i18n filters. (28553)
  • Update list of core block categories. (28483)
  • Fixed gramatical error in README. (28452)
  • Update the main readme with the current Gutenberg project phase. (28359)
  • Update links used in the developer portal. (28354)
  • Update links to reference HEAD instead of a specific 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".. (28331)
  • Fix supports color gradient(s). (28328)
  • Add changelog for 28231. (28232)
  • Updated readme to reflect current implementation of the BlockCard component.. (28226)
  • Improve the intro page of the Block Editor Handbook. (28142)
  • Update documentation to use allowedFormats instead of the deprecated formattingControls. (25639)
  • Fix grammar in tutorial. (28447)
  • Update tree and raw-content links to reference HEAD instead of a specific branch. (28431)

Code Quality

  • Make sure toggleProps doesn’t replace important props on ToolbarGroup. (28401)
  • Fix bad var name in BlockParentSelector. (28325)
  • Fix file formatting for end-to-end test plugin. (28266)
  • Polish block menu and show only fills when available. (28486)
  • Rename some template part icons. (28458)
  • Add hook: UseNoRecursiveRenders. (28428)
  • Coding Standards: Fix PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. warnings. (28343)
  • Change the way RTL styles get enqueued. (28274)
  • Remove code no longer necessary. (28188)
  • Update/simplify case transforms. (28171)
  • Fix non static method WP_Block_Parser::Freeform called statically. (28017)
  • Refactor out CSS gradient from custom-gradient-bar. (27936)
  • Block Transform: Fix isMultiBlock property name. (28321)
  • Components: Update dependencies shared with G2 components. (28280)

Tools

  • Create Block: Add optional support for wp-env. (28234)
  • Dependencies: Upgrade TypeScript. (28586)
  • ESLint Plugin: Add missing eslint-plugin-import dependency. (28545)
  • wp-env: Add MySQLMySQL MySQL is a relational database management system. A database is a structured collection of data where content, configuration and other options are stored. https://www.mysql.com/. port info to start logs. (28441)
  • Run the load time indicator computation multiple times. (28419)
  • Don’t add default-custom-properties styles to all compiled files. (28395, 28462)
  • Fix typewriter test by using mouse.wheel and waiting for scroll. (28376)
  • Replace deprecated waitFor in end-to-end tests. (28360)
  • Add stale issue workflow for issues with need info requested. (28179)
  • Add script to remove node_modules of all packages. (28177)
  • Testing: Add CI workflow covering Node.js 12. (28139)
  • wp-env: Fix upload directory conflict in phpunit service. (28120)
  • Update issue templates. (27570)
  • Packages: Use canary flag for npm releases with next dist 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.). (28357)
  • Packages: Fully automate npm publishing with the latest and next tags. (28335)

Various

  • Components: Integrate G2 Text component. (28475)
  • Block Mover wording: ‘Move block position’ to ‘Change block position’. (28454)
  • Components: Upgrade FontSizePicker. (27594)

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 9.95.083 s27.05 ms
Gutenberg 9.84.633 s29.64 ms
WordPress 5.64.718 s27.11 ms

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

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

What’s new in Gutenberg 9.8? (20 January)

As the 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/ team and community continue to forge ahead with implementing Full Site Editing and Global Styles, the latest installment of the Gutenberg 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 (version 9.8) has been released today 🥳 As always, this release also includes many fixes and some nice new enhancements.

Semi-transparent Spacer 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.

The Spacer block, when selected, now has a semi-transparent background, rather than an (opaque) light grey one. This should make it easier to discern from any layer behind it (such as a Cover block or image), if that is of a very light color itself.

Block Switcher Shows variation icon

As a follow-up to an improvement to block variations that shipped with 9.7, the block switcher now displays the variation’s icon, rather than the block’s generic one.

Site Editor now iframed

The Site Editor now renders its content in an 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.. There is a number of reasons for this, such as avoiding adminadmin (and super admin) CSSCSS Cascading Style Sheets. bleed, or allowing to simply use a theme stylesheet for a site without any adjustments. Once this approach proves stable, the team is planning to make the same change to the Post Editor.

FSE: No more auto-drafts

Full-Site Editing no longer creates auto-drafts for template and template part post objects. These auto-drafts were previously needed for block templates and template parts that were based directly on files from an FSE theme without any user modifications. However, they required complex management and sync logic that proved fragile. By removing them, the team hopes to stabilize a fundamental part of FSE.

9.8 😬

Enhancements

  • Use a semi transparent background for the spacer block when selected. (28103)
  • Display matching variation icon in Block Switcher. (27903)

New APIs

  • Create Block: Allow using locally installed packages with templates. (28105)
  • Create block: Add support for static assets. (28038)
  • Compose: Export useIsomorphicLayoutEffect and use it. (28023)

Bug Fixes

  • Reusable Blocks:
    • Show an error message when a reusable block has gone missing. (28126)
    • Fix dismiss notice after error. (28015)
  • Cover Block:
    • Fix nested cover block 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.. (28114)
    • Fix 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. cover block transforms. (28087)
    • Fix cover 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.. (28287)
    • Fix Cover focal point picker. (28350)
    • Fix matrix alignment issue. (28361)
  • Fix block error when transforming blocks with Link Popover opened. (28136)
  • Fix PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher Notice in navigation-link. (28134)
  • Prevent link paste in RichText components in Button and Navigation blocks. (28130)
  • Fix floating date status inferred for posts where the status has been edited. (28127)
  • BlockSwitcher: Fix crash due to null reference. (28122)
  • Verse: Fix line-wrap rendering on front-end of site. (28109)
  • FocalPointPicker: Fix rendering and dragging experience. (28096)
  • Block Directory: Fix “missing” block when the block can be installed from the directory. (28030)
  • Fix locked template not updating when inner blocks template prop changes. (28007)
  • Fix editor crash when registering a block pattern without categories. (27970)
  • Fix the RTL editor styles and the theme styles option. (27947)
  • Don’t close the block inserter when clicking the scrollbar or an empty area. (27946)
  • Fix AlignmentMatrixControl focus issue. (27945)
  • Fix unexpected autosave for published posts. (27942)
  • Fix RadioGroup to support zero as a Radio value. (27906)
  • Update embed block transforms to permit multiple links to be pasted in a paragraph (#27551). (27746)
  • Change the week 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 left button style to meet the date spacing. (27730)
  • Add aria labels to box control component inputs/button. (27727)
  • Use clientWidth when no width is available for cropper. (27687)
  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Data: Normalize _fields value for use in stableKey. (27526)
  • Fix appender margins again. (27392)

Performance

  • Components: Expose composite 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. from Reakit. (28085)
  • Improve Inserter block hover performance. (26348)

Experiments

  • Full Site Editing Framework:
    • Load content in iframe. (25775)
    • Avoid using auto-drafts for theme templates and template parts. (27910)
      • Delete unused options while upgrading the plugin. (28164)
      • Fix _wp_file_based term deletion in migrationMigration Moving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.. (28300)
    • Fix the border radius in the site editor. (27986)
  • 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.:
    • Add border radius to the theme styles schema. (27791)
    • Add theme.json 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. mechanism and JSON file specifying which theme.json paths are translatable. (27380)
    • Add: Save time theme.json escaping. (28061)
  • Group Block: Add border radius. (27665)
  • Hide the theme without comments.php deprecation message. (28128)
  • Fix navigation editor. (28080)
  • Widgets: Temporary fix for saving widgets. (28078)
  • Decouple query from edit site. (27972)
  • Only enable the template mode for viewable post types. (27948)
  • Box control units: Ensure custom units are preserved. (27800)
  • Navigation Block: Use draft status when user creates a post and don’t render unpublished posts in menus. (27207)

Documentation

  • Docs: Improve README file for @wordpress/create-block. (28052)
  • Create Block: Update the demo included in the README file. (28037)
  • Docs: Switch heading to Quick Start for consistency. (28019)
  • Docs: A wether, as it turns out, is a castrated ram. (28008)
  • Update Quickstart guide for the Development Environment documentation. (28005)
  • Update copyright year to 2021 in license.md. (27951)
  • Block API: Add more inline comments. (20257)
  • Changelog: Group entries for 9.8.0-rc.1. (28332)

Code Quality

  • Remove effects test file and remove unused refx dependency. (28162)
  • Annotations: Replace store name string with exposed store definition. (28156)
  • Edit Widgets: Replace store name string with exposed store definition. (28044)
  • Interface: Replace store name string with exposed store definition. (28041)
  • Upgrade Reakit to version 1.3.4. (28013)
  • Fix PHPCSPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. warning: Undefined variable $i. (27955)
  • Consolidate block editor initializations. (27954)
  • Fix create-block PHP template files according to WordPress standards. (27949)
  • block-directory: Simplify the LOAD_ASSETS flow by making it an async function. (25956)

Tools

  • Workflows (i.e. 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/ Actions):
    • Create Release Draft when tagging version. (27488)
    • Add action to upload release to SVNSVN Subversion, the popular version control system (VCS) by the Apache project, used by WordPress to manage changes to its codebase. repo. (27591)
    • Compare Performance upon Release. (28046)
    • Build Plugin Workflow: Bump node version to 14. (28048)
  • End-to-end tests:
    • FSE: Fix intermittent errors in multi entity editing test. (28107)
    • Fix randomly failing end-to-end test. (28073)
    • Upgrade puppeteer to 5.5.0. (28055)
    • Performance tests: Fix. (28026)
  • Scripts:
    • Align default engines for check-engines with the package. (28143)
    • Add support for static assets in build commands. (28043)
    • Make it possible to transpile .jsx files with build command. (28002)
    • ESLint minor version upgrade to 7.17.0. (27965)
    • Upgrade Jest to the new major version (26.x). (27956)
    • Use wordpress/stylelint-config in wordpress/scripts. (27810)
  • Linting:
    • ESLint Plugin: Enable import rules used in Gutenberg. (27387)
    • Add no-unsafe-wp-apis to recommended configuration. (27327)
    • Remove /wordpress from test/linting ignore paths. (20270)
    • Update changelog for stylelint-config. (28074)
  • Testing: Prevent a direct usage of Reakit. (28095)
  • Update the minimum Node.js version to 12. (27934)
  • wp-env: Ensure the environment is used with the logs command. (27907)
  • Packages: Fully automate npm publishing with the latest and next tags (28335)
  • Upgrade webpack to version 5. (26382)
  • Revert “Upgrade webpack to version 5”. (27974)

Various

  • Gutenpride Template:
    • New Package to use with the tutorial. (27881)
    • Create Block: Enhancements to Gutenpride tutorial template. (28215)
  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: Remove redundant array coercion. (28072)
  • Visual editor: Remove focusable wrapper. (28058)
  • Readme: Increase tested Version up to WP 5.6. (28050)
  • Interface: Remove deprecated prop from InterfaceSkeleton. (28034)
  • List View: Reduce whitespace and always show nested blocks. (28029)
  • Making 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. inspector’s tabs stick when scrolling. (28003)
  • Chore: Update Lerna dependency. (27990)
  • Try: Make focus width a CSS variable. (27968)
  • Add translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. context to all block’s titles. (27933)
  • Add primary destructive button style. (27774)
  • Modifies the widgets dashboard link to point to the new widgets editor. (26880)
  • Use standard select element for small number of authors. (26426)
  • Add srcset for cover image. (25171)

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 9.85.55s29.05ms
Gutenberg 9.75.29s26.32ms
WordPress 5.64.66s28.57ms

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

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

What’s new in Gutenberg? (6 January)

First release of 2021 🎉. A number of contributors enjoyed some well earned time off but it didn’t stop them from shipping exciting features for the 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. editor.

Block Patterns Drag and Drop

Similar to blocks drag and drop that shipped in the previous release, 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/ 9.7 allows user to drag block patterns from the inserter right into the desired position in the canvas.

Reusable blocks

The release also so an important change to how reusable blocks are shown and edited in the editor solving some of the old issues around block inspector, and block toolbars for the reusable blocks. Based on these changes, the UIUI User interface for reusable blocks is most likely going to see some iterations on the upcoming weeks.

Matching block variations

Block variations are a great 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. that can be used to build a generic block and ship several variations on top of it. That’s how the embed blocks or social link blocks are built. In Gutenberg 9.7, if you insert a block variation, the editor is going to match the block being used and show the “icon” and “description” of the said block variation in the different elements of the interface. (Block navigation, block inspector…)

9.7 😅

Features

  • Support drag and dropping block patterns from the inserter. (27927)

Enhancements

  • Improve the Reusable Blocks UI by relying on multi entity save flow. (27887) (27885)
  • Show the insertion point indicator bellow the inbetween inserter. (27842)
  • Add block transforms previews. (27861)
  • URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org: RemoveQueryArgs should remove the ? char after removing all args. (27812)
  • Deburr the input of the Post Author and Parent Page controls when filitering results. (26611)
  • Display block icon, description and name by matching block variations. (27469)
  • RSS Block: Add an explicit border-box CSSCSS Cascading Style Sheets. rule. (27767)

New APIs

  • Create block: Allow to list npm packages to be installed in the template. (27880)
  • wordpress/url: Add a maxLength argument to filterURLForDisplay. (27530)
  • Add new package @wordpress/stylelint config. (22777)

Bug Fixes

  • Show all taxonomies in Tag Cloud block. (27930)
  • HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. Block: Fix editor styles. (27627)
  • Don’t ignore extra edits made in the server when saving posts. (27929)
  • Remove the animation of post publish button during autosaving. (27874)
  • Prevent the inserter from closing when switching the pattern categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging.. (27792)
  • LinkControl: Fix horizontal scrollbar within block toolbar. (27777)
  • Create Block: Fix support for external templates. (27776) (27784)
  • Fix text color dropdown not opening. (27596)

Experiments

  • Full Site Editing Framework:
    • Add support for custom templates in FSE themes. (27778)
    • Refactor the edit-site store to clarify the purpose of templateId and templatePartId. (27839)
  • Full Site Editing Blocks:
    • Site Logo: Remove duplicate link. (27924)
    • 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. block: Fix incorrect quotes for the class attribute in the wrapper. (27895)
  • Global Styles: Add padding control to 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.. (27154)
  • Navigation block: Fix the text color for links in the navigation block. (26698)

Documentation

  • Improve documentation for withNotices HOC in components package. (27863)
  • Add ContrastChecker component readme. (25570)
  • Remove default style information from the documentation. (27811)
  • Storybook: Fix broken import statements for DateTime component. (27794)
  • Add additional information about lock inheritance. (27834)
  • Typos and tweaks: (27909), (27799)

Code Quality

  • Use a consistent way to check isRTL. (27838)
  • Update the minimum required WordPress version to 5.5. (27807)
  • Remove unused redux-optimist dependency. (27798)
  • Storybook: Perform cleanup in the Storybook setup. (27786) (27813)
  • Raw handling: Remove duplicate code. (27758)
  • Refactor BlockSwitcher as a functional component. (27674)
  • Rich Text: Replace store name string with exposed store definition. (27820)

Tools

  • Remove overrides for JSDoc rules downgraded to warnings. (27912) (27879)
  • 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 release tool: Fix svn add/rm commands for release tool. (27886)
  • Add types to the wordpress/keycodes package. (19520)
  • end to end tests:
    • Make end to end tests do not rely on font size picker classes. (27825)
    • Remove expect.assertions count from multi-entity-saving tests. (27802) (27818)
    • Testing: Remove axe verification executed after every test case. (26626)
    • Improve font size end to end tests to work with input changes on blur. (27871)

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 9.75.41s31.1ms
Gutenberg 9.65.45s28.8ms
WordPress 5.65.45s30ms

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

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

What’s new in Gutenberg? (23 December)

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/ 9.6 has been released. The big focuses throughout this release cycle were Full Site Editing and Global styles. This release also includes many fixes and some nice new features and enhancements.

Dragging blocks from the inserter

From this release, blocks can be directly dragged from the inserter to the post canvas ― dragging patterns is not yet supported.

Vertical layout for buttons

The buttons 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. gained the ability to use a vertical layout in addition to the default horizontal.

9.6.0 🇨🇱

Features

  • Allow dragging blocks from the inserter into the canvas. (27669)
  • Buttons: Add variations for vertical layout. (27297)

Enhancements

  • Buttons block: Change position of the link popover. (27408)

New APIs

  • Add a useFocusOnMount hook to the wordpress/compose package. (27574)
  • Add a useFocusReturn hook. (27572)
  • Add a useConstrainedTabbing hook. (27544)
  • Components: Introduce a isDisabled prop to the Disabled component. (26730)
  • Create block:
  • Use 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. version 2. (26098)
  • Fix for supporting external templates. (27784) (27776)

Bug Fixes

  • 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. screen: Fix block select on focus. (27755)
  • Embed block: Add htmlHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and reusable support back. (27733)
  • Add useCallbackRef to avoid calling the ref multiple times with the same node. (27710)
  • Correct getRedistributedColumnWidths and related tests. (27681)
  • Remove CSSCSS Cascading Style Sheets. Custom Property in code block. (27672)
  • Fix 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. on code block for font-size property (27862)
  • Block crashes if font family is not found. (27654)
  • popover flickering on small screens. (27648)
  • Adding single use block from main inserter causes focus loss and menu to be stuck open. (27641)
  • Changelog for 9.5.2. (27638)
  • Uncaught error with a custom generic store without a unsubscribe function in useSelect. (27634)
  • Revert date changes from 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". ‘replace-moment’. (27550)
  • useMediaQuery: Make it safe for SSR environments without window. (27542)
  • Fixes the width on the circle color picker popover. (27523)
  • ComboboxControl/FormTokenField: Fix iOSiOS The operating system used on iPhones and iPads. zooming for input. (27471)
  • Fallback to regular subscribe if the store doesn’t exist in useSelect. (27466)
  • Global Styles getPresetVariable uses a wrong variable; Remove GLOBAL_CONTEXT. (27450)
  • Popover: Fix issue with undefined getBoundingClientRect. (27445)
  • Try fixing combobox a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues. (27431)
  • Support gradients with omitted stop positions in CustomGradientPicker. (27413)
  • Fix combobox suggestion list closure when clicking scrollbar. (27367)
  • Video Block: Let the video fill the container. (27328)
  • Media & Text “crop image to fill” to work with linked media. (27211)
  • Give editable fields in blocks better aria-labels. (26582)
  • Replace function should handle empty string callback return in the shortcodeShortcode A shortcode is a placeholder used within a WordPress post, page, or widget to insert a form or function generated by a plugin in a specific location on your site. parser. (16358)

Performance

  • Split coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. blocks assets loading. (25220)

Experiments

  • Add a useDialog hook and replace the duplicated PopoverWrapper. (27643)
  • Refactor withFocusOutside to hook. (27369)
  • FSE: Block Navigation: update Navigation block placeholder. (27018)
  • FSE: Block Query
    • Add new post link to Query. (27732)
    • Allow 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. only inside Query block. (27637)
    • Adjust mobile margins for the Query block’s grid view. (27619)
    • Query block: Allow inheriting the global query arguments. (27128)
  • FSE: Blocks
    • Add comment-form block styles. (27673)
    • Tag Cloud block: Adjust styles for the different block alignments. (27342)
  • Site Logo:
    • Remove line height. (27623)
    • Add a rounded block style. (27621)
  • FSE: Infrastructure
    • Apply hover class in outline mode. (27714)
    • Update documentation to show how a theme can have FSE automatically enabled. (27680)
    • Make the inserter in the site editor behave as a popover. (27502)
    • Add an outline mode and use it both Site Editor and Template mode. (27499)
    • Load the block patterns in the site editor. (27497)
    • Move the templates prePersist logic to core-data. (27464)
    • Expand the multi-entity saving panel by default. (27437)
    • Reveal block boundaries on hover in the Site Editor. (27271)
    • Site Editor – add query args for current context. (27124)
    • Full Site Editing: Introduce a template editing mode inside the post editor. (26355)
    • Remove optimistic updates to solve the template revert issue (27797)
  • FSE: Style System
    • Fix: Font Weight and Style don’t work independently on global styles. (27659)
    • Add custom units in BoxControl. (27626)
    • Remove Font style, weight, decoration, and transform presets. (27555)
    • Make client preset metadata match server. (27453)
    • Do not pass selectors and supports information to the client. (27449)
    • Add border radius support. (25791)
    • Update font-weight names. (27718)
    • Update performance of global styles code (27779)

Documentation

  • Add missing dependency to code example. (27742)
  • Precise that element ref returned by 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. that return a ref can change between function or object. (27610)
  • Add escaping functions to code examples. (27603)
  • Add missing wordpress/components/CHANGELOG.md entry. (27576)
  • Minor changes to release documentation for clarity. (27571)
  • Capitalize JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. in accordance with the word mark. (27539)
  • Fix typo in attributes.md. (27440)
  • Try: Update readme screenshot. (27223)
  • Document the useBlockWrapper hook in the block registration documentation. (26592)
  • Add a document explaining the different block API versions. (26277)
  • Update the registration examples to use apiVersion 2. (26100)

Code Quality

  • Remove: Missed unused weights and style translationtranslation The process (or result) of changing text, words, and display formatting to support another language. Also see localization, internationalization. code. (27739)
  • useDialog: Remove mousedown propagation stopping. (27725)
  • Try: Simplify focus return. (27705)
  • Popover/Modal: Remove and deprecate IsolatedEventContainer. (27703)
  • Popover: Use focus outside hook. (27700)
  • refactor: Tooltip component from classical to functional with hooks. (27682)
  • Template-part padding: Use variables. (27679)
  • Scope image block style variations to only the image block. (27649)
  • Refactor the EditorProvider component and extract hooks. (27605)
  • Use store definition instead of string for notices packages. (27548)
  • Merge RootContainer with BlockList. (27531)
  • Block wrapper: Isolate functionality into smaller hooks. (27503)
  • Writing flow: Consider events only from DOM descendents. (27489)
  • Writing flow: Isolate multi select focus element. (27482)
  • Multi selection: Move hook to WritingFlow with other multi selection logic. (27479)
  • Insertion indicator: Render after last block if none is specified. (27472)
  • Rewrite selection clearer in Block editor. (27468)
  • Move block focus listener to block props hook. (27463)
  • Block editor: Refactor effect.js to controls. (27298)
  • Animate: Type getAnimateClassName. (27123)
  • Refactor image block’s image editing tools into separate components. (27089)
  • Drop zone provider: Option to avoid wrapper element. (27079)
  • Audit variables stylesheet. (26827)
  • group block padding: Use variables. (27676)

Tools

  • Release script: Set draft status, and only remove after uploading asset. (27713)
  • CI: Run date test timezone and 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. variations using bash script. (27600)
  • Upgrade Babel packages to 7.12.x. (27553)
  • CI: Run package/date unit tests in different timezones. (27552)
  • Avoid cancelling other end-to-end test jobs when one fails. (27541)
  • Add webpack 5 support to dependency-extraction-webpack-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. (27533)
  • Add 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/ support document. (27524)
  • Stabilize adding blocks end to end test. (27493)
  • GitHub Actions: Use a build matrix for the end-to-end tests GH action. (27487)
  • Packages: Make it possible to select minimum version bump for publishing. (27459)
  • Upgrade wp-prettier to 2.2.1. (27441)
  • Testing: Make image size test more stable. (27439)
  • Packages: Improve the script that automates version bumps. (27436)
  • CI: Update bundle size workflow to use the latest version. (27435)
  • wp-env: Xdebug support. (27346)
  • Make zip-based URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org parsing more general. (27019)
  • Add inserter performance measures. (26634)

Various

  • Verse Block:
    • Add support for custom padding. (27341)
    • Add support for font family. (27332)
    • Add support for font size. (27735)
    • Update CSS for frontend and editor. (27734)
  • Popover: Use a11y hooks instead of HoCs. (27707)
  • Refactor focus on mount. (27699)
  • Search block: Use em values for padding. (27678)
  • Button: Is-busy state candybar animation fixed. (27592)
  • Preformatted block: Add support for font sizes. (27584)
  • Remove autoFocus prop from URLInput and from the inserter search form. (27578)
  • Package lock: Update ws. (27532)
  • Update block-patterns.md. (27520)
  • Update wp-env codeowners. (27491)
  • Update the backup icon to better align with WordPress icon package dna. (27465)
  • Update the rich text control titles to sentence case structure. (27447)
  • Search Block: Remove the button only option from the UIUI User interface. (27379)
  • Add icons for template parts. (27378)
  • Increase radio dimensions to match checkboxes. (27377)
  • Adjusts settings modal height to 90%. (27362)
  • Change the Labels of the Vertical Align options. (27356)
  • Add element selector to template-part block. (27101)
  • Add explicit dismiss button and on dismiss callback to snackbar. (26952)
  • Make social list block align right able on published page & preview. (26861)
  • Update media-text focalPoint conditional rendering. (25968)
  • Remove default icon from PluginBlockSettingsMenuItem. (21392)
  • Add example preview to video block. (20703)

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 9.64.33s27.82ms
Gutenberg 9.54.21s23.04ms
WordPress 5.65.16s23.46ms

Kudos to all the contributors that helped with the release!

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

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

What’s new in Gutenberg? (2 December)

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/ 9.5 has been released. The big focuses throughout this release cycle were Full Site Editing and Global styles. This release also includes many fixes and some nice new features and enhancements.

Full Height Alignment

This control can be integrated in other blocks as well and you can set the 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. to be displayed in full height. The Cover block is a lovely case to see it in action.

Font sizes support in Code block

You can now change the font size of Code block’s contents.

9.5.0 🇲🇪

Features

  • Full Height Alignment control: Implementation and Cover block integration. (26615)
  • Code block: Add support for font sizes. (27294)

Enhancements

  • Improve block patterns preview in the Inserter. (27204)
  • Enhance social links placeholder to look more like the end result. (26953)
  • Add labels to image zoom control. (24574)

New APIs

  • Data: Use store instance as param for select and dispatch. (26655)
  • Adds instance URLURL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to wp-env start. (27282)

Bug Fixes

  • Fix crash when null date passed to TimePicker. (27316)
  • Add backward compatibility support for lightBlockWrapper in getSaveElement. (27189)
  • Restore the gray background in Post Editor. (27188)
  • Font size picker 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. that adds px units to empty string values. (27111)
  • Font size unit back-compatibility does not executes on post edit. (27106)
  • Drop zone: Fix infinite 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 some contexts. (27090)
  • Interface regions: Fix focus style (on click). (27074)
  • Fix Separator editor styles. (27071)
  • Fix custom spacing support. (27045)
  • Fix jest process hanging. (27008)
  • Fix combobox suggestion list closure when clicking scrollbar. (27367)
  • Constrain tabbing to the popover in media replace flow. (26939)
  • Fix RangeControl mark placement and cursor styles. (26745)
  • New authors dropdown breaks author selection for editors. (26554)
  • 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.: Use own instance’s doAction for built-in hooks. (26498)
  • Inserter: Show preview in search results. (27193)
  • Gallery block:
    • Fix duplicate css class. (27311)
    • Adds back in icon and title for gallery block. (27293)
  • Search block: Fix icon strokeWidth properties. (27308)
  • Image block:
    • Fix the zoom slider width. (27285)
    • Fix double paste from clipboard. (27199)
    • Hide some controls on multi selection of Image blocks. (27105)
  • Columns: Align single half width column to left. (27142)

Performance

  • Minimize the calls in useSelect by subscribing to only the stores needed. (26724)
  • Update prefer lang constructs to functions. (27070)

Experiments

  • Full Site Editing Framework:
    • Fix template resolution priorities. (27303)
    • Update default templates. (26941)
    • Add Support for Templates Default and Custom Titles and Descriptions (JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. side – 27038, PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 or higher side 27036)
    • Add theme taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies. to templates and template parts. (27016)
  • Full Site Editing Blocks:
    • Make the post title block editable. (27240)
    • Post Comment: Update placeholder. (27013)
    • Enable 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. to be set and replaced. (27224)
    • Add alignment controls to Post Featured Image block. (27076)
    • Query block:
      • Add grid view. (27067)
      • Add Posts List variation. (26990)
      • New settings icon in block toolbar. (27057)
      • Fetch all available post types (#27049). (27056)
      • Update Query block’s icon. (27048)
      • Query and QueryLoop use useInnerBlocksProps. (27014)
  • Site Editor:
    • Avoid throwing warnings if there are no terms for a template or template part. (27210)
    • Replace adminbar customize link with site-editor in FSE themes. (27135)
    • Update the new templates dropdown list. (27235)
    • Remove .block-editor selector dependency. (27063)
    • Remove unused FullscreenModeClose component. (26997)
    • Navigation:
      • Fix item color and padding. (27096)
      • Hide empty menus. (27141)
      • Add isText prop to NavigationItem. (27003)
      • Handle the no search results state. (27160)
      • Add search to templates and template parts. (26665)
      • Hide navigation item if target menu is empty. (25746)
  • Global Styles:
    • Sort Global Styles block panels by panel title. (27163)
    • Font Appearance should be enabled globally. (27150)
    • Restrict edition of theme colors by users. (27250)
    • Update mechanism that resolves Global Styles data. (27237)
    • Include px units on default font sizes defined on 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.. (27083)
    • Update stylesheet generation at edit site. (27065)
    • Add button to reset color palette. (26975)
    • Abstract preset variable retrieving and setting. (26970)
    • Update metadata and add support for padding. (27099)
  • Templates and Template Parts wp-adminadmin (and super admin) lists:
    • Update the template parts admin list with new columns and views. (27156)
    • Add the theme source to the templates wp-admin list. (27108)
    • Extend the wp_template admin list with new views and columns. (27034)
  • Support registry inheritance with atomic stores. (27162)
  • Code block: Paste plain text. (27236)
  • Generalize the atom family concept as an atom selector concept instead. (27147)
  • Bugs:
    • Query block: Fix dirtying post on load. (27323)
    • Preserve ‘Your homepage displays’ settings when updating the ‘general’ settings. (27206)
    • Make sure templates and parts queries 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. by tax_query. (27113)
    • Fix Template Part Not Found message on Windows server. (26772)
    • Respect filtered settings when they’re ported to theme.json format. (27010)
    • Preset controls need the preset CSSCSS Cascading Style Sheets. variables in scope. (27119)
    • Site Editor:
      • Show document title on small screens with nav 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. open. (27051)
      • Fix block toolbar positioning. (27266)
      • Fix app 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. on small-medium screens. (27310)

Documentation

  • Expand on the Deprecations documentation. (27286)
  • Publish MainDashboardButton documentation to handbook. (27317)
  • Update: Creating a block-based theme tutorial. (27257)
  • ESLint PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party: Include a note about the minimum version required. (27203)
  • Docs: Update @wordpress/data README with 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. (27180)
  • Data: Improve documentation for new API added around stores. (27061)
  • wp-env: Improve documentation for “run” command. (27053)
  • Code block: Update the documentation. (27333)
  • Add block toolbar component readme. (25245)
  • Add block patterns list component readme. (24983)
  • [Contributors docs] JS meetings were shifted to 15:00GMT. (27047)
  • Typos and tweaks: (271202708127062270602703927153)

Code Quality

  • Replace store name string with exposed store definition:
  • Search block: 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. prop which was causing a 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. (27306)
  • Refactor click redirect to avoid trailing div. (27253)
  • Editor styles: Convert to hook. (27080)
  • Add: PHP util function equivalent to lodash set. (27077)
  • Interface: Remove regions wrapper div. (27066)
  • Refactor typing observer. (27043)
  • Visual editor: Remove 4 wrapper divs. (27035)
  • Insertion point: Avoid wrapper div. (26994)
  • Typewriter: Rewrite with hooks. (26986)
  • Deprecate the withGlobalEvents HoC. (26749)
  • Edit Post: Refactor effects to action generators. (27069)

Build Tooling

  • Add eslint rule to prohibit unsafe APIs. (27301)
  • Update package lock to fix CI failures. (2709827102)
  • 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/ Actions: Build Plugin zip, store as artifact on every PR. (26746)
  • Scripts: Unpin ignore-emit-webpack-plugin dependency. (26739)
  • Adds Support to wp-env for setting the PHP version. (25268)
  • Configure phpunit-watcher to improve devex. (27058)
  • Run phpunit even when phpcsPHP Code Sniffer PHP Code Sniffer, a popular tool for analyzing code quality. The WordPress Coding Standards rely on PHPCS. fails. (27024)
  • Scripts: Auto format TypeScript files with format-js. (27138)
  • End 2 End Tests:
    • Fix randomly failing end-to-end test. (27358)
    • Fix multi entity editing test. (27347)
    • Add end-to-end tests for image editing tools. (27262)

Various

  • Simplify CSS for the code block. (27314)
  • Update the block variation widths in the block placeholder. (27255)
  • Don’t split translatable strings in block templates. (27361)
  • Reduce margin on placeholder for media. (27252)
  • Interface package: Move MainDashboardButton slot. (27213)
  • Decrease scrim when in a modal overlay. (27054)
  • Replace ‘Remove from Reusable blocks’ with ‘Manage Reusable blocks’. (27026)
  • Mark AWAIT_PROMISE as unstable API. (26852)
  • Block Support: Separate opt in for font style and weight options. (26844)
  • Latest Posts: Don’t use target="_blank". (25730)

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 9.55.3s28.6ms
Gutenberg 9.45.4s32.6ms
WordPress 5.55.9s27.1ms

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

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