WordPress.org

Make WordPress Core

Opened 2 years ago

Closed 23 months ago

Last modified 20 months ago

#23240 closed defect (bug) (fixed)

#post-body-content gap with one custom metabox

Reported by: soulseekah Owned by: helen
Milestone: 3.6 Priority: normal
Severity: minor Version: 3.5
Component: Administration Keywords:
Focuses: ui Cc:

Description

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.

Attachments (9)

post-body-margin.png (186.9 KB) - added by soulseekah 2 years ago.
wp-admin.css.patch (429 bytes) - added by ew_holmes 2 years ago.
Altered #post-body-content styles to affect the TinyMCE Editor container (#postdivrich)
with_title_and_editor.PNG (49.0 KB) - added by ew_holmes 2 years ago.
Showing the style change within a normal post situation (Title + editor)
without_title_and_editor.PNG (22.7 KB) - added by ew_holmes 2 years ago.
Showing the example given - no title or editor support
23240.diff (1.1 KB) - added by helen 2 years ago.
edit-form-test.php (627 bytes) - added by helen 2 years ago.
Very simple plugin for testing
heavy-metal.png (131.3 KB) - added by soulseekah 2 years ago.
20px off
23240.comment-history-wp35.png (14.8 KB) - added by SergeyBiryukov 2 years ago.
23240.comment-history-wp36.png (14.8 KB) - added by SergeyBiryukov 2 years ago.

Download all attachments as: .zip

Change History (28)

@soulseekah2 years ago

comment:1 @soulseekah2 years ago

  • Version set to 3.5
Version 0, edited 2 years ago by soulseekah (next)

comment:2 @kovshenin2 years ago

  • Cc kovshenin added

comment:3 @MikeHansenMe2 years ago

  • Cc mdhansen@… added

comment:4 @helen2 years ago

  • Component changed from Post Types to Administration
  • Keywords ui-focus needs-patch added
  • Milestone changed from Awaiting Review to 3.6

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_holmes2 years ago

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

@ew_holmes2 years ago

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

@ew_holmes2 years ago

Showing the example given - no title or editor support

comment:5 @ew_holmes2 years ago

  • Cc eric@… added

comment:6 @ew_holmes2 years ago

  • Keywords has-patch added; needs-patch removed

comment:7 @helen2 years ago

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.

comment:8 @helen2 years ago

  • Keywords has-patch removed

comment:9 @somatic2 years ago

  • Cc israel@… added

@helen2 years ago

comment:10 @helen2 years ago

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.

@helen2 years ago

Very simple plugin for testing

comment:11 @helen2 years ago

  • Owner set to helen
  • Resolution set to fixed
  • Status changed from new to closed

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.

comment:12 follow-up: @soulseekah2 years ago

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)

@soulseekah2 years ago

20px off

comment:13 in reply to: ↑ 12 ; follow-up: @SergeyBiryukov2 years ago

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?

comment:14 in reply to: ↑ 13 @soulseekah2 years ago

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.

comment:15 @WraithKenny2 years ago

  • Cc Ken@… added

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

comment:16 @SergeyBiryukov2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

[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.

comment:17 @helen23 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 23955:

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

comment:19 @helen20 months ago

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.

Note: See TracTickets for help on using tickets.