WordPress.org

Make WordPress Core

Opened 12 months ago

Last modified 3 months ago

#51712 new defect (bug)

editPermalink() does not properly restore buttons after editing.

Reported by: bjornbrandewallnaviga Owned by:
Milestone: Awaiting Review Priority: normal
Severity: minor Version: 5.5.1
Component: Editor Keywords: reporter-feedback
Focuses: javascript Cc:

Description

DESCRIPTION

In www/wp-admin/js/post.js, the function editPermalink():

When clicking the '.save' button, it makes a post/ajax request and replaces #edit-slug-box with new data. Before this, it has made "backups" of fields in variables permalinkOrig and buttonsOrig. However, when it supposedly restores these, the variables it sets the content to (permalink and buttons), have been removed from the document tree by box.html(data);, so nothing happens.

TO REPRODUCE

  1. Run something like this, which will add a button next to the "Edit" button in the permalink area:
jQuery(document).ready(function(){
    jQuery('<button type="button" class="button button-small">This button ought to perservere!</button>')
        .insertAfter('#edit-slug-buttons')
});
  1. Edit the permalink, make some change, and click "OK".

DESIRED BEHAVIOR: As the "Edit" button reappears, the new button is still next to it.

ACTUAL BEHAVIOR: The new button is gone.

SOLUTION

After running box.html(data);, add these lines (around line 1017) to "reload" the variables before filling them with content:

permalink = $( '#sample-permalink' );
buttons = $('#edit-slug-buttons');

Change History (3)

#1 @bjornbrandewallnaviga
12 months ago

Correction: when reproducing, use this code block instead of the one above. Then the example will make more sense.

jQuery(document).ready(function(){
    jQuery('<button type="button" class="button button-small">This button ought to perservere!</button>')
        .appendTo('#edit-slug-buttons')
});

#2 @sabernhardt
11 months ago

@bjornbrandewallnaviga Thanks for the report!

I think you might have better success using the get_sample_permalink_html filter rather than inserting buttons with JavaScript.

Adding a button at the end of the edit-slug-box container:

add_filter( 'get_sample_permalink_html', 'my_permalink_button_added_to_end', 10, 1 );

function my_permalink_button_added_to_end( $html ) 
{
	$newbutton = '<button type="button" class="button button-small">This button ought to perservere!</button>';

	$html .= $newbutton;

	return $html;
}

Adding a button inside the edit-slug-buttons container:

add_filter( 'get_sample_permalink_html', 'my_permalink_button_added_inside', 10, 1 );

function my_permalink_button_added_inside( $html ) 
{
	$newbutton = '<button type="button" class="button button-small">This button ought to perservere!</button>';
	
	$html = str_replace(
		"</button></span>",
		"</button> " . $newbutton . "</span>",
		$html
	);

	return $html;
}
Last edited 11 months ago by sabernhardt (previous) (diff)

#3 @sabernhardt
3 months ago

  • Keywords reporter-feedback added

@bjornbrandewallnaviga Does using the filter instead of jQuery work for you?

Note: See TracTickets for help on using tickets.