WP REST API Grid Block

wp-rest-api-grid-block.php

<?php
/*
Plugin Name: WP REST API Grid Block
Description: A Gutenberg block that fetches posts via the REST API and displays them in a grid.
Version: 1.0
Author: Your Name
*/

if (!defined('ABSPATH')) {
    exit; // Exit if accessed directly.
}

// Register Gutenberg Block
function wp_rest_api_grid_block_assets() {
    // Register the block script for backend
    wp_register_script(
        'wp-rest-api-grid-block',
        false,
        ['wp-blocks', 'wp-element', 'wp-components', 'wp-api-fetch'],
        null,
        true
    );

    // Inline JavaScript
    wp_add_inline_script(
        'wp-rest-api-grid-block',
        "(function(wp) {
            const { registerBlockType } = wp.blocks;
            const { useState, useEffect } = wp.element;
            const { apiFetch } = wp;

            registerBlockType('custom/wp-rest-api-grid-block', {
                title: 'Posts Grid Block',
                icon: 'grid-view',
                category: 'widgets',
                edit: () => {
                    const [posts, setPosts] = useState([]);
                    const [loading, setLoading] = useState(true);

                    useEffect(() => {
                        apiFetch({ path: '/wp/v2/posts' })
                            .then((response) => {
                                setPosts(response);
                                setLoading(false);
                            })
                            .catch((error) => {
                                console.error('Error:', error);
                                setLoading(false);
                            });
                    }, []);

                    if (loading) {
                        return 'Loading posts...';
                    }

                    return (
                        wp.element.createElement('div', { className: 'wp-rest-api-grid' },
                            wp.element.createElement('div', {
                                style: {
                                    display: 'grid',
                                    gridTemplateColumns: 'repeat(3, 1fr)',
                                    gap: '16px'
                                }
                            },
                                posts.map(post => (
                                    wp.element.createElement('div', {
                                        key: post.id,
                                        style: {
                                            border: '1px solid #ccc',
                                            padding: '10px'
                                        }
                                    },
                                        wp.element.createElement('h3', {
                                            dangerouslySetInnerHTML: { __html: post.title.rendered }
                                        }),
                                        wp.element.createElement('p', {
                                            dangerouslySetInnerHTML: { __html: post.excerpt.rendered }
                                        })
                                    )
                                ))
                            )
                        )
                    );
                },
                save: () => {
                    return null; // Use server-side rendering
                },
            });
        })(window.wp);"
    );

    // Register block with render_callback for frontend
    register_block_type('custom/wp-rest-api-grid-block', array(
        'editor_script' => 'wp-rest-api-grid-block',
        'render_callback' => 'wp_rest_api_grid_block_render'
    ));
}
add_action('init', 'wp_rest_api_grid_block_assets');

// Server-Side Rendering
function wp_rest_api_grid_block_render() {
    $posts = get_posts([
        'numberposts' => 6,
        'post_status' => 'publish',
    ]);

    if (empty($posts)) {
        return '<p>No posts found.</p>';
    }

    $output = '<div class="wp-rest-api-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">';

    foreach ($posts as $post) {
        $output .= '<div style="border: 1px solid #ccc; padding: 10px;">';
        $output .= '<h3>' . esc_html($post->post_title) . '</h3>';
        $output .= '<p>' . esc_html(wp_trim_words($post->post_content, 20)) . '</p>';
        $output .= '</div>';
    }

    $output .= '</div>';

    return $output;
}