JavaScript for WordPress Forums Gutenberg Development Dynamic block not showing in frontend

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #45342
    ataurr
    Participant

    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

    #45350
    ataurr
    Participant

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

    #45355
    Zac Gordon
    Keymaster

    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

    #45398
    ataurr
    Participant

    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

    sergwers

    Nothing showing in frontend

    sdfserges

    #45412
    Zac Gordon
    Keymaster

    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.