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

* 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.

Built from https://develop.svn.wordpress.org/trunk@41389


git-svn-id: http://core.svn.wordpress.org/trunk@41222 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-controls-rtl.css

@@ -840,6 +840,17 @@ p.customize-section-description {
 
 /* 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
  */

wp-admin/css/customize-controls.css

@@ -840,6 +840,17 @@ p.customize-section-description {
 
 /* 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
  */

wp-admin/js/customize-controls.js

@@ -146,64 +146,45 @@
 		render: function() {
 			var collection = this,
 				notifications,
-				renderedNotificationContainers,
+				previousNotificationsByCode = {},
-				prevRenderedCodes,
-				nextRenderedCodes,
-				addedCodes,
-				removedCodes,
 				listElement;
 
 			// Short-circuit if there are no container to render into.
 			if ( ! collection.container || ! collection.container.length ) {
 				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();
 			if ( ! listElement.length ) {
 				listElement = $( '<ul></ul>' );
 				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.
 			_.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' );
 		}
 	});
@@ -4644,9 +4625,10 @@
 				}
 
 				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.notifications.remove( errorCode );
 
 					/*
 					 * Block saving if there are any settings that are marked as
@@ -4668,6 +4650,14 @@
 					if ( ! _.isEmpty( invalidControls ) ) {
 						_.values( invalidControls )[0][0].focus();
 						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, [
 							{ 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 );
-				}
 			});
 		});
 

wp-includes/script-loader.php

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

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-alpha-41388';
+$wp_version = '4.9-alpha-41389';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.