WP - shortcode including a mixture of html and php (ACF variables) - wordpress

Question

I'm trying to create a WP shortcode that would include both html and php. For example, something like that (that does not work):
function my_first_shortcode() {
$content = <<<EOT
<h1>Some title</h1>
<p><?php the_field('description'); ?></p>
EOT;
return $content;
}
add_shortcode('my_shortcode', 'my_first_shortcode');
The the_field('name_of_field'); normally outputs the content of the specified variable/field (Advanced Custom Fields).
Is the HEREDOC way the right way of doing that? If so, how would I do it? It'd be also great if I could pass variables to the shortcode.
Thank you

Answer 1

First, you can't write PHP tags inside HEREDOC.
You can use it like that:
$the_field = 'the_field';
$content = <<<EOT
<h1>Some title</h1>
<p>{$the_field('description')}</p>
EOT;
In order to pass attributes to a shortcode it's very simple.
for example we have the shortcode:
[my_shortcode att_1="some_value" att_2="some_value"]
function my_first_shortcode($atts)
{
$att_1 = $atts['att_1'];
$att_2 = $atts['att_2'];
}
add_shortcode('my_shortcode', 'my_first_shortcode');

Answer 2

I always prefer to use output buffering for my shortcodes, example below.
function my_first_shortcode() {
ob_start(); ?>
<h1>Some title</h1>
<p><?php echo the_field('description'); ?></p>
<?php
return ob_get_contents();
}
add_shortcode('my_shortcode', 'my_first_shortcode');

Answer 3

add_shortcode('location_start_your_application_group', 'start_your_application_group');
function start_your_application_group() {
ob_start();
$start_your_application_group = '';
$start_your_application_group .= '<section class="start-your-application">';
if ( have_rows( 'start_your_application_group', 'option' ) ) :
while ( have_rows( 'start_your_application_group', 'option' ) ) : the_row();
$heading = get_sub_field( 'heading' );
$content = get_sub_field( 'content' );
if ( $heading !== '' ) {
$start_your_application_group .= '<h3 class="start-your-application__heading">' . $heading . '</h3>';
}
if ( $content !== '' ) {
$start_your_application_group .= '<div class="start-your-application__content">' . $content . '</div>';
}
$image = get_sub_field( 'image' );
if ( $image ) {
$start_your_application_group .= '<div class="start-your-application__image-container"><img class="start-your-application__image" src="' . esc_url($image['url']) .'" alt="' . $image['alt'] . '" /></div>';
}
endwhile;
endif;
$start_your_application_group .= '</section>';
$start_your_application_group = ob_get_clean();
return $start_your_application_group;
}