Garmaine Staff asked 2 years ago

I feel like what I want to accomplish is simple: create a custom WordPress Gutenberg Block that auto-populates with the author name and image and is not editable. Then render this block on the frontend post.

I've gone at this from a lot of different angles, and I think what I need is a Dynamic Block
https://developer.wordpress.org/block-editor/tutorials/block-tutorial/creating-dynamic-blocks/

First issue is the wp.data.select("core/editor").getCurrentPostId() doesn't load the post ID. But then I'll be honest, I don't know if the return would even have the author info I want anyway. Any guidance is most appreciated.

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