What’s next in Gutenberg? (November)

This is a monthly update containing the high-level items that 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 are focusing on for November. Please join us in our efforts and let us know in the comments if anything is blocking you from contributing. 

Ways to follow along with Gutenberg development: 

Here’s an overview of ways to keep up with Gutenberg and the Full Site Editing project. There is also an index page of Gutenberg development related posts and a Site Editing Milestone overview issue that breaks down the upcoming work into focus areas. 

Preparations for WordPress 5.6

The WordPress 5.6 Must Haves project board includes issues that need attention in preparation for the WordPress 5.6 release. Many contributors will be spending the month of November working on bugs and regressions to be fixed for inclusion in WordPress 5.6.

A number of issues have been labeled for Dev Notes. A dev note is a blogblog (versus network, site) post, published when a technical change that developers may need to know about will be included in the next WordPress release. Dev notesdev note Each important change in WordPress Core is documented in a developers note, (usually called dev note). Good dev notes generally include: a description of the change; the decision that led to this change a description of how developers are supposed to work with that change. Dev notes are published on Make/Core blog during the beta phase of WordPress release cycle. Publishing dev notes is particularly important when plugin/theme authors and WordPress developers need to be aware of those changes.In general, all dev notes are compiled into a Field Guide at the beginning of the release candidate phase. are typically published along with the first 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). which is currently scheduled for November 17, 2020.

Full Site Editing

Work on this major focus for phase 2 is an ongoing effort and is expected to continue iterating over the coming months. For November, priorities are being evaluated in order to identify next focus areas for Full Site Editing.

Overview

  • The Full Site Editing overview issue #20791 can help to identify the major components that will be included in this effort.
  • The Full Site Editing project board is another good place to watch for more detail about the current status of this overall effort.
  • Site editing Infrastructure and UIUI User interface continues to be addressed in overview issue #24818.
  • An effort the ensure that Template tags are accounted for in Full Site Editing is underway in issue #22724.

Query 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 Query Block is an important focus area. This feature is being explored in the following issues:

  • An Overview issue aiming to identify and resolve any Missing Query block functionality can be followed in issue #24934.
  • Design work for the controls for the Query block is being explored in issue #25198.
  • The Pagination Block is a part of the overall Query Block effort with design being explored in issue #26557.

Global Styles

Global Styles refers to the system that defines and manages global aesthetics allowing overall site styles, theme styles, and blocks to work well together.

  • An overview issue #20331 contains detailed information about Global Styles.
  • The Global Styles effort is being actively evaluated to identify next areas to focus on as well as areas to de-prioritize.
  • An effort will be made adjust for some things identified during testing with the blocks based version of the Twenty Twenty-One theme.

Ways to Get Involved

While the above items are our focuses, you can always help with triage, needs testing issues, good first issues and reviewing PRs.

If there’s anything we can do to make contributing easier, let us know in the comments or in #core-editor chats. While we can’t promise to fix everything, we’d appreciate being aware of any blockers.

Meetings to Join

While you can view all meetings here, here are specific meetings to join depending on your interest. Remember that you need a WordPress.org slack account to participate: 

  • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Editor weekly meeting on Wednesdays @ 14:00 UTC in #core-editor focused on all things Gutenberg. 
  • 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) weekly meeting on Fridays @ 16:00 UTC in #accessibility focused on wrangling accessibility related work across Core and the block based editor.
  • Block Based Themes meeting twice monthly on Wednesday @ 16:00 UTC in #themereview focused on preparing for Full Site Editing. 

Note: with daylight savings time related changes happening for many countries on different dates it may be helpful to double check on the times as some meetings may shift times to accommodate attendees preferences.

#gutenberg-next

CSS Chat Summary: 08 October 2020

Full meeting transcript here on Slack. @notlaura facilitated the meeting.

Housekeeping

@notlaura reminded attendees that she will be unavailable on 22 October and needs somebody to step in and run the meeting. If you’re up for it please let her know!

