Htmx Server Block

Contributors: The WordPress Contributors
Tags: block
Tested up to: 6.1
Stable tag: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Example block scaffolded with Create Block tool, adapted for serverside rendering, and interactivity using HTMXpress.

Description

The render_callback funcions simply includes a template:

        'render_callback' => function () {
            ob_start();
            load_template( __DIR__ . '/templates/random_posts.php' );

            return ob_get_clean();
        },

The plugin's templates are registered with HTMXpress, this makes them available under the /htmx/ endpoint:

# register plugin's templates, which adds them to the /htmx endpoint.
add_filter( 'htmx.template_paths', static function ( $paths ) {
    $paths[] = __DIR__ . '/templates';

    return $paths;
} );

The templates/random_posts.php template contains a WP_Query to load 3 random posts and a button which refreshes only the posts:

    echo '<button hx-post="/htmx/random_posts" hx-target="#random-posts"> More </button>';

Demo:

htmxpress-serverside-demo.mp4