Shiny Updates Visual Records

In preparation for proposing parts of Shiny Updates v2 to be included with WordPress 4.6, I assembled visual records of the various flows and interactions that the plugin touches.

There are six interactions across ten locations throughout the admin where plugins and themes can be installed/updated/deleted. I created two videos to illustrate the changes for the most common use cases on a single site: plugin install/bulk update/delete, theme install/update/delete. For multisite I took screenshots on mobile and for the actions that differ from single sites.

Plugins on a single install

Themes on a single install

Theme install on multisite (same as on single install)

#gallery-8 {
margin: auto;
}
#gallery-8 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-8 img {
border: 2px solid #cfcfcf;
}
#gallery-8 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

Theme update on multisite

#gallery-9 {
margin: auto;
}
#gallery-9 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-9 img {
border: 2px solid #cfcfcf;
}
#gallery-9 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

Theme delete in multisite

This one is a little harder to document in images since the theme (or plugin) disappears after the AYS message as soon as it’s deleted. See video above for delete animation.

#gallery-10 {
margin: auto;
}
#gallery-10 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-10 img {
border: 2px solid #cfcfcf;
}
#gallery-10 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

Plugin delete in multisite

Documented in above video, this is to show how it looks on mobile.

#gallery-11 {
margin: auto;
}
#gallery-11 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-11 img {
border: 2px solid #cfcfcf;
}
#gallery-11 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

Plugin install error

#gallery-12 {
margin: auto;
}
#gallery-12 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-12 img {
border: 2px solid #cfcfcf;
}
#gallery-12 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

Theme install error

#gallery-13 {
margin: auto;
}
#gallery-13 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-13 img {
border: 2px solid #cfcfcf;
}
#gallery-13 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

FTP credentials

#gallery-14 {
margin: auto;
}
#gallery-14 .gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
#gallery-14 img {
border: 2px solid #cfcfcf;
}
#gallery-14 .gallery-caption {
margin-left: 0;
}
/* see gallery_shortcode() in wp-includes/media.php */

#shiny-updates, #upgrade-install