CSS Chat Summary: 30 September 2021

The meeting took place here on Slack. @danfarrow facilitated and wrote up these notes.

Housekeeping

CSS Custom Properties (#49930)

  • @dryanpress suggested that, once all the PRs are merged, it would be very helpful to add a Table of Contents (TOC) to custom-properties.css. @ryelle agreed that it would help with reducing duplicates and with documentation.
  • @danfarrow asked about how the TOC sections would be broken down and @dryanpress suggested starting with a Theme and a General section, then adding sections for each file
  • We discussed following up on unfinished PRs. @dryanpress offered to gently nudge the relevant authors after which we would give them 5 days to respond before picking up / taking over their PRs. @wazeter agreed that applying a soft deadline is a good idea. UPDATE: By the end of the meeting all authors had effectively been nudged!
  • @danfarrow brought up the issue of rgba colour values and asked what the currently preferred approach is. After an interesting discussion the consensus was that the custom properties should be added for each distinct rgba value, for example --wp-admin--surface--box-shadow: rgba(0, 0, 0, 0.1);. We could then work on a second pass to reduce the number of distinct rgba values.
  • @joyously imagined a script that sequentially sets each custom property to hotpink, so the user can verify that the visual changes meet expections. UPDATE: Within a few hours @costdev pretty much delivered the goods – amazing!

Open Floor / CSS Link Share

  • @dryanpress shared a link to a tweet announcing that the ouline ring now automatically adapts to the element border-radius “in the latest releases of all major browsers”
  • @ryelle shared a link to WordCamp US [Now over, but there’s always next year!]
  • @dryanpress shared a link to Omatsuri, an essential collection of very useful browser-based HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers., CSS, SVG & other web related tools

Thanks everybody!

#summary

Introducing Twenty Twenty-Two

A collection of screenshots featuring the Twenty Twenty-Two theme

WordPress 5.9 will feature a brand new default theme named Twenty Twenty-Two. It arrives during an exciting time for WordPress themes. With the advent of Full Site Editing and Global Styles, themes are changing structurally and functionally to enable far more avenues for customization than users have come to expect in the past. To take advantage of these new abilities, Twenty Twenty-Two has been designed to be the most flexible default theme ever created for WordPress.  

A reliable starting point

To find inspiration for this theme’s design, I did not have to look far. Thanks to a bird feeder attached to the outside of our kitchen window, my family’s daily breakfast routine involves a rotating cast of cardinals, doves, finches, jays, and tufted titmice. The birds are always up to something interesting: Sometimes they’re lining up patiently to take turns eating, other times they’re playfully performing aerial gymnastics. 

While the birds’ exact behavior is unpredictable, they are remarkably reliable overall. The exact lineup changes somewhat, but every single morning there’s a group of birds eating breakfast with us. Throughout all of the tumult the world has seen in the past couple years, this consistent, entertaining routine has been a welcome starting point to my day. 

That routine is the inspiration for this years’ default theme. Like the birds, Twenty Twenty-Two is designed to be light and resilient, with a hint of playfulness. The theme uses the lightweight Source Serif Pro for headlines, paired with a sensible sans-serif for support. Its color palette is drawn from nature, and layout elements sit gently on the page.

Above all, the theme is designed to be reliable. Its design choices are intentionally subtle, and its foundation will be built strong. It’s our hope that this theme will suit your site through many seasons. 

Homepage and archive page mockups for the Twenty Twenty-Two theme.

Endlessly customizable

Twenty Twenty-Two will take advantage of a wide networknetwork (versus site, blog) of page templates, headers, footers, and other patterns so that users can easily make the theme their own. In another nod to the behavior of birds everywhere, these will offer a balance between fun and utility: some are irregular and unpredictable, while others are straightforward and traditional. Together, these patterns will act as a window into all of the possibilities that the theme enables.

A variety of page layouts and block pattern mockups for the Twenty Twenty-Two theme.

In addition, Twenty Twenty-Two will ship with a range of alternate color schemes so that folks can drastically change the appearance of their site. Users will also be able to change fonts, image treatments, and more on a site-wide level. These new controls open up a wide array of drastically different customizations for the theme:

Twenty Twenty-Two is designed with the acknowledgement that its default appearance is not most people’s endpoint. Everyone deserves a truly unique website, built on a solid, well-designed foundation, and Twenty Twenty-Two aims to help them achieve that.

Built for Full Site Editing

To take advantage of these new customization features, Twenty Twenty-Two will be built for Full Site Editing first. The theme aims to use as little CSSCSS Cascading Style Sheets. as possible: our goal is for all theme styles to be configured through 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. and editable through Global Styles. The theme development team will work closely with 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/ contributors to build design tools in 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 that enable this goal. 

As a block theme, Twenty Twenty-Two will likely require WordPress 5.9 to run. If the Twenty Twenty-Two and 5.9 release leads determine that there is need in the community for broader theme support, we will explore ways to bridge that gap.

Next steps

Kjell Reigstad (@kjellr) is leading design for Twenty Twenty-Two, and Jeff Ong (@jffng) is leading development. The two of us are looking forward to your involvement and support though the process!  If you are interested in contributing to Twenty Twenty-Two, make sure you are following this blogblog (versus network, site)

Theme development will happen on 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/. Once the theme is stable, it will be merged into CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and its GitHub repo will be deprecated. An empty repository has been created here that you can follow if you’d like: 

https://github.com/wordpress/twentytwentytwo

Starting on Monday October 11th at 3:00 PM UTC, there will be weekly SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. meetings in #core-themes to coordinate development of the theme.

The future of default themes

The community has produced a dozen best-in-class themes together, and we’ve come to look forward to a new one arriving at the close of each year. That said, themes are in a transition period today, and it seems like this may be a reasonable time to step back and to re-evaluate the annual cadence with which we build default themes. 

Innovations like theme.json, block templates, and block patterns are making theme development far simpler, and are providing new ways for users to customize their sites. There’s reason to believe that the community can leverage all this to build more frequent and diverse theme and customization solutions for our users in the coming years. 

We’re all still navigating these new opportunities (and in the meantime, we have a theme to build!) so let’s regroup after the 5.9 release to discuss future paths forward for default themes. 

Learn more

For information about about previous default themes, you can read the following posts:

If you’re interested in learning more about Block Themes and Full Site Editing, here are some resources for you:

Core Editor Improvement: Continued progress on accessibility

Improving 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) requires ongoing effort and this post seeks to highlight some of the ways in which the project continues to make strides in this area. If you’re interested in helping with this work, please join the #accessibility channel in Make SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. and check out how you can get involved. There’s plenty of important work to be done including testing, giving accessibility feedback, and creating PRs to address feedback. 

