WordPress.org

Make WordPress Core

Opened 15 months ago

Closed 12 months ago

Last modified 9 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 15 months ago.
wp-admin.css.patch (429 bytes) - added by ew_holmes 15 months 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 15 months ago.
Showing the style change within a normal post situation (Title + editor)
without_title_and_editor.PNG (22.7 KB) - added by ew_holmes 15 months ago.
Showing the example given - no title or editor support
23240.diff (1.1 KB) - added by helen 14 months ago.
edit-form-test.php (627 bytes) - added by helen 14 months ago.
Very simple plugin for testing
heavy-metal.png (131.3 KB) - added by soulseekah 14 months ago.
20px off
23240.comment-history-wp35.png (14.8 KB) - added by SergeyBiryukov 12 months ago.
23240.comment-history-wp36.png (14.8 KB) - added by SergeyBiryukov 12 months ago.

Download all attachments as: .zip

Change History (28)

comment:1 soulseekah15 months ago

  • Version set to 3.5

Can't seem to reproduce in 3.4.2 and below.

Last edited 15 months ago by soulseekah (previous) (diff)

comment:2 kovshenin15 months ago

  • Cc kovshenin added

comment:3 MikeHansenMe15 months ago

  • Cc mdhansen@… added

comment:4 helen15 months 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_holmes15 months ago

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

ew_holmes15 months ago

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

ew_holmes15 months ago

Showing the example given - no title or editor support

comment:5 ew_holmes15 months ago

  • Cc eric@… added

comment:6 ew_holmes15 months ago

  • Keywords has-patch added; needs-patch removed

comment:7 helen14 months 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 helen14 months ago

  • Keywords has-patch removed

comment:9 somatic14 months ago

  • Cc israel@… added

helen14 months ago

comment:10 helen14 months 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.

helen14 months ago

Very simple plugin for testing

comment:11 helen14 months 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: soulseekah14 months 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)

soulseekah14 months ago

20px off

comment:13 in reply to: ↑ 12 ; follow-up: SergeyBiryukov14 months 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 soulseekah14 months 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 WraithKenny13 months 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 SergeyBiryukov12 months 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 helen12 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 helen9 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.