CSSCSS Cascading Style Sheets. Audit (#49582)

@notlaura reported progress on her PR to add the HTML report to @ryelle‘s super CSS Audit tool which now adds support for a --format=html command line option.

There is a remaining issue with the property-values audit, and contribution is still needed towards improving the design and info formatting.

@notlaura also mentioned an issue she added about the need for property-value audit groupings. A short discussion about possible solutions followed, which gravitated towards adding support for .json config files. @ryelle offered to write up an issue to outline the format she envisages for discussion in 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/.

@notlaura clarified the approaching milestones of merging her PR, updating the tracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker., and enabling more progress on styling the report which @danfarrow (me!) has started contributing to.

@notlaura pointed out a failing test (Colors › should ignore colors in non-color properties) which @ryelle confirmed she had left as an aide-mémoire for herself to fix the associated issue. @ryelle suggested that this issue might be a good self-contained task for a new contributor to tackle.

Color Scheming (#49999)

@ryelle reminded us of her demo site where people can appraise the reduced-colors testing tool – details in this Slack message. Some issues have already been added to the github repo but wider testing is required.

The plan is to post in #design and #accessibility with info on how to access the tool, how to submit new issues, and prompts to help fix the issues.

@notlaura put out a call for somebody to help with this small task, and offered her assistance to clarify what’s required & to review the message before it’s posted. @ryelle added that she can still write the post if nobody else volunteers (although she had mentioned earlier in the meeting that this month is super busy for her so please consider helping out!)

CSS links share + Open floor

@notlaura shared a link to this CSS-Tricks article about the widening responsibility of front-end developers. @Andrew Joyce added a recommendation for an earlier article by the author on the same theme, The Great Divide.

We reflected about a time when writing CSS involved just writing CSS, and on that poignant note the meeting was closed.

Thanks to everybody who attended!

#core-css, #summary

What’s next in Gutenberg? (September)

This is a monthly update containing the high-level items that 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 are focusing on for September. Please join us in our efforts and let us know in the comments if anything is blocking you from doing so. 

How to follow along with Gutenberg: 

Here’s an overview of different ways to keep up with Gutenberg and the Full Site Editing project. There is also an index page of Gutenberg development related posts and a new Site Editing Milestone overview issue that breaks down the upcoming work into more concrete next steps. 

Global Styles & Editor focused APIs

Global Styles refers to the system that defines and manages global aesthetics allowing overall site styles, theme styles, and blocks to work well together. Currently, the hope is that work on editor focused APIs can be wrapped up in the month ahead if all goes well. Some of this work will include the following:

Follow along:

You can follow the progress for this overall system in this overview issue. For more recent and immediate next steps, you can follow this issue describing the current state of work. 

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

After months of work, this new screen has been launched out of experiments in the latest Gutenberg 8.9 release. This should allow for plenty of time for feedback before the 5.6 release. With blocks firmly paving the way for the future, this work on the widget screen is meant to help modernize the experience outside of just site editing, ease adoption for everyone, and upgrade what’s currently possible by enabling third party extensibility. This vision can’t be accomplished without feedback so please test and share any bugs or enhancements on GitHub. Work this month will include the following along with the feedback received from users: 

Follow along:

You can follow the progress of this project on this project board.

Full Site Editing

As with the prior months, work on this major focus for phase 2 is ongoing and is expected to continue iterating over the next months. Keep in mind that much of this work relates to other areas like Global Styles & Editor Focused APIs! With that in mind, work this month will mainly focus on the following based on the Milestone 2 – Site Editor Navigation. Note that timing for this work will  likely need to be adjusted depending on progress made meaning this work might start in September but continue going forward.

  • Group document settings in the 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.
  • Indicate current template and template part when in site editor.
  • Move templates and page navigation into the main W 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..
  • Allow browsing all templates and parts. 
  • Incorporate “Add New Page” Flow into “Add Template”.
  • Begin exploring missing functionality for the query 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. as part of milestone 5. 

We’re watching the Theme Experiments repo as well to see how themers are attempting to build block-based themes. Please continue to share there and know we appreciate it!

Follow along:

You can follow the progress of this project on this project board. To help break down this work more, a new overview issue with key milestones for site editing was also created. For each major milestone, there are related issues for each milestone that are recommended to follow if you want a more granular look at each next step (example from Site Editor Navigation).

As a reminder, if you’re interested in being a part of testing Full Site Editing, check out the experimental outreach program to learn more

Navigation Screen

Similar to the Widget Screen, efforts have begun to launch this new screen to the world in order to gather more feedback. Right now, this effort has a few blockers but, if you’re able to, testing this screen and reporting feedback would be a huge help (Install Gutenberg and head to Gutenberg > Experiments to enable this screen). The aim is that this new screen will help expand what’s possible with menus while bringing block functionality to yet another part of WordPress in order to allow for more adoption and to offer a more modern experience.  

Follow along:

You can follow the progress of this project on this project board, review the overview issues (Block Navigation, Navigation Screen) & join the weekly coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. chat.

Areas to be aware of:

Block & 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 Developers

Since the block directory is still a new feature in the WordPress world, the following includes the prior links once more along with two additional issues to chime in on: 

Theme Developers

Review the latest Gutenberg Themes roundup and, in particular, check out @tomjin’s PHP theme template compatibility proposal as it relates to Full Site Editing. Please chime in with your thoughts! Outside of this proposal, here are two other items that might be of interest:  

Ways to Get Involved:

While the above items are our focuses, don’t forget that you can always help with triage, needs testing issues, good first issues and reviewing PRs. Focusing efforts around Widgets and Navigation in particular this month would be very helpful as both screens are on their way to no longer being experimental features. 

If there’s anything we can do to make contributing easier, let us know in the comments or in #core-editor chats. While we can’t promise to fix everything, we’d appreciate being aware of any blockers.

Meetings to join:

While you can view all meetings here, here are specific meetings that touch on Gutenberg development to join depending on your interest and availability. Remember that you need a WordPress.org slack account to participate: 

  • Core Editor weekly meeting on Wednesdays @ 14:00 UTC in #core-editor focused on all things Gutenberg. 
  • 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) weekly meeting on Fridays @ 15:00 UTC in #accessibility focused on wrangling accessibility related work across Core and the block based editor.
  • Navigation Sync weekly meeting on Wednesdays @ 07:00 UTC in #core focused on triaging and discussing Navigation screen work. 
  • Block Based Themes meeting twice monthly on Wednesday @ 16:00 UTC in #themereview focused on preparing for Full Site Editing. 

#core-editor #gutenberg-next

Accessibility improvements to Media component in WordPress 5.5

WordPress 5.5 introduced several improvements in 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) of the Media component.

