Media: Move dismiss upload errors button after errors.

Change the button that dismissess upload errors so it appears after the relevant errors. Change button from icon-only to text-based. Removes ambiguity about what you are cancelling when using the control. Props ComputerGuru, melchoyce, vdwijngaert, alexislloyd, joedolson, shaunandrews, sabernhardt. Fixes #42979. Built from https://develop.svn.wordpress.org/trunk@52196 git-svn-id: http://core.svn.wordpress.org/trunk@51788 1a063a9b-81f0-0310-95a4-ce76da25c4cd
mchole · Nov 17, 2021 · 7439514 · 7439514
1 parent 5e48f0c
commit 7439514
Show file tree

Hide file tree

Showing 10 changed files with 6 additions and 94 deletions.
diff --git a/wp-admin/css/media-rtl.css b/wp-admin/css/media-rtl.css
@@ -508,24 +508,6 @@ border color while dragging a file over the uploader drop area */
 	background: none;
 }
 
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
-	top: -10px;
-	left: -14px;
-	padding: 10px;
-}
-
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
-	content: "\f153";
-	display: block;
-	font: normal 16px/1 dashicons;
-	color: #787c82;
-}
-
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
-	color: #d63638;
-}
-
 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
 	display: none;
 }

diff --git a/wp-admin/css/media-rtl.min.css b/wp-admin/css/media-rtl.min.css
diff --git a/wp-admin/css/media.css b/wp-admin/css/media.css
@@ -507,24 +507,6 @@ border color while dragging a file over the uploader drop area */
 	background: none;
 }
 
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors {
-	top: -10px;
-	right: -14px;
-	padding: 10px;
-}
-
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:before {
-	content: "\f153";
-	display: block;
-	font: normal 16px/1 dashicons;
-	color: #787c82;
-}
-
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:focus:before,
-.upload-php .mode-grid .media-sidebar .media-uploader-status .upload-dismiss-errors:hover:before {
-	color: #d63638;
-}
-
 .upload-php .mode-grid .media-sidebar .media-uploader-status.errors h2 {
 	display: none;
 }

diff --git a/wp-admin/css/media.min.css b/wp-admin/css/media.min.css
diff --git a/wp-includes/css/media-views-rtl.css b/wp-includes/css/media-views-rtl.css
@@ -1438,36 +1438,10 @@
 }
 
 .media-uploader-status .upload-dismiss-errors {
-	position: absolute;
-	top: -3px;
-	left: -5px;
-	padding: 5px;
-	border-radius: 50%;
 	transition: none;
 	text-decoration: none;
 }
 
-.uploader-inline .media-uploader-status .upload-dismiss-errors {
-	top: 2px;
-	left: 2px;
-}
-
-.media-uploader-status .upload-dismiss-errors::before {
-	content: "\f153";
-	display: block;
-	font: normal 16px/1 dashicons;
-	color: #787c82;
-}
-
-.uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before {
-	color: #646970;
-}
-
-.errors.media-uploader-status .upload-dismiss-errors:hover::before,
-.errors.media-uploader-status .upload-dismiss-errors:focus::before {
-	color: #d63638;
-}
-
 .upload-errors .upload-error {
 	padding: 12px;
 	margin-bottom: 12px;

diff --git a/wp-includes/css/media-views-rtl.min.css b/wp-includes/css/media-views-rtl.min.css
diff --git a/wp-includes/css/media-views.css b/wp-includes/css/media-views.css
@@ -1437,36 +1437,10 @@
 }
 
 .media-uploader-status .upload-dismiss-errors {
-	position: absolute;
-	top: -3px;
-	right: -5px;
-	padding: 5px;
-	border-radius: 50%;
 	transition: none;
 	text-decoration: none;
 }
 
-.uploader-inline .media-uploader-status .upload-dismiss-errors {
-	top: 2px;
-	right: 2px;
-}
-
-.media-uploader-status .upload-dismiss-errors::before {
-	content: "\f153";
-	display: block;
-	font: normal 16px/1 dashicons;
-	color: #787c82;
-}
-
-.uploader-inline .errors.media-uploader-status .upload-dismiss-errors::before {
-	color: #646970;
-}
-
-.errors.media-uploader-status .upload-dismiss-errors:hover::before,
-.errors.media-uploader-status .upload-dismiss-errors:focus::before {
-	color: #d63638;
-}
-
 .upload-errors .upload-error {
 	padding: 12px;
 	margin-bottom: 12px;

diff --git a/wp-includes/css/media-views.min.css b/wp-includes/css/media-views.min.css
diff --git a/wp-includes/media-template.php b/wp-includes/media-template.php
@@ -320,7 +320,6 @@ function wp_print_media_templates() {
 	<?php // Template for the uploading status UI. ?>
 	<script type="text/html" id="tmpl-uploader-status">
 		<h2><?php _e( 'Uploading' ); ?></h2>
-		<button type="button" class="button-link upload-dismiss-errors"><span class="screen-reader-text"><?php _e( 'Dismiss Errors' ); ?></span></button>
 
 		<div class="media-progress-bar"><div></div></div>
 		<div class="upload-details">
@@ -331,6 +330,7 @@ function wp_print_media_templates() {
 			<span class="upload-filename"></span>
 		</div>
 		<div class="upload-errors"></div>
+		<button type="button" class="button upload-dismiss-errors"><?php _e( 'Dismiss errors' ); ?></button>
 	</script>
 
 	<?php // Template for the uploading status errors. ?>

diff --git a/wp-includes/version.php b/wp-includes/version.php
@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.9-alpha-52195';
+$wp_version = '5.9-alpha-52196';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.