Improve support for page_for_posts by hiding page template and editor while showing notice

js/customize-page-template.js

@@ -95,17 +95,28 @@ var CustomizePageTemplate = (function( api ) {
 		/**
 		 * Make sure that control only appears if there are page templates (other than 'default').
 		 *
-		 * @todo The control needs to be deactivated when the page is the same as wp.customize( 'page_on_front' ).get().
+		 * Also only show page template if the page is not the page_for_posts.
+		 *
+		 * @link https://github.com/xwp/wordpress-develop/blob/4.6.0/src/wp-admin/includes/meta-boxes.php#L820
+		 *
 		 * @todo Page-specific templates also need to be accounted for here (the 'theme_page_templates' filter in PHP).
 		 *
 		 * @returns {boolean} Is active.
 		 */
 		isActiveCallback = function() {
 			var defaultSize = 1;
+			if ( api.has( 'page_for_posts' ) && parseInt( api( 'page_for_posts' ).get(), 10 ) === section.params.post_id ) {
+				return false;
+			}
 			return _.size( control.params.choices ) > defaultSize;
 		};
 		control.active.set( isActiveCallback() );
 		control.active.validate = isActiveCallback;
+		api( 'page_for_posts', function( pageOnFrontSetting ) {
+			pageOnFrontSetting.bind( function() {
+				control.active.set( isActiveCallback() );
+			} );
+		} );
 
 		// Register.
 		api.control.add( control.id, control );

js/customize-post-section.js

@@ -195,7 +195,7 @@
 		 */
 		embedSectionContents: function embedSectionContents() {
 			var section = this;
-			section.setupSettingValidation();
+			section.setupSectionNotifications();
 			section.setupPostNavigation();
 			section.setupControls();
 		},
@@ -352,6 +352,22 @@
 			return controls;
 		},
 
+		/**
+		 * Is this post section the page for posts.
+		 *
+		 * @returns {Boolean} Whether is page for posts.
+		 */
+		isPageForPosts: function() {
+			var section = this;
+			if ( 'page' !== section.params.post_type ) {
+				return false;
+			}
+			if ( ! api.has( 'page_for_posts' ) ) {
+				return false;
+			}
+			return parseInt( api( 'page_for_posts' ).get(), 10 ) === section.params.post_id;
+		},
+
 		/**
 		 * Add post title control.
 		 *
@@ -527,25 +543,43 @@
 		 * @returns {wp.customize.Control} Added control.
 		 */
 		addContentControl: function() {
-			var section = this, control, setting = api( section.id ), postTypeObj;
+			var section = this, control, setting = api( section.id ), postTypeObj, shouldShowEditor;
 			postTypeObj = api.Posts.data.postTypes[ section.params.post_type ];
 
+			/**
+			 * Hide the control when the page is assigned as the page_for_posts.
+			 *
+			 * Also override preview trying to de-activate control not present in preview context. See WP Trac #37270.
+			 *
+			 * @link https://github.com/xwp/wordpress-develop/blob/4.6.1/src/wp-admin/edit-form-advanced.php#L53-L56
+			 * @returns {boolean} Whether the editor should be shown.
+			 */
+			shouldShowEditor = function() {
+				if ( section.isPageForPosts() && '' === $.trim( setting.get().post_content ) ) {
+					return false;
+				}
+				return true;
+			};
+
 			control = new api.controlConstructor.post_editor( section.id + '[post_content]', {
 				params: {
 					section: section.id,
 					priority: 50,
 					label: postTypeObj.labels.content_field ? postTypeObj.labels.content_field : api.Posts.data.l10n.fieldContentLabel,
 					setting_property: 'post_content',
+					active: shouldShowEditor(),
 					settings: {
 						'default': setting.id
 					}
 				}
 			} );
 
-			// Override preview trying to de-activate control not present in preview context. See WP Trac #37270.
-			control.active.validate = function() {
-				return true;
-			};
+			api( 'page_for_posts', function( pageForPostsSetting ) {
+				pageForPostsSetting.bind( function() {
+					control.active.set( shouldShowEditor() );
+				} );
+			} );
+			control.active.validate = shouldShowEditor;
 
 			// Register.
 			section.postFieldControls.post_content = control;
@@ -789,12 +823,12 @@
 		},
 
 		/**
-		 * Set up setting validation.
+		 * Set up section notifications.
 		 *
 		 * @returns {void}
 		 */
-		setupSettingValidation: function() {
-			var section = this, setting = api( section.id ), debouncedRenderNotifications;
+		setupSectionNotifications: function() {
+			var section = this, setting = api( section.id ), debouncedRenderNotifications, setPageForPostsNotice;
 			if ( ! setting.notifications ) {
 				return;
 			}
@@ -882,6 +916,29 @@
 			api.bind( 'save', function() {
 				section.resetPostFieldControlErrorNotifications();
 			} );
+
+			/**
+			 * Add notice when editing the page for posts.
+			 *
+			 * @see _wp_posts_page_notice() in PHP
+			 * @returns {void}
+			 */
+			setPageForPostsNotice = function() {
+				var code = 'editing_page_for_posts';
+				if ( section.isPageForPosts() ) {
+					section.notifications.add( code, new api.Notification( code, {
+						message: api.Posts.data.l10n.editingPageForPostsNotice,
+						type: 'warning'
+					} ) );
+				} else {
+					section.notifications.remove( code );
+				}
+			};
+
+			api( 'page_for_posts', function( pageForPostsSetting ) {
+				setPageForPostsNotice();
+				pageForPostsSetting.bind( setPageForPostsNotice );
+			} );
 		},
 
 		/**

php/class-wp-customize-posts.php

@@ -715,6 +715,7 @@ public function enqueue_scripts() {
 				'dropdownPagesOptionTrashed' => __( '%s (Trashed)', 'customize-posts' ),
 				/* translators: %s is the trashed page name */
 				'dropdownPagesOptionUnpublished' => __( '%s (Unpublished)', 'customize-posts' ),
+				'editingPageForPostsNotice' => __( 'You are currently editing the page that shows your latest posts.', 'default' ),
 				'editPostFailure' => __( 'Failed to open for editing.', 'customize-posts' ),
 				'createPostFailure' => __( 'Failed to create for editing.', 'customize-posts' ),
 				'installCustomizeObjectSelector' => sprintf(