April 2023 - Faizan Haidar

To create a Gutenberg block to display all posts in WordPress, follow these steps:

Create a new directory in your WordPress theme or plugin directory called “my-post-block”.
Inside the “my-post-block” directory, create a new PHP file called “index.php”.
Add the following code to the “index.php” file to register a new Gutenberg block:

<?php
/**
 * Plugin Name: My Post Block
 * Description: A Gutenberg block to display all posts.
 * Version: 1.0.0
 * Author: Your Name
 *
 * @package my-post-block
 */

defined( 'ABSPATH' ) || exit;

function my_post_block_register_block() {
    wp_register_script(
        'my-post-block',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-components' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );

    register_block_type( 'my-post-block/my-post-block', array(
        'editor_script' => 'my-post-block',
    ) );
}
add_action( 'init', 'my_post_block_register_block' );

This code will register a new Gutenberg block with the name “My Post Block”.

Next, create a new JavaScript file in the “my-post-block” directory called “block.js”.
Add the following code to the “block.js” file to define the block:

( function( wp ) {
    var registerBlockType = wp.blocks.registerBlockType;
    var ServerSideRender = wp.components.ServerSideRender;

    registerBlockType( 'my-post-block/my-post-block', {
        title: 'My Post Block',
        icon: 'admin-post',
        category: 'common',
        edit: function( props ) {
            return wp.element.createElement(
                ServerSideRender,
                {
                    block: 'my-post-block/my-post-block',
                    attributes: props.attributes,
                }
            );
        },
        save: function() {
            return null;
        },
    } );
} )( window.wp );

This code will define the block and specify that it should use a server-side render function to generate the block’s output.

Finally, create a new PHP file in the “my-post-block” directory called “render.php”.
Add the following code to the “render.php” file to generate the output for the block:

<?php
/**
 * Server-side rendering for the My Post Block.
 *
 * @package my-post-block
 */

defined( 'ABSPATH' ) || exit;

function my_post_block_render() {
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => -1,
    );

    $query = new WP_Query( $args );

    if ( $query->have_posts() ) {
        $output = '<ul>';

        while ( $query->have_posts() ) {
            $query->the_post();
            $output .= '<li><a href="' . get_the_permalink() . '">' . get_the_title() . '</a></li>';
        }

        $output .= '</ul>';

        wp_reset_postdata();

        return $output;
    }

    return 'No posts found.';
}

register_block_type( 'my-post-block/my-post-block', array(
    'render_callback' => 'my_post_block_render',
) );

This code will define a render function that uses a WP_Query object to retrieve all posts and output them in an unordered list.

That’s it! You now have a Gutenberg block that displays all posts. You can customize the output by modifying the “render.php” file to suit your needs.

Share this: