Fix alignment for sortable metabox on post and page edit screen with classic editor

[umesh.nevase]

When the Classic Editor is selected as the default editor in the Writing Settings, the sortable metabox container on the post/page edit screen includes an extra 4px of padding. This results in a 4px misalignment of the metabox container with Classic Editor and other UI elements on the page.

Debugging confirms that this padding is only applied when the Classic Editor is active. Since it serves no identifiable purpose other than for these metaboxes, it can be safely removed to restore alignment. This change was originally introduced in Changeset [61646].

[umesh.nevase]

screenshot for extra padding and misalignment

This PR fixes alignment issue for meta-box-sortables with the editor.
In this PR I've remove extra 4px padding added to metabox container.

[sabernhardt]

[61646] added the 4-pixel padding to sortable metaboxes in the dashboard, classic post editor, and media editor.

Then [61759] set the dashboard widgets' padding to 0, which does not seem necessary if the padding is removed from all of them.

[SergeyBiryukov]

In 62284:

Administration: Correct alignment of meta boxes on the Edit screen with classic editor.

Follow-up to [61646], [61759].

Props umeshnevase, sabernhardt, SergeyBiryukov.
Fixes #65141.

Thanks for the PR! Merged in r62284.

[SergeyBiryukov]

Reopening for 7.0 consideration.

[peterwilsoncc]

r62284 approved for merging to the 7.0 branch.

[peterwilsoncc]

In 62285:

Administration: Correct alignment of meta boxes on the Edit screen with classic editor.

Follow-up to [61646], [61759].

Reviewed by peterwilsoncc.
Merges r62284 to the 7.0 branch.

Props umeshnevase, sabernhardt, SergeyBiryukov.
Fixes #65141.

[TobiasBg]

Replying to sabernhardt:

[61646] added the 4-pixel padding to sortable metaboxes in the dashboard, classic post editor, and media editor.

So, the padding was now removed again, but [61646] also added a negative -4px margin on #poststuff #post-body. I think this should be reverted as well, as it otherwise pulls the editor to the left a bit (with Classic Editor).

​@TobiasBg has suggested to remove negative -4px margin on #poststuff #post-body that pulling post-body to left. This margin is not required.Here

This margin was added in changeset for admin reskin https://core.trac.wordpress.org/changeset/61646

[umesh.nevase]

Yes, we can revert negative -4px margin on #poststuff #post-body which is not required. [PR]​https://github.com/WordPress/wordpress-develop/pull/11689

Thanks for creating a PR! I think the margin declaration can be removed in full, as it was only added via https://core.trac.wordpress.org/changeset/61646/trunk/src/wp-admin/css/edit.css and did not exist before.

[peterwilsoncc]

Doing some keyword management to tidy up the workflow report.

[jorbin]

As noted, the patch needs an update. @umeshnevase - Are you able to handle that?

Thanks for creating a PR! I think the margin declaration can be removed in full, as it was only added via https://core.trac.wordpress.org/changeset/61646/trunk/src/wp-admin/css/edit.css and did not exist before.

Thanks for pointing out that margin declaration, I've removed unwanted margin declaration.

[audrasjb]

I think we can go with PR11689.

[jadavsanjay]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/11689

Environment

• WordPress: 7.1-alpha-20260507.074835
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 148.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Classic Editor 1.6.7
  • Test Reports 1.2.1

Actual Results

1. ✅ Issue resolved with patch.

Additional Notes

• After applying the patch, the issue with the alignment of the sortable metabox on the post and page edit screen in the Classic Editor has been fixed.

Supplemental Artifacts

[khokansardar]

## Patch testing report

Patch / PR tested

• ​https://github.com/WordPress/wordpress-develop/pull/11689

Environment

• WordPress: trunk @ ( commit or "Playground PR build" )
• PHP: 8.2
• Server: nginx / Playground
• OS: macOS 15
• Browser: Chrome 136, Safari 18

Steps

1. Open Posts → Edit a post that uses the classic metabox layout (or install/enable classic editing if your test site uses blocks only).
2. Note alignment between editor area and right-hand metabox column at full width and after narrowing the window.
3. Toggle metabox columns if available; expand/collapse postboxes.
4. Drag a metabox to reorder (if applicable).

Results

• Before patch (or on current trunk without PR): describe misalignment if you still see it on trunk
• With PR #11689: aligned / no regression
• Drag-and-drop / metabox UI: OK or issue

[darshitrajyaguru97]

Patch Testing Report

Patch tested:
​https://github.com/WordPress/wordpress-develop/pull/11689

Environment

• WordPress: trunk (Playground PR build)
• PHP: 8.2
• Server: nginx / Playground
• OS: Windows 11
• Browser: Chrome

Testing Performed

• Opened the post editor using the classic metabox layout
• Verified editor and metabox column alignment at multiple viewport widths
• Tested expand/collapse functionality for postboxes
• Tested metabox column toggling
• Verified drag-and-drop metabox reordering behavior

Results

• On current trunk, minor alignment inconsistencies were still noticeable when narrowing the editor width.
• With PR #11689 applied, the editor area and metabox column alignment appeared consistent across tested layouts and screen sizes.
• Drag-and-drop functionality and general metabox interactions worked correctly without any noticeable regressions.

Summary

Patch tested successfully and worked as expected in the tested environment.

[gaurangsondagar]

Patch Testing Report:

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

Environement:
PHP: 8.2.29
WordPress: trunk (Playground PR build)
Web server: nginx / Playground
Browser: Chrome
OS: Ubuntu 22.04.5 LTS

Steps I Followed:

• Navigate to Posts and open a post using the classic metabox interface (enable/install the Classic Editor if the site only uses the block editor).
• Check the alignment between the main editor section and the right-side metabox column in both full-width and resized window views.
• Test the metabox column layout by toggling available column options and expanding/collapsing the postboxes.
• Reorder a metabox using drag-and-drop functionality.

Result:

• On the current trunk without applying PR #11689, the alignment issue is still noticeable.
• After testing with PR #11689 applied, the alignment appears correct, no regressions were observed, and the metabox drag-and-drop functionality along with the overall UI behavior is working properly.

[audrasjb]

In 62377:

Editor: Remove an unwanted negative margin in Classic Editor metaboxes CSS styles.

This changeset reverts a negative -4px margin on #poststuff #post-body introduced in [61646].

Follow-up to [61646], [61759], [62284].

Props TobiasBg, umeshnevase, audrasjb, jadavsanjay, khokansardar, darshitrajyaguru97, gaurangsondagar.
Fixes #65141.

[audrasjb]

Reopening for second committer sign off and backport.

[SergeyBiryukov]

In 62381:

Editor: Remove an unwanted negative margin in Classic Editor metaboxes CSS styles.

This changeset reverts a negative -4px margin on #poststuff #post-body introduced in [61646].

Follow-up to [61646], [61759], [62284].

Reviewed by audrasjb, SergeyBiryukov.
Merges [62377] to the 7.0 branch.

Props TobiasBg, umeshnevase, audrasjb, jadavsanjay, khokansardar, darshitrajyaguru97, gaurangsondagar.
Fixes #65141.