WordPress Gutenberg Blocks 获取作者信息

Question

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

我从很多不同的角度研究过这个问题，我认为我需要的是动态块
https://developer.wordpress.org/block-editor/tutorials/block-tutorial/creating-dynamic-blocks/

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

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()
});

Answer 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，另一个用于获取作者的姓名和图像）。

发生这种情况时，作者块加载了临时文本 "Loading..."

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' );

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

WordPress Gutenberg Blocks 获取作者信息

WordPress Gutenberg Blocks Get Author Info

javascript

wordpress

gutenberg-blocks