Ensuring accessibility from the start with 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. [planned for 5.9]

The Navigation Block is a key milestone for the full site editing project that focuses on the experience of editing a site’s 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., both in terms of structure and design. This is a big effort that includes how to make it easy to add submenu items, how to create a responsive navigation experience, how to support multiple different inner blocks, and more. While work is underway to simplify the experience for all (ex: reducing the number of steps to add a page link), this section covers three big pieces of the work, thus far, that have had a particularly strong impact on accessibility:

  1. The first is that when implementing submenus it was intentional that they would open on explicit click rather than focus, when navigating with a keyboard and/or screen reader. The changes made ensure that screen reader users are better informed when tabbing submenus, and can choose whether to enter them or not. Previously it was necessary to tab through every submenu item to get to the next parent item. For a deeper look into the behaviors of the navigation block and submenu items, check out these visualizations that provide more context but have not yet been fully implemented. 
  1. When building the responsive navigation feature in the navigation block, work was done to ensure the hamburger menu was built using proper modal behavior from the start. This means that when you open the responsive burger menu, the tab is kept inside the responsive menu experience until you press Escape. A quick demonstration is shown in the video displayed in this section.
  1. Finally, the markup for the front end was changed to ensure that the Navigation block contains fully semantic markup, no matter what its contents are.

Accessibility benefits with the Gallery Block Refactor [planned for 5.9]

Ahead of WordPress 5.9, an update to the Gallery Block was shipped that essentially allows you to have all of the tools you’re used to with an Image Block for each image in the Gallery Block. Thanks to this change, the Gallery Block now benefits from improved keyboard navigation and the ability to add alt text right within the block 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.. This will make it easier to both produce accessibility friendly content and for those navigating what you create when viewing your site. To learn more about the Gallery Block Refactor, you can check out this WordPress News post dedicated to it

The new gallery block with an alt text field for each image within the gallery block itself.

Other noteworthy updates/fixes [in 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/ 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 today]

There’s a lot of high-impact changes that can be overlooked when not shown altogether. To help capture additional accessibility improvements, here are high impact changes in the editing experience: 

Thank you to @joen who helped provide wonderful insights about the navigation block, including the featured video. Thank you to @kellychoffman @priethor @daisyo for the content review. Thank you to @javiarce for the lovely Gallery Block refactor screenshot.

#core-editor-improvement, #gutenberg

Dev Chat Agenda for October 6, 2021

