Apply 8px border-radius and a consistent `rgb(0, 0, 0, 0.1)` border to cards, postboxes, plugin cards, and theme cards. Standardize internal padding to 16px for postbox content and headers.
Update drag-and-drop interactions: replace dashed gray outlines on sortable drop zones with theme-color-tinted backgrounds, and restyle sortable placeholders with a solid theme-color border and subtle background fill.
Adjust dashboard widget spacing, welcome panel padding, and empty-container drop zone styles. Add overflow hidden to plugin and theme cards to clip content to the new rounded corners.
Props fabiankaegy, mukesh27, joedolson, navi161, phpbits, karmatosed, sabernhardt, poojapadamad, psorensen, generosus.
Fixes#64549.
Built from https://develop.svn.wordpress.org/trunk@61646
git-svn-id: http://core.svn.wordpress.org/trunk@60957 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Introduce a design system tokens file (`_tokens.scss`) based on the WordPress Design System, providing standardized values for colors, spacing, typography, border-radius, and elevation.
Update buttons to use CSS custom properties for theme color support across all admin color schemes. Restyle primary buttons with filled theme-color backgrounds, secondary buttons with outlined borders, and add a tertiary button mixin. Adopt Gutenberg-style focus rings with outset box-shadows and transparent outlines for Windows High Contrast mode compatibility.
Increase default input and select height from 30px to 40px, apply 2px border-radius, and update border and placeholder colors to match the design system. Restyle checkboxes and radios with filled theme-color checked states and white indicator marks, using outset double-ring focus styles consistent with Gutenberg.
Apply compact 32px sizing to list table controls, page-title-action buttons, and toolbar elements. Convert tag input layouts and the major-publishing-actions bar to flexbox.
Props fabiankaegy, joedolson, audrasjb, joen, phpbits, magaliechetrit, karmatosed.
Fixes#64547.
Built from https://develop.svn.wordpress.org/trunk@61645
git-svn-id: http://core.svn.wordpress.org/trunk@60956 1a063a9b-81f0-0310-95a4-ce76da25c4cd
In modern browsers the CSS `content` property provides alt text support for assistive technology in the form `display / alt text`. This introduces support for legacy browsers that do not support the new syntax.
CSS content properties take advantage of the CSS cascade and browsers ignoring values they don't understand by adding duplicate `content` properties in the form:
{{{#!css
content: display;
content: display / alt text;
}}}
Modern browsers will use the second property, legacy browsers will use the first.
Follow-up to [60885] for #63603.
Props acmoifr, joedolson, jorbin, mydesign78, ov3rfly, peterwilsoncc, presskopp, sabernhardt, siliconforks, swissspidy, threadi, wildworks, wolf45.
Fixes#64350.
Built from https://develop.svn.wordpress.org/trunk@61480
git-svn-id: http://core.svn.wordpress.org/trunk@60792 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Remove instances of `speak: never` and `@media aural`, which are deprecated and/or non-standard CSS. These never had any broad browser support, but generated content alternatives do. See #40428.
Props krokodok, audrasjb, joedolson.
Fixes#63603.
Built from https://develop.svn.wordpress.org/trunk@60885
git-svn-id: http://core.svn.wordpress.org/trunk@60221 1a063a9b-81f0-0310-95a4-ce76da25c4cd
For all CSS generated icons across core, either add `aria-hidden="true"` to the HTML wrapper or set the generated content alternative to an empty string in the CSS using the alternative text specification for CSS generated content.
Props afercia, joedolson, cheffheid, jhabdas.
Fixes#40428.
Built from https://develop.svn.wordpress.org/trunk@60806
git-svn-id: http://core.svn.wordpress.org/trunk@60142 1a063a9b-81f0-0310-95a4-ce76da25c4cd
On small viewports, the total vertical padding of `.misc-pub-section` was adjusted from 14px to 40px.
This significant different made for difficult reading of information in the Post Publish metabox, the Media details meta box, and the comment editing metabox.
Shift the total vertical padding to 24px to improve the readability of metaboxes on mobile.
Props mikinc860, dhrumilk, debarghyabanerjee, mukesh27, hbhalodia, sabernhardt, joedolson.
Fixes#63571.
Built from https://develop.svn.wordpress.org/trunk@60619
git-svn-id: http://core.svn.wordpress.org/trunk@59955 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Remove code that forced focus to skip from the title field to the editor. Add link to skip to editor to give the user control over their path. Set `aria-pressed` on editor selector buttons to communicate which editor is enabled. Make focus state visible on unselected editor button. Remove `wp_keep_scroll_position` flag used for IE compatibility. Add `role="presentation"` to table used as status info bar.
This addresses a long-standing accessibility problem in the classic editor which created a confusing keyboard navigation path by skipping all content between the title field and the content editor.
Props afercia, rcreators, benjamin_zekavica, sharonaustin, joedolson.
Fixes#29838.
Built from https://develop.svn.wordpress.org/trunk@59188
git-svn-id: http://core.svn.wordpress.org/trunk@58583 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Fix several settings groups in the discussion options that were written in a compound/sentence structure format. These formats are difficult to parse for screen reader users and have significant layout problems in mobile viewports.
Change settings to use independent labeling.
Props Cheffheid, anthakkar08, DrewAPicture, afercia, jwgoedert, sannevndrmeulen, sudipatel007, tirth03, joedolson.
See #31354.
Built from https://develop.svn.wordpress.org/trunk@59160
git-svn-id: http://core.svn.wordpress.org/trunk@58555 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The CSS to make menu item containers resizable in the admin menu editor was too broadly scoped, and caused classic editor metaboxes to have unconstrained height. Limit the scope of the CSS changes to only impact menu item containers.
Props neotrope, sabernhardt, joedolson.
Fixes#61662.
Built from https://develop.svn.wordpress.org/trunk@58747
git-svn-id: http://core.svn.wordpress.org/trunk@58149 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Make the panels for selecting menu items to add to a panel resizable using the CSS `resize` property. This minor change makes it easier to select items to add on desktop devices, and has nominal impact on other interfaces.
Props namith.jawahar, NekoJonez, jorbin, joen, joedolson.
Fixes#60763.
Built from https://develop.svn.wordpress.org/trunk@58256
git-svn-id: http://core.svn.wordpress.org/trunk@57719 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Apply new focus styles from WordPress 5.3 more broadly. An updated focus style for form inputs, buttons, and link styled as buttons was added in WordPress 5.3; this commit makes other focus styles consistent with those changes so they meet accessibility standards for color contrast.
Props johnbillion, kebbet, joedolson, afercia.
Fixes#51870.
Built from https://develop.svn.wordpress.org/trunk@57553
git-svn-id: http://core.svn.wordpress.org/trunk@57054 1a063a9b-81f0-0310-95a4-ce76da25c4cd
The `{min|max}-device-pixel-ratio` syntax as a a non-standard CSS media feature that was used as an alternative to the now standard `resolution`. Prior to Safari 16.0, `-webkit-{min|max}-device-pixel-ratio` was needed to correctly support it.
This change is a result of the `caniuse-lite` update that was applied recently in [56065]. Though there were no changes to target browsers as a result of this update, it seems an upstream change identified these as unnecessary.
See #57856, #58869.
Props desrosj, joemcgill, isabel_brison.
Built from https://develop.svn.wordpress.org/trunk@56279
git-svn-id: http://core.svn.wordpress.org/trunk@55791 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Add labels; change Enter new/Cancel link to a button; move focus to input when creating new field; move Add Custom Field out of fields table.
Props jane, batmoo, karmatosed, franrosa, sabernhardt, annashopina, oglekler, joedolson.
Fixes#15631.
Built from https://develop.svn.wordpress.org/trunk@56018
git-svn-id: http://core.svn.wordpress.org/trunk@55530 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
Remove the float alignment that places the "Uploaded by" username and the "Uploaded to" post title on the opposite side of the Save postbox for mobile. This matches the alignment on desktop, and makes it easier for low-vision users to track the information relationship between label and content.
Props sabernhardt.
Fixes#55508.
Built from https://develop.svn.wordpress.org/trunk@53115
git-svn-id: http://core.svn.wordpress.org/trunk@52704 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Set `break-word` on sample permalink so the full permalink will be visible on mobile devices in posts, media, and comments. Prevent hidden text overflow or horizontal scrolling on mobile.
Props sumitsingh, sabernhardt.
Fixes#54811.
Built from https://develop.svn.wordpress.org/trunk@53114
git-svn-id: http://core.svn.wordpress.org/trunk@52703 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
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
On narrow screens allow the text to wrap in the copy buttons on the privacy policy guide screen to avoid horizontal overflow of the parent container.
Props audrasjb, davidbaumwald, jaymanpandya, paaljoachim, palmiak, sabernhardt, SergeyBiryukov, sumitsingh.
Fixes#52751.
Built from https://develop.svn.wordpress.org/trunk@50568
git-svn-id: http://core.svn.wordpress.org/trunk@50181 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
The Privacy settings pages now use the same design patterns as the Site Health screen. Additionally, each privacy policy guide is now contained in an accordion to make the page easier to navigate when multiple plugins are in use.
Props xkon, hedgefield, garrett-eclipse, hellofromTonya, paaljoachim, joedolson.
Fixes#49264.
Built from https://develop.svn.wordpress.org/trunk@50161
git-svn-id: http://core.svn.wordpress.org/trunk@49840 1a063a9b-81f0-0310-95a4-ce76da25c4cd
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
- Enable arranging only when the Screen Options tab is open.
- Prevent accidental/unintended dragging. Seen it happen mostly on laptops when using the mousepad/trackpad.
- Improve discoverability and usefulness by always showing the "drop zones" outline when postboxes are draggable/arrangeable.
- Add some (brief) explanation to the Screen Options tab helping the user understand what options are available and how to change them. This is especially helpful for screen reader users to give an idea how to use the screen options and what to expect.
- Fix/enhance some of the code in `postbox.js` and make it coding standards compliant.
See #50699.
Built from https://develop.svn.wordpress.org/trunk@49179
git-svn-id: http://core.svn.wordpress.org/trunk@48941 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This avoids overlapping with action buttons and brings some consistency to bottom paddings across various screens.
Props passoniate, afercia, anuj2, rolfsiebers, uxkai, ireneyoast, thijsvanloef, hellofromTonya, audrasjb, helen, SergeyBiryukov.
Fixes#49246.
Built from https://develop.svn.wordpress.org/trunk@49178
git-svn-id: http://core.svn.wordpress.org/trunk@48940 1a063a9b-81f0-0310-95a4-ce76da25c4cd
For a number of years, WordPress has been using a `#00a0d2` blue shade for the links `:hover` state. This blue shade doesn't have a sufficient color contrast with the various (too many) background colors used in the admin interface.
The new `#006799` blue shade is part of the official WordPress color palette and does have a sufficient color contrast with most of the admin backgrounds.
Props ryokuhi, audrasjb, joedolson, mapk.
See #47682.
Built from https://develop.svn.wordpress.org/trunk@48368
git-svn-id: http://core.svn.wordpress.org/trunk@48137 1a063a9b-81f0-0310-95a4-ce76da25c4cd
- makes the postboxes areas in the Dashboard visible also on large screens
- uses a more meaningful text when all postboxes areas are empty instead of "Drag boxes here"
- restores the ability to drag boxes to the "advanced" area in the Classic Editor page
- makes the postboxes areas in the Classic Editor page visible while dragging so that users have a clue what the available areas are
- improves the color contrast of the postboxes areas while dragging
- uses `wp.i18n` for translatable strings in `wp-admin/js/postbox.js`
Props xkon, karmatosed, audrasjb, ocean90, joedolson, afercia, azaozz.
See #20491.
Fixes#49288, #47541.
Built from https://develop.svn.wordpress.org/trunk@48340
git-svn-id: http://core.svn.wordpress.org/trunk@48109 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Improves accessibility of the "Copy this section" button and "Return to Top" link:
- uses `setTimeout()` and `clearTimeout()` to properly handle the "Copied!" text
- simplifies the button text by removing the redundant visually hidden text
- fixes the mismatching visual and DOM order of the Copy button and the "Return to Top" link
- improves the "Return to Top" links by providing real page fragment identifiers, when possible
- hides the "Return to Top" up arrow from assistive technologies
- minor coding standards
Props afercia, garrett-eclipse.
See #48463, #50322.
Fixes#50335.
Built from https://develop.svn.wordpress.org/trunk@48234
git-svn-id: http://core.svn.wordpress.org/trunk@48003 1a063a9b-81f0-0310-95a4-ce76da25c4cd
