Custom shortcode being shown in WPBakery backend rather than the block - php

Question

I have a nested element called Hero Slider. Hero slider is the container and it can only contain a Slider item.
However, my shortcode is being shown in the WPBakery backend maybe suggesting a syntax error, but I cannot see anything that is causing it to appear this way:
The block doesn't even appear when adding a new element.
Here's my custom element: (init.php)
<?php
if (!defined('ABSPATH')) die('-1');
class vcHeroSlider extends WPBakeryShortCode {
// 1. Define constants at compile time (used in mapping)
const slug = 'tp_hero_slider';
const base = 'tp_hero_slider';
// 2. Integrate with hooks
function __construct() {
// For the parent wrapper
add_action( 'vc_before_init', array( $this, 'tp_heroSlider_mapping' ) );
add_shortcode( 'tp_hero_slider', array( $this, 'tp_heroSlider_html' ));
// For child / nested
add_action( 'vc_before_init', array( $this, 'tp_heroSlider_content_mapping' ) );
add_shortcode( 'tp_hero_slider_content', array( $this, 'tp_heroSlider_content_html' ));
}
// 3. Map for parent element
public function tp_heroSlider_mapping() {
vc_map(
array(
'icon' => get_template_directory_uri().'/assets/src/images/html.svg',
'name' => __( 'Hero Slider' , "text-domain" ),
'base' => 'tp_hero_slider',
'description' => __( 'Add slick slider to your page.', "text-domain" ),
'as_parent' => array('only' => 'tp_hero_slider_content'), // set as parent of the content map/html
'content_element' => true,
'show_settings_on_create' => false,
"js_view" => 'VcColumnView',
"category" => __('Hero', "text-domain" ),
'params' => array(
array(
"type" => "textfield",
"heading" => __( "Extra Class Name", "text-domain" ),
"param_name" => "el_class",
"description" => __( "Extra class to be customized via CSS", "text-domain" )
),
array(
'type' => 'css_editor',
'heading' => __( 'Custom Design Options', "text-domain" ),
'param_name' => 'css',
'group' => __( 'Design options', "text-domain" ),
),
),
)
);
}
// 4. Map for child element
public function tp_heroSlider_content_mapping() {
vc_map(
array(
'icon' => get_template_directory_uri().'/assets/src/images/html.svg',
'name' => __('Slider Item', "text-domain" ),
'base' => 'tp_hero_slider_content',
'description' => __( 'Add slide to hero.', "text-domain" ),
"category" => __('Content', 'text-domain'),
'content_element' => true,
'as_child' => array('only' => 'tp_hero_slider'),
'params' => array(
array(
'type' => 'textfield',
'heading' => __( 'Title', 'text-domain'),
'param_name' => 'title',
'value' => esc_html__( '', 'text-domain'),
'admin_label' => true,
'weight' => 0,
'group' => __( 'Content', 'my-text-domain' ),
),
array(
'type' => 'textarea',
'class' => '',
'heading' => __( 'Standfirst', 'text-domain'),
'param_name' => 'standfirst',
'value' => esc_html__( '', 'text-domain'),
'admin_label' => false,
'weight' => 0,
'group' => __( 'Content', 'my-text-domain' ),
)
),
)
);
}
// 5. Mapping markup of parent
public function tp_heroSlider_html( $atts, $content = null) {
$output = '';
$el_class = '';
extract(
shortcode_atts(
array(
'el_class' => '',
), $atts
)
);
static $i = 0;
$output = '<div id="slickslider-'.$i++.'" class="Slick-Slider heroSlider">'. do_shortcode($content) .'</div>';
return $output;
}
// 6. Mapping markup of child
public function tp_heroSlider_content_html( $atts, $content = null ) {
$output = '';
extract(
shortcode_atts(
array(
'title' => '',
'standfirst' => '',
), $atts
)
);
$background_img = wp_get_attachment_image_src(intval($background_img), 'full');
$background_img = $background_img[0];
$output .= '
<!-- Slide -->
<div class="heroSlider__slide">
<div class="overlay"></div>
';
$output .= '
<div class="container">
<div class="row justify-content-center justify-content-lg-start">
<div class="col-10 col-md-6 d-flex flex-column text-center text-lg-left content">';
if (!empty($title)) {
$output .= '<h1>' . $title . '</h1>';
}
if (!empty($standfirst)) {
$output .= '<p class="standfist">' . $standfirst . '</p>';
}
$output .= '
</div>
</div>
</div>
</div>
<!-- Slide -->
';
return $output;
}
}
// 7. Add the container functionality (so you can choose a slider element within the hero_slider element
if(class_exists('WPBakeryShortCodesContainer')){
class WPBakeryShortCode_tp_hero_slider extends WPBakeryShortCodesContainer {}
}
if(class_exists('WPBakeryShortCode')){
class WPBakeryShortCode_tp_hero_slider_content extends WPBakeryShortCode {}
}
new vcHeroSlider(); ?>
How I've added new element:
add_action( 'vc_before_init', 'vc_before_init_actions' );
function vc_before_init_actions() {
$theme = get_template_directory();
require_once( $theme.'/vc_elements/hero-slider/init.php');]
}
Although I don't believe the above is the issue, because I have several other elements defined like that and they all work.