Here is the agenda for this week’s developer meeting to occur on October 6, 2021, at 20:00 UTC.

Please note that depending on your timezone, the time may have changed with the end of daylight saving time.

Blogblog (versus network, site) Post Highlights and announcements

Bringing to your attention some interesting reads and some call for feedback and/or volunteers:

Next releases status update

  • Next minor releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality.: WP 5.8.2
    👉 WordPress 5.8.2 Deferred
  • Next major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope.: WP 5.9
    👉 WordPress 5.9 Planning Roundup

Components check-in and status updates

  • Check-in with each component for status updates.
  • Poll for components that need assistance.

Open Floor

Do you have something to propose for the agenda, or a specific item relevant to the usual agenda items above?

Please leave a comment, and say whether or not you’ll be in the chat, so the group can either give you the floor or bring up your topic for you accordingly.

This meeting happens in the #core channel. To join the meeting, you’ll need an account on the Making WordPress Slack.

#5-8-2, #5-9, #agenda, #core, #dev-chat

X-post: Block-based Themes Meeting Agenda: October 6, 2021

X-post from +make.wordpress.org/themes: Block-based Themes Meeting Agenda: October 6, 2021

Editor Chat Agenda: 6 October 2021

Facilitator and notetaker: @itsjusteileen

This is the agenda for the weekly editor chat scheduled for Wednesday, Otcober 6 2021, 04:00 PM GMT+1.

This meeting is held in the #core-editor channel in the Making WordPress SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..

  • GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 11.7 RC will be released Wednesday.
  • What’s new in Gutenberg 11.6
  • WordPress 5.9 “Go, no go” date and priorities.
  • Whats next in Gutenberg: Mid-September 2021.
  • Updates based on updated scope for site editing projects:
    • 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. & Navigation Editor.
    • Template editor.
    • Patterns.
    • Styling.
    • Mobile Team.
  • Task Coordination.
  • Open Floor.

If you are not able to attend the meeting, you are encouraged to share anything relevant for the discussion:

  • If you have an update for the main site editing projects, please feel free to share as a comment or come prepared for the meeting itself.
  • If you have anything to share for the Task Coordination section, please leave it as a comment on this post.
  • If you have anything to propose for the agenda or other specific items related to those listed above, please leave a comment below.

#agenda, #core-editor, #core-editor-agenda, #meeting

A Week in Core – October 4, 2021

Welcome back to a new issue of Week in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.. Let’s take a look at what changed on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. between September 27 and October 4, 2021.

  • 11 commits
  • 21 contributors
  • 31 tickets created
  • 4 tickets reopened
  • 23 tickets closed

The Core team is currently working on the next point (5.8.2) and major (5.9) releases 🛠

Ticketticket Created for both bug reports and feature development on the bug tracker. numbers are based on the Trac timeline for the period above. The following is a summary of commits, organized by component and/or focus.

Code changes

Administration

  • Enable first and last page buttons in WP_List_Table::pagination()#42763

App Passwords

  • Remove placeholder from the app password name input field – #54047

Coding Standards

  • Remove duplicate assignment from a ternary operator in WP_MS_Sites_List_Table::site_states()#38296
  • Use strict comparison in wp-includes/class-http.php#53359
  • Use strict comparison in wp-includes/class-wp-http-ixr-client.php#53359

Docs

  • Improve documentation for WP_Admin_Bar methods – #54191

HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. 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.

  • Remove the DST Root CA X3 certificate expired on September 30, 2021 – #54207, #50828

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

  • Sort 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. types by their id – #53303

Bundled Themes

  • Twenty Twenty-One: Keep the closing </span> 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.) in footer links – #54209
  • Twenty Twenty-One: Remove duplicate class name from localized font-family elements – #54196
  • Twenty Twenty: Remove duplicate class name from localized font-family elements – #54196

Props

Thanks to the 21 people who contributed to WordPress Core on Trac last week: @audrasjb (4), @sabernhardt (3), @hellofromTonya (2), @mukesh27 (2), @aezazshekh (2), @tmatsuur (2), @rehanali (2), @joelcj91 (1), @SergeyBiryukov (1), @yagniksangani (1), @joedolson (1), @bradleyt (1), @seedsca (1), @fierevere (1), @Pillai (1), @Hareesh (1), @knutsp (1), @ronakganatra (1), @wp_kc (1), @spacedmonkey (1), and @desrosj (1).

Congrats and welcome to our 4 new contributors of the week: @rehanali, @yagniksangani, @Pillai, and @wp_kc ♥️

Core committers: @sergeybiryukov (8), @hellofromtonya (2), and @timothyblynjacobs (1).

