Andrew Ozz 10:44 pm on June 29, 2020
Tags: , ,   

Updating jQuery version shipped with WordPress

This has been a long time coming; 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. #37110 is already few years old.

Following the recommendations of the jQuery team, the updating has to happen in stages:

  1. Remove jQuery Migrate 1.x. This is planned for WordPress 5.5.
  2. Update to the latest version of jQuery and add the latest jQuery Migrate. This is tentatively planned for WordPress 5.6 depending on test results. Updating to the latest jQuery UIUI User interface, version 1.12.1, is also planned for 5.6.
  3. Remove jQuery Migrate. This is tentatively planned for WordPress 5.7 or later, depending on testing.

As planned, a Test jQuery Updates 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 was released to makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). it easy to test different versions of jQuery, jQuery Migrate, and jQuery UI. Please install it and thoroughly test if everything works as expected, especially on the front-end, or at the settings pages of other WordPress plugins.

How to help with testing

The plugin has a settings screen found under the Plugins menu in WordPress adminadmin (and super admin). Different versions of the jQuery libraries can be selected there for testing. Please test by:

  1. Disabling jQuery Migrate, and leaving jQuery and jQuery UI at the default versions (for WordPress 5.5).
  2. Selecting jQuery 3.5.1, enabling jQuery Migrate, and selecting jQuery UI 1.12.1 (for WordPress 5.6).
Test jQuery Updates settings screen, under the Plugins menu.

Updating your code

To get ready for this jQuery update, it’s important that you update your code. The migrate plugin will assist you in identifying issues. Additionally, the jQuery Core 3.0 Upgrade Guide and 3.5 Upgrade Guide provide detailed information about what has changed. As the browser supported list is also updated, this is also a great time for you to revisit what versions of browsers are supported by your themes and plugins.

See 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.?

If you find a bug in Test jQuery Updates, or if you run into a jQuery related issue, please report it at https://github.com/WordPress/wp-jquery-update-test. If the issue is with a default script in WordPress, please open a new ticket on Trac.

Thanks @andreamiddleton, @annezazu, and @jorbin for helping with this post.

#5-5, #jquery

#dev-notes

Milana Cap 8:43 am on August 14, 2020
Tags: ,   

X-post: Plan proposal for a new better structured Gutenberg developer documentation

X-comment from +make.wordpress.org/docs: Comment on Plan proposal for a new better structured Gutenberg developer documentation

Winstina Hughes 10:02 pm on August 13, 2020
Tags: ,   

Dev Chat Summary, August 12th, 2020

@whyisjake hosted this agenda and @marybaum edited.

Component check-in and status updates

  • End-to-end testing
    • @whyisjake opened the chat by sharing @francina‘s post on E2E testing. She’s looking for feedback and would like to see more of that testing in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress..

  • 5.5 has landed! The releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. happened yesterday, on August 11, 2020.
    • @whyisjake thanked 800-plus contributors that made it, in his view, the greatest release of WordPress ever
  • Core contributorsCore Contributors Core contributors are those who have worked on a release of WordPress, by creating the functions or finding and patching bugs. These contributions are done through Trac. https://core.trac.wordpress.org. discussed 5.5 focal points and areas for improvement
    • @whyisjake and @marybaum addressed the enduring struggle to sync the about.php page with translators, when the squad often doesn’t get late-breaking info around the jazzer until the very last minute.
    • @audrasjb and @desrosj discussed 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. with the placeholder video and inline image editing tools
    • @whyisjake began a lively conversation on the impact jQuery Migrate had on 5.5 planning with @jorbin, @ipstenu, @corinth, and @johnbillion. @Helen expressed a desire for clear messaging and more developer outreach on the topic, @jorbin noted that the marketing lead for future releases could increase awareness, and @marybaum, @abhanonstopnewsu, and @annezazu discussed existing and planned marketing efforts.

Upcoming Releases

  • 5.5.1 release
    • @davidbaumwald offered to lead the 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.. @audrasjb, @johnbillion, @desrosj, @sergeybiryukov, @whyisjake, @Hauwa, and @planningwrite and several others will join him. If you are interested in being part of the 5.5.1 release team, please note your interest in this post.
  • 5.6 release kickoff meeting will be August 19th during dev chat.

Open Floor

The next Core dev chat will be on Wednesday August 19, 2020 at 20:00 UTC

These meetings are held in the #core channel in the Making WordPress Core Slack instance.

Props to @audrasjb for review.

#5-5, #dev-chat

Francesca Marano 8:33 pm on August 13, 2020  

