Post List Doesn't Update in Sync with Pagination

[ahmadawais]

So, I went ahead installed the plugin from the W.org repo via WPCLI. The first test was to see if the list of pagination updates in sync with the list of pagination being displayed in the theme.

Somehow, this doesn't work well. Sometimes the sticky post sticks at the top, other times it doesn't. Check this image; there are 5 posts above the posts list being displayed in the theme, those five posts are not sticky.

[westonruter]

@ahmadawais so the issue is that the list of post sections in the Customize pane appear in a different order than the posts appear in the preview?

Part of the issue I think is that the post settings are exported from the preview in an object (mapping ID to setting properties) as opposed to an array of settings:

wp-customize-posts/js/customize-posts.js

Lines 59 to 76 in 9ccc8f2

	/**
	* Handle receiving customized-posts messages from the preview.
	*
	* @param {object} data
	*/
	component.receivePreviewData = function( data ) {
	_.each( data.settings, function( setting, id ) {
	if ( ! api.has( id ) ) {
	api.create( id, id, setting.value, {
	transport: setting.transport,
	previewer: api.previewer,
	dirty: setting.dirty
	} );
	}
	if ( 'post' === setting.type ) {
	component.addPostSection( id );

Objects in JavaScript are not ordered, so this could be part of the issue.

Another issue could be that the posts sections get added the to bottom of the list as they are encountered (e.g. infinite scroll or updating a Recent Posts widget to show more posts):

wp-customize-posts/js/customize-post-section.js

Lines 68 to 74 in 9ccc8f2

	if ( ! args.params.priority ) {
	if ( ! defaultSectionPriorities[ args.params.post_type ] ) {
	defaultSectionPriorities[ args.params.post_type ] = api.Section.prototype.defaults.priority;
	}
	defaultSectionPriorities[ args.params.post_type ] += 1;
	args.params.priority = defaultSectionPriorities[ args.params.post_type ];
	}

In regards to Sticky posts: it is also somewhat expected that these wouldn't be exported in the order displayed because the posts get re-ordered in WP_Query, but it seems the the_posts filter is applied after the stickies are re-ordered, so maybe that isn't the issue, and the settings get added by looking at the_posts filter:

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

Lines 127 to 147 in 9ccc8f2

	/**
	* Create dynamic post settings and sections for posts queried in the page.
	*
	* @param array $posts Posts.
	* @return array
	*/
	public function filter_the_posts_to_add_dynamic_post_settings_and_sections( array $posts ) {
	foreach ( $posts as &$post ) {
	$post_setting_id = WP_Customize_Post_Setting::get_post_setting_id( $post );
	$this->component->manager->add_dynamic_settings( array( $post_setting_id ) );
	$setting = $this->component->manager->get_setting( $post_setting_id );
	if ( $setting instanceof WP_Customize_Post_Setting && ! $this->component->manager->get_section( $setting->id ) ) {
	$section = new WP_Customize_Post_Section( $this->component->manager, $setting->id, array(
	'panel' => sprintf( 'posts[%s]', $setting->post_type ),
	'post_setting' => $setting,
	) );
	$this->component->manager->add_section( $section );
	}
	}
	return $posts;
	}

[ahmadawais]

I guess, it is not just limited to the order of posts. E.g. The first post being displayed in the image above i.e. Hello FB Save Button for WP that is the latest post and when I took this screenshot, I was on the third page of pagination while each page had 10 posts (the default behavior).

I can test it more and try to figure out a pattern.

[westonruter]

I think the pattern will end up being random at times due to the JS object not preserving the order.

[ahmadawais]

^You are right.