Display a Random Container Within a Query Loop

Hi there,

It requires custom coding to alter the output of the query, I’m not sure if it’s gonna work, but give it a try.

1. Add a CSS class to the query block, eg. my-query.
Adding CSS class(es): https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

2. Add this PHP code:

add_filter( 'render_block', function( $block_content, $block ) {
    static $loopnumber = 1;
    static $random_insert_index = null;
    static $loop_instance = 0;
    static $last_block_id = null;

    // Detect a new query loop instance (new block or reset)
    $current_block_id = isset( $block['attrs']['blockId'] ) ? $block['attrs']['blockId'] : md5( serialize( $block ) );
    if ( $last_block_id !== $current_block_id && $loopnumber > 1 ) {
        $loopnumber = 1;
        $loop_instance++;
        $random_insert_index = null; // Reset to generate a new random index
        $last_block_id = $current_block_id;
    }

    // Set random_insert_index for the first block of the loop
    if ( $random_insert_index === null && ! is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'queryloop-insertblock' ) !== false ) {
        $random_insert_index = rand( 1, 9 ); // Random index capped at 9
    }

    // Process the block
    if ( ! is_admin() && ! empty( $block['attrs']['className'] ) && strpos( $block['attrs']['className'], 'queryloop-insertblock' ) !== false ) {
        if ( $loopnumber === $random_insert_index ) {
            ob_start();
            do_action( 'queryloop_insert_hook' ); // Single, consistent hook
            $insertblock = ob_get_clean();
            if ( $insertblock ) {
                $block_content = $block_content . '<div class="gb-loop-item is-loop-template-item inserted-content">' . $insertblock . '</div>';
            }
        }
        $loopnumber++;
        $last_block_id = $current_block_id;
    }

    return $block_content;
}, 10, 2 );

Adding PHP: https://docs.generatepress.com/article/adding-php/

3. Add the content you want to insert into a block element – hook, and set the hook name to queryloop_insert_hook, set the location to the front page.

Let me know how it goes!