JavaScript for WordPress › Forums › Gutenberg Development › Dynamic block not showing in frontend
- This topic has 4 replies, 2 voices, and was last updated 6 years, 6 months ago by Zac Gordon.
-
AuthorPosts
-
April 18, 2018 at 5:13 pm #45342ataurrParticipant
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
April 18, 2018 at 5:15 pm #45350ataurrParticipantMy 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');
April 18, 2018 at 5:52 pm #45355Zac GordonKeymasterYou 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
April 19, 2018 at 6:32 am #45398ataurrParticipantI 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
April 19, 2018 at 1:07 pm #45412Zac GordonKeymasterSorry 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.
-
AuthorPosts
- You must be logged in to reply to this topic.