Skip to content

Administration: Improve dashboard meta box control visuals #12339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
poligilad-auto wants to merge 2 commits into
base: trunk
Choose a base branch
from
Open

Administration: Improve dashboard meta box control visuals #12339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7144734
Administration: Improve dashboard meta box control visuals
poligilad-auto Jun 27, 2026
1b515fe
Administration: Address review feedback on meta box drop area visuals.
poligilad-auto Oct 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/wp-admin/css/common.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2269,6 +2269,7 @@ html.wp-toolbar {

.postbox-header .handle-actions {
flex-shrink: 0;
padding-right: 8px;
}

/* Post box order and toggle buttons. */
Expand Down Expand Up @@ -2310,7 +2311,8 @@ html.wp-toolbar {
}

.sortable-placeholder:not(.empty-container .sortable-placeholder) {
border: 1px dashed #c3c4c7;
outline: 2px dashed rgba(0, 0, 0, 0.15);
outline-offset: -2px;
border-radius: 8px;
margin-bottom: 20px;
}
Expand Down
3 changes: 1 addition & 2 deletions src/wp-admin/css/dashboard.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@
outline-offset: -2px;
border-radius: 8px;
height: 250px;
margin: 4px;

@afercia afercia Oct 8, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please describe why this margin is removed.

@poligilad-auto poligilad-auto Oct 9, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The empty-container class is added to the .meta-box-sortables element itself (see postbox.js), and this rule is more specific, so margin: 4px was overriding that element's regular margin: 0 8px 20px. That made empty drop areas wider than the widgets in the other columns. Removing it lets the empty areas line up with the widgets.

}

/* Only highlight drop zones when dragging. */
Expand All @@ -82,7 +81,7 @@
}

.is-dragging-metaboxes #dashboard-widgets .postbox-container .empty-container {
background: rgba(0, 0, 0, 0.01);
background: rgba(var(--wp-admin-theme-color--rgb), 0.04);

@afercia afercia Oct 12, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good fix, as the other sortables already changed background color but the empty one.
However, the color change is too subtle, I'd consider to make it a little more visible.

@poligilad-auto poligilad-auto Oct 13, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It matches the fill the other columns already get while dragging, so all drop areas look the same. I'd prefer to keep them consistent.

}

#dashboard-widgets .postbox-container .empty-container::after {
Expand Down
Loading