shortcode vc_map - custom-markup output params issue

Question

I'm trying to make simple shortcode inside my theme to demonstrate the custom-markup option in admin view. Code goes like this:

`<?php  
        ob_start(); ?>      
    
                <div class="item-container">            
                    <p>This is admin view:<p>
                    <h4><?php echo $heading?></h4>          
                </div> <?php 
        
        $wena02_markup = ob_get_clean();                
                                                                            
vc_map( array(
    'name'                    => __( 'Heading' , 'wena-theme' ),
    'base'                    => 'wena02_item',
    'description'             => __( 'Custom heading', 'wena-theme' ),  
    'content_element'         => true,
    'custom_markup' =>$wena02_markup, // 'CUSTOM MARKUP ADMIN VIEW'
    'show_settings_on_create' => true,
    'params'                  => array(
                array(
                    'type'        => 'textfield',
                    'heading'     => __( 'Test Heading', 'wena-theme' ),
                    'holder' => 'div',
                    'param_name'  => 'heading',
                    'description' => __( 'Heading will be displayed.', 'wena-theme' ),
                ),
                
    ),
    
) );

if(class_exists('WPBakeryShortCodesContainer')){ class WPBSC_Wena02_Item extends WPBakeryShortCodesContainer { /*Boom!*/ } }


if(!function_exists('wena02_item_output')){
    
    function wena02_item_output( $atts, $content = null){
        $atts =  extract(shortcode_atts( 
                    array( 'heading'             => '',
                   ),$atts )) ;
    
            ob_start(); ?>
            
                <div class="item-container">
                    <h4><?php echo $heading?></h4>      
                </div> <?php 
                
            return ob_get_clean();                                  
    }

    add_shortcode( 'wena02_item' , 'wena02_item_output' );
}`

Params are extracted in function 'wena02_item_output' and works well as $heading in output.

Then, in array I've add custom-markup to $wena02_markup

Simple ob_start function is working well with created object, but only in condition - it is on top - upto array and not hidden in any function. Displays well html message "This is admin view:", but not the variable.

So I have problem with extract params to $heading in ob_start output connected with custom-markup. Looking for some working solution.

I've tried to use global $heading but for now with no success.

Answer 1

<?php  
function wena02_custom_markup() {
    ob_start();
    ?>
    <div class="item-container">
        <p>This is admin view:</p>
        <h4>{{heading_placeholder}}</h4>
    </div>
    <?php
    return ob_get_clean();
}

$wena02_markup = wena02_custom_markup();

vc_map( array(
    'name'                    => __( 'Heading', 'wena-theme' ),
    'base'                    => 'wena02_item',
    'description'             => __( 'Custom heading', 'wena-theme' ),  
    'content_element'         => true,
    'custom_markup'           => $wena02_markup,
    'show_settings_on_create' => true,
    'params'                  => array(
        array(
            'type'        => 'textfield',
            'heading'     => __( 'Test Heading', 'wena-theme' ),
            'holder'      => 'div',
            'param_name'  => 'heading',
            'description' => __( 'Heading will be displayed.', 'wena-theme' ),
        ),
    ),
) );

if(class_exists('WPBakeryShortCodesContainer')){
    class WPBSC_Wena02_Item extends WPBakeryShortCodesContainer { /*Boom!*/ }
}

if(!function_exists('wena02_item_output')){
    function wena02_item_output( $atts, $content = null ) {
        
        $atts = shortcode_atts(array('heading' => ''), $atts);
        $heading = $atts['heading'];

        ob_start();
        ?>
        <div class="item-container">
            <h4><?php echo esc_html($heading); ?></h4>
        </div>
        <?php
        return ob_get_clean();
    }

    add_shortcode('wena02_item', 'wena02_item_output');
}
?>