WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 9 months ago

Last modified 9 months ago

#14860 closed defect (bug) (invalid)

"Updated" message DIV jumping around Edit Post screen

Reported by: Alhadis Owned by:
Milestone: Priority: normal
Severity: minor Version: 3.0.1
Component: JavaScript Keywords: close
Focuses: Cc:

Description

Okay, so I'm developing a plugin that uses a separate form tag on the Edit Posts screen to manage custom attributes. This form's inserted into the header using the "in_admin_header" action.

Now, to keep the same consistent formatting, I've used the same class names as used by the headings on the rest of the page:

<div class="wrap rbs_ep">
	<div class="icon32"><br /></div>
	<h2>Edit Properties</h2>
	
	...
</div>

Now, whenever the page is published or updated, the "Updated" message box suddenly jumps from the top of the page into the form. Looking through the source for a bit, I found the culprit:

./wp-admin/js/common.dev :: Lines 197-199

// Move .updated and .error alert boxes. Don't move boxes designed to be inline.
$('div.wrap h2:first').nextAll('div.updated, div.error').addClass('below-h2');
$('div.updated, div.error').not('.below-h2, .inline').insertAfter( $('div.wrap h2:first') );

This little script is assuming that the first <h2> tag it finds is the one being displayed at the top of the page to the user. Now, I know the obvious solution here would simply be to move the form's source to the page's footer, but I still think this is a clumsy solution to an otherwise preventable issue.

Can't the Edit Page's heading be assigned an ID so the script can place the "updated" box more accurately? I don't want to duplicate CSS rules in my layout simply to reapply the same formatting using a different tag (e.g., "<div class="h2">Edit Properties</div>"), as this'd simply be a messier approach. I think the script should be looking for a H2 tag with an ID (or at least a specific CSS class) to place the message box.

Attachments (1)

screengrab.png (198.2 KB) - added by Alhadis 4 years ago.
Screenshot of the suspended dialog, using the source of the hidden form tag inserted in page's header.

Download all attachments as: .zip

Change History (4)

Alhadis4 years ago

Screenshot of the suspended dialog, using the source of the hidden form tag inserted in page's header.

comment:1 nacin4 years ago

There's not much we can do here, because we want the UI of plugins to be in line wiht core, and authors have the expectation that <div class="wrap"><h2>Title</h2> ... </div> will simply work. It's not just about changing core.

It would take very little for your formatting to not conflict with this. You're using a thickbox popup anyway, so you can either change the wrap class, use an h3, rearrange the form orders, or something. Using an h2 is designed for a page title only, not a section title in a popup like this.

comment:2 c3mdigital9 months ago

  • Keywords close added; CSS JavaScript jQuery Updated Message Edit Post selector removed
  • Resolution set to invalid
  • Status changed from new to closed

comment:3 helen9 months ago

  • Milestone Awaiting Review deleted
Note: See TracTickets for help on using tickets.