Improvements in the accessibility of the status and error messages in the Image Editor

On previous WordPress versions on the Edit Media page, when activating the “Restore Image” button, a message was shown above the image while the Restore button itself disappears.

Since the button would have been focused at the time when activated by keyboard, this causes the keyboard focus position to be lost and reset to the top of the page.

The message itself is also not announced by screen readers, and may not be visible to screen magnification users if it appears outside their current view.

WordPress 5.5 improved the behavior of notices inside the Edit Media page with the followings:

  • Improves the focus management by moving focus to the notices, if any, or to the first “tabbable” element: this avoids a focus loss and helps Braille-only and screen magnification users to be aware of the messages.
  • Adds an ARIA role alert to all the notices.
  • Uses wp.a11y.speak() to announce messages to assistive technologyAssistive technology Assistive technology is an umbrella term that includes assistive, adaptive, and rehabilitative devices for people with disabilities and also includes the process used in selecting, locating, and using them. Assistive technology promotes greater independence by enabling people to perform tasks that they were formerly unable to accomplish, or had great difficulty accomplishing, by providing enhancements to, or changing methods of interacting with, the technology needed to accomplish such tasks. https://en.wikipedia.org/wiki/Assistive_technology: this leads to all visual users seeing the messages while assistive technology users will get an audible message.
  • Uses wp.i18n for translatable strings in wp-admin/js/image-edit.js

