Commit Graph

41 Commits

Author SHA1 Message Date
audrasjb
08d046c717 General: Ensure admin notices are properly displayed on Site Health layout.
This changeset adds some CSS tweaks to ensure admin notices like the "Automated update failed" notice don't break the layout of the Site Health and Privacy Settings screens.

Props johnjamesjacoby, costdev, Clorith, audrasjb, SergeyBiryukov, joedolson.
Fixes #54624.


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


git-svn-id: http://core.svn.wordpress.org/trunk@53779 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-19 21:51:11 +00:00
Clorith
e68db2692f Site Health: Adjust margins for the Site Health dashboard widget.
This aligns the spacing within the widget with other core widgets, and removes an unintended margin which was pushing the indicator slightly above the centered position it was intended to have.

Props sabernhardt, costdev, mukesh27.
Fixes #56369.
Built from https://develop.svn.wordpress.org/trunk@54197


git-svn-id: http://core.svn.wordpress.org/trunk@53756 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2022-09-18 01:29:09 +00:00
Clorith
500da91f70 Site Health: Update the icon used when no issues are reported.
The icon used to be a rather blocky checkmark, but has now been changed to the more friendly, and less ambiguous, smiley dashicon.

It also helps cover a rare cases where a checkmark, while often used to mark something as done, may also be used to indicate that something is incorrect (many thanks to my 6th grade teacher for this rationale).

As an added bonus, this commit also adjusts the margins used around the icon, to make it fit more nicely on both large and small viewports.

Props sabernhardt, generosus.
Fixes #53980.
Built from https://develop.svn.wordpress.org/trunk@52018


