Drop zone for dashboard widgets does not have rounded corners

[ocean90]

Notices some inconsistency while dragging dashboard widgets, see attached screenshots. The fine dotted line should have the same border radius as the box with the blue background or the thick dotted line.

Core trac - https://core.trac.wordpress.org/ticket/64787

I can confirm that the fine dotted line now has a border-radius.

However, there is currently no visual indicator when a widget is dragged over empty drop zones, making it impossible to see where the widget will be dropped.

I propose a more unified styling approach in which drop areas are styled identically whenever a widget is being dragged, regardless of whether the area already contains a widget or not.

This would also resolve the issue where users cannot clearly recognize where the widget will be dropped.

---

I decided against a new PR and invite you @nirav7707 to try it out.
Please find the proposed changes in this diff:

{{{diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css
index 99faa0782d..e2a1c87fae 100644
--- a/src/wp-admin/css/common.css
+++ b/src/wp-admin/css/common.css
@@ -2263,7 +2263,7 @@ html.wp-toolbar {

color: #a7aaad;

}

-.sortable-placeholder:not(.empty-container .sortable-placeholder) {
+.sortable-placeholder {

border: 1px dashed #c3c4c7;
border-radius: 8px;
margin-bottom: 20px;

diff --git a/src/wp-admin/css/dashboard.css b/src/wp-admin/css/dashboard.css
index e9824c86f9..cc1b4bc5e5 100644
--- a/src/wp-admin/css/dashboard.css
+++ b/src/wp-admin/css/dashboard.css
@@ -68,10 +68,9 @@

}

#dashboard-widgets .postbox-container .empty-container {

• outline: 2px dashed rgb(0, 0, 0, 0.15);
• outline-offset: -2px;

+ outline: 1px dashed #c3c4c7;

border-radius: 8px;

• height: 250px;

+ min-height: 100px;

margin: 4px;

}

@@ -80,10 +79,11 @@

border-radius: 8px;
background: rgb(var(--wp-admin-theme-color--rgb), 0.04);
min-height: 100px;

+ outline: none;

}

.is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container {

• background: rgb(0, 0, 0, 0.01);

+ background: rgb(var(--wp-admin-theme-color--rgb), 0.04);

}

#dashboard-widgets .postbox-container .empty-container:after {

}}}

Hi! Just tested this patch and here is my suggestion regarding the targetted drop zone.

## Widget dragged

## Widget in drop zone while being held

The targetted drop zone should be more highlighted when the dragged widget reaches it, for instance with a light blue background, the same as the original drop zone.

[manhar]

Tested on WordPress trunk.

Reproduced the issue on the Dashboard screen when dragging widgets.
The drop zone area does not have rounded corners, which looks inconsistent with other admin UI elements.

Before Patch:
​https://postimg.cc/yJcRstcx

Applied the patch and confirmed that the drop zone now displays rounded corners correctly.
The patch works as expected.

After Patch:
​https://postimg.cc/ZCspcrJt

​https://github.com/user-attachments/assets/5fd6e343-5755-4b9b-b419-c8ebc4e2522a

[r1k0]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/11154

Environment

• WordPress: 7.0-beta3-61849-src
• PHP: 8.3.30
• Server: nginx/1.29.5
• Database: mysqli (Server: 8.4.8 / Client: mysqlnd 8.3.30)
• Browser: Chrome 145.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Steps taken

1. Head to the admin dashboard, drag one of the widgets to an empty widget container.
2. Observe the border-radius of the now-empty widget container of the widget you are dragging while you are dragging it.
3. ✅ Patch is solving the problem.

Expected result

• The dotted widget container has a border-radius like the other empty containers.

Additional Notes

• None

Screenshots/Screencast with results

Before:

After:

[audrasjb]

In 61877:

Administration: Use rounded corners for dashboard widgets drop zones.

Admin Cards and Metabox were modified in [61646] to better align with the modern WordPress design system, but dashboard widgets drop zones weren't updated as such. This changeset adds rounded corners to these drop zones for better consistency.

Follow-up to [61646].

Props ocean90, niravsherasiya7707, stefanvelthuys, valentingrenier, manhar, huzaifaalmesbah, r1k0.
Fixes #64787.
See #64549.