#5-8-2, #5-9, #core, #week-in-core

WordPress 5.8.2 Deferred

The WordPress 5.8.x release schedule calls for a release candidaterelease candidate One of the final stages in the version release cycle, this version signals the potential to be a final release to the public. Also see alpha (beta). this week and a minor releaseMinor Release A set of releases or versions having the same minor version number may be collectively referred to as .x , for example version 5.2.x to refer to versions 5.2, 5.2.1, 5.2.3, and all other versions in the 5.2 (five dot two) branch of that software. Minor Releases often make improvements to existing features and functionality. next week. However, the scheduling for these 5.8.x releases will be changed.

The 5.8.2 release dates as previously planned will be skipped and rescheduled to the “if necessary” 5.8.3 schedule as follows:

5.8.2 (updated)

  • RC: Tuesday November 2, 2021
  • Final release: Wednesday, November 10, 2021

This deferral was determined because currently there are no commit candidates. Plus, many commits still need a lot of work to merge, or are potentially too impactful and therefore belong in a major releasemajor release A release, identified by the first two numbers (3.6), which is the focus of a full release cycle and feature development. WordPress uses decimaling count for major release versions, so 2.8, 2.9, 3.0, and 3.1 are sequential and comparable in scope. instead.

Release Coordination

Because the 5.8.x releases are part of 5.8 by extension, all coordination and conversation related to the 5.8.x releases are held in the #5-8-release-leads SlackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel.

Do you want to see some tickets included in the next release? Check the 5.8.2 milestone: provide feedback on tickets, test existing fixes, or even submit a 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. to help move things along!

Props @desrosj & @tobifjellner for peer review.

#5-8, #5-8-2, #5-8-3, #5-8-x

X-post: Proposal: Migrate e2e to Playwright!

X-post from +make.wordpress.org/test: Proposal: Migrate e2e to Playwright!

What’s new in Gutenberg 11.6 (29 September)

GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ 11.6 has been released! This release includes a number of nice enhancements and as usual many bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. fixes.

Site Logo cropping and rotating within the editor

Before Gutenberg 11.6, the image used as the site logo had to be edited before being uploaded to your site. With the goal of providing a wide array of tools to adapt your logo without leaving the editor, it is now possible to crop, zoom, and rotate the image you choose for the site logo directly in the Site Logo blockBlock Block is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage using the WordPress editor. The idea combines concepts of what in the past may have achieved with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience.’s toolbar!

Locking control at block level

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

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

Query Pagination uses Flex Layout

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

Other Notable Highlights

Regarding Full Site Editing and Global Styles, basic support for child themes has been added. This means the BetaBeta A pre-release of software that is given out to a large group of users to trial under real conditions. Beta versions have gone through alpha testing in-house and are generally fairly close in look, feel and function to the final product; however, design changes often occur as part of the process. Site Editor is available when the child themeChild theme A Child Theme is a customized theme based upon a Parent Theme. It’s considered best practice to create a child theme if you want to modify the CSS of your theme. https://developer.wordpress.org/themes/advanced-topics/child-themes/. of a block theme is active, and its templates, template parts, and theme.jsonJSON JSON, or JavaScript Object Notation, is a minimal, readable format for structuring data. It is used primarily to transmit data between a server and web application, as an alternative to XML. are inherited.

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

Template Part Focus Mode refers to the view that lets you focus and work on a single template part, like a headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes., and is available for any template part. This isolated template part editing is now accessible from the ellipsis menu in the Template Part toolbar. More Template Part Focus Mode improvements are coming soon, so make sure to check its tracking issue here.

11.6

Enhancements

Block Library

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

Block Editor

  • Format toolbar: Visual clue for hidden active items. (21892)
  • Increase Link UIUI User interface search results to 10 on the Navigation Editor screen. (34808)
  • Inserter: Pass filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. value when clicking Browse All. (34912)

Components

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

Global Styles

  • Add a simple Global Styles preview to the sidebarSidebar A sidebar in WordPress is referred to a widget-ready area used by WordPress themes to display information that is not a part of the main content. It is not always a vertical column on the side. It can be a horizontal rectangle below or above the content area, footer, header, or any where in the theme.. (34991)
  • Update the Global Styles Icon and use it in the site editor’s panel. (34871)
  • Update the global styles sidebar to use a navigation component. (34885)

Widgets Editor

  • WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. Group: Make title directly editable. (34799)

Template Editor

  • Add edit template part menu button. (34679)

Themes

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

New APIs

Block APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways.

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

Design Tools

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

AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility)

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

Performance

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

Bug Fixes

