* @file Contains all dynamic functionality needed on post and term pages.
* @output wp-admin/js/post.js
/* global ajaxurl, wpAjax, postboxes, pagenow, tinymce, alert, deleteUserSetting, ClipboardJS */
/* global theList:true, theExtraList:true, getUserSetting, setUserSetting, commentReply, commentsBox */
/* global WPSetThumbnailHTML, wptitlehint */
// Backward compatibility: prevent fatal errors.
window.makeSlugeditClickable = window.editPermalink = function(){};
// Make sure the wp object exists.
window.wp = window.wp || {};
var titleHasFocus = false,
* Control loading of comments on the post and term edit pages.
* @type {{st: number, get: commentsBox.get, load: commentsBox.load}}
// Comment offset to use when fetching new comments.
* Fetch comments using Ajax and display them in the box.
* @param {number} total Total number of comments for this post.
* @param {number} num Optional. Number of comments to fetch, defaults to 20.
* @return {boolean} Always returns false.
get : function(total, num) {
$( '#commentsdiv .spinner' ).addClass( 'is-active' );
'action' : 'get-comments',
'_ajax_nonce' : $('#add_comment_nonce').val(),
'p' : $('#post_ID').val(),
r = wpAjax.parseAjaxResponse(r);
$('#commentsdiv .widefat').show();
$( '#commentsdiv .spinner' ).removeClass( 'is-active' );
if ( 'object' == typeof r && r.responses[0] ) {
$('#the-comment-list').append( r.responses[0].data );
theList = theExtraList = null;
$( 'a[className*=\':\']' ).off();
// If the offset is over the total number of comments we cannot fetch any more, so hide the button.
if ( commentsBox.st > commentsBox.total )
$('#show-comments').hide();
$('#show-comments').show().children('a').text( __( 'Show more comments' ) );
$('#show-comments').text( __( 'No more comments found.' ) );
$('#the-comment-list').append('<tr><td colspan="2">'+wpAjax.broken+'</td></tr>');
* Load the next batch of comments.
* @param {number} total Total number of comments to load.
this.st = jQuery('#the-comment-list tr.comment:visible').length;
* Overwrite the content of the Featured Image postbox
* @param {string} html New HTML to be displayed in the content area of the postbox.
window.WPSetThumbnailHTML = function(html){
$('.inside', '#postimagediv').html(html);
* Set the Image ID of the Featured Image
* @param {number} id The post_id of the image to use as Featured Image.
window.WPSetThumbnailID = function(id){
var field = $('input[value="_thumbnail_id"]', '#list-table');
if ( field.length > 0 ) {
$('#meta\\[' + field.attr('id').match(/[0-9]+/) + '\\]\\[value\\]').text(id);
* Remove the Featured Image
* @param {string} nonce Nonce to use in the request.
window.WPRemoveThumbnail = function(nonce){
action: 'set-post-thumbnail', post_id: $( '#post_ID' ).val(), thumbnail_id: -1, _ajax_nonce: nonce, cookie: encodeURIComponent( document.cookie )
* @param {string} str Response, will be '0' when an error occurred otherwise contains link to add Featured Image.
alert( __( 'Could not set that as the thumbnail image. Try a different attachment.' ) );
* Used to lock editing of an object by only one user at a time.
* When the user does not send a heartbeat in a heartbeat-time
* the user is no longer editing and another user can start editing.
$(document).on( 'heartbeat-send.refresh-lock', function( e, data ) {
var lock = $('#active_post_lock').val(),
post_id = $('#post_ID').val(),
if ( ! post_id || ! $('#post-lock-dialog').length )
data['wp-refresh-post-lock'] = send;
}).on( 'heartbeat-tick.refresh-lock', function( e, data ) {
// Post locks: update the lock string or show the dialog if somebody has taken over editing.
var received, wrap, avatar;
if ( data['wp-refresh-post-lock'] ) {
received = data['wp-refresh-post-lock'];
if ( received.lock_error ) {
// Show "editing taken over" message.
wrap = $('#post-lock-dialog');
if ( wrap.length && ! wrap.is(':visible') ) {
// Save the latest changes and disable.
$(document).one( 'heartbeat-tick', function() {
wp.autosave.server.suspend();
wrap.removeClass('saving').addClass('saved');
$(window).off( 'beforeunload.edit-post' );
wp.autosave.server.triggerSave();
if ( received.lock_error.avatar_src ) {
'class': 'avatar avatar-64 photo',
src: received.lock_error.avatar_src,
srcset: received.lock_error.avatar_src_2x ? received.lock_error.avatar_src_2x + ' 2x' : undefined
wrap.find('div.post-locked-avatar').empty().append( avatar );
wrap.show().find('.currently-editing').text( received.lock_error.text );
wrap.find('.wp-tab-first').trigger( 'focus' );
} else if ( received.new_lock ) {
$('#active_post_lock').val( received.new_lock );
}).on( 'before-autosave.update-post-slug', function() {
titleHasFocus = document.activeElement && document.activeElement.id === 'title';
}).on( 'after-autosave.update-post-slug', function() {
* Create slug area only if not already there
* and the title field was not focused (user was not typing a title) when autosave ran.
if ( ! $('#edit-slug-box > *').length && ! titleHasFocus ) {
action: 'sample-permalink',
post_id: $('#post_ID').val(),
new_title: $('#title').val(),
samplepermalinknonce: $('#samplepermalinknonce').val()
$('#edit-slug-box').html(data);
* Heartbeat refresh nonces.
* Only allow to check for nonce refresh every 30 seconds.
window.clearTimeout( timeout );
timeout = window.setTimeout( function(){ check = true; }, 300000 );
$(document).on( 'heartbeat-send.wp-refresh-nonces', function( e, data ) {
$authCheck = $('#wp-auth-check-wrap');
if ( check || ( $authCheck.length && ! $authCheck.hasClass( 'hidden' ) ) ) {
if ( ( post_id = $('#post_ID').val() ) && $('#_wpnonce').val() ) {
data['wp-refresh-post-nonces'] = {
}).on( 'heartbeat-tick.wp-refresh-nonces', function( e, data ) {
var nonces = data['wp-refresh-post-nonces'];
$.each( nonces.replace, function( selector, value ) {
$( '#' + selector ).val( value );
if ( nonces.heartbeatNonce )
window.heartbeatSettings.nonce = nonces.heartbeatNonce;
* All post and postbox controls and functionality.
jQuery(document).ready( function($) {
var stamp, visibility, $submitButtons, updateVisibility, updateText,
$textarea = $('#content'),
postId = $('#post_ID').val() || 0,
$submitpost = $('#submitpost'),
$postVisibilitySelect = $('#post-visibility-select'),
$timestampdiv = $('#timestampdiv'),
$postStatusSelect = $('#post-status-select'),
isMac = window.navigator.platform ? window.navigator.platform.indexOf( 'Mac' ) !== -1 : false,
copyAttachmentURLClipboard = new ClipboardJS( '.copy-attachment-url.edit-media' ),
copyAttachmentURLSuccessTimeout,
__ = wp.i18n.__, _x = wp.i18n._x;
postboxes.add_postbox_toggles(pagenow);
* Clear the window name. Otherwise if this is a former preview window where the user navigated to edit another post,
* and the first post is still being edited, clicking Preview there will use this window to show the preview.
// Post locks: contain focus inside the dialog. If the dialog is shown, focus the first item.
$('#post-lock-dialog .notification-dialog').on( 'keydown', function(e) {
// Don't do anything when [Tab] is pressed.
var target = $(e.target);
// [Shift] + [Tab] on first tab cycles back to last tab.
if ( target.hasClass('wp-tab-first') && e.shiftKey ) {
$(this).find('.wp-tab-last').trigger( 'focus' );
// [Tab] on last tab cycles back to first tab.
} else if ( target.hasClass('wp-tab-last') && ! e.shiftKey ) {
$(this).find('.wp-tab-first').trigger( 'focus' );
}).filter(':visible').find('.wp-tab-first').trigger( 'focus' );
// Set the heartbeat interval to 15 seconds if post lock dialogs are enabled.
if ( wp.heartbeat && $('#post-lock-dialog').length ) {
wp.heartbeat.interval( 15 );
// The form is being submitted by the user.
$submitButtons = $submitpost.find( ':submit, a.submitdelete, #post-preview' ).on( 'click.edit-post', function( event ) {
if ( $button.hasClass('disabled') ) {
if ( $button.hasClass('submitdelete') || $button.is( '#post-preview' ) ) {
// The form submission can be blocked from JS or by using HTML 5.0 validation on some fields.
// Run this only on an actual 'submit'.
$('form#post').off( 'submit.edit-post' ).on( 'submit.edit-post', function( event ) {
if ( event.isDefaultPrevented() ) {
wp.autosave.server.suspend();
if ( typeof commentReply !== 'undefined' ) {
* Warn the user they have an unsaved comment before submitting
* the post data for update.
if ( ! commentReply.discardCommentChanges() ) {
* Close the comment edit/reply form if open to stop the form
* action from interfering with the post's form action.
$(window).off( 'beforeunload.edit-post' );
$submitButtons.addClass( 'disabled' );
if ( $button.attr('id') === 'publish' ) {
$submitpost.find( '#major-publishing-actions .spinner' ).addClass( 'is-active' );
$submitpost.find( '#minor-publishing .spinner' ).addClass( 'is-active' );
// Submit the form saving a draft or an autosave, and show a preview in a new tab.
$('#post-preview').on( 'click.post-preview', function( event ) {
$previewField = $('input#wp-preview'),
target = $this.attr('target') || 'wp-preview',
ua = navigator.userAgent.toLowerCase();
if ( $this.hasClass('disabled') ) {
wp.autosave.server.tempBlockSave();
$previewField.val('dopreview');
$form.attr( 'target', target ).trigger( 'submit' ).attr( 'target', '' );
// Workaround for WebKit bug preventing a form submitting twice to the same action.
// https://bugs.webkit.org/show_bug.cgi?id=28633
if ( ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1 ) {
$form.attr( 'action', function( index, value ) {
return value + '?t=' + ( new Date() ).getTime();
// This code is meant to allow tabbing from Title to Post content.
$('#title').on( 'keydown.editor-focus', function( event ) {
if ( event.keyCode === 9 && ! event.ctrlKey && ! event.altKey && ! event.shiftKey ) {
editor = typeof tinymce != 'undefined' && tinymce.get('content');
if ( editor && ! editor.isHidden() ) {
} else if ( $textarea.length ) {
$textarea.trigger( 'focus' );
// Auto save new posts after a title is typed.
if ( $( '#auto_draft' ).val() ) {
$( '#title' ).on( 'blur', function() {
if ( ! this.value || $('#edit-slug-box > *').length ) {
// Cancel the auto save when the blur was triggered by the user submitting the form.
$('form#post').one( 'submit', function() {
window.setTimeout( function() {
if ( ! cancel && wp.autosave ) {
wp.autosave.server.triggerSave();
$document.on( 'autosave-disable-buttons.edit-post', function() {
$submitButtons.addClass( 'disabled' );
}).on( 'autosave-enable-buttons.edit-post', function() {
if ( ! wp.heartbeat || ! wp.heartbeat.hasConnectionError() ) {
$submitButtons.removeClass( 'disabled' );
}).on( 'before-autosave.edit-post', function() {
$( '.autosave-message' ).text( __( 'Saving Draft…' ) );
}).on( 'after-autosave.edit-post', function( event, data ) {
$( '.autosave-message' ).text( data.message );
if ( $( document.body ).hasClass( 'post-new-php' ) ) {
$( '.submitbox .submitdelete' ).show();
* When the user is trying to load another page, or reloads current page
* show a confirmation dialog when there are unsaved changes.
$( window ).on( 'beforeunload.edit-post', function( event ) {
var editor = window.tinymce && window.tinymce.get( 'content' );
changed = wp.autosave.server.postChanged();
changed = ( ! editor.isHidden() && editor.isDirty() );