Dynamic block not showing in frontend

[ataurr]

Hi @Gordan

I have tried to create a dynamic block but it not print the post in the frontend.

I have attached index.php for front-end load but still, nothing showing.

Here is my plugin https://cl.ly/2P2F3q0C3636

Can you please one more time if you have time.

Thanks

[ataurr]

My index.js

/**
 * Block dependencies
 */
// import icon from './icon';
import './style.scss';
// import './editor.scss';
// import classnames from 'classnames';

/**
 * Internal block libraries
 */
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { Spinner, withAPIData } = wp.components;

export default registerBlockType(
    'gutenbergtest/dynamicblock',
    {
        title:__('Dynamic block'),
        description:__('Dynamic block for gutenberg'),
        icon: 'editor-alignright',
        category: 'widgets',
        keywords: [
            __('dynamic'),
            __('test')
        ],

        edit: withAPIData( props => {
            return {
                posts: <code>/wp/v2/posts?per_page=3</code>
            };
        } )( ( { isSelected, className, setAttributes, posts } ) => {
            if( ! posts.data ) {
                return (
                    <p className={ className }>
                        <Spinner/>
                        { __( 'Loading Posts', 'gutenbergtest' ) }
                    </p>
                );
            }

            if( 0 === posts.data.length ) {
                return <p>{ __( 'No Posts', 'gutenbergtest' ) }</p>;
            }

                return (
                    <ul className={ className }> {
                        posts.data.map( post => {
                            return (
                                <li>
                                    <a className={ className } href={ post.link }>{ post.title.rendered }</a>
                                 </li>
                                );
                            } ) }
                    </ul>
                );
            }),

        save(){
            return null;
        },

    });

My index.php file

<?php
/**
 * Server rendering for /blocks/examples/12-dynamic
 */
function jsforwpblocks_dynamic_block_render( $attributes ) {
    $recent_posts = wp_get_recent_posts( [
        'numberposts' => 3,
        'post_status' => 'publish',
    ] );
    if ( 0 === count( $recent_posts ) ) {
        return '<p>No posts</p>';
    }
    $markup = '<ul>';
    foreach( $recent_posts as $post ) {
        $post_id = $post['ID'];
        $markup .= sprintf(
            '<li><a href="%1$s">%2$s</a></li>',
            esc_url( get_permalink( $post_id ) ),
            esc_html( get_the_title( $post_id ) )
        );
    }
    $markup .= '<ul>';
    return $markup;
}
function jsforwpblocks_register_blocks() {
    // Hook server side rendering into render callback
    register_block_type( 'gutenbergtest/dynamicblock', [
        'render_callback' => 'jsforwpblocks_dynamic_block_render',
    ] );
}
// Make sure that Gutenberg is available
if ( function_exists( 'register_block_type' ) ) {
    add_action( 'init', 'jsforwpblocks_register_blocks' );
}

Load index.php in

include(plugin_dir_path(__FILE__) . 'blocks/test/dynamic/index.php');

[Zac Gordon]

You have to enable rest api for your custom post type. This has to go somewhere in your code:

  register_meta( 'post', 'subheading', [
      'show_in_rest' => true,
  ] );

That should be it

[ataurr]

I have added this to index.php but still nothing showing in front

function my_plugin_render_block_latest_post( $attributes ) {
    $recent_posts = wp_get_recent_posts( array(
        'numberposts' => 1,
        'post_status' => 'publish',
    ) );
    if ( count( $recent_posts ) === 0 ) {
        return 'No posts';
    }
    $post = $recent_posts[ 0 ];
    $post_id = $post['ID'];
    return sprintf(
        '<a class="wp-block-my-plugin-latest-post" href="%1$s">%2$s</a>',
        esc_url( get_permalink( $post_id ) ),
        esc_html( get_the_title( $post_id ) )
    );
}

function jsforwpblocks_register_blocks() {
    // Hook server side rendering into render callback
    register_block_type( 'gutenbergtest/dynamicblock', array(
        'render_callback' => 'my_plugin_render_block_latest_post',
    ) );

    register_meta( 'post', 'subheading', [
        'show_in_rest' => true,
    ] );

}

// Make sure that Gutenberg is available
if ( function_exists( 'register_block_type' ) ) {
    add_action( 'init', 'jsforwpblocks_register_blocks' );

}

I Am really confused what I am missing. I have searched on google nothing found any solution about this.

Its showing in editor

Nothing showing in frontend

[Zac Gordon]

Sorry about that. That was not correct, you can remove that.

Hmm, not seeing what the problem is. My suggestion is start with the working block example again and work through the steps of converting to your own block to see where it went wrong.

[Author]

Posts