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

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

Francesca Marano 7:49 am on August 7, 2020
Tags:   

E2E (End-To-End) Testing in Core Proposal

What

E2E (End To End) tests are a form of automated software testing which runs in the context of a user using an application. The intention is to test the complete “end to end” workflow that a user would take in various scenarios.

In web software development this means running and controlling a web browser pointing at a web page, either fully automatically by a machine, or by a user following the test steps.

Frameworks for running E2E tests allow a web browser to be controlled fully automatically, for instance by navigating to URLs, filling out forms, and clicking on links and buttons. The tests operate by checking assertions about the expected content or behaviour of the page and triggering a test failure when they are not met.

Why

Testing individual aspects of an application’s code — for example with unit tests or integration tests — reduces the chance of low-level bugs in the code that powers an application. Unit testing helps maintain the quality of the code that powers the application.

In contrast, E2E testing tests the higher-level functionality of an application that the user sees, typically including the interface and the inputs and controls that the user interacts with.

Unit testing and E2E testing can, should, and do co-exist.

How

E2E tests are usually human-readable and provide logical steps for a user to perform. For example:

  • Given I am logged in as an Author
  • When I view the list of posts in the dashboard
  • And I see posts published by other users
  • Then I should not see an “Edit” link next to posts which are published by other users

The scenario above can potentially form a completely automated E2E test, depending on the framework in use and the built-in steps that have been defined for it. The tests are written in such a way that a human can follow the same steps and come to the same result.

This means anyone, not just a developer, can write an outline of an E2E test.

Implementing E2E tests in WordPress CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress.

WordPress Core right now has only one E2E test in place, to check that the wp-adminadmin (and super admin) page loads. 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/, on the other hand, has quite a few.

There are some tickets and pull requests open about this:
https://core.trac.wordpress.org/ticket/43395
https://core.trac.wordpress.org/ticket/49507

There is also a test environment but it is not currently being used as part of the automated test suite: https://make.wordpress.org/core/2019/08/05/wordpress-local-environment/

It would be beneficial to create a project to work on this in a structured way in order to maintain the stability and reliability of WordPress core as new features are added and changes are made.

Moving Forward

Months ago, this topic was mentioned multiple times and @pandjarov from SiteGround has offered to set up the test environment plus some engineering time to work on the tests.

We could either set up a new one or check that the existing one is still the right way forward.

To really kick things off, the Core Team has to come up with requirements for the test environment, its tests, and the preferred workflow, so the tests are really useful.

What is needed

  • A list of requirements – I think Core Committers, especially with a long history of contributing (the so-called historians) are best suited to start the list with the most pressing concerns
  • Evaluating the existing test environment (existing vs creating new)
    Ideas about what functionality in WordPress should be a priority in the automated tests, for example, the upgrade process, or managing users, or installing plugins
  • Developers who are familiar with Jest, which is the test framework in place in Gutenberg and WordPress core, so the test environment can be improved, and to write new tests
  • A fork of the wordpress-develop repo on GitHubGitHub GitHub is a website that offers online implementation of git repositories that can can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ where the project can be managed and PRs opened
  • Volunteers to work on this. It’s a big task because it starts from 0 – this is very important because what the previous post about this has shown, in my opinion, is that an environment is not enough 😉
  • Coordination with the Test team
  • For making it easier to communicate I propose to add a dedicated weekly chat in the #core-test channel – From September 6th I am available to do that.

Deadline to comment

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). sure that the project lifts off I think it needs enough interest and volunteers to actively work on it.

Please leave a comment before September 6th (so you have a month to think about it!) with the requirements and/or (possibly AND) your availability to be part of this.

annezazu 11:14 pm on August 6, 2020
Tags: , ,   

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 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. on August 11th. Going forward, the “What’s Next in Gutenberg” posts will have clearer accessibility-related callouts 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 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.

  • Screenshot showing the previous editor design.
  • Screenshot showing new design editor for 5.5
    Screenshot showing the new editor design.

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

Winstina 6:43 pm on August 6, 2020
Tags: ,   

Dev Chat Summary, August 5th, 2020

This post summarizes the weekly devchat meeting from August 5th, 2020 hosted by @whyisjake (Agenda / Slack Archive).

Recent Dev-Notes

The group didn’t discuss these, but @whyisjake added them to the announcements. Have an opinion? Add your thoughts to the comments:

Upcoming Releases

  • jQuery Migrate Status
    • @whyisjake opened the chat with a conversation about the planned changes related to jQuery Migrate in 5.5. @azaozz has published working roadmap document about it.
    • Currently, the plan is to 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 as is with the first step in the roadmap in place (disabling jQuery Migrate by default for all installs).
    • @clorith has been working on a plugin, now in development, that will re-enable jQuery Migrate and 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). any notices thrown more visible to site owners so that they can open support tickets with the appropriate pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and theme authors.

Component check-in and status updates

Open Floor

The next CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. dev chat will be held on Wednesday, August 9, 2020 @ 20:00 UTC.

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

Props @marybaum and @desrosj for review.

#5-5, #devchat