WordPress 5.6 Release Planning

Kudos to the wonderful group of people who contributed to the successful releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. of WordPress 5.5 yesterday!  We now turn our focus to the final 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. of the year with WordPress 5.6.

Release Squad

As @chanthaboune noted back in March, WordPress 5.6 will feature an all-women release squad with the hope of increasing the number of women who have experience on a release squad and return as contributors to CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. and elsewhere.  Then in May when the 5.5 release squad was announced it also noted many of the 5.6 release squad members who would shadow the 5.5 team and learn the release process.  With @chanthaboune on sabbatical until 21 September 2020, I have the pleasure of sharing the 5.6 release leads and the various cohort groups who will be supporting those leads, as well as the release scope and schedule for 5.6.

Release Scope

The following are the remaining goals for the year that are targeted as part of WordPress 5.6.

  • Complete: Convert the widgets-editing areas complete.
  • Complete: Remove support for PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 5.6.x.
  • Ship: Navigation menus 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. in Core.
  • Ship: Automatic updates for major WordPress Core releases (opt-in).
  • Ship: New features from the block editor upgrades.
  • Ship: Widgets-editing and CustomizerCustomizer Tool built into WordPress core that hooks into most modern themes. You can use it to preview and modify many of your site’s appearance settings. support in Core.
  • Ship: Default theme, including an FSE compatible version.
  • Ship: PHP 8 support.
  • Ship: Public 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. of Full Site Editing.

Release Schedule

The schedule from today, 12 August 2020, until the WordPress 5.6 release can be found on the 5.6 development cycle page.  In summary, some key milestones for the release are:

  • Kickoff: 19 August 2020
  • Beta 1: 20 October 2020 (~9 weeks from kickoff)
  • 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). 1: 17 November 2020 (4 weeks from Beta 1)
  • General Release: 8 December 2020 (3 weeks from Release Candidate 1)

If you want to dive deeper into 5.6, development is discussed at a weekly meeting in the #core 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 and occurs next at Wednesday at 20:00 UTC. Wish us luck!

This post was compiled with the help of @jeffpaul and reviewed for clarity and accuracy by @cbringmann.  Props to @cbringmann, @angelasjin, @francina, and @desrosj for helping assemble this fantastic release squad and to @chanthaboune for the inspiration to lead the project in this direction!

Paal Joachim Romdahl 5:54 pm on August 13, 2020
Tags: , , , fse-outreach-experiment,   

Editor chat Summary: 12th August, 2020

This post summarizes the weekly editor chat meeting agenda. Held on 2020-08-12 14:00 UTC in Slack. Moderated by @paaljoachim.

WordPress 5.5

WordPress 5.5 was released on 11th August.

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

The latest releaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software. of Gutenberg, version 8.7 was released 5th of August.

The Monthly Priorities

The monthly plan for August.

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

Scroll back to Navigation block chat.

Task Coordination

@zebulan

@youknowriad

  • I’ve been working on the server-side support for 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. support flags.
  • Upgrading some libs (ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/., lodash)
  • I’m planning to focus more deeply on the “Editor controlling APIs”
  • I’ll probably spend some time on the forums to check 5.5 feedback and issues.

@aristath

  • This week I’ve been working on prep work regarding block styles and FSE/Global-Styles: Removing hardcoded colors from block-styles, separating editor & front-facing styles, converting absolute units to relative etc.

@ntsekouras

@zieladam

@mapk

  • Accordion block. I’ll have some style variations up this week.
  • Topbar labels for icons with @tellthemachines.
  • New icons for Post blocks.
  • WidgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user.-block editor designs (Figma file).

@annezazu

@joen

  • Catching up and reviewing. Always happy to review.

@mcsf

  • Helped @ntsekouras land his changing of Embed blocks to block variations.
  • Been reviewing PRs such as refactors or Global Styles-related items.
  • Triaging issues.
  • Team support.

@shaunandrews

@sageshilling

@q

  • Focus on experiments on evolving the Editor UI.
  • Taking a deep look into wordpress/components, and seeing how it can be improved to address many pain-points + missing features we have today, and setting up the UIUI User interface layer for success for the future. One of the many drivers for this is my involvement in improving editor Design Tools, which relies very heavily on the UI layer. I’ve started sharing some of these updates with folks via Zoom sessions, 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/ posts, and most recently, a dedicated blogblog (versus network, site) (published yesterday) https://g2components.wordpress.com/
  • I’m planning on hosting another collab Zoom session today.

