WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 years ago

Last modified 3 years 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 4 years ago.
wp-admin.css.patch (429 bytes) - added by ew_holmes 4 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 4 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 4 years ago.
Showing the example given - no title or editor support
23240.diff (1.1 KB) - added by helen 4 years ago.
edit-form-test.php (627 bytes) - added by helen 4 years ago.
Very simple plugin for testing
heavy-metal.png (131.3 KB) - added by soulseekah 4 years ago.
20px off
23240.comment-history-wp35.png (14.8 KB) - added by SergeyBiryukov 3 years ago.
23240.comment-history-wp36.png (14.8 KB) - added by SergeyBiryukov 3 years ago.

Download all attachments as: .zip

Change History (28)

#1 @soulseekah
4 years ago

  • Version set to 3.5

Can't seem to reproduce in 3.4.2 and below.

Last edited 4 years ago by soulseekah (previous) (diff)

#2 @kovshenin
4 years ago

  • Cc kovshenin added

#3 @MikeHansenMe
4 years ago

  • Cc mdhansen@… added

#4 @helen
4 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_holmes
4 years ago

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

@ew_holmes
4 years ago

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

@ew_holmes
4 years ago

Showing the example given - no title or editor support

#5 @ew_holmes
4 years ago

  • Cc eric@… added

#6 @ew_holmes
4 years ago

  • Keywords has-patch added; needs-patch removed

#7 @helen
4 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.

#8 @helen
4 years ago

  • Keywords has-patch removed

#9 @somatic
4 years ago

  • Cc israel@… added

@helen
4 years ago

#10 @helen
4 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.

@helen
4 years ago

Very simple plugin for testing

#11 @helen
4 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.

#12 follow-up: @soulseekah
4 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)

@soulseekah
4 years ago

20px off

#13 in reply to: ↑ 12 ; follow-up: @SergeyBiryukov
4 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?

#14 in reply to: ↑ 13 @soulseekah
4 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.

#15 @WraithKenny
4 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).

#16 @SergeyBiryukov
3 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.

#17 @helen
3 years 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.

#19 @helen
3 years 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.