How can I add a shortcode to query Custom Post Type with ACF in Wordpress?

Question

I am building a website for a client, and I needed to build a game release calendar using Custom Post Type and Advanced Custom Fields. Everything is built out, but the last step.

I need to be able to query the CPT automatically whenever a new game is added, and pull it into the WP Bakery Visual Composer front end via shortcode. Below is the code added to the functions.php file, but I'm getting syntax errors because of "<". Can anyone help me with the proper syntax/formatting for getting it to save and call in properly via the shortcode?

FUNCTIONS.PHP code

// Custom Game Releases Shortcode
add_shortcode( 'my_vc_php_output', 'game_release_listings');
function game_release_listings( $atts ) {
    <?php 

$posts = get_posts(array(
    'posts_per_page'    => -1,
    'post_type'         => 'game_release'
));

if( $posts ): ?>    
    <ul>
        
    <?php foreach( $posts as $post ): 
        
        setup_postdata( $post );
        
        ?>
        <li>
            <a href="<?php the_permalink(); ?>"><?php the_field('release_date'); ?></a>
        </li>
    
    <?php endforeach; ?>
    
    </ul>
    
    <?php wp_reset_postdata(); ?>

<?php endif; ?>
}

Answer 1

I ultimately figured out getting a shortcode to work by reworking the code to the following:

add_shortcode( 'gr_shortcode', 'gr_shortcode' );
function gr_shortcode() {
    $buffer = '<h3>Upcoming Titles</h3>';
    $q = new WP_Query(array(
        'post_type' => 'game_release',
        'posts_per_page' => 3
    ));
    while ($q->have_posts()) {
        $q->the_post();
        $buffer = $buffer.get_the_title().'<br>'.$buffer.the_field('release_date');
    
    }
    wp_reset_postdata();
    return $buffer;
}