vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-08-13 21:30:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Media: Remove infinite scroll from media library and modal.

Browse Source 
Replace infinitely autoloading behavior on scroll with a user-controlled load more button. Fix a long standing accessibility issue in the media library. Infinite scroll poses a wide range of problems for accessibility, usability, and performance.

This change modifies the library to load 40 items in the initial view, with a load more button to load the next 40 items and a button to move focus from the load more region to the first of the most recently added items.

The text for communicating the jump target was broadly discussed, agreeing that the text incorporated here would most concisely and clearly convey the purpose of the button, and any further detail is learnable from use.
 
Props afercia, adamsilverstein, joedolson, audrasjb, francina 
Fixes #50105. See #40330. 

git-svn-id: https://develop.svn.wordpress.org/trunk@50829 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson
2021-05-07 23:17:33 +00:00
parent 0a3a3c5119
commit 85f53ca0a6
8 changed files with 389 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/wp-includes/css/media-views.css
+104 -1
View File
@@ -1188,7 +1188,8 @@
padding: 2px 8px 8px;
}
.attachments-browser .attachments,
.attachments-browser:not(.has-load-more) .attachments,
.attachments-browser.has-load-more .attachments-wrapper,
.attachments-browser .uploader-inline {
position: absolute;
top: 72px;
@@ -1267,6 +1268,96 @@
padding: 2em 0 0 2em;
}
.more-loaded .attachment:not(.found-media) {
background: #dcdcde;
}
.load-more-wrapper {
clear: both;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 1em 0;
}
.load-more-wrapper .load-more-count {
min-width: 100%;
margin: 0 0 1em;
text-align: center;
}
.load-more-wrapper .load-more {
margin: 0;
}
/* Needs high specificity. */
.media-frame .load-more-wrapper .load-more + .spinner {
float: none;
margin: 0 -30px 0 10px;
}
/* Reset spinner margin when the button is hidden to avoid horizontal scrollbar. */
.media-frame .load-more-wrapper .load-more.hidden + .spinner {
margin: 0;
}
/* Force a new row within the flex container. */
.load-more-wrapper::after {
content: "";
min-width: 100%;
order: 1;
}
.load-more-wrapper .load-more-jump {
margin: 0 0 0 12px;
}
.attachment.new-media {
outline: 2px dotted #c3c4c7;
}
.load-more-wrapper {
clear: both;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: 1em 0;
}
.load-more-wrapper .load-more-count {
min-width: 100%;
margin: 0 0 1em;
text-align: center;
}
.load-more-wrapper .load-more {
margin: 0;
}
/* Needs high specificity. */
.media-frame .load-more-wrapper .load-more + .spinner {
float: none;
margin: 0 -30px 0 10px;
}
/* Reset spinner margin when the button is hidden to avoid horizontal scrollbar. */
.media-frame .load-more-wrapper .load-more.hidden + .spinner {
margin: 0;
}
/* Force a new row within the flex container. */
.load-more-wrapper::after {
content: "";
min-width: 100%;
order: 1;
}
.load-more-wrapper .load-more-jump {
margin: 0 0 0 12px;
}
/**
* Progress Bar
*/
@@ -2818,6 +2909,12 @@
.media-frame-content .media-toolbar .instructions {
display: none;
}
/* Change margin direction on load more button in responsive views. */
.load-more-wrapper .load-more-jump {
margin: 12px 0 0 0;
}
}
@media only screen and (min-width: 901px) and (max-height: 400px) {
@@ -2826,6 +2923,12 @@
top: 0;
padding-top: 44px;
}
/* Change margin direction on load more button in responsive views. */
.load-more-wrapper .load-more-jump {
margin: 12px 0 0 0;
}
}
@media only screen and (max-width: 480px) {