@noahtallen

  • Working on moving Global Styles forward and how that looks/feels within the editor (will be getting these into an issue soon) [Full Site Editing]
  • Moving the first iteration of Multi-Entity Saving forward with engineering [Full Site Editing]

Comment by @paaljoachim

  • Let’s be sure that any Full Site Editing UI adjustments are also reflected back to the regular Gutenberg content creation where it is applicable to do so.

Open Floor

From the agenda post.
@zebulan brings focus to the work done by @aristath on the usage of relative units (rem, em) in relation to block styles in themes and removing hardcoded colors. PRs.
https://github.com/WordPress/gutenberg/pulls/aristath

@psykro
Getting workshops up on learn.wordpress.org. One of the workshops is a beginners guide to block development, following by a group discussion. It would be helpful to have Gutenberg developers present. We need feedback. The group discussion details (including date and time) are on the meetupMeetup All local/regional gatherings that are officially a part of the WordPress world but are not WordCamps are organized through https://www.meetup.com/. A meetup is typically a chance for local WordPress users to get together and share new ideas and seek help from one another. Searching for ‘WordPress’ on meetup.com will help you find options in your area. event – https://www.meetup.com/learn-wordpress-discussions/events/272503390, the actual workshop you can watch any time on learn.wordpress.org.

@aristath
Supporting prefers-color-scheme queries.
Gutenberg has no option to set a Dark scheme in relation to user preference and a11yAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). (https://en.wikipedia.org/wiki/Accessibility) issues. Discussion: prefers-color-scheme media-query
@paaljoachim
Check the experimental design tools by @q as color schemes is one of the areas he is experimenting with.

@mkaz
“Remove Embeds for Facebook and Instagram”
https://github.com/WordPress/gutenberg/pull/24472
Basically Facebook is changing the FB and Instagram embeds on Oct 24, so older embeds will no longer work. So at what point should we remove from WP?
@paaljoachim
Brought up the above issue during the CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. Dev chat in the #core channel on 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/.. Link to discussion: https://wordpress.slack.com/archives/C02RQBWTW/p1597265852021400

@itsjusteileen
Andrei are there notes or follow up on the Nav meetings?
@andraganescu
Not yet.
@itsjusteileen
The idea being theme authors need to look at building progressive enhancements, and keeping up with this feature even if it is exploratory would have benefit to FSE and communicating with the theme team. I can take a look at today’s meeting then and go from there.
@paaljoachim
Back scroll link to Navigation meeting held in #core channel on Slack.

#core-editor, #core-editor-summary, #gutenberg

Lara Schenck 2:26 pm on August 13, 2020
Tags: ,   

CSS Chat Agenda: 13 August 2020

This is the agenda for the upcoming CSSCSS Cascading Style Sheets. meeting scheduled for Thursday, August 13, 2020, 5:00 PM EDT.

This meeting will be held in the #core-css 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/..

If there’s any topic you’d like to discuss, please leave a comment below!

  • Housekeeping
    • CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. CSS triagetriage The act of evaluating and sorting bug reports, in order to decide priority, severity, and other factors.?
  • Updates
    • CSS Audit
    • Color Scheming
  • Open Floor + CSS Link Share

#agenda, #core-css

Lara Schenck 8:53 pm on August 12, 2020
Tags: ,   

CSS Chat Summary: 6 August 2020

Full meeting transcript on Slack: https://wordpress.slack.com/archives/CQ7V4966Q/p1596747640462000

I (@notlaura) facilitated the meeting.

Housekeeping

How can we help new meeting attendees get up to speed on initiatives?

We discussed that adding a note to the top of the agendas with the ticketticket Created for both bug reports and feature development on the bug tracker. links will be helpful, and in the future, we can makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). improvements to the CSS Coding Standards page in the handbook.

Structure for meeting agendas

This was a check-in to see if the current meeting structure was still working for everyone, and general response was yes, though we should ensure there is enough time for open floor each meeting.

CSSCSS Cascading Style Sheets. Audit Updates

We updated the location of the doc to (though there are some permissions with this one currently): https://docs.google.com/document/d/1S21GAVYLO9unCG8a16tqlZleB9UeMqEqYeX1MLNduHA/

@tellthemachines looked into the history of coding standards and stylelint, and found the CSS Coding Standards in the handbook (same as above reference) and the stylelint configuration which is only used in GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ at the moment. She suggested that, once this piece is finished, we post a summary of the results and outline next steps, and perhaps take it to the dev chat for more visibility. Exciting!

Color Scheming Updates