Related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.: #47147.

Fix the Image Editor mismatching keyboard focus order and visual reading order

On the Edit Media page, the keyboard focus order and the visual reading
order were presented in a zig-zag pattern.

This was causing some accessibility issues for users who have a cognitive disability as they may be confused by an unexpected or illogical focus order.

WordPress 5.5 fixed that by swaping the DOM order of the two main columns within the adminadmin (and super admin) Image Editor.

See more details in the Trac ticket #47136 and the attached changeset.

Improve the appearance of image editor on small and medium screens

WordPress 5.5 added new CSS rules to improve the appearance of image editor on small and medium screens. The new rules prevent the main area of Edit Media screen from being pushed down too far.

See the related ticket on Trac: #47136.

Props to @afercia for proofreading.

#5-5, #accessibility, #dev-notes, #media

WordPress 5.5 Core Editor Accessibility Improvements

In an effort to better communicate the specifics of what’s coming to the editor in WordPress 5.5, this post is meant to list the various accessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) improvements shipping with this upcoming release on August 11th. Going forward, the “What’s Next in Gutenberg” posts will have clearer accessibility-related callouts to make it easier to follow relevant issues more regularly. The work to improve WordPress is never finished, and with more releases will come more improvements, but it’s encouraging to see progress in so many areas. 

Thanks to everyone who worked hard to get these improvements in place in time for 5.5! 

In most sections, explorations are shared of specific high impact improvements. Please view individual issues for more details. 

New Editor Design

WordPress 5.5 brings numerous changes to the look and feel of the editor, informed by the goal of reducing complexity by simplifying iconography, color palette, focus, and general interface. As more features are added to 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, a simpler and clearer design allows the interface to scale more gracefully. Examples include: the effort to create a single toolbar to have fewer tab stops, work done to make the single primary toolbar bigger (more tappable with a larger touch area), and higher contrast. Some changes, such as removing borders around selected blocks, have inspired spirited debates, and it’s been great to see so many people involved. As always, discussion, iteration, and collaboration are our best tools for moving forward together.

Keyboard Navigation Improvements

Below is a screenshot highlighting the new keyboard option mentioned above that can be found in “More tools & options > Options” modal. Checking it will stop arrow keys from navigating between blocks in edit mode. You can also programmatically auto-enable it with this code snippet: 

if ( 
  ! wp.data
      .select(‘core/edit-post’)
      .isFeatureActive(‘keepCaretInsideBlock’) 
) {
  wp.data
    .dispatch( ‘core/edit-post’ )
    .toggleFeature( ‘keepCaretInsideBlock’ );
}
Screenshot showing the “More tools & options > Options” modal where the new option lives.

The following video shows a walk-through of arrow navigation between nesting levels while in Navigation Mode mentioned in the above section: 

Video showing a walk-through of arrow navigation between nesting levels.

Screen Reader Improvements

Focus Improvements

The following video demonstrates the roving tabindex across block toolbars. Of note, the APIs to achieve this improvement in wordpress/components are listed as experimental for now and should ship in 5.6 so third-party developers can use them as well.

Video showing the roving tabindex across block toolbars.

If you’re interested in improving accessibility in the coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. editor, check out the accessibility team, review the current open issues related to accessibility, provide accessibility feedback on issues, and help test 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/.

#5-5, #accessibility, #core-editor

Allow post boxes and metaboxes to be reordered by using the keyboard

Before WordPress 5.5, it was possible to rearrange widgets on the Dashboard and metaboxes on post editing pages (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/ disabled) using only a pointing device, such as the mouse. This was causing 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) issues, since it was not possible to perform the same actions with the keyboard. It was also challenging to perform these actions on touch screens.

