#post-body-content gap with one custom metabox

[soulseekah]

Gap before metabox when post type does not support title and editor, the #post-body-content div is empty but has a 20px margin which makes any next metabox unaligned. Probably shouldn't be displayed at all.

add_action( 'init', function() { register_post_type( 'test', array( 'supports' => array( 'nothing' ), 'public' => true ) ); } );
add_action( 'add_meta_boxes', function() {
add_meta_box(
	'edit-ui', 'Test UI', function() {
		echo '<p>Feeling a bit too heavy...</p>';
	}, 'test', 'normal', 'core' );
} );

Attached image shows it all, highlighting parts in yellow.

[soulseekah]

Can't seem to reproduce in 3.4.2 and below.

[helen]

Hmm, that's my fault. Should probably look at doing better margins/markup all around on the edit screen so that adding stuff using the edit_form_after_* hooks works without extra styling or wrappers but we don't get any funny gaps when something isn't shown.

[ew_holmes]

Altered #post-body-content styles to affect the TinyMCE Editor container (#postdivrich)

[ew_holmes]

Showing the style change within a normal post situation (Title + editor)

[ew_holmes]

Showing the example given - no title or editor support

[helen]

wp-admin.css.patch​ is not quite correct, as the attachment compat fields are not within the TinyMCE div.

I'm still hoping to find a solution that allows people to utilize the edit form hooks without having to add extra CSS or markup of their own to achieve sane spacing. Happy to have somebody else take a stab; looking at it myself in the meantime.

[helen]

23240.diff​ is a starting point for what I was thinking about a more generic solution - using a class of .edit-form-section to give better HTML structure and that pesky bottom margin to pieces of the edit screen that need it. Then it can also better accommodate custom additions on the edit_form_after_* hooks by adding a wrapping div with said class if has_action().

Patch really is only a starting point - edit_form_after_editor would need the same treatment, and the class would probably need to be applied to a few existing elements in edit-form-advanced.php. And, of course, testing.

[helen]

Very simple plugin for testing

[helen]

In 23615:

Prevent an unseemly gap on the edit screen when nothing else displays before normal meta boxes. Give better HTML and visual structure to items added via edit_form_after_title and edit_form_after_editor. Using a class of .edit-form-section will now get you a 20px bottom margin; perfect for your additions to the post edit screen. fixes #23240.

[soulseekah]

Nope, my test above has still got the same results.

add_action( 'init', function() { register_post_type( 'test', array( 'supports' => array( 'nothing' ), 'public' => true ) ); } );
add_action( 'add_meta_boxes', function() {
add_meta_box(
	'edit-ui', 'Test UI', function() {
		echo '<p>Feeling a bit too heavy...</p>';
	}, 'test', 'normal', 'core' );
} );

Is there something I'm missing?

(At revision 23615)

[soulseekah]

20px off

[SergeyBiryukov]

Replying to soulseekah:

Nope, my test above has still got the same results.

Could not reproduce in Firefox 19. Do you have SCRIPT_DEBUG enabled?

[soulseekah]

Replying to SergeyBiryukov:

Could not reproduce in Firefox 19. Do you have SCRIPT_DEBUG enabled?

No, my apologies, completely forgot about it.
Looks good, thank you, helen.

[WraithKenny]

I have a concern about this commit. What happens to code if a plugin developer was using the hooks to add a wrapper div around the editor? (Open <div class="wrap"> on 'edit_form_after_title' and closing </div> on 'edit_form_after_editor') It'd break the html in bad ways. I don't know if anyone has code in the wild doing this but I (temporarily) did this on a client's site for 3.5.1 (but went with dropping the editor on that particular case).

[SergeyBiryukov]

[23615] removed the gap between comment editor and Akismet's "Comment History" meta box on Edit Comment screen (see the screenshots).

Caused by removing margin-bottom: 20px for #post-body-content.

[helen]

In 23955:

Add .edit-form-section class to the comment edit form for correct spacing. fixes #23240.

[SergeyBiryukov]

Related: #24334

[helen]

In 24586:

Remove the conditional wrappers for the edit_form_after_* hooks. Using the .edit-form-section class will still add a 20px bottom margin; devs will just want to add wrapping containers as appropriate. fixes #24334; see #23240.