为古腾堡最新帖子块启用分页答案

【问题标题】：Enable pagination for gutenberg latest posts block为古腾堡最新帖子块启用分页
【发布时间】：2021-09-02 08:54:43
【问题描述】：

我想在最新的帖子古腾堡块中添加分页。此块通过withSelect() 和getEntityRecords() 获取帖子，类似于block editor handbook。

REST API 返回两个方便的标头字段以用于分页：
“X-WP-Total”和“X-WP-TotalPages”

https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/

有谁知道是否可以在动态块中访问这些标头字段，该块通过withSelect() 和getEntityRecords() 获取帖子并设置页面总数和当前页面的状态？

这是 block.js 的简化版本：

( function( blocks, element, data ) {

  var registerBlockType = blocks.registerBlockType,
      withSelect = data.withSelect;

  registerBlockType( 'mdwpb/latest-posts', {
    title: 'latest posts',
    icon: 'megaphone',
    category: 'widgets',
    attributes: {},
    edit: withSelect( function( select ) {
      return {

        // here's where the magic happens, I think..
        posts: select( 'core' ).getEntityRecords( 'postType', 'post', {per_page: 1, page: 1})
        numberOfPages: ?,

      };
    } )( function( props ) {

      if ( ! props.posts ) {
        return "Loading...";
      }

      if ( props.posts.length === 0 ) {
        return "No posts";
      }
      var className = props.className;
      var post = props.posts[ 0 ];

      return (
        <div>
        { props.posts.map( ( post ) => (
        <h3 className={props.className}>
        {post.title.rendered}
        </h3>
       ))}
     </div>

    );
  } ),
} );
}(
  window.wp.blocks,
  window.wp.element,
  window.wp.data,
) );

我尝试通过 apiFetch 将 numberOfPages 添加到 withSelect 函数中：

numberOfPages: wp.apiFetch({
  path: wp.url.addQueryArgs( 'wp/v2/posts', {per_page: 1, page: 1} ),
  parse: false,
}).then( response => { return response.headers.get('X-WP-TotalPages'); } ),

这种方法有效，但是当我在function(props) 中使用 numberOfPages 属性的console.log 时，我得到了一个承诺。所以我觉得向 withSelect 添加一个 apiFetch 不是要走的路，或者是吗？

【问题讨论】：

标签： javascript wordpress pagination react-redux wordpress-gutenberg

【解决方案1】：

我还没有找到正确获取页数的解决方案，但我作为解决方法所做的是使用与主要参数相同的参数运行一次额外的 getEntityRecords 查询，只切换顺序其他方式（将orderby 参数设置为asc 或desc）并将其限制为仅一项（per_page 设置为1）。由此我得到目标集中的最后一项。一旦有了它，我就可以将 ID 与主分页查询返回的实体的所有 ID 进行比较。一旦我找到主查询返回的集合中最后一项的 ID，我就知道这是最后一页，所以我可以禁用“加载下一页”按钮左右。

这不是一个完整的解决方案，因为它无法提前知道会有多少页面，但总比让用户点击“加载更多”无济于事直到他们放弃要好。

【讨论】：