Block Editor

  • Copy Handler: Only handle paste event once. (34430)
  • Fix save-state indicator appearance. (34947)
  • MediaReplaceFlow: Avoid ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. warning when selecting media. (34618)
  • Remove .has-link-color class upon clearing the link color. (34700)
  • Rich Text: Fix arrow navigation with consecutive formats. (35014)
  • Rich Text: Also strip object replacement character when removing padding. (34851)
  • Writing flow: Fix focus trap on non-text input types. (32714)
  • Fix bug in the receiveBlocks action resulting in a broken block list. (35076)

Block Library

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

Global Styles

  • Cache global stylesheet keyed by theme. (34704)
  • Clean theme data when switching themes in the customizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings.. (34540)
  • Fix dimensions panel default controls display. (34828)
  • Fix for link color in containers. (34689)

Components

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

Template Editor

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

REST APIREST API The REST API is an acronym for the RESTful Application Program Interface (API) that uses HTTP requests to GET, PUT, POST and DELETE data. It is how the front end of an application (think “phone app” or “website”) can communicate with the data store (think “database” or “file system”) https://developer.wordpress.org/rest-api/.

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

Themes

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

Widgets Editor

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

Experiments

Navigation Block

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

Navigation Editor

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

Site Editor

  • Site Editor – add basic pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party support. (34460)

Documentation

Handbook

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

Packages

  • Update the note about using polyfill for ES2015+ features. (34878)
  • Components
    • Add Compound Components section to components CONTRIBUTING.md. (34697)
    • Dropdown: Tidy up documentation. (34861)
    • Fix small typo in the component’s CONTRIBUTING guidelines documentation. (34753)
    • ItemGroup: Add story showcasing more complex layouts. (34708)
    • Update wordpress/components package’s contributing guidelines. (33960)
    • Update AlignmentMatrixControl documentation post merge. (34662)
    • Update components CONTRIBUTING.md structure. (34877)
    • Update documentation for ClipboardButton component. (34711)
  • Create Block: Remove wp-cliWP-CLI WP-CLI is the Command Line Interface for WordPress, used to do administrative and development tasks in a programmatic way. The project page is http://wp-cli.org/ https://make.wordpress.org/cli/ callout since not recommended and outdated. (34821)
  • Navigation Editor:
    • Fix inconsistencies and errors. (34682)
    • Update the HooksHooks In WordPress theme and development, hooks are functions that can be applied to an action or a Filter in WordPress. Actions are functions performed when a certain event occurs in WordPress. Filters allow you to modify certain functions. Arguments used to hook both filters and actions look the same. section in documentation. (35035)
  • Scripts: Add CHANGELOG entry for jest-dev-server upgrade. (34657)

Other

  • Update overall plugin description. (34850)

Code Quality

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

Block Editor

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

Block Library

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

Components

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

Global Styles

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

i18ni18n Internationalization, or the act of writing and preparing code to be fully translatable into other languages. Also see localization. Often written with a lowercase i so it is not confused with a lowercase L or the numeral 1. Often an acquired skill.

  • Add a “translators:” comment in the core class used to implement a Block widget. (34840)

Tools

Testing

  • Add editor onboarding tests. (34431)
  • Fix flaky navigation editor test by waiting for required elements. (34767)
  • Fix native Latest Posts end-to-end device tests. (34715)
  • Iframed editor: Add jQuery integration end-to-end test. (33007)
  • Navigation Editor: Migrate from response mocking to rest api util. (34869)
  • Navigation Editor: Fix failing end-to-end test. (34874)
  • Navigation Editor: Add end-to-end tests for global inserter to the Navigation Editor screen. (34804)
  • Navigation Editor: Update new navigation editor test to use REST API to create a menu instead of response mocking. (35025)
  • Try reporting flaky tests to issues. (34432)
  • Try to fix flaky iframeiframe iFrame is an acronym for an inline frame. An iFrame is used inside a webpage to load another HTML document and render it. This HTML document may also contain JavaScript and/or CSS which is loaded at the time when iframe tag is parsed by the user’s browser. test. (34776)
  • Test that add_theme_supports are loaded for themes without theme.json. (34998)

Build Tooling

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

Performance Benchmark

The following benchmark compares performance for a particularly sizeable post (~36,000 words, ~1,000 blocks) over the last releases. Such a large post isn’t representative of the average editing experience but is adequate for spotting variations in performance.

VersionLoading TimeKeyPress Event (typing)
Gutenberg 10.67.6 s38.38 ms
Gutenberg 10.57.2 s38.54 ms
WordPress 5.87.9 s45.97 ms

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

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

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