Inserting Unique Section inside WYSIWYG Editor via Shortcode

Example 1

add_shortcode('post_quote','post_quote_shortcode');
function post_quote_shortcode($atts){

$atts = shortcode_atts(
    array(
        'postid' => ""
    ), $atts, 'bartag' );

$postid = $atts['postid'];

if( have_rows('quote_content', $postid) ): while( have_rows('quote_content', $postid) ) : the_row();

$content = get_sub_field('content');
$bgColor = get_sub_field('background_color');

endwhile; endif; wp_reset_postdata();

return '<div class="ability" style="background-color:'.$bgColor.'">
              <div class="text">
                  <h2>'.$content.'</h2>
              </div>
          </div>';
}

-------------------------------------------------------------------------------------------------------------

Example 2

add_shortcode('related_content','related_content_shortcode');
function related_content_shortcode($atts){ 

$atts = shortcode_atts(
    array(
        'postid' => ''
    ), $atts, 'bartag' );

$postid = $atts['postid'];

if( have_rows('related_content', $postid) ): while( have_rows('related_content', $postid) ) : the_row();

$bgColor = get_sub_field('background_color');
$heading = get_sub_field('related_content_heading');

$link1 = get_sub_field('left_cta_link');
if($link1){
     $url1 = $link1['url'];
     $title1 = $link1['title'];
}

$link2  = get_sub_field('right_cta_link');
if($link2){
     $url2   = $link2['url'];
     $title2 = $link2['title'];
}

endwhile; endif; wp_reset_postdata();

return    '<div class="related related-wrap" style="background-color:'.$bgColor.'">
              <div class="row">
                  <h2>'.$heading.'</h2>
                  <h5>
                  <a href="'.$url1.'">'.$title1.'</a> 
                  <a href="'.$url2.'">'.$title2.'</a>
                  </h5>
              </div>
          </div>';

}

-------------------------------------------------------------------------------------------------------------

Example 3

add_shortcode('start_grid', 'post_start_grid');
function post_start_grid($atts, $content = null) {

$atts = shortcode_atts(
         array(
             'bg-img' => ''
         ), $atts, 'bartag' );

return '<div class="confidence" style="background-image:url('.$atts['bg-img'].')">
              <div class="row">
                  <div class="col">'
                  .do_shortcode($content).
                  '</div>';
                  
}

add_shortcode('left_col','left_col_content');
function left_col_content($atts, $content = null){

return $content;
}

add_shortcode('right_col','right_col_content');
function right_col_content($atts, $content = null){

return $content;
}

add_shortcode('end_grid', 'post_end_grid');
function post_end_grid($atts, $content = null) {
     
return '<div class="col">'
         .do_shortcode($content).
        '</div>
    </div>
</div>';
}