Report: WP 5.3 Admin CSS changes tested against top 20 plugins

In September 2019, the WordPress Accessibility team tested WP 5.3 Admin CSS 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 plugin.

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 note 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 core 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 SSL

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 Migration

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

#5-3, #accessibility, #testing