Skip to content

Fix: duplicate theme update notices in details modal #11981

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sukhendu2002 wants to merge 1 commit into
base: trunk
Choose a base branch
from
+77 −12
Open

Fix: duplicate theme update notices in details modal #11981

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 19 additions & 10 deletions src/js/_enqueues/wp/updates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1545,7 +1545,7 @@
* decorated with an abort() method.
*/
wp.updates.updateTheme = function( args ) {
var $notice;
var $notice, $modalNotice;

args = _.extend( {
success: wp.updates.updateThemeSuccess,
Expand All @@ -1567,7 +1567,8 @@
$notice = $notice.addClass( 'updating-message' ).find( 'p' );

} else {
$notice = $( '#update-theme' ).closest( '.notice' ).removeClass( 'notice-large' );
$modalNotice = $( '.theme-info .notice[data-slug="' + args.slug + '"]' );
$notice = $modalNotice.removeClass( 'notice-large' );

$notice.find( 'h3' ).remove();

Expand Down Expand Up @@ -1602,6 +1603,8 @@
wp.updates.updateThemeSuccess = function( response ) {
var isModalOpen = $( 'body.modal-open' ).length,
$theme = $( '[data-slug="' + response.slug + '"]' ),
$modalNotice = $( '.theme-info .notice[data-slug="' + response.slug + '"]' ),
isModalUpdate = $modalNotice.length,
updatedMessage = {
className: 'updated-message notice-success notice-alt',
message: _x( 'Updated!', 'theme' )
Expand All @@ -1618,7 +1621,7 @@
$theme.html( newText );
}

$notice = $( '.theme-info .notice' ).add( wp.customize.control( 'installed_theme_' + response.slug ).container.find( '.theme' ).find( '.update-message' ) );
$notice = $modalNotice.add( wp.customize.control( 'installed_theme_' + response.slug ).container.find( '.theme' ).find( '.update-message' ) );
} else if ( 'themes-network' === pagenow ) {
$notice = $theme.find( '.update-message' );

Expand All @@ -1629,13 +1632,13 @@
// Clear the "time to next auto-update" text.
$theme.find( '.auto-update-time' ).empty();
} else {
$notice = $( '.theme-info .notice' ).add( $theme.find( '.update-message' ) );
$notice = $modalNotice.add( $theme.find( '.update-message' ) );

// Focus on Customize button after updating.
if ( isModalOpen ) {
if ( isModalOpen && isModalUpdate ) {
$( '.load-customize:visible' ).trigger( 'focus' );
$( '.theme-info .theme-autoupdate' ).find( '.auto-update-time' ).empty();
} else {
} else if ( ! isModalOpen ) {
$theme.find( '.load-customize' ).trigger( 'focus' );
}
}
Expand All @@ -1648,7 +1651,7 @@
$document.trigger( 'wp-theme-update-success', response );

// Show updated message after modal re-rendered.
if ( isModalOpen && 'customize' !== pagenow ) {
if ( isModalOpen && isModalUpdate && 'customize' !== pagenow && ! $( '.theme-info .updated-message' ).length ) {
$( '.theme-info .theme-author' ).after( wp.updates.adminNotice( updatedMessage ) );
}
};
Expand All @@ -1664,7 +1667,9 @@
* @param {string} response.errorMessage The error that occurred.
*/
wp.updates.updateThemeError = function( response ) {
var $theme = $( '[data-slug="' + response.slug + '"]' ),
var isModalOpen = $( 'body.modal-open' ).length,
$theme = $( '[data-slug="' + response.slug + '"]' ),
$modalNotice = $( '.theme-info .notice[data-slug="' + response.slug + '"]' ),
errorMessage = sprintf(
/* translators: %s: Error string for a failed update. */
__( 'Update failed: %s' ),
Expand All @@ -1687,9 +1692,13 @@
if ( 'themes-network' === pagenow ) {
$notice = $theme.find( '.update-message ' );
} else {
$notice = $( '.theme-info .notice' ).add( $theme.find( '.notice' ) );
$notice = $modalNotice.add( $theme.find( '.notice' ) );

$( 'body.modal-open' ).length ? $( '.load-customize:visible' ).trigger( 'focus' ) : $theme.find( '.load-customize' ).trigger( 'focus');
if ( isModalOpen && $modalNotice.length ) {
$( '.load-customize:visible' ).trigger( 'focus' );
} else if ( ! isModalOpen ) {
$theme.find( '.load-customize' ).trigger( 'focus' );
}
}

wp.updates.addAdminNotice( {
Expand Down
4 changes: 2 additions & 2 deletions src/wp-admin/themes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1153,12 +1153,12 @@ function wp_theme_auto_update_setting_template() {

<# if ( data.hasUpdate ) { #>
<# if ( data.updateResponse.compatibleWP && data.updateResponse.compatiblePHP ) { #>
<div class="notice notice-warning notice-alt notice-large">
<div class="notice notice-warning notice-alt notice-large" data-slug="{{ data.id }}">
<h3 class="notice-title"><?php _e( 'Update Available' ); ?></h3>
{{{ data.update }}}
</div>
<# } else { #>
<div class="notice notice-error notice-alt notice-large">
<div class="notice notice-error notice-alt notice-large" data-slug="{{ data.id }}">
<h3 class="notice-title"><?php _e( 'Update Incompatible' ); ?></h3>
<p>
<# if ( ! data.updateResponse.compatibleWP && ! data.updateResponse.compatiblePHP ) { #>
Expand Down
56 changes: 56 additions & 0 deletions tests/qunit/wp-admin/js/updates.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,6 +158,62 @@ jQuery( function( $ ) {
assert.equal( jQuery.ajax.getCall( 0 ).args[0].data.slug, 'twentyeleven' );
} );

QUnit.test( 'Starting a theme update should not change unrelated theme details modal notices', function( assert ) {
var $fixture = $( '#qunit-fixture' );

$fixture.append(
'<div class="theme-info">' +
'<div class="notice notice-warning" data-slug="twentytwelve"><p>Different theme update</p></div>' +
'</div>' +
'<div class="theme" data-slug="twentyeleven">' +
'<div class="update-message notice"><p>Update now</p></div>' +
'</div>'
);

wp.updates.updateTheme( { slug: 'twentyeleven' } );

assert.equal( $fixture.find( '.theme-info .notice[data-slug="twentytwelve"] p' ).text(), 'Different theme update' );
assert.equal( $fixture.find( '.theme[data-slug="twentyeleven"] .update-message p' ).text(), 'Updating...' );
} );

QUnit.test( 'A successful theme update should not add notices to an unrelated theme details modal', function( assert ) {
var $fixture = $( '#qunit-fixture' ),
originalAdminNotice = wp.updates.adminNotice,
addAdminNotice = sinon.stub( wp.updates, 'addAdminNotice' ),
decrementCount = sinon.stub( wp.updates, 'decrementCount' );

wp.updates.adminNotice = sinon.stub().returns( '<div class="updated-message notice-success notice-alt"><p>Updated!</p></div>' );
$( 'body' ).addClass( 'modal-open' );

$fixture.append(
'<div class="theme-info">' +
'<p class="theme-author">By the WordPress team</p>' +
'<div class="notice notice-warning" data-slug="twentytwelve"><p>Different theme update</p></div>' +
'</div>' +
'<div class="theme" data-slug="twentyeleven">' +
'<div class="update-message notice"><p>Update now</p></div>' +
'<a class="load-customize" href="#">Live Preview</a>' +
'</div>'
);

try {
wp.updates.updateThemeSuccess( {
slug: 'twentyeleven',
oldVersion: '1.0',
newVersion: '1.1'
} );

assert.strictEqual( addAdminNotice.firstCall.args[0].selector.length, 1 );
assert.strictEqual( addAdminNotice.firstCall.args[0].selector[0], $fixture.find( '.theme[data-slug="twentyeleven"] .update-message' )[0] );
assert.equal( $fixture.find( '.theme-info .updated-message' ).length, 0 );
} finally {
addAdminNotice.restore();
decrementCount.restore();
wp.updates.adminNotice = originalAdminNotice;
$( 'body' ).removeClass( 'modal-open' );
}
} );

QUnit.test( 'Installing a theme should call the API', function( assert ) {
wp.updates.installTheme( { slug: 'twentyeleven' } );
assert.ok( jQuery.ajax.calledOnce );
Expand Down
Loading