Add control to manipulate the post parent

js/customize-post-section.js

@@ -272,6 +272,9 @@
 				section.addStatusControl();
 				section.addDateControl();
 			}
+			if ( postTypeObj.supports['page-attributes'] || postTypeObj.supports.parent ) {
+				section.addParentControl();
+			}
 			if ( postTypeObj.supports.editor ) {
 				section.addContentControl();
 			}
@@ -471,6 +474,75 @@
 			return control;
 		},
 
+		/**
+		 * Add parent control.
+		 *
+		 * @returns {wp.customize.Control} Added control.
+		 */
+		addParentControl: function() {
+			var section = this, control, setting = api( section.id ), controlId, params, postTypeObj;
+			postTypeObj = api.Posts.data.postTypes[ section.params.post_type ];
+
+			controlId = section.id + '[post_parent]';
+			params = {
+				section: section.id,
+				priority: 20,
+				label: postTypeObj.labels.parent_item_colon ? postTypeObj.labels.parent_item_colon.replace( /:$/, '' ) : api.Posts.data.l10n.fieldParentLabel,
+				active: true,
+				settings: {
+					'default': setting.id
+				},
+				field_type: 'select',
+				setting_property: 'post_parent'
+			};
+
+			if ( api.controlConstructor.object_selector ) {
+				control = new api.controlConstructor.object_selector( controlId, {
+					params: _.extend( params, {
+						post_query_vars: {
+							post_type: section.params.post_type,
+							post_status: 'publish',
+							post__not_in: [ section.params.post_id ],
+							show_initial_dropdown: true,
+							dropdown_args: {
+								exclude_tree: section.params.post_id,
+								sort_column: 'menu_order, post_title'
+							},
+							apply_dropdown_args_filters_post_id: section.params.post_id // Applies page_attributes_dropdown_pages_args filters.
+						},
+						show_add_buttons: false,
+						select2_options: {
+							multiple: false,
+							allowClear: true,
+							placeholder: postTypeObj.labels.search_items
+						}
+					} )
+				} );
+			} else {
+				control = new api.controlConstructor.dynamic( controlId, {
+					params: _.extend( params, {
+						field_type: 'hidden',
+						description: api.Posts.data.l10n.installCustomizeObjectSelector
+					} )
+				} );
+			}
+
+			// Override preview trying to de-activate control not present in preview context.
+			control.active.validate = function() {
+				return true;
+			};
+
+			// Register.
+			section.postFieldControls.page_parent = control;
+			api.control.add( control.id, control );
+
+			if ( control.notifications ) {
+				control.notifications.add = section.addPostFieldControlNotification;
+				control.notifications.setting_property = control.params.setting_property;
+			}
+			return control;
+		},
+
 		/**
 		 * Add post date control.
 		 *

js/edit-post-preview-admin-featured-image.js

@@ -10,7 +10,7 @@
 			featuredImageId = parseInt( $( inputSelector ).val(), 10 );
 
 		if ( featuredImageId <= 0 ) {
-			featuredImageId = '';
+			featuredImageId = 0;
 		}
 
 		settings[ settingId ] = featuredImageId;

js/edit-post-preview-admin.js

@@ -27,7 +27,8 @@ var EditPostPreviewAdmin = (function( $ ) {
 			settings = {},
 			postSettingValue,
 			editor = tinymce.get( 'content' ),
-			wasMobile;
+			wasMobile,
+			parentId;
 
 		event.preventDefault();
 
@@ -44,15 +45,23 @@ var EditPostPreviewAdmin = (function( $ ) {
 		// Override default close behavior.
 		wp.customize.Loader.close = component.closeLoader;
 
+		parentId = $( '#parent_id' ).val();
+		if ( ! parentId ) {
+			parentId = 0;
+		} else {
+			parentId = parseInt( parentId, 10 );
+		}
+
 		// Send the current input fields from the edit post page to the Customizer via sessionStorage.
 		postSettingValue = {
 			post_title: $( '#title' ).val(),
 			post_name: $( '#post_name' ).val(),
+			post_parent: parentId,
 			post_content: editor && ! editor.isHidden() ? wp.editor.removep( editor.getContent() ) : $( '#content' ).val(),
 			post_excerpt: $( '#excerpt' ).val(),
 			comment_status: $( '#comment_status' ).prop( 'checked' ) ? 'open' : 'closed',
 			ping_status: $( '#ping_status' ).prop( 'checked' ) ? 'open' : 'closed',
-			post_author: $( '#post_author_override' ).val()
+			post_author: parseInt( $( '#post_author_override' ).val(), 10 )
 		};
 		postSettingId = 'post[' + postType + '][' + postId + ']';
 		settings[ postSettingId ] = postSettingValue;
@@ -66,6 +75,7 @@ var EditPostPreviewAdmin = (function( $ ) {
 
 		// Sync changes from the Customizer to the post input fields.
 		wp.customize.Loader.messenger.bind( 'customize-post-settings-data', function( data ) {
+			var settingParentId;
 			if ( data[ postSettingId ] ) {
 				$( '#title' ).val( data[ postSettingId ].post_title ).trigger( 'change' );
 				if ( editor ) {
@@ -79,6 +89,8 @@ var EditPostPreviewAdmin = (function( $ ) {
 				$( '#ping_status' ).prop( 'checked', 'open' === data[ postSettingId ].ping_status ).trigger( 'change' );
 				$( '#post_author_override' ).val( data[ postSettingId ].post_author ).trigger( 'change' );
 				$( '#post_name' ).val( data[ postSettingId ].post_name ).trigger( 'change' );
+				settingParentId = data[ postSettingId ].post_parent;
+				$( '#parent_id' ).val( settingParentId > 0 ? String( settingParentId ) : '' ).trigger( 'change' );
 				$( '#new-post-slug' ).val( data[ postSettingId ].post_name );
 				$( '#editable-post-name, #editable-post-name-full' ).text( data[ postSettingId ].post_name );
 			}

js/edit-post-preview-customize.js

@@ -14,9 +14,7 @@ var EditPostPreviewCustomize = (function( $, api ) {
 	}
 
 	component.init = function() {
-		component.populateSettings();
-
-		wp.customize.bind( 'ready', function() {
+		api.bind( 'ready', function() {
 			component.ready();
 		} );
 	};
@@ -28,6 +26,14 @@ var EditPostPreviewCustomize = (function( $, api ) {
 	 */
 	component.populateSettings = function() {
 		var itemId, settings;
+
+		// Only run once.
+		if ( component.settingsPopulated ) {
+			return;
+		}
+		component.settingsPopulated = true;
+		api.previewer.unbind( 'customized-posts', component.populateSettings );
+
 		itemId = 'previewedCustomizePostSettings[' + String( component.data.previewed_post.ID ) + ']';
 		settings = sessionStorage.getItem( itemId );
 		if ( ! settings ) {
@@ -58,8 +64,11 @@ var EditPostPreviewCustomize = (function( $, api ) {
 	 */
 	component.ready = function() {
 
+		// Wait to populate the settings until the customized-posts message is received so we know the preview is ready to receive mesages.
+		api.previewer.bind( 'customized-posts', component.populateSettings );
+
 		// Prevent 'saved' state from becoming false, since we only want to save from the admin page.
-		wp.customize.state( 'saved' ).set( true ).validate = function() {
+		api.state( 'saved' ).set( true ).validate = function() {
 			return true;
 		};
 
@@ -74,15 +83,15 @@ var EditPostPreviewCustomize = (function( $, api ) {
 		 *
 		 * @see wp.customize.Loader
 		 */
-		component.parentFrame = new wp.customize.Messenger( {
-			url: wp.customize.settings.url.parent,
+		component.parentFrame = new api.Messenger( {
+			url: api.settings.url.parent,
 			channel: 'loader'
 		} );
 
 		// @todo Include nonce?
 		component.parentFrame.bind( 'populate-setting', function( setting ) {
-			if ( wp.customize.has( setting.id ) ) {
-				wp.customize( setting.id ).set( setting.value );
+			if ( api.has( setting.id ) ) {
+				api( setting.id ).set( setting.value );
 			}
 		} );
 

php/class-wp-customize-dynamic-control.php

@@ -91,13 +91,13 @@ protected function content_template() {
 				/>
 				{{{ data.label }}}
 				<# if ( data.description ) { #>
-					<span class="description customize-control-description">{{ data.description }}</span>
+					<span class="description customize-control-description">{{{ data.description }}}</span>
 				<# } #>
 			</label>
 		<# } else { #>
 			<span class="customize-control-title"><label for="{{ data.input_id }}">{{ data.label }}</label></span>
 			<# if ( data.description ) { #>
-				<span class="description customize-control-description">{{ data.description }}</span>
+				<span class="description customize-control-description">{{{ data.description }}}</span>
 			<# } #>
 			<# if ( 'textarea' === data.field_type ) { #>
 				<textarea

php/class-wp-customize-posts-preview.php

@@ -275,11 +275,11 @@ public function filter_the_posts_to_preview_settings( array $posts, WP_Query $qu
 	 *     @type string $sort_column   Supported.
 	 *     @type string $authors       Supported.
 	 *     @type string $post_status   Supported.
+	 *     @type int    $number        Supported, but there won't be 100% fidelity due to customized posts being amended to the subset results without being aware of underlying placement in full results.
 	 *     @type array  $exclude       No special support needed.
 	 *     @type array  $include       No special support needed.
 	 *     @type string $meta_key      Not supported.
 	 *     @type string $meta_value    Not supported.
-	 *     @type int    $number        Not supported.
 	 *     @type int    $offset        Not supported.
 	 *     @type bool   $hierarchical  Not needing to be examined since this is a property of the registered post type itself.
 	 *     @type string $post_type     Not needing to be examined since post_type is immutable.
@@ -293,7 +293,7 @@ public function filter_get_pages_to_preview_settings( $initial_posts, $args ) {
 			return $initial_posts;
 		}
 
-		$unsupported_args = array( 'number', 'offset', 'meta_key', 'meta_value' );
+		$unsupported_args = array( 'offset', 'meta_key', 'meta_value' );
 		foreach ( $unsupported_args as $unsupported_arg ) {
 			if ( ! empty( $args[ $unsupported_arg ] ) ) {
 				_doing_it_wrong( 'get_pages', sprintf( esc_html__( 'The %s argument for get_pages() is not supported by Customize Posts.', 'customize-posts' ), esc_html( $unsupported_arg ) ), '0.8.0' );
@@ -330,6 +330,7 @@ public function filter_get_pages_to_preview_settings( $initial_posts, $args ) {
 		$args['include'] = array_filter( wp_parse_id_list( $args['include'] ) );
 		$args['parent'] = intval( $args['parent'] );
 		$args['child_of'] = intval( $args['child_of'] );
+		$args['number'] = intval( $args['number'] );
 
 		if ( ! empty( $args['include'] ) ) {
 			$args['child_of'] = 0; // Ignore child_of, parent, exclude, meta_key, and meta_value params if using include.
@@ -493,6 +494,10 @@ public function filter_get_pages_to_preview_settings( $initial_posts, $args ) {
 		usort( $filtered_posts, array( $this, 'compare_posts_for_get_pages' ) );
 		$this->current_get_pages_args = array();
 
+		if ( ! empty( $args['number'] ) ) {
+			$filtered_posts = array_slice( $filtered_posts, 0, $args['number'] );
+		}
+
 		return array_values( $filtered_posts );
 	}
 
@@ -1063,6 +1068,9 @@ public function get_post_field_partial_schema( $field_id = '' ) {
 			'post_status' => array(
 				'fallback_refresh' => true,
 			),
+			'post_parent' => array(
+				'fallback_refresh' => true,
+			),
 			'post_date' => array(
 				'selector' => 'time.entry-date',
 				'fallback_refresh' => false,

php/class-wp-customize-posts.php

@@ -462,7 +462,7 @@ public function get_author_choices() {
 			foreach ( (array) $users as $user ) {
 				$choices[] = array(
 					'value' => (int) $user->ID,
-					'text'  => esc_html( sprintf( _x( '%1$s (%2$s)', 'user dropdown', 'customize-posts' ), $user->display_name, $user->user_login ) ),
+					'text'  => sprintf( _x( '%1$s (%2$s)', 'user dropdown', 'customize-posts' ), $user->display_name, $user->user_login ),
 				);
 			}
 		}
@@ -599,7 +599,7 @@ public function enqueue_scripts() {
 		$exports = array(
 			'postTypes' => $post_types,
 			'postStatusChoices' => $this->get_post_status_choices(),
-			'authorChoices' => $this->get_author_choices(),
+			'authorChoices' => $this->get_author_choices(), // @todo Use Ajax to fetch this data or Customize Object Selector (once it supports users).
 			'dateMonthChoices' => $this->get_date_month_choices(),
 			'initialServerDate' => current_time( 'mysql', false ),
 			'initialServerTimestamp' => floor( microtime( true ) * 1000 ),
@@ -614,11 +614,23 @@ public function enqueue_scripts() {
 				'fieldExcerptLabel' => __( 'Excerpt', 'customize-posts' ),
 				'fieldDiscussionLabel' => __( 'Discussion', 'customize-posts' ),
 				'fieldAuthorLabel' => __( 'Author', 'customize-posts' ),
+				'fieldParentLabel' => __( 'Parent', 'customize-posts' ),
 				'noTitle' => __( '(no title)', 'customize-posts' ),
 				'theirChange' => __( 'Their change: %s', 'customize-posts' ),
 				'openEditor' => __( 'Open Editor', 'customize-posts' ), // @todo Move this into editor control?
 				'closeEditor' => __( 'Close Editor', 'customize-posts' ),
 				'invalidDateError' => __( 'Whoops, the provided date is invalid.', 'customize-posts' ),
+				'installCustomizeObjectSelector' => sprintf(
+					__( 'This control depends on having the %s plugin installed and activated.', 'customize-posts' ),
+					sprintf(
+						'<a href="%s" target="_blank">%s</a>',
+						'https://github.com/xwp/wp-customize-object-selector',
+						__( 'Customize Object Selector', 'customize-posts' )
+					)
+				),
+
+				/* translators: %s post type */
+				'jumpToPostPlaceholder' => __( 'Jump to %s', 'customize-posts' ),
 			),
 		);
 

tests/php/test-class-wp-customize-posts-preview.php

@@ -449,6 +449,40 @@ public function test_filter_get_pages_to_preview_settings_parent_and_exclude_tre
 		$this->assertEquals( array( $page_c, $page_e ), wp_list_pluck( get_pages( array( 'parent' => $page_b ) ), 'ID' ) );
 	}
 
+	/**
+	 * Test get_pages() with number args.
+	 *
+	 * @see get_pages()
+	 * @covers WP_Customize_Posts_Preview::filter_get_pages_to_preview_settings()
+	 */
+	public function test_filter_get_pages_to_preview_settings_number() {
+		$page_a = $this->factory()->post->create( array( 'post_title' => 'Page A', 'post_type' => 'page' ) );
+		$page_a1 = $this->factory()->post->create( array( 'post_title' => 'Page A.1', 'post_type' => 'page', 'post_parent' => $page_a ) );
+		$page_a2 = $this->factory()->post->create( array( 'post_title' => 'Page A.2', 'post_type' => 'page', 'post_parent' => $page_a ) );
+
+		$pages = get_pages( array( 'parent' => $page_a, 'number' => 1, 'sort_column' => 'post_title', 'sort_order' => 'ASC' ) );
+		$this->assertEquals( array( $page_a1 ), wp_list_pluck( $pages, 'ID' ) );
+		$pages = get_pages( array( 'parent' => $page_a, 'number' => 1, 'sort_column' => 'post_title', 'sort_order' => 'DESC' ) );
+		$this->assertEquals( array( $page_a2 ), wp_list_pluck( $pages, 'ID' ) );
+
+		// Now try adding a new sibling.
+		$this->posts_component->preview->customize_preview_init();
+		$page_a3_post_obj = $this->posts_component->insert_auto_draft_post( 'page' );
+		$page_a3 = $page_a3_post_obj->ID;
+		$page_a3_setting_id = WP_Customize_Post_Setting::get_post_setting_id( get_post( $page_a3 ) );
+		$page_a3_setting = $this->posts_component->manager->add_setting( new WP_Customize_Post_Setting( $this->posts_component->manager, $page_a3_setting_id ) );
+		$this->posts_component->manager->set_post_value( $page_a3_setting_id, array_merge(
+			$page_a3_setting->value(),
+			array( 'post_parent' => $page_a, 'post_title' => 'Page A.3' )
+		) );
+		$page_a3_setting->preview();
+
+		$pages = get_pages( array( 'parent' => $page_a, 'number' => 1, 'sort_column' => 'post_title', 'sort_order' => 'ASC' ) );
+		$this->assertEquals( array( $page_a1 ), wp_list_pluck( $pages, 'ID' ) );
+		$pages = get_pages( array( 'parent' => $page_a, 'number' => 1, 'sort_column' => 'post_title', 'sort_order' => 'DESC' ) );
+		$this->assertEquals( array( $page_a3 ), wp_list_pluck( $pages, 'ID' ) );
+	}
+
 	/**
 	 * Test filter_the_posts_to_tally_orderby_keys().
 	 *

tests/php/test-class-wp-customize-posts.php

@@ -305,23 +305,6 @@ public function test_get_post_status_choices() {
 		}
 	}
 
-	/**
-	 * Tests get_author_choices().
-	 *
-	 * @covers WP_Customize_Posts::get_author_choices()
-	 */
-	public function test_get_author_choices() {
-		$posts = new WP_Customize_Posts( $this->wp_customize );
-		$choices = $posts->get_author_choices();
-		$this->assertTrue( count( $choices ) > 0 );
-		foreach ( $choices as $choice ) {
-			$this->assertInternalType( 'array', $choice );
-			$this->assertArrayHasKey( 'text', $choice );
-			$this->assertArrayHasKey( 'value', $choice );
-			$this->assertTrue( (bool) get_user_by( 'ID', $choice['value'] ) );
-		}
-	}
-
 	/**
 	 * Get month choices.
 	 *
@@ -385,7 +368,6 @@ public function test_enqueue_scripts() {
 		$this->assertArrayHasKey( 'post', $exports['postTypes'] );
 		$this->assertArrayHasKey( 'postStatusChoices', $exports );
 		$this->assertArrayHasKey( 'dateMonthChoices', $exports );
-		$this->assertArrayHasKey( 'authorChoices', $exports );
 		$this->assertArrayHasKey( 'initialServerDate', $exports );
 		$this->assertInternalType( 'int', strtotime( $exports['initialServerDate'] ) );
 		$this->assertArrayHasKey( 'initialServerTimestamp', $exports );