Блоки WordPress Gutenberg Получить информацию об авторе - PullRequest
Новая
       58

Блоки WordPress Gutenberg Получить информацию об авторе

0 голосов
/ 11 апреля 2020

Мне кажется, что то, чего я хочу достичь, sh просто: создайте пользовательский блок WordPress Gutenberg, который автоматически заполняется именем автора и изображением и не редактируется. Затем визуализируйте этот блок в посте внешнего интерфейса.

Я рассмотрел этот вопрос с разных сторон, и я думаю , что мне нужно, это блок Dynami c Block
https://developer.wordpress.org/block-editor/tutorials/block-tutorial/creating-dynamic-blocks/

Первая проблема: wp.data.select("core/editor").getCurrentPostId() не загружает идентификатор сообщения. Но тогда я буду честен, я не знаю, будет ли в любом случае даже информация об авторе, которую я хочу. Любое руководство ценится. 

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

1 Ответ

0 голосов
/ 16 апреля 2020

Наконец-то разобрался, подумал, что поделюсь. 

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 вызовов (один для получения идентификатора автора, затем другой для получения имя и изображение автора).

Пока это происходит, блок автора загружается с временным текстом «Загрузка ...»

После завершения apiFetch я использовал jQuery для обновите авторский блок.

Функция save отсутствует, потому что это динамический c блок. Я зарегистрировал блок в своем файле плагина 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' );

Я не смог найти хорошего учебника по созданию пользовательского блока автора, поэтому, надеюсь, этот пример поможет бедной душе в будущем!

...