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.