diff --git a/src/js/_enqueues/wp/theme.js b/src/js/_enqueues/wp/theme.js
index 56107ee475057..b8a555801b765 100644
--- a/src/js/_enqueues/wp/theme.js
+++ b/src/js/_enqueues/wp/theme.js
@@ -683,7 +683,7 @@ themes.view.Details = wp.Backbone.View.extend({
render: function() {
var data = this.model.toJSON();
- this.$el.html( this.html( data ) );
+ this.$el.html( this.html( data ) ).attr( 'data-slug', data.id );
// Renders active theme styles.
this.activeTheme();
// Set up navigation events.
diff --git a/src/js/_enqueues/wp/updates.js b/src/js/_enqueues/wp/updates.js
index ef4b47e66093e..b7659488b5748 100644
--- a/src/js/_enqueues/wp/updates.js
+++ b/src/js/_enqueues/wp/updates.js
@@ -1567,17 +1567,21 @@
$notice = $notice.addClass( 'updating-message' ).find( 'p' );
} else {
- $notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
+ $notice = $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ).removeClass( 'notice-large' );
$notice.find( 'h3' ).remove();
- $notice = $notice.add( $( '[data-slug="' + args.slug + '"]' ).find( '.update-message' ) );
$notice = $notice.addClass( 'updating-message' ).find( 'p' );
}
- if ( $notice.html() !== __( 'Updating...' ) ) {
- $notice.data( 'originaltext', $notice.html() );
- }
+ // Store each notice's own original text; $notice can match more than one notice (e.g. the theme details overlay and its grid card).
+ $notice.each( function() {
+ var $text = $( this );
+
+ if ( $text.html() !== __( 'Updating...' ) ) {
+ $text.data( 'originaltext', $text.html() );
+ }
+ } );
wp.a11y.speak( __( 'Updating... please wait.' ) );
$notice.text( __( 'Updating...' ) );
@@ -2502,7 +2506,7 @@
*/
$document.on( 'credential-modal-cancel', function( event, job ) {
var $updatingMessage = $( '.updating-message' ),
- $message, originalText;
+ $message;
if ( 'import' === pagenow ) {
$updatingMessage.removeClass( 'updating-message' );
@@ -2524,38 +2528,49 @@
$message = $updatingMessage;
}
- if ( $message && $message.hasClass( 'updating-message' ) ) {
- originalText = $message.data( 'originaltext' );
+ if ( $message && $message.length ) {
- if ( 'undefined' === typeof originalText ) {
- originalText = $( '' ).html( $message.find( 'p' ).data( 'originaltext' ) );
- }
+ // Reset each matched notice with its own original content; $message can match more than one notice (e.g. the theme details overlay and its grid card).
+ $message.each( function() {
+ var $notice = $( this ),
+ originalText;
- $message
- .removeClass( 'updating-message' )
- .html( originalText );
+ if ( ! $notice.hasClass( 'updating-message' ) ) {
+ return;
+ }
- if ( 'plugin-install' === pagenow || 'plugin-install-network' === pagenow ) {
- if ( 'update-plugin' === job.action ) {
- $message.attr(
- 'aria-label',
- sprintf(
- /* translators: %s: Plugin name and version. */
- _x( 'Update %s now', 'plugin' ),
- $message.data( 'name' )
- )
- );
- } else if ( 'install-plugin' === job.action ) {
- $message.attr(
- 'aria-label',
- sprintf(
- /* translators: %s: Plugin name. */
- _x( 'Install %s now', 'plugin' ),
- $message.data( 'name' )
- )
- );
+ originalText = $notice.data( 'originaltext' );
+
+ if ( 'undefined' === typeof originalText ) {
+ originalText = $( '
' ).html( $notice.find( 'p' ).data( 'originaltext' ) );
}
- }
+
+ $notice
+ .removeClass( 'updating-message' )
+ .html( originalText );
+
+ if ( 'plugin-install' === pagenow || 'plugin-install-network' === pagenow ) {
+ if ( 'update-plugin' === job.action ) {
+ $notice.attr(
+ 'aria-label',
+ sprintf(
+ /* translators: %s: Plugin name and version. */
+ _x( 'Update %s now', 'plugin' ),
+ $notice.data( 'name' )
+ )
+ );
+ } else if ( 'install-plugin' === job.action ) {
+ $notice.attr(
+ 'aria-label',
+ sprintf(
+ /* translators: %s: Plugin name. */
+ _x( 'Install %s now', 'plugin' ),
+ $notice.data( 'name' )
+ )
+ );
+ }
+ }
+ } );
}
wp.a11y.speak( __( 'Update canceled.' ) );
diff --git a/src/wp-admin/themes.php b/src/wp-admin/themes.php
index a9f24765ce742..752d42023606e 100644
--- a/src/wp-admin/themes.php
+++ b/src/wp-admin/themes.php
@@ -1153,7 +1153,7 @@ function wp_theme_auto_update_setting_template() {
<# if ( data.hasUpdate ) { #>
<# if ( data.updateResponse.compatibleWP && data.updateResponse.compatiblePHP ) { #>
-
+
{{{ data.update }}}
diff --git a/tests/qunit/wp-admin/js/updates.js b/tests/qunit/wp-admin/js/updates.js
index 9d3948811abfd..a55b628f6fd6f 100644
--- a/tests/qunit/wp-admin/js/updates.js
+++ b/tests/qunit/wp-admin/js/updates.js
@@ -136,6 +136,8 @@ jQuery( function( $ ) {
window.pagenow = this.oldPagenow;
wp.updates.ajaxLocked = false;
wp.updates.queue = [];
+ wp.updates.shouldRequestFilesystemCredentials = false;
+ wp.updates.filesystemCredentials.available = false;
jQuery.ajax.restore();
}
} );
@@ -174,6 +176,51 @@ jQuery( function( $ ) {
assert.equal( jQuery.ajax.getCall( 0 ).args[0].data.slug, 'twentyeleven' );
} );
+ QUnit.test( 'Canceling the credentials modal restores both the theme details overlay and the grid card, each with its own original content', function( assert ) {
+ var $overlayNotice = $(
+ '
' +
+ '
' +
+ '
' +
+ '
Update Available
' +
+ '
There is a new version of Twenty Eleven available. update now.
' +
+ '
' +
+ '
' +
+ '
'
+ ).appendTo( '#qunit-fixture' ),
+ $rowNotice = $(
+ '
' +
+ '
' +
+ '
New version available.
' +
+ '
' +
+ '
'
+ ).appendTo( '#qunit-fixture' ),
+ eventTarget = $overlayNotice.find( '#update-theme' );
+
+ $( '
' )
+ .appendTo( '#qunit-fixture' );
+
+ wp.updates.shouldRequestFilesystemCredentials = true;
+ wp.updates.filesystemCredentials.available = false;
+
+ wp.updates.maybeRequestFilesystemCredentials( $.Event( 'click', {
+ target: eventTarget[0]
+ } ) );
+
+ wp.updates.updateTheme( { slug: 'twentyeleven' } );
+
+ assert.strictEqual( wp.updates.queue.length, 1, 'Theme update waits for credentials.' );
+ assert.true( $overlayNotice.find( '.notice' ).hasClass( 'updating-message' ), 'Overlay notice is marked as updating.' );
+ assert.true( $rowNotice.find( '.update-message' ).hasClass( 'updating-message' ), 'Theme row notice is marked as updating.' );
+
+ wp.updates.requestForCredentialsModalCancel();
+
+ assert.false( $overlayNotice.find( '.notice' ).hasClass( 'updating-message' ), 'Overlay notice resets after cancel.' );
+ assert.false( $rowNotice.find( '.update-message' ).hasClass( 'updating-message' ), 'Theme row notice resets after cancel.' );
+ assert.strictEqual( $overlayNotice.find( '#update-theme' ).length, 1, 'Overlay notice keeps its own "update now" link, so a retry click still works.' );
+ assert.strictEqual( $rowNotice.find( '#update-theme' ).length, 0, 'Row notice does not receive the overlay\'s link markup.' );
+ assert.strictEqual( $rowNotice.find( '.button-link' ).length, 1, 'Row notice keeps its own "Update now" button after cancel.' );
+ } );
+
// QUnit.test( 'A successful update changes the message?', function( assert ) {} );
// QUnit.test( 'A failed update changes the message?', function( assert ) {} );
});