WordPress 5.5 solves this by adding new controls and functionalities to allow reordering the boxes with the keyboard. There are also improvements to facilitate reordering of boxes on touch screens.

Before WordPress 5.5: There were no controls to move and reorder Dashboard widgets
Before WordPress 5.5: There were no controls to move and reorder boxes
WordPress 5.5 adds "up" and "down" controls to reorder boxes easily with mouse, touch screens and keyboard
WordPress 5.5 added “up” and “down” controls to reorder boxes easily with mouse, touch screens and keyboard
Reordering boxes with keyboard in WordPress 5.5

In addition to this, sound messages are sent to the live region of the administration ARIA to inform screen reader users of the result of the rearrangement action.

For 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 developers

If you develop plugins that modify the “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.” of the post boxes, you will need to make sure you adjust your code accordingly.

Here is an example:

In WooCommerce “Edit order” pages, some WooCommerce CSSCSS Cascading Style Sheets. hide the header and the handlediv button of some metaboxes using display: none. No feature is broken and the metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way. is sortable as expected because it lives in an element with the CSS class meta-box-sortables.

Plugins can customize the basic metaboxes in this way, but they should also be prepared to adjust their customizations if necessary.

Related ticketticket Created for both bug reports and feature development on the bug tracker. on TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.: #39074.

Props to @afercia for technical review and @audrasjb for proofread.

#5-5, #accessibility, #dev-notes

New CSS styles for buttons with disabled state in WP 5.5

[last modified on July 10, 2020 at 10:58 UTC]

In WordPress 5.5, the styles for both primary and secondary buttons were updated in the WordPress adminadmin (and super admin) to produce a more consistent experience when the buttons are disabled.

Previously, the disabled button styling was inconsistent in the WordPress admin between the default and alternate color schemes. Styling was also different between primary and secondary buttons.

Prior to WordPress 5.5 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. 1 was decided to simplify all disabled button states to use the same design. There is no need for disabled buttons to convey primary and secondary visual semantics since the disabled state denotes that status.

This change introduces new unified CSSCSS Cascading Style Sheets. declarations for disabled buttons:

color: #a0a5aa;
background: #f7f7f7;
border-color: #ddd;

Those above CSS declarations are used both in the WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. dashboard and 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.

New styles for disabled primary and secondary buttons:

PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors and WordPress developers are encouraged to update the CSS styles they use for their buttons with disabled state for better consistency across the ecosystem. Of course, they are even more encouraged to not use custom styles and to rather user default core UIUI User interface styles instead.

Disabled state of buttons can be easily targeted in CSS, for example by using the following selectors:

button[disabled],
input[type=button][disabled],
input[type=submit][disabled] {
	color: #a0a5aa;
	background: #f7f7f7;
	border-color: #ddd;
}

For reference, see the related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.: #48709.

Props @whyisjake, @desrosj and @afercia for proofreading.

#5-5, #accessibility, #core-css, #dev-notes

Accessibility improvements to widgets outputting lists of links in 5.5

When lists of links are displayed on a page for navigational purpose, it can become difficult for users utilizing assistive technologies to navigate between these lists while maintaining an understanding of the purpose of the links. The <ul> element also does not convey proper context.

Starting in WordPress 5.5, a new theme support feature (navigation-widgets) has been added to address this issue. When support is declared, all default widgets included in WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. that produce lists of links will be output wrapped in the <nav> element. Note: the markup produced inside this wrapper will remain unchanged.

Additionally, an aria-label attribute (which is spoken to users using assistive technologies) is automatically generated based on the widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.’s title field and added to the nav element to help distinguish each navigation widget from other nav elements on the page (such as a primary navigation).

