editPermalink() does not properly restore buttons after editing.

[bjornbrandewallnaviga]

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')
});

2. 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');

[bjornbrandewallnaviga]

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')
});

[sabernhardt]

@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;
}

[sabernhardt]

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

[sabernhardt]

I'm closing the ticket because there is a way to make it work. If it is not good enough, feel free to reopen.