Commit Graph

19 Commits

Author SHA1 Message Date
desrosj ca7c9a8288 Site Health: Improve alignment and spacing for section headers.
This changes the CSS for Site Health headers to use flexbox, which helps ensure the text is vertically aligned center and consistently spaced in both the Status and Info tabs. It also fixes an issue where the loading spinner GIF was cut off on smaller screens (originally reported in #47203.

Props Presskopp, odminstudios, kjellr, afercia, desrosj, hedgefield, ianbelanger, xavortm.
Fixes #47063.
Built from https://develop.svn.wordpress.org/trunk@45322


git-svn-id: http://core.svn.wordpress.org/trunk@45133 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-16 18:30:53 +00:00
desrosj f48f926077 Site Health: Improve vertical alignment of icons in test result descriptions.
This change removes redundant CSS properties for different health check statuses in favor of utilizing the `.dashicons` class already in Core to define them more consistently. This also fixes the vertical alignment issues.

Props chetan200891, Clorith, desrosj.
Fixes #46940.
Built from https://develop.svn.wordpress.org/trunk@45309


git-svn-id: http://core.svn.wordpress.org/trunk@45120 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-15 14:26:07 +00:00
Andrea Fercia d89a302503 Site Health: Improve the accordions styles for small screens.
Also, changes the hex color values to lowercase.

Props subrataemfluence, man4toman, garrett-eclipse, chetan200891, mukesh27, melchoyce, karmatosed, Clorith.
Fixes #46949.

Built from https://develop.svn.wordpress.org/trunk@45229


git-svn-id: http://core.svn.wordpress.org/trunk@45038 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-17 11:00:53 +00:00
Andrea Fercia fc7a8f7194 Administration: Improve the Site Health "Passed tests" button style for small screens.
Props chetan200891.
Fixes #46939.

Built from https://develop.svn.wordpress.org/trunk@45217


git-svn-id: http://core.svn.wordpress.org/trunk@45026 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-16 16:23:52 +00:00
Mel Choyce df276c333a Administration: Update chevron color in Site Health.
Props afercia.
Fixes #46934. See #46730.

Built from https://develop.svn.wordpress.org/trunk@45202


git-svn-id: http://core.svn.wordpress.org/trunk@45011 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-15 18:56:54 +00:00
Andrea Fercia 10239ba45d Administration: Add a chevron icon to the Site Health "Passed tests" button.
The chevron icon helps clarify what the button does.

Props garrett-eclipse, Clorith, xkon, melchoyce.
Fixes #46730.

Built from https://develop.svn.wordpress.org/trunk@45201


git-svn-id: http://core.svn.wordpress.org/trunk@45010 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-15 18:01:53 +00:00
Andrew Ozz 30ccfd540f Site health: Load the "Info" tab immediately and notify the user while gathering site data. Changes the Info tab to work similarly to the Status tab: it does separate request to fetch the directories sizes and doesn't "block" the loading of the page.
Props xkon, afercia, Clorith, azaozz.
See #46707.
Built from https://develop.svn.wordpress.org/trunk@45176


git-svn-id: http://core.svn.wordpress.org/trunk@44985 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-12 19:24:51 +00:00
desrosj 6afe73667c Site Health: Add missing actions to tests.
This change adds missing actions for several tests. This ensures that the user is provided with a next step, whenever possible.

Also, change the URL displayed in the WordPress.org communication test description to `api.wordpress.org` for accuracy.

Props: garrett-eclipse, Clorith, vaishalipanchal.
Fixes #46734.
Built from https://develop.svn.wordpress.org/trunk@45170


git-svn-id: http://core.svn.wordpress.org/trunk@44979 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-12 17:40:53 +00:00
desrosj 5bafb4ea2d Site Health: Improve the test badge implementation.
Label badges for each Site Health test currently display in either red, orange, or green, regardless of if the test passed or failed. This is confusing, as seeing red labels in the “Passed Test” section could alarm users (when really everything is OK and no action is required), and seeing green labels in the “Failed Tests” section would not appropriately encourage the user to take appropriate action.

This change makes several improvements to the label badges:

- Always right align the badges for consistent display.
- Remove background fill for badges. Instead, use a border.
- Use a consistent styling for all tests (passed and failed).
- The text color no longer uses true black (#000000).
- The `.badge.pink` CSS definition has been switched to `.badge.purple`, and the definitions for blue, gray, and green have also been updated to more closely follow the official WordPress color palette.

Props: pbiron, garrett-eclipse, hedgefield, Clorith, xkon, melchoyce, mdwolinski, alexdenning.
Fixes #46623.
Built from https://develop.svn.wordpress.org/trunk@45169


git-svn-id: http://core.svn.wordpress.org/trunk@44978 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-12 17:04:52 +00:00
Gary Pendergast 5b8db48734 Site Health: Remove animated ellipsis from the status loading indicator.
This animation wasn't particularly reliable across browsers.

Props Clorith, afercia.
Fixes #46684.


Built from https://develop.svn.wordpress.org/trunk@45145


git-svn-id: http://core.svn.wordpress.org/trunk@44954 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-08 23:29:51 +00:00
Sergey Biryukov 7eecc96e2d CSS Coding Standards: Use unitless values for `line-height` in `wp-admin/css/site-health.css`.
Props mukesh27, ianbelanger, pbiron, afercia.
Fixes #46760. See #44643.
Built from https://develop.svn.wordpress.org/trunk@45128


git-svn-id: http://core.svn.wordpress.org/trunk@44937 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-07 05:44:50 +00:00
Andrea Fercia 83546a04f5 Administration: Site Health: reserve some space for the admin notices.
Props xkon, Clorith, hedgefield, mapk, karmatosed, afercia.
Fixes #46651.

Built from https://develop.svn.wordpress.org/trunk@45091


git-svn-id: http://core.svn.wordpress.org/trunk@44900 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-01 18:01:52 +00:00
Andrea Fercia d8b8994336 Accessibility: Improve the Site Health accordions.
- removes the definition list and uses the markup from the ARIA Authoring Practices example
- removes incorrect ARIA roles
- avoids ARIA landmark regions proliferation

Props mukesh27 for the initial patch.
Fixes #46714.

Built from https://develop.svn.wordpress.org/trunk@45087


git-svn-id: http://core.svn.wordpress.org/trunk@44896 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-04-01 15:08:58 +00:00
Andrea Fercia fdda9ca9dd Coding Standards: Improve the Site Health CSS for small screens.
Amends #45071.
See #46685.

Built from https://develop.svn.wordpress.org/trunk@45074


git-svn-id: http://core.svn.wordpress.org/trunk@44883 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-30 14:09:51 +00:00
Andrea Fercia 0942dfc6d4 Administration: Improve the CSS for the Site Health pages header.
Avoids the Site Health pages header layout to break when the Hello Dolly plugin or other floated content is printed out at the top of the page.

Props xkon.
Fixes #46650.

Built from https://develop.svn.wordpress.org/trunk@45072


git-svn-id: http://core.svn.wordpress.org/trunk@44881 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-29 18:55:50 +00:00
Andrea Fercia 2a99454732 Coding Standards: Clean up the Site Health stylesheet.
- reduces selectors specificity to avoid over-qualified selectors
- removes unused rulesets / properties
- renames some CSS classes

Fixes #46685.

Built from https://develop.svn.wordpress.org/trunk@45071


git-svn-id: http://core.svn.wordpress.org/trunk@44880 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-29 18:44:51 +00:00
Gary Pendergast 65f7cdbce0 Site Health: Improve the "Copy to clipboard" button.
The previous method for copying the debug report to the clipboard involved having a hidden `<textarea>`, but this shows up in screen readers and can't be reliably hidden.

To work around this, the button now uses the `clipboard.js` library, which automatically handles browser differences in the Clipboard API, and can load the text to copy from a `data-` attribute on the button.

Props pento, hedgefield, afercia.
Fixes #46647.


Built from https://develop.svn.wordpress.org/trunk@45044


git-svn-id: http://core.svn.wordpress.org/trunk@44853 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-27 22:31:52 +00:00
Andrea Fercia 9b15549b1c Accessibility: Simplify the Site Health score indicator.
The Site Health score indicator isn't exactly a "progress bar" and shouldn't use ARIA roles and properties related to progress bars. Also, some browser / screen reader combinations don't announce the score properly.
- removes any ARIA
- adds a screen-reader-text "Current health score:"
- adds `role="img" aria-hidden="true" focusable="false"` to the SVG
- reduces CSS specificity simplifying unnecessary overqualified selectors
- fixes the syntax for ::after and ::before (double colon)

Fixes #46621.

Built from https://develop.svn.wordpress.org/trunk@45041


git-svn-id: http://core.svn.wordpress.org/trunk@44850 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-27 20:39:51 +00:00
Gary Pendergast 0a9d61ab63 Admin: Introduce the Site Health screens.
The Site Health tool serves two purposes:
- Provide site owners with information to improve the performance, reliability, and security of their site.
- Collect comprehensive debug information about the site.

By encouraging site owners to maintain their site and adhere to modern best practices, we ultimately improve the software hygeine of both the WordPress ecosystem, and the open internet as a whole.

Props Clorith, hedgefield, melchoyce, xkon, karmatosed, jordesign, earnjam, ianbelanger, wpscholar, desrosj, pedromendonca, peterbooker, jcastaneda, garyj, soean, pento, timothyblynjacobs, zodiac1978, dgroddick, garrett-eclipse, netweb, tobifjellner, pixolin, afercia, joedolson, birgire.
See #46573.

Built from https://develop.svn.wordpress.org/trunk@44986


git-svn-id: http://core.svn.wordpress.org/trunk@44817 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-03-23 03:55:53 +00:00