I made a very quick visualization of the top 50 colors and counts based on the data from @ryelle‘s CSS Audit tool which can be viewed here. I also checked with the design channel about what they reference for color values, and that can be a few places:

  1. What is directly used in coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.
  2. This color palette in the handbook (which is what @melchoyce uses for core designs)
  3. This color proposal from @davewhitley
  4. And the Gutenberg colors, which are a bit different

I mentioned the possibility of programmatically comparing the colors from the audit with a list of approved colors and very fittingly, @ryelle started on something along those lines! Based on this CodePen of the colors from the Handbook, @ryelle has a wonderful start at grouping and comparing colors in core against these colors. Check out the comparisons here!

We discussed the possibilities of automating the replacement of colors in a certain categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. with “approved” colors, and that it would be challenging given some blurry lines in the categorization and ensuring appropriate contrast.

CSS Link Share

@kburgoine shared a couple of amazing CodePens – this one animation, and this one a painting in CSS! And @tellthemachines posted a link to a talk by the artist / programmer who created the painting.

I shared a link about a potential option for grid-template-rows: masonry; that could be coming in CSS.

#core-css, #summary

Jake Spurlock 5:43 pm on August 12, 2020  

Core Dev Chat Agenda, August 12, 2020

Here is the agenda for the weekly meeting happening later today: August 12th, 2020 13:00 PDT.

Highlighted/Need Feedback Blogblog (versus network, site) Posts

Discussion

  • Recent ReleaseRelease A release is the distribution of the final version of an application. A software release may be either public or private and generally constitutes the initial or new generation of a new or upgraded application. A release is preceded by the distribution of alpha and then beta versions of the software.
    • WordPress 5.5 reflection
    • WordPress 5.5.1 release scheduling
  • 5.6 Alpha

Components check-in and status updates

  • News from components
  • Components that need help/Orphaned components
  • Cross-component collaboration

Open Floor

Got something to propose for the agenda, or a specific item relevant to our standard list 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.

Jonny Harris 11:40 am on August 11, 2020
Tags: , cache,   

Introduce wp_cache_get_multiple() in WordPress Core

Many object caching backends, such as Memcached and Redis support getting multiple values in a single request. Fetching multiple values in one request often results in much faster performance, as it means less requests on an external object cache. However WordPress coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. only supported getting one cache value at a time with the wp_cache_get() function. In WordPress 5.5 a new function was added called wp_cache_get_multiple() with the capability to get multiple cache keys in a single request. The function wp_cache_get_multiple() accepts an array of keys and fetches multiple cache values from the same group.

There are some existing plugins like Advanced Post Cache, Memcached Redux or Redis Object Cache that have already implemented a function called wp_cache_get_multi() that serves a similar purpose to wp_cache_get_multiple(). However this function had a different signature to wp_cache_get_multiple(), as it is allowed an array of keys and groups to be passed, allowing for any cache key to be fetched. To avoid conflicts with numerous plugins that implement the wp_cache_get_multi() function, it was decided to change the name of the function to wp_cache_get_multiple() to stop PHPPHP The web scripting language in which WordPress is primarily architected. WordPress requires PHP 5.6.20 errors and developer confusion.

To start using wp_cache_get_multiple(), creators and maintainers of object caching plugins ( drop-ins ), will need to implement this new function. For plugins that are yet to implement this new function, core will detect that the wp_cache_get_multiple() function does not exist. If it does not exist, then adds a compatibility shim to add the wp_cache_get_multiple() function that simply calls wp_cache_get() internally.

Along with adding this new function, WordPress core has implemented it in the following places.

  • update_object_term_cache()
  • update_meta_cache()
  • _get_non_cached_ids()

See implementation Core 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.: #50352

See full details of the eight year journey to getting this ticket into core can be found in Core Trac #20875.

Props to justinahinon and sergeybiryukov for proofreading.

#5-5, #cache, #dev-notes

Paal Joachim Romdahl 7:57 pm on August 10, 2020
Tags: , ,   

Editor Chat Agenda: 12 August, 2020

Facilitator and notetaker @paaljoachim.

This is the agenda for the weekly editor chat scheduled for 2020-08-12 14:00 UTC.

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

Even if you can’t makemake A collection of P2 blogs at make.wordpress.org, which are the home to a number of contributor groups, including core development (make/core, formerly "wpdevel"), the UI working group (make/ui), translators (make/polyglots), the theme reviewers (make/themes), resources for plugin authors (make/plugins), and the accessibility working group (make/accessibility). the meeting, you’re encouraged to share anything relevant for the discussion:

  • 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

Justin Ahinon 6:30 pm on August 7, 2020
Tags: , , ,   

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