Administration: Improve dashboard meta box control visuals by poligilad-auto · Pull Request #12339 · WordPress/wordpress-develop

poligilad-auto · 2026-06-27T15:01:20Z

Trac ticket: https://core.trac.wordpress.org/ticket/50699
Follow-up to: #12180

Summary

Adds right-side spacing to shared postbox header actions (RTL is flipped by the build).
Updates the shared meta box drag placeholder to use the same 2px dashed outline as the empty dashboard drop areas, so both drop areas match. This also applies on other screens that use meta box drag and drop.
Removes the extra 4px margin on empty dashboard drop areas so they line up with the widgets in other columns.
Uses the same subtle theme-color drag highlight on empty dashboard drop areas as on the other columns.

Before

`

After

Scope

The postbox header action spacing and the drag placeholder live in common.css, so they apply to meta boxes generally. The drag highlight is a general meta box drop-zone pattern; this PR only changes the dashboard empty drop area because that is the dashboard-specific part that needed the visual cleanup.

Context

This extracts small visual improvements from the broader meta box reordering behavior work so the behavior PR can remain focused on the Screen Options toggle and reordering logic.

Testing

git diff --check
npm exec -- grunt build:css
PostCSS safe-parser check for src/wp-admin/css/common.css and src/wp-admin/css/dashboard.css
Focused declaration assertion for the new spacing, outline, and drag-fill CSS

github-actions · 2026-06-27T15:01:28Z

Hi there! 👋

Thank you for your contribution to WordPress! 💖

It looks like this is your first pull request to wordpress-develop. Here are a few things to be aware of that may help you out!

No one monitors this repository for new pull requests. Pull requests must be attached to a Trac ticket to be considered for inclusion in WordPress Core. To attach a pull request to a Trac ticket, please include the ticket's full URL in your pull request description.

Pull requests are never merged on GitHub. The WordPress codebase continues to be managed through the SVN repository that this GitHub repository mirrors. Please feel free to open pull requests to work on any contribution you are making.

More information about how GitHub pull requests can be used to contribute to WordPress can be found in the Core Handbook.

Please include automated tests. Including tests in your pull request is one way to help your patch be considered faster. To learn about WordPress' test suites, visit the Automated Testing page in the handbook.

If you have not had a chance, please review the Contribute with Code page in the WordPress Core Handbook.

The Developer Hub also documents the various coding standards that are followed:

Thank you,
The WordPress Project

github-actions · 2026-06-27T15:01:31Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props poligilad, afercia.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2026-06-27T15:06:35Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

afercia · 2026-10-08T15:01:36Z

 .postbox .handlediv:focus {
-	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
-	border-radius: 50%;
+	border-radius: 2px;


The circular border radius for the focus style is intentional and should not be changed unless there are good functional, usability, and accessibility reasons to change it

Agreed. The circular focus is also used for other icon buttons in the admin (the Tags box remove buttons, the Widgets screen toggles, and the menu item arrows), so it makes sense to keep it consistent. I removed the focus ring change from this PR entirely, so it keeps the current inset ring from #65060, which fixed the ring getting cut off.

afercia · 2026-10-08T15:02:56Z

-	outline: 2px dashed rgb(0, 0, 0, 0.15);
-	outline-offset: -2px;
+	box-sizing: border-box;
+	border: 1px dashed #c3c4c7;


the outline has always been 2 pixels, why this needs to be changed? It needs design feedback anyways.

This one is intentional. The dashboard widgets use a 1px solid #c3c4c7 border, so a 1px dashed border in the same color makes the empty drop areas match the rest of the dashboard and looks cleaner than the heavier 2px outline. Before and after screenshots are in the PR description. Happy to get more design input if needed.

afercia · 2026-10-08T15:03:32Z

+	border: 1px dashed #c3c4c7;
 	border-radius: 8px;
 	height: 250px;
-	margin: 4px;


Please describe why this margin is removed.

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.

afercia · 2026-10-08T15:05:08Z


 .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);


rgb colors are not allowed by the CSS Coding Standards. Trunk has already been updated, this needs updating as well.

Updated to rgba() and rebased on the latest trunk.

github-actions · 2026-10-11T21:25:16Z

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 64301
GitHub commit: 6718bd3

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.

poligilad-auto · 2026-10-12T08:00:26Z

Hi @afercia! This PR was closed automatically when 64301 was committed from #12627, since both are linked to 50699. But the visual changes here weren’t part of that commit. Would you be able to take another look? It’s a small CSS follow-up: spacing for the meta box header buttons and a 1px dashed border for the empty dashboard drop areas. Happy to rebase if needed. Thanks!

afercia · 2026-10-12T15:19:15Z

 /* one column on the dash */
 @media only screen and (max-width: 799px) {
 	#wpbody-content .metabox-holder .postbox-container .empty-container {
+		border: 0;


is resetting the border really needed? the empty container on small screens is already height: 0 and box-sizing: border-box;

Not needed anymore. With the outline back, the existing outline: none covers small screens, so I removed it.

afercia · 2026-10-12T15:23:41Z

+
+.rtl .postbox-header .handle-actions {
+	padding-right: 0;
+	padding-left: 8px;


The build process already takes care of RTL and flips the right padding at line 2269 to a left padding.
Manually adding this ruleset will make the Build provess flip it again so that it becomes:

.rtl .postbox-header .handle-actions { padding-left: 0; padding-right: 8px; }

The whole ruleset should be removed.

Removed, thanks.

afercia · 2026-10-12T15:39:26Z

-	outline: 2px dashed rgba(0, 0, 0, 0.15);
-	outline-offset: -2px;
+	box-sizing: border-box;
+	border: 1px dashed #c3c4c7;


Not sure making the border thinner would be good for users with vision impairments. I'm a low vision user and I barely see the 1px dashed boreer. Screenshot before and after:

Thanks, that's a very fair point. Switched back to the 2px outline. I also updated the drag placeholder to the same 2px outline so they match. That rule is shared, so it also applies on other screens that use meta box drag and drop.

This is how it looks like.

afercia · 2026-10-12T15:48:52Z


 .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);


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.

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.

afercia · 2026-10-12T15:52:39Z

 	}

 	#dashboard-widgets .meta-box-sortables.empty-container {
+		border: 0;


same as above, is resetting the border necessary?

Same here, removed.

Restore the 2px dashed outline for empty dashboard drop areas and use the same outline for the meta box drag placeholder, so both drop areas match. Remove the manual RTL ruleset, since the build flips the padding automatically, and the border resets that are no longer needed. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

poligilad-auto force-pushed the poligilad-auto/dashboard-metabox-visuals branch from 55765f5 to cfb4502 Compare June 27, 2026 15:22

poligilad-auto mentioned this pull request Jun 27, 2026

Administration: Add box reordering toggle to Screen Options. #12180

Closed

pento force-pushed the trunk branch from 3af2d27 to 64ede28 Compare July 6, 2026 03:10

afercia suggested changes Oct 8, 2026

View reviewed changes

poligilad-auto force-pushed the poligilad-auto/dashboard-metabox-visuals branch from cfb4502 to 3e43f2d Compare October 9, 2026 11:29

github-actions Bot closed this Oct 11, 2026

afercia reopened this Oct 12, 2026

afercia reviewed Oct 12, 2026

View reviewed changes

poligilad-auto and others added 2 commits October 13, 2026 09:55

Administration: Improve dashboard meta box control visuals

7144734

poligilad-auto force-pushed the poligilad-auto/dashboard-metabox-visuals branch from 3e43f2d to 1b515fe Compare October 13, 2026 07:55

Conversation

poligilad-auto commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Scope

Context

Testing

Uh oh!

github-actions Bot commented Jun 27, 2026

Uh oh!

github-actions Bot commented Jun 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 27, 2026

Test using WordPress Playground

Some things to be aware of

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Oct 11, 2026

Uh oh!

poligilad-auto commented Oct 12, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

poligilad-auto commented Jun 27, 2026 •

edited

Loading

github-actions Bot commented Jun 27, 2026 •

edited

Loading