Is there any way or method to concatenate while loop inside the string of HTML?

Question

Is there any way to concatenate while loop inside the string? Basically, I need a string of HTML and there is some Metadata I want to retrieve from custom post type and want to store that data into HTML. thanks in advance for your help.

function staffSectionOutput($props) {
    $args = array(  
        'post_type' => 'staff_section',
        'category_name'       =>  'senior'
    );
    
    $loop = new WP_Query( $args ); 
  
    

  return '<section  class="staff">
  
            <div class="container">
                <div class="row">
                   '. while ( $loop->have_posts() ) { 
                    $loop->the_post(); 
                    $employeeName = get_post_meta( get_the_ID() , 'staff-employee-name', false );
                    $employeJob = get_post_meta( get_the_ID() , 'staff-employee-job-title', false );
                    $employeDescription = get_post_meta( get_the_ID() , 'staff-employee-description', false );
                    $employeUrl = get_post_meta( get_the_ID() , 'staff-employee-url', false ); .'
                    <div class="col-12 col-sm-6 col-md-4">
                        <div data-description="'. $employeUrl .'">
                            <div class="card-head">
                                <img src="'. $employeUrl .'">
                            </div>
                            <div class="card-body">
                                <div class="text">
                                    <h4>'. $employeeName .'</h4>
                                    <span>'. $employeJob .'</span>
                                </div>
                                <div class="btn-a">Learn More</div>
                            </div>
                        </div>
                    </div> 
                    '.
                }
                  
                wp_reset_postdata(); .'
                </div>
            </div>
    </section>';
}

Answer 1

If you need to return html code, we can form that code first, put it into a variable and then return the variable.

Try this code

function staffSectionOutput($props) {
    $args = array(  
        'post_type' => 'staff_section',
        'category_name'       =>  'senior'
    );
    
    $loop = new WP_Query( $args ); 
// enable output buffer
ob_start();
?>
  <section  class="staff">
  
            <div class="container">
                <div class="row">
                <?php    while ( $loop->have_posts() ) { 
                    $loop->the_post(); 
                    $employeeName = get_post_meta( get_the_ID() , 'staff-employee-name', false );
                    $employeJob = get_post_meta( get_the_ID() , 'staff-employee-job-title', false );
                    $employeDescription = get_post_meta( get_the_ID() , 'staff-employee-description', false );
                    $employeUrl = get_post_meta( get_the_ID() , 'staff-employee-url', false );
                    ?>
                    <div class="col-12 col-sm-6 col-md-4">
                        <div data-description="<?php echo $employeUrl ?>">
                            <div class="card-head">
                                <img src="<?php echo $employeUrl ?>">
                            </div>
                            <div class="card-body">
                                <div class="text">
                                    <h4><?php echo $employeeName ?></h4>
                                    <span><?php echo $employeJob ?></span>
                                </div>
                                <div class="btn-a">Learn More</div>
                            </div>
                        </div>
                    </div> 

               <?php } ?>
                  
               <?php wp_reset_postdata(); ?>
                </div>
            </div>
    </section>
<?php
// save everything in the buffer to the variable $content
$content = ob_get_contents();
 
// disable and clear the buffer
ob_end_clean();
return $content;
}