The feature is fully opt-in. Theme developers must declare HTML5 support for navigation-widgets. For many themes, this may need some additional CSSCSS Cascading Style Sheets. rules or adjustments to ensure the widgets remain properly styled when outputting the new markup.

Theme developers are highly encouraged to utilize this improvement in their themes. This new theme support feature is an easy way to improve semantics and 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) in all of the sites using your theme.

Widgets affected

The following default Core widgets are impacted by this change:

  • 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.
  • Archives
  • Categories
  • Pages
  • Recent posts
  • Recent comments
  • 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.
  • RSS

How to declare support

Theme developers are encouraged to declare support for navigation widgets in their functions.php file. This can be done by calling add_theme_support() and passing the preexisting html5 feature with the new navigation-widgets type.

Example

// Declare support for navigation widgets markup.
add_theme_support( 'html5', array( 'navigation-widgets' ) );

// This can be combined with other HTML5 types if supported.
add_theme_support(
	'html5',
	array(
		'navigation-widgets',
		'comment-list',
		'comment-form',
		'search-form',
		'gallery',
		'caption',
		'style',
		'script'
	)
);

For reference, see the related documentation on DevHub.

As mentioned above, an aria-label will be generated for each widget based on the widget’s “Title” field. Below is a screenshot when aria-label attributes are not present to illustrate the problem for users utilizing a screen reader.

The screenshot above shows how the absence of aria-label attributes contributes to a poor experience when utilizing a screen reader. Props @afercia.

The screenshot below shows how the user’s experience is improved when by aria-label attributes.

The screenshot above shows how aria-label attributes helps users utilizing a screen reader to distinguish navigation elements from each other. Props @afercia.

Markup changes

Below is what the output markup looks like when support for navigation-widgets is not declared.

<!-- Without declaration for HTML5 `navigation-widgets` feature support -->
<div class="widget widget_archive">
	<div class="widget-content">
		<h2 class="widget-title">Archives</h2>
		<ul>
			<li><a href="mywebsite/2020/07/">July 2020</a></li>
			<li><a href="mywebsite/2019/12/">December 2019</a></li>
		</ul>
	</div>
</div>

Below is what the new output markup will look like when support for navigation-widgets is declared.

<!-- When the theme declares HTML5 `navigation-widgets` feature support -->
<div class="widget widget_archive">
	<div class="widget-content">
		<h2 class="widget-title">Archives</h2>
		<nav role="navigation" aria-label="Archives">
			<ul>
				<li><a href="mywebsite/2020/07/">July 2020</a></li>
				<li><a href="mywebsite/2019/12/">December 2019</a></li>
			</ul>
		</nav>
	</div>
</div>

Forcing navigation-widgets support

Support for HTML5 navigation-widgets feature can be forced on a site by using the new navigation_widgets_format 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.. This hook determines the type of markup used in widgets that contain navigation links.

This filter accepts two different values: html5 and xhtml. Returning any other value to this filter will output the old markup without these accessibility improvements.

// Force HTML5 markup.
function mytheme_force_semantic_nav_widgets( $value ) {
	return 'html5';
}
add_filter( 'navigation_widgets_format', 'mytheme_force_semantic_nav_widgets');

// Force legacy markup.
function mytheme_force_legacy_nav_widgets( $value ) {
	return 'xhmtl';
}
add_filter( 'navigation_widgets_format', 'mytheme_force_legacy_nav_widgets');

For reference, see the related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. ticketticket Created for both bug reports and feature development on the bug tracker.: #48170.

Props @whyisjake and @desrosj for proofreading.

#5-5, #accessibility, #dev-notes, #html5, #widgets

Block Editor Keyboard Shortcuts in WordPress 5.4

WordPress 5.4 introduces a new package called @wordpress/keyboard-shortcuts to centralize the registration/removal and documentation of the available keyboard shortcuts 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 screen.

Registering shortcuts

You should register keyboard shortcuts when you load the screen/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 for the first time, by calling the registerShortcut action.