git-svn-id: http://core.svn.wordpress.org/trunk@51610 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-11-05 11:41:01 +00:00
ryelle
c11fbdc7ae Coding Standards: Apply coding standards on CSS.
Remove units when the value is zero. Combine redundant values in shorthand declarations.
This was generated with `stylelint --fix` and a custom config (see #53866).

Props ankitmaru, audrasjb, pbiron, ayeshrajans, hareesh-pillai, netweb, mukesh27.
Fixes #53866.


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


git-svn-id: http://core.svn.wordpress.org/trunk@51333 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-09-02 22:18:00 +00:00
Clorith
c26143ea2e Site Health: Add a unique wrapper for dashboard widget content.
This wraps the inner-content of the Site Health dashboard widget to give a unique target for CSS selectors, restoring the ability to collapse the widget.

The initial implementation targeted the `.inside` class used by all widgets to apply styling to the widget content, but this prevented the widget from being collapsed, as it added grid-styles which other widgets do not use, overriding the usual behavior when toggling widget visibility.

Follow-up to [50833].

Props alanjacobmathew, walbo.
Fixes #53521.
Built from https://develop.svn.wordpress.org/trunk@51247


git-svn-id: http://core.svn.wordpress.org/trunk@50856 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-06-27 15:56:58 +00:00
ryelle
6e4b41c848 Site Health, Privacy: Combine shared CSS for Site Health & Privacy Settings
The styles for the Privacy settings page were based on the Site Health section. These were duplicated into `edit.css` in #49264. This change merges the selectors from Site Health into the Privacy section, to reduce that duplicate code.

Props xkon, notlaura, clorith.
See #52429.


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


git-svn-id: http://core.svn.wordpress.org/trunk@50634 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-05-26 01:53:57 +00:00
Clorith
d55ae83ddc Site Health: Remove status text indentation.
This removes the left-side margin from the status text in the Site Health dashboard widget, which caused the text to be slightly indented, and not centered under the status indicator circle.

Follow-up to [50833].

See #52966.
Built from https://develop.svn.wordpress.org/trunk@50845


git-svn-id: http://core.svn.wordpress.org/trunk@50454 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-05-12 14:21:01 +00:00
Sergey Biryukov
c8e4bb5d70 Site Health: Improve the appearance of Site Health Status dashboard widget.
This better utilizes the available screen space on wider screens.

Props mblach, hedgefield, Clorith.
Fixes #52966.
Built from https://develop.svn.wordpress.org/trunk@50833


git-svn-id: http://core.svn.wordpress.org/trunk@50442 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-05-10 14:56:00 +00:00
desrosj
64b4c21c1f Build/Test Tools: Remove Internet Explorer 11 from the browserslist.
This officially removes support for Internet Explorer 11 in the CSS files run through the build process in Core.

Individual tickets should be opened for removing each manually maintained area of the code base targeting IE11.

The resulting changes to CSS files are included in this commit.

Fixes #53077.
Built from https://develop.svn.wordpress.org/trunk@50784


git-svn-id: http://core.svn.wordpress.org/trunk@50393 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-04-22 22:58:05 +00:00
Clorith
eea98a5426 Site Health: Support custom sub-menus and pages.
Allow developers to extend the Site Health screen with their own custom navigation tabs and pages.

This implements a new filter, `site_health_navigation_tabs`, which takes an associated array of tab identifiers/slugs, and tab labels, allowing developers to add their own subpage to the Site Health interface as new tabs.

To output a custom page, or add to an existing page, the `site_health_tab_content` action is triggered whenever the `tab` query argument is present and not empty. This action includes the current tab as its argument, which a developer would match against to only output content when relevant.

Props ramiy for initial patch.
Fixes #47225.
Built from https://develop.svn.wordpress.org/trunk@50764


git-svn-id: http://core.svn.wordpress.org/trunk@50373 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-04-17 01:14:01 +00:00
ryelle
10d1280ff3 Administration: Update color contrast on UI elements.
The color palette changes in #49999 introduced some contrast issues on buttons, input elements, and links. This change ensures that all interactive elements have an appropriate contrast ratio.

Follow-up to [50025].
Props audrasjb, joedolson.
Fixes #52402.


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


git-svn-id: http://core.svn.wordpress.org/trunk@49923 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-02-09 19:47:03 +00:00
ryelle
fed21a9863 Administration: Standardize colors used in CSS to a single palette.
This is part of a larger project in cleaning up core's admin CSS. This collapses all colors used in the CSS to one of 12 blues, greens, reds, and yellows, 13 grays, pure black, and pure white. The colors are perceptually uniform from light to dark, half of each range has a 4.5 or higher contrast against white, the other half has a 4.5 or higher contrast against black.

Standardizing on this set of colors will help contributors make consistent, accessible design decisions. The full color palette can be seen here: https://codepen.io/ryelle/full/WNGVEjw

Props notlaura, danfarrow, kburgoine, drw158, audrasjb, Joen, hedgefield, ibdz, melchoyce.
See #49999.


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


git-svn-id: http://core.svn.wordpress.org/trunk@49726 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-01-26 18:54:59 +00:00
desrosj
3eb9b3e714 Build/Test Tools: Update CSS files after grunt precommit:css.
This removes instances of the `-moz-user-select` property, which was required until Firefox 68.

Firefox is currently in version 84, so these can safely be removed.

Fixes #52332.
Built from https://develop.svn.wordpress.org/trunk@49991


git-svn-id: http://core.svn.wordpress.org/trunk@49692 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2021-01-20 19:07:00 +00:00
desrosj
b2622d5d8c Site Health: Use consistent padding around header tags.
Props vinita29, clorith.
Fixes #50638.
Built from https://develop.svn.wordpress.org/trunk@49229


git-svn-id: http://core.svn.wordpress.org/trunk@48991 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-10-20 14:18:08 +00:00
Andrea Fercia
7a785704c0 Accessibility: Site Health: Improve the "Copy site info" button accessibility.
- avoids a focus loss when clicking the "Copy site info" button
- uses `setTimeout()` and `clearTimeout()` to properly handle the "Copied!" text
- minor JavaScript coding standards

Props audrasjb, Clorith, afercia.
See #48463, #50335.
Fixes #50322.

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


git-svn-id: http://core.svn.wordpress.org/trunk@48002 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-30 13:26:03 +00:00
Sergey Biryukov
dee326a5e4 Accessibility: Site Health: Make the heading text for site health check issues easier to select in Firefox.
Props afercia, sabernhardt, johnbillion, Clorith, audrasjb.
Fixes #50281.
Built from https://develop.svn.wordpress.org/trunk@48144


git-svn-id: http://core.svn.wordpress.org/trunk@47913 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-06-23 20:48:10 +00:00
Sergey Biryukov
c32e05f308 Site Health: Improve focus style for accordion items on Site Health screens.
The new style is more consistent with other elements like `.wp-core-ui` buttons.

Props audrasjb, mensmaximus, afercia, melchoyce, Clorith.
Fixes #48578.
Built from https://develop.svn.wordpress.org/trunk@47188


git-svn-id: http://core.svn.wordpress.org/trunk@46988 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-02-05 06:43:04 +00:00
Sergey Biryukov
d3d630c98a Site Health: Make sure the "Copied!" text is vertically centered to the "Copy site info to clipboard" button.
Props garrett-eclipse.
Fixes #49139.
Built from https://develop.svn.wordpress.org/trunk@47047


git-svn-id: http://core.svn.wordpress.org/trunk@46847 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2020-01-07 00:09:04 +00:00
Andrea Fercia
271f45072d Accessibility: Improve and modernize user interface controls for better contrast. Second part: tables, meta boxes, and other user interface elements.
Introduces better contrast for borders of the following user interface elements:
- Tables
- Screen Options and Help 
- Admin notices
- Welcome panel
- Meta boxes (post boxes)
- Cards
- Health Check accordions and headings
- Theme and Plugin upload forms

Props kjellr, melchoyce, karmatosed, audrasjb.
Fixes #48101.

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


git-svn-id: http://core.svn.wordpress.org/trunk@46054 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-23 15:10:59 +00:00
Sergey Biryukov
42079f34a9 Site Health: Modify the grading indicator to remove percentage score in favor of a "Good" or "Should be improved" status.
This removes arbitrary confusion about what the numbers mean.

Props Clorith, hedgefield, Cybr, arena, DavidAnderson, earnjam, daveshine, Otto42, azaozz, asadkn, KARTHOST, tigertech, maximejobin, johnbillion, raboodesign, ramiy, afragen.
Fixes #47046.
Built from https://develop.svn.wordpress.org/trunk@46106


git-svn-id: http://core.svn.wordpress.org/trunk@45918 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-09-14 14:29:56 +00:00
Andrea Fercia
9f579ea448 Administration: Improve the horizontal centering of the Site Health tabs.
Props dkarfa, davidbaumwald, Clorith, tinkerbelly, afercia.
Fixes #46881.

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


git-svn-id: http://core.svn.wordpress.org/trunk@45333 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-06-12 19:31:52 +00:00
Andrea Fercia
41accccad6 Administration: Improve the Site Health tables layout for small screens.
Props immeet94, jankimoradiya, desrosj, shashank3105, chetan200891, Clorith, hedgefield.	
Fixes #46960.

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


git-svn-id: http://core.svn.wordpress.org/trunk@45274 1a063a9b-81f0-0310-95a4-ce76da25c4cd
2019-05-29 18:22:51 +00:00
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