Wordpress Customizer Hides Custom Section?

Question

I have created a custom section to my WordPress theme, however, whenever the section is printed, inline style is added to hide the section. Here is the section declaration, the custom section registration, and its use:

<?php

/* Theme Test Data */
class theme_test_data extends WP_Customize_Section {
    public $type = "theme_test_data";
    public $test_url = "";
    public $test_text = "";
    public $test_link_text = "";

    public function json() {
        $json = parent::json();

        $json['test_text'] = $this->test_text;
        $json['test_link_text'] = $this->test_link_text;
        $json['test_url']  = esc_url( $this->test_url );

        return $json;
    }

    public function render_template() {?>
        <li id="accordion-section-{{ data.id }}" class="accordion-section control-section control-section-{{ data.type }}">
        <form method="POST" action="{{data.test_url}}">
            <input type="hidden" name="testdatainstall" value="1"/>
            <?php wp_nonce_field('theme.initialize');?>
            <h3 class="accordion-section-title">
                <span>{{data.test_text}}</span>
                <button type="submit" class="theme_customizer_doc_button btn">{{data.test_link_text}}</button>
            </h3>
        </form>
    </li>
    <?php }
}

//Theme registration
$wp_customize->register_section_type( 'theme_test_data' );

//Add section
$wp_customize->add_section(new theme_test_data($wp_customize, 'theme_test_data', array(
    'title'    => __('Section Title', 'theme_language'),
    'test_url'  => admin_url('edit.php'),
    'test_text' => __('Install our test data', 'theme_language'),
    'test_link_text' => __('Install', 'theme_language'),
    'priority' => 1000
)));

In the HTML output however, it is rendered like this:

<li id="accordion-section-theme_test_data" class="accordion-section control-section control-section-theme_test_data" aria-owns="sub-accordion-section-theme_test_data" style="display: none;">
    <form method="POST" action="{hiddenforprivacy}">
        <input name="testdatainstall" value="1" type="hidden">
        <input id="_wpnonce" name="_wpnonce" value="24923e18ae" type="hidden"><input name="_wp_http_referer" value="/wp/wp-admin/customize.php?return=%2Fwp%2Fwp-admin%2Fedit.php" type="hidden">
        <h3 class="accordion-section-title">
            <span>Install our test data</span>
            <button type="submit" class="theme_customizer_doc_button btn">Install</button>
        </h3>
    </form>
</li>

You got any clue? I tried them all :(

Answer 1

The WordPress Section is composed of a HTML structure and a JavaScript section. I had not set the section as always active via JavaScript. I have done as follows:

api.sectionConstructor['theme_test_data'] = api.Section.extend( {

    // No events for this type of section.
    attachEvents: function () {},

    // Always make the section active.
    isContextuallyActive: function () {
        return true;
    }
} );