Changeset 61598

Timestamp:

02/08/2026 01:10:32 AM (5 hours ago)

Author:

joedolson

Message:

Plugins/Themes: Increase size of drop region for uploads.

The native drop area surface is the input[type="file"] element, which is quite small on plugin and theme upload screens. A larger drop area makes it easier for users to successfully drag their file over the region.

Modify the CSS so that the file input occupies the full visual space.

Props ibrahimriaz, ronya4927, huzaifaalmesbah, noruzzaman, r1k0, nikunj8866, joedolson.
Fixes #64065.

File:

• trunk/src/wp-admin/css/themes.css (modified) (4 diffs)

trunk/src/wp-admin/css/themes.css

@@ -1087 +1087 @@
 .upload-theme .wp-upload-form,
 .upload-plugin .wp-upload-form {
-    background: #f6f7f7;
-    border: 1px solid #c3c4c7;
-    padding: 30px;
+    position: relative;
     margin: 30px auto;
     display: inline-flex;
@@ -1098 +1096 @@
 .upload-theme .wp-upload-form input[type="file"],
 .upload-plugin .wp-upload-form input[type="file"] {
-    margin-right: 10px;
+    background: #f6f7f7;
+    border: 1px solid #c3c4c7;
+    margin: 0;
+    padding: 30px 128px 30px 30px;
+}
+
+.upload-plugin .wp-upload-form input[type=submit], 
+.upload-theme .wp-upload-form input[type=submit] {
+    position: absolute;
+    right: 30px;
 }
 
@@ -1132 +1139 @@
 
 @media only screen and (max-width: 1120px) {
+    .upload-plugin .wp-upload-form,
     .upload-theme .wp-upload-form {
         margin: 20px 0;
@@ -2016 +2024 @@
     }
 
-    .upload-theme .wp-upload-form,
-    .upload-plugin .wp-upload-form {
-        display: block;
-    }
-
-    :is(.upload-theme, .upload-plugin) .wp-upload-form input[type="submit"] {
-        margin-top: 10px;
-    }
-}
+    .upload-plugin .wp-upload-form,
+    .upload-theme .wp-upload-form {
+        width: 100%;
+    }
+
+    .upload-plugin .wp-upload-form input[type=file], 
+    .upload-theme .wp-upload-form input[type=file] {
+        padding: 30px 30px 80px;
+        width: 100%;
+    }
+
+    :is(.upload-theme, .upload-plugin) .wp-upload-form input[type="submit"].button {
+        right: unset;
+        left: 50%;
+        transform: translateX(-50%) !important;
+        top: calc( 1.4em + 42px ); /* Line height of control + gap + top padding. */
+        margin: 10px 0 0;
+    }
+}