The WordPress coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. development team builds WordPress! Follow this site forย general updates, status reports, and the occasional code debate. Thereโs lots of ways to contribute:
Found a bugbugA 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.?Create a ticket in the bug tracker.
WordPress 5.5 introduced several improvements in the accessibilityAccessibilityAccessibility (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 technologyAssistive 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 TracTracAn open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.ticketticketCreated 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.
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.
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 accessibilityAccessibilityAccessibility (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 blockBlockBlock 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.
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:ย
Implement roving tabindex on the HeaderHeaderThe 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. Toolbar.ย
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 coreCoreCore 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 GutenbergGutenbergThe 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/.
Before WordPress 5.5, it was possible to rearrange widgets on the Dashboard and metaboxes on post editing pages (with GutenbergGutenbergThe 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 accessibilityAccessibilityAccessibility (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 boxesWordPress 5.5 added โupโ and โdownโ controls to reorder boxes easily with mouse, touch screens and keyboardReordering 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 pluginPluginA 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 โheaderHeaderThe 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 CSSCSSCascading Style Sheets. hide the header and the handlediv button of some metaboxes using display: none. No feature is broken and the metaboxMetaboxA 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 ticketticketCreated for both bug reports and feature development on the bug tracker. on TracTracAn open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.: #39074.
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 betaBetaA 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 CSSCSSCascading Style Sheets. declarations for disabled buttons:
Those above CSS declarations are used both in the WordPress CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. dashboard and the blockBlockBlock 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:
PluginPluginA 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 UIUIUser interface styles instead.
Disabled state of buttons can be easily targeted in CSS, for example by using the following selectors:
For reference, see the related TracTracAn open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.ticketticketCreated for both bug reports and feature development on the bug tracker.: #48709.
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 CoreCoreCore 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 widgetWidgetA 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 CSSCSSCascading 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 accessibilityAccessibilityAccessibility (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 MenuA 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
MetaMetaMeta 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'
)
);
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.
Support for HTML5 navigation-widgets feature can be forced on a site by using the new navigation_widgets_formatfilterFilterFilters 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 TracTracAn open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress.ticketticketCreated for both bug reports and feature development on the bug tracker.: #48170.
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 blockBlockBlock 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/pluginPluginA 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 useShortcutReactReactReact 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
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 bugbugA 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.3On 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 CSSCSSCascading Style Sheets. issue.
Please note this change also introduces some hardcoded colors for both gray borders and texts. PluginPluginA 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 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 TracTracAn open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets: #48585 and #48598.
In WordPress 5.3, Twenty Twenty new bundled theme added smooth scroll animations to anchor links. These animations were handled by native JavaScriptJavaScriptJavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a userโs browser. https://www.javascript.com/. and it caused several issues, mentioned in the following TracTracAn open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets and GitHubGitHubGitHub is a website that offers online implementation of git repositories that 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 by the repository owner. https://github.com/ issues:
#48551 โ Twenty Twenty: Replace JSJSJavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.-based smooth scroll with CSSCSSCascading Style Sheets.
#48866 โ TwentyTwenty: Paginated comments donโt work
Additionally to the multiple issues listed in the above tickets, JavaScript-based scroll animations add a bunch of relatively complex JS code, override natural anchor behavior and may interfere with how specific user agents handle in-page scrolling.
In WordPress 5.3.1, the current smooth scroll JavaScript implementation will be replaced withย โscroll-behaviorโย CSS property.
This change fixes the issues encountered with the current JavaScript implementation, and also includes an accessibilityAccessibilityAccessibility (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)enhancementenhancementEnhancements are simple improvements to WordPress, such as the addition of a hook, a new feature, or an improvement to an existing feature. by usingย prefers-reduced-motion: reduceย media query property for users that have opted in to reduced motion in their browser settings.
Browsers that donโt support scroll-behavior CSS property will fallback to default HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. anchor behavior. For reference, see full browsers support for this CSS property on MDN.
New CSS scroll animation implementation in Twenty Twenty:
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
Developers are able to remove scroll-behavior effect on specific elements by using a class CSS selector, as follows:
WordPress 5.3 will introduce a number of CSSCSSCascading Style Sheets. changes in WordPress adminadmin(and super admin). While the necessity to improve wp-admin accessibilityAccessibilityAccessibility (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) was previously raised in several TracTracAn open source project by Edgewall Software that serves as a bug tracker and project management tool for WordPress. tickets, GutenbergGutenbergThe 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/โs recent interface improvements made it necessary to improve the whole interface as well.
Background: in April 2019, WP-Campus conducted an accessibility audit of the new editor interface, made by an independent contractor, Tenon LLC. This audit raised issues in the editor but also in the media modal, which uses wp-admin styles. Fixing these issues on Gutenberg and on the media modal but not in the whole wp-admin interface would have been very inconsistent.
Some tickets were milestoned to the 5.3 release cycle to start backporting Gutenberg accessibility improvements to the whole admin interface. These first tickets aim to improve:
Color contrasts on form fields and buttons
Focus styles on form fields and buttons
Content behavior on text zoom
Backporting some of Gutenbergโs styles to fix these issues introduced some visual issues with the interface elements hierarchy. Therefore, Design and Accessibility teams worked on the overall visual hierarchy:
darker tables and metaboxes borders were introduced for a better hierarchy between interface elements
Note for pluginPluginA 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
These changes are only CSS changes, and not structural changes, so the HTMLHTMLHyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. markup is exactly the same as before, with the same class attributes on each element.
In short, your styles should align with these changes if interface elements are not overridden by custom CSS. If you are overriding WordPress Admin CSS on form elements, you should test your plugins or your custom developments against WordPress 5.3 RCrelease candidateOne 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.
If you are a plugin author, there are different use cases:
Plugins that are using default Admin CSS styles should work just like before.
Plugins that are using custom Admin CSS styles by overriding default Admin CSS should be checked against 5.3.
Plugins that are using fully customized Admin CSS styles should not be concerned by those changes.
In general, plugin authors and WordPress developers are encouraged to:
remove any fixed heights: flexible heights are the WordPress recommended standard (and one of the main goals of the Admin CSS changes).
remove any custom top and bottom padding values.
remove any custom line-height values.
update their CSS code to override new focus/hover buttons colors if they use custom colors on this type of element.
In the next section of this dev notedev noteEach 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, and 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., youโll find some noteworthy CSS changes coming in WordPress 5.3.
Main things that are changing in 5.3:
Forms fields:ย
text inputs
textareas
selects
checkboxes
radiobuttons
both primary and secondary buttons
colorpickers
Tables, notifications and metaboxes
Known issues
Available for testing in WordPress 5.3 RC 1, these changes have been tested in various use cases and no breakage situation was identified during the tests. Please check the report for full information about the testing panel.
This is a work in progress, just like anything in WordPress CoreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress.. These usability improvements were implemented during summer 2019 then tested and iterated on September and October. After 5.3 is released, the idea is to iterate on wp-admin design to make it fully consistent with the editor interface, and to provide a great and accessible editorial experience for websites administrators. The next minor releases will fix small issues with 5.3 changes and the next majors will improve the consistency of user experiences between Gutenberg and WordPress administration.
New style for primary buttonNew style for focused primary buttonNew style for secondary buttonLegacy style for focused secondary button
Darker borders on tables, notices, metaboxes and other similar elements
These changes introduce better contrast for borders for the following user interface elements:
Tables
Screen Options and Help
Admin notices
Welcome panel
MetaMetaMeta 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. boxes (post boxes on classic editor or in edit attachment screens)
Cards
Health Check accordions and headings
Theme and Plugin upload forms
Legacy CSS code:
Depending on the related element, several CSS declarations were used.
In September 2019, the WordPress AccessibilityAccessibilityAccessibility (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) team tested WP 5.3 Adminadmin(and super admin)CSSCSSCascading Style Sheets. changes against the Top 20 plugins on WordPress.org, to evaluate possible breakage on plugins admin screens and to iterate on the related changes.
This week, those tests were reproduced against 5.3-beta3-46471. This post is a report illustrated with screenshots of relevant admin screens for each pluginPluginA 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..
The idea was to test Admin CSS changes against various use cases to see what could happen and to fix as many found bugs as possible. Of course, not every use cases are covered in 20 plugins, but the Accessibility team assumes it will provide a general view on the robustness of the changes coming in WP 5.3.
A dev notedev noteEach 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, and 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. will quickly follow this post, to communicate on all the CSS changes coming in WP 5.3 admin screens to plugin authors and WordPress developers.
To sum up, some plugins which use custom CSS that override WordPress Admin default CSS rules on form controls may have few minor visual glitches. Most notably: the input fields can be taller than before WP 5.3. Thereโs no breakage as the input fields are fully operable, but plugin authors and WordPress developers are encouraged to:
remove any fixed heights: flexible heights are the WordPress recommended standard (and one of the main goals of the Admin CSS changes)
remove any custom top and bottom padding values
remove any custom line-height values
For each plugin, screenshot are provided. You can click them to see the full media file.
Contact Form 7
This plugin uses default coreCoreCore is the set of software required to run WordPress. The Core Development Team builds WordPress. admin styles. No breakage found.
Yoast
This plugin uses both custom styles and default core admin styles. No breakage found. One input and one button are too close to each other in the search appearance page. Looks to be due to incorrect use of margins.
Akismet
This plugin uses both custom styles and default core admin styles. No breakage found.
Classic Editor
This plugin uses default core admin styles. No breakage found.
Jetpack
This plugin uses custom styles. No change found on the screens audited. Further exploration could be needed on specific admin screens. Edit: Jetpack team is already working on some small CSS changes in a dedicated pull request. Worth a read to see how plugins could handle Admin CSS changes.
WooCommerce
This plugin uses both custom and default admin styles. Two misaligned labels were found in the installation screen. Some inputs have large vertical paddings/heights. No breakage found.
Note: WooCommerce team already worked on Admin CSS changes in a dedicated pull request. An interesting read to see how plugins could handle Admin CSS changes.
WordPress Importer
This plugin uses default admin styles. No breakage found.
Really Simple SSLSSLSecure Sockets Layer. Provides a secure means of sending data over the internet. Used for authenticated and private actions.
This plugin uses both custom and default admin styles. No breakage found.
Elementor Page Builder
This plugin uses both custom and default admin styles. Small misalignment in one (screenshot 6) of the dozen pages of settings, due to fixed margins. Pretty minor though. No breakage found.
Wordfence Security
This plugin uses both custom and default admin styles. No breakage found.
Duplicate Post
This plugin uses default admin styles. No breakage found.
TinyMCE Advanced
This plugin uses both custom and default admin styles. No breakage found.
All in One SEO Pack
This plugin uses both custom and default admin styles. No breakage found.
WP Forms
This plugin uses both custom and default admin styles. No breakage found.
Google XML Sitemaps
This plugin uses default admin styles. No breakage found.
Google Analytics Dashboard Plugin for WordPress
This plugin uses custom admin styles. No breakage found but the test couldnโt handle each screen of the plugin due to the some issues with pluginโs configuration on local installs.
All-in-One WP MigrationMigrationMoving the code, database and media files for a website site from one server to another. Most typically done when changing hosting companies.
This plugin uses both custom and default admin styles. No breakage found.
UpdraftPlus Backup
This plugin uses both custom and default admin styles. No breakage found.
WP Super Cache
This plugin uses default admin styles. No breakage found.
Google Analytics Dashboard for WP
This plugin mixes custom and default admin styles. No breakage found.
Please note this report is only including Top 20 plugins from WordPress.orgWordPress.orgThe community site where WordPress code is created and shared by the users. This is where you can download the source code for WordPress core, plugins and themes as well as the central location for community conversations and organization. https://wordpress.org/, but the changes were also tested on various others plugins, such as WP-Rocket, Advanced Custom Fields, Polylangโฆ and dozens of plugins with less active installations.
You must be logged in to post a comment.