sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Customize: Show notification error with "Your homepage displays" control when homepage and posts page are set to be the same (but not empty).

Browse Source 
* Show global error notiafication when saving is blocked due to client-side setting invalidity.
* Refactor `wp.customize.Notifications#render()` to ensure a notification re-renders if its `message` or data changes but its `code` does not.

Props MatheusGimenez, sixhours, westonruter, karmatosed, aocean90, zoonini, michelleweber, melchoyce.
See #35210.
Fixes #21492.


git-svn-id: https://develop.svn.wordpress.org/trunk@41389 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Weston Ruter 2017-09-19 00:45:23 +00:00
parent df1bf4a883
commit eab65862b0
3 changed files with 83 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/wp-admin/css/customize-controls.css
View File

@ -840,6 +840,17 @@ p.customize-section-description {
/* Style for custom settings */ /* Style for custom settings */
/**
* Static front page
*/
#customize-control-show_on_front.has-error {
margin-bottom: 0;
}
#customize-control-show_on_front.has-error .customize-control-notifications-container {
margin-top:12px;
}
/** /**
* Dropdowns * Dropdowns
*/ */

120
src/wp-admin/js/customize-controls.js
View File

@ -146,64 +146,45 @@
render: function() { render: function() {
var collection = this, var collection = this,
notifications, notifications,
renderedNotificationContainers, previousNotificationsByCode = {},
prevRenderedCodes,
nextRenderedCodes,
addedCodes,
removedCodes,
listElement; listElement;
// Short-circuit if there are no container to render into. // Short-circuit if there are no container to render into.
if ( ! collection.container || ! collection.container.length ) { if ( ! collection.container || ! collection.container.length ) {
return; return;
} }
notifications = collection.get( { sort: true } );
collection.container.toggle( 0 !== notifications.length );
// Short-circuit if there are no changes to the notifications.
if ( _.isEqual( notifications, collection.previousNotifications ) ) {
return;
}
// Make sure list is part of the container.
listElement = collection.container.children( 'ul' ).first(); listElement = collection.container.children( 'ul' ).first();
if ( ! listElement.length ) { if ( ! listElement.length ) {
listElement = $( '<ul></ul>' ); listElement = $( '<ul></ul>' );
collection.container.append( listElement ); collection.container.append( listElement );
} }
notifications = collection.get( { sort: true } ); // Remove all notifications prior to re-rendering.
listElement.find( '> [data-code]' ).remove();
renderedNotificationContainers = {}; _.each( collection.previousNotifications, function( notification ) {
listElement.find( '> [data-code]' ).each( function() { previousNotificationsByCode[ notification.code ] = notification;
renderedNotificationContainers[ $( this ).data( 'code' ) ] = $( this );
});
collection.container.toggle( 0 !== notifications.length );
nextRenderedCodes = _.pluck( notifications, 'code' );
prevRenderedCodes = _.keys( renderedNotificationContainers );
// Short-circuit if there are no notifications added.
if ( _.isEqual( nextRenderedCodes, prevRenderedCodes ) ) {
return;
}
addedCodes = _.difference( nextRenderedCodes, prevRenderedCodes );
removedCodes = _.difference( prevRenderedCodes, nextRenderedCodes );
// Remove notifications that have been removed.
_.each( renderedNotificationContainers, function( renderedContainer, code ) {
if ( -1 !== _.indexOf( removedCodes, code ) ) {
renderedContainer.remove(); // @todo Consider slideUp as enhancement.
}
}); });
// Add all notifications in the sorted order. // Add all notifications in the sorted order.
_.each( notifications, function( notification ) { _.each( notifications, function( notification ) {
var notificationContainer = renderedNotificationContainers[ notification.code ]; if ( wp.a11y && ( ! previousNotificationsByCode[ notification.code ] || ! _.isEqual( notification.message, previousNotificationsByCode[ notification.code ].message ) ) ) {
if ( notificationContainer ) { wp.a11y.speak( notification.message, 'assertive' );
listElement.append( notificationContainer );
} else {
notificationContainer = $( notification.render() );
listElement.append( notificationContainer ); // @todo Consider slideDown() as enhancement.
if ( wp.a11y ) {
wp.a11y.speak( notification.message, 'assertive' );
}
} }
listElement.append( $( notification.render() ) ); // @todo Consider slideDown() as enhancement.
}); });
collection.previousNotifications = notifications;
collection.trigger( 'rendered' ); collection.trigger( 'rendered' );
} }
}); });
@ -4644,9 +4625,10 @@
} }
submit = function () { submit = function () {
var request, query, settingInvalidities = {}, latestRevision = api._latestRevision; var request, query, settingInvalidities = {}, latestRevision = api._latestRevision, errorCode = 'client_side_error';
api.bind( 'change', captureSettingModifiedDuringSave ); api.bind( 'change', captureSettingModifiedDuringSave );
api.notifications.remove( errorCode );
/* /*
* Block saving if there are any settings that are marked as * Block saving if there are any settings that are marked as
@ -4668,6 +4650,14 @@
if ( ! _.isEmpty( invalidControls ) ) { if ( ! _.isEmpty( invalidControls ) ) {
_.values( invalidControls )[0][0].focus(); _.values( invalidControls )[0][0].focus();
api.unbind( 'change', captureSettingModifiedDuringSave ); api.unbind( 'change', captureSettingModifiedDuringSave );
api.notifications.add( errorCode, new api.Notification( errorCode, {
message: ( 1 === invalidSettings.length ? api.l10n.saveBlockedError.singular : api.l10n.saveBlockedError.plural ).replace( /%s/g, String( invalidSettings.length ) ),
type: 'error',
dismissible: true,
saveFailure: true
} ) );
deferred.rejectWith( previewer, [ deferred.rejectWith( previewer, [
{ setting_invalidities: settingInvalidities } { setting_invalidities: settingInvalidities }
] ); ] );
@ -5610,24 +5600,46 @@
}); });
}); });
// Change previewed URL to the homepage when changing the page_on_front. // Add behaviors to the static front page controls.
api( 'show_on_front', 'page_on_front', function( showOnFront, pageOnFront ) { api( 'show_on_front', 'page_on_front', 'page_for_posts', function( showOnFront, pageOnFront, pageForPosts ) {
var updatePreviewUrl = function() { var handleChange = function() {
if ( showOnFront() === 'page' && parseInt( pageOnFront(), 10 ) > 0 ) { var setting = this, pageOnFrontId, pageForPostsId, errorCode = 'show_on_front_page_collision';
api.previewer.previewUrl.set( api.settings.url.home ); pageOnFrontId = parseInt( pageOnFront(), 10 );
pageForPostsId = parseInt( pageForPosts(), 10 );
if ( 'page' === showOnFront() ) {
// Change previewed URL to the homepage when changing the page_on_front.
if ( setting === pageOnFront && pageOnFrontId > 0 ) {
api.previewer.previewUrl.set( api.settings.url.home );
}
// Change the previewed URL to the selected page when changing the page_for_posts.
if ( setting === pageForPosts && pageForPostsId > 0 ) {
api.previewer.previewUrl.set( api.settings.url.home + '?page_id=' + pageForPostsId );
}
}
// Toggle notification when the homepage and posts page are both set and the same.
if ( 'page' === showOnFront() && pageOnFrontId && pageForPostsId && pageOnFrontId === pageForPostsId ) {
showOnFront.notifications.add( errorCode, new api.Notification( errorCode, {
type: 'error',
message: api.l10n.pageOnFrontError
} ) );
} else {
showOnFront.notifications.remove( errorCode );
} }
}; };
showOnFront.bind( updatePreviewUrl ); showOnFront.bind( handleChange );
pageOnFront.bind( updatePreviewUrl ); pageOnFront.bind( handleChange );
}); pageForPosts.bind( handleChange );
handleChange.call( showOnFront, showOnFront() ); // Make sure initial notification is added after loading existing changeset.
// Change the previewed URL to the selected page when changing the page_for_posts. // Move notifications container to the bottom.
api( 'page_for_posts', function( setting ) { api.control( 'show_on_front', function( showOnFrontControl ) {
setting.bind(function( pageId ) { showOnFrontControl.deferred.embedded.done( function() {
pageId = parseInt( pageId, 10 ); showOnFrontControl.container.append( showOnFrontControl.getNotificationsContainerElement() );
if ( pageId > 0 ) { });
api.previewer.previewUrl.set( api.settings.url.home + '?page_id=' + pageId );
}
}); });
}); });

6
src/wp-includes/script-loader.php
View File

@ -570,6 +570,12 @@ function wp_default_scripts( &$scripts ) {
_n_noop( 'There is %d error which must be fixed before you can save.', 'There are %d errors which must be fixed before you can save.' ), _n_noop( 'There is %d error which must be fixed before you can save.', 'There are %d errors which must be fixed before you can save.' ),
array( 'singular', 'plural' ) array( 'singular', 'plural' )
), ),
'pageOnFrontError' => __( 'Homepage and posts page must be different.' ),
'saveBlockedError' => wp_array_slice_assoc(
/* translators: placeholder is error count */
_n_noop( 'Unable to save due to %s invalid setting.', 'Unable to save due to %s invalid settings.' ),
array( 'singular', 'plural' )
),
) ); ) );
$scripts->add( 'customize-selective-refresh', "/wp-includes/js/customize-selective-refresh$suffix.js", array( 'jquery', 'wp-util', 'customize-preview' ), false, 1 ); $scripts->add( 'customize-selective-refresh', "/wp-includes/js/customize-selective-refresh$suffix.js", array( 'jquery', 'wp-util', 'customize-preview' ), false, 1 );