WordPress Gutenberg Blocks 获取作者信息答案

【问题标题】：WordPress Gutenberg Blocks Get Author InfoWordPress Gutenberg Blocks 获取作者信息
【发布时间】：2020-04-10 22:25:18
【问题描述】：

我觉得我想要完成的事情很简单：创建一个自定义的 WordPress Gutenberg 块，自动填充作者姓名和图像并且不可编辑。然后在前端帖子上渲染这个块。

我已经从很多不同的角度进行了研究，我认为我需要的是一个动态块
https://developer.wordpress.org/block-editor/tutorials/block-tutorial/creating-dynamic-blocks/

第一个问题是 wp.data.select("core/editor").getCurrentPostId() 不加载帖子 ID。但老实说，我不知道返回是否会有我想要的作者信息。非常感谢任何指导。

const post_id = wp.data.select("core/editor").getCurrentPostId();
var el = wp.element.createElement;
wp.blocks.registerBlockType('my-plugin/author-block', {
  title: 'Author Footer',
  icon: 'admin-users',
  category: 'my-blocks',
  attributes: {
    // Nothing stored
  },
  edit: wp.data.withSelect( function(select){ // Get server stuff to pass to our block
    return {
      posts: select('core').getEntityRecords('postType', 'post', {per_page: 1, post_id})
    };
  }) (function(props) { // How our block renders in the editor
    if ( ! props.posts ) {
      return 'Loading...';
    }
    if ( props.posts.length === 0 ) {
      return 'No posts';
    }
    var post = props.posts[0];
    // Do stuff with the post like maybe get author name and image???
    // ... Return elements to editor viewer
  }),  // End edit()

  save: function(props) { // Save the block for rendering in frontend post
    // ... Return saved elements
  } // End save()
});

【问题讨论】：

试试这个并检查你是否获得了帖子 ID：wp.data.withSelect("core/editor").getCurrentPostId();

标签： javascript wordpress gutenberg-blocks

【解决方案1】：

终于想通了，所以想分享一下。

edit: function(props) { // How our block renders in the editor in edit mode
    var postID = wp.data.select("core/editor").getCurrentPostId();
    wp.apiFetch( { path: '/wp/v2/posts/'+postID } ).then( post => {
      var authorID = post.author
      wp.apiFetch( { path: '/wp/v2/users/'+authorID } ).then( author => {
        authorName = author.name;
        authorImage = author.avatar_urls['96'];
        jQuery('.author-bottom').html('<img src="'+authorImage+'"><div><h6>Written by</h6><h6 class="author-name">'+authorName+'</h6></div>');
      });
    });

    return el(
        'div',
        {
          className: 'author-bottom'
        },
        el(
          'img',
          {
            src: null
          }
        ),
        el(
          'div',
          null,
          el(
            'h6',
            null,
            'Written by'
          ),
          el(
            'h6',
            {
              className: 'author-name'
            },
            'Loading...'
          )
        )
     ); // End return
  },  // End edit()

加载块后，它会立即发起一对apiFetch 调用（一个用于获取作者 ID，然后另一个用于获取作者的姓名和图像）。

此时，作者块会加载临时文本“正在加载...”

apiFetch 完成后，我使用 jQuery 更新作者块。

没有save 函数，因为它是一个动态块。我在我的插件 php 文件中注册了块，如下所示：

function my_author_block_dynamic_render($attributes, $content) {
  return '
    <div class="author-bottom">
      <img src="'.get_avatar_url(get_the_author_email(), ['size' => '200']).'">
      <div>
        <h6>Written by</h6>
        <h6 class="author-name">'.get_the_author().'</h6>
      </div>
    </div>';
}
function my_dynamic_blocks() {
  wp_register_script(
    'my-blocks-script',
    plugins_url( 'my-block.js', __FILE__ ),
    array( 'wp-blocks', 'wp-element' ));
  register_block_type( 'my-blocks/author-block', array(
    'editor_script' => 'my-blocks-script',
    'render_callback' => 'my_author_block_dynamic_render'));
}
add_action( 'init', 'my_dynamic_blocks' );

我找不到关于创建自定义作者块的好教程，所以希望这个示例可以帮助一些可怜的人！

【讨论】：