Core Editor Improvement: Continued progress on accessibility

Improving 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 Slack 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 block [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 menu, 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 sidebar. 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 Gutenberg plugin 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 Wednesday, October 6, 2021 at 08:00 PM UTC.

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

Blog Post Highlights and announcements

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

Next releases status update

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

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

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 Core. Let’s take a look at what changed on Trac 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 🛠

Ticket 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

HTTP API

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

REST API

  • Sort widget types by their id – #53303

Bundled Themes

  • Twenty Twenty-One: Keep the closing </span> tag 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 candidate this week and a minor release 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 release 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 Slack 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 patch to help move things along!

Props @desrosj & @tobifjellner for peer review.

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

What’s new in Gutenberg 11.6 (29 September)

Gutenberg 11.6 has been released! This release includes a number of nice enhancements and as usual many bug 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 block’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 Beta Site Editor is available when the child theme of a block theme is active, and its templates, template parts, and theme.json 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 header, 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 UI search results to 10 on the Navigation Editor screen. (34808)
  • Inserter: Pass filter 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 sidebar. (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

  • Widget 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 API

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

Design Tools

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

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 React 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

  • HTML 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 CSS specificity of padding declaration. (34854)

Global Styles

  • Cache global stylesheet keyed by theme. (34704)
  • Clean theme data when switching themes in the customizer. (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 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 plugin 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-cli callout since not recommended and outdated. (34821)
  • Navigation Editor:
    • Fix inconsistencies and errors. (34682)
    • Update the Hooks 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 core-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 PHP 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)

i18n

  • 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 iframe 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

Toolbar component update: September 2021

19 tickets closed during the 5.8 cycle, and some of the remaining bugs are already in the 5.9 milestone.

So what else should happen soon? To help set priorities for upcoming releases, please check out the groups of open tickets below. Hopefully you’ll find a ticket that interests you.

Content and arrangement

The first two tickets here suggest a long-term direction for the toolbar content and the order of links.

These four are potential short-term enhancements.

Showing the right elements in the right context

Interactivity

One major proposal is replacing the hover interaction for expanding dropdown menus so that would require intentional clicking (or touchscreen tap, Space or Enter key) with JavaScript enabled. A change this big needs plenty of testing early in a release cycle, and the code is not ready for that yet.

Ultimately, a good implementation of this could keep users from accidentally opening the profile dropdown when they navigate near the Publish button. And it could fix up to three reported bugs:

Two tickets address long dropdown menus:

Other potential fixes and improvements can help the user experience.

CSS-focused changes

The first three CSS tickets below are bugs.

These three are enhancements.

Developer-focused features

Options/preferences

Props to @marybaum for reviewing and editing this post, plus @sergeybiryukov for reviewing it.

#toolbar