wp.data.dispatch( 'core/keyboard-shortcuts' ).registerShortcut( {
	// Shortcut name (identifier)
	name: 'plugin/shortcut-name',

 	// Catergory (global, block or selection)
	category: 'block',

	// Description 
	description: 'Short description of your shortcut.',

	// The key combination used to trigger the shortcut
	// Could be just a single character or a character with
	// a modifier.
	keyCombination: {
		modifier: 'primaryAlt',
		character: 't',
	},

	// Some shortcuts can be triggered using several 
	// key combination, the aliases array is used to define
	// the alternative combinations
	aliases: [
		{
			modifier: 'primary',
			character: 'i',
		},
	],
} );

Registering a shortcut automatically adds it to the keyboard shortcuts help modal, where users can find it.

Implementing the keyboard shortcut behavior

The @wordpress/keyboard-shortcuts package also provides the useShortcut 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 to define the behavior triggered by the keyboard shortcuts.

import { useShortcut } from '@wordpress/keyboard-shortcuts';
import { useCallback } from '@wordpress/element';

const MyComponent = () => {
	useShortcut(
		// Shortcut name
		'plugin/shortcut-name',

		// Shortcut callback
		useCallback(
			( event ) => {
				// Do something when the keyboard 
				// shortcut is triggered
			},
			[]
		)
	);
}

Using this React hook instead of a custom implementation comes with a few advantages:

  • If the shortcut is unregistered by a third-party plugin, the callback is just ignored.
  • The shortcut key combination can be modified at runtime and the callback will still be called properly.

Removing existing shortcuts

Registered shortcuts can also be unregistered (and potentially replaced) by third-party plugins

wp.data.dispatch( 'core/keyboard-shortcuts' ).unregisterShortcut(
	'plugin/shortcut-name'
);

Next steps

In the next releases, this package will also let you offer a centralized UIUI User interface to modify the keyboard shortcuts per user.

#5-4, #accessibility, #block-editor, #dev-notes

Alternate color schemes changes in WordPress 5.3.1

WordPress 5.3 added some noteworthy CSS changes to WordPress Admin. These changes also impacted alternate color schemes, especially concerning secondary buttons.

Indeed, secondary button borders unexpectedly inherited their scheme’s primary color, which resulted in arguable visual aspect and poor readability for most color schemes.

“Blue” alternate color scheme in WordPress 5.3
“Coffee” alternate color scheme in WordPress 5.3
“Midnight” alternate color scheme in WordPress 5.3

A 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. also occurred on :active state, where the background color of the button was quite the same than the text color.

On the right: secondary button with :active state on “Blue” color scheme in WordPress 5.3
On the right: secondary button with :active state on “Midnight” color scheme in WordPress 5.3

WordPress 5.3.1 will fix these issues by unifying WP-Adminadmin (and super admin) secondary buttons for all alternate color schemes.

Secondary button styles will be the same for all bundled alternate color schemes. This change also fixes the :active state CSSCSS Cascading Style Sheets. issue.

Please note this change also introduces some hardcoded colors for both gray borders and texts. PluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party authors who provide specific support for alternate color schemes can use these new hardcoded colors.

New secondary button CSS/Sass styles in WP 5.3.1:

.button {
	border-color: #7e8993;
	color: #32373c;
}

.button:hover {
	border-color: darken( #7e8993, 5% );
	color: darken( #32373c, 5% );
}

.button:focus {
	border-color: #7e8993;
	color: darken( #32373c, 5% );
	box-shadow: 0 0 0 1px #32373c;
}

See /wp-admin/css/colors/_admin.scss.

New CSS styles for secondary buttons in alternate color schemes:

Secondary buttons in WordPress 5.3.1
“Midnight” alternate color scheme in WP 5.3.1
“Coffee” alternate color scheme in WP 5.3.1

For reference, see the related TracTrac An open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets: #48585 and #48598.

#5-3-1, #accessibility, #core-css, #dev-notes