Create another "Display Site Title and Tagline" checkbox, "Header Text Color" setting and control

Question

When you enables Custom_Headers support for your theme with the following code, a "Display Site Title and Tagline" checkbox on the Site Identity section and a "Header Text Color" control on the Color section will appear:

/**
 * Set up the WordPress core custom header feature.
 */
function theme_custom_header_setup() {
    add_theme_support( 'custom-header', array(
        // Default arguments
    ) );
}
add_action( 'after_setup_theme', 'theme_custom_header_setup' );

My question is, how can I create another "Display Site Title and Tagline" checkbox, "Header Text Color" setting and control with the same functionalities as listed?

1. The color control will deactivate/disappear when the checkbox is unchecked asynchronously, not refresh, and reappear when checked.
2. The controls only have 1 setting because when the checkbox is unchecked, the "header_textcolor" setting will turn to have the 'blank' value.

I tried to create 1 setting with 2 controls but doesn't seems to work:

function theme_customize_register( $wp_customize ) {

    $wp_customize->add_setting( 'tagline_textcolor', array(
        'transport'   => 'postMessage',
    ) );
    $wp_customize->add_control( 'tagline_textcolor', array(
        'type'        => 'checkbox',
        'section'     => 'title_tagline',
        'label'       => __( 'Display Tagline Text', 'theme_name' ),
    ) );
    $wp_customize->add_control(
            new WP_Customize_Color_Control(
                    $wp_customize,
                    'tagline_textcolor',
                    array(
                        'label'           => __( 'Tagline Text Color', 'theme_name' ),
                        'section'         => 'title_tagline',
                        )
                    )
            );
}
add_action( 'customize_register', 'theme_customize_register' );

Can you help me with this, or give me a right idea?

Answer 1

If the setting and controls are added exactly as they appear in class-wp-customize-manager.php the JQuery script in wp-admin/custom-header.php will toggle the header text color control properly. The theme_supports line must be commented out or removed as it is "used to hide a setting if the theme lacks support for a specific feature".^[1]

add_action( 'customize_register', function ( $wp_customize ) {

    $wp_customize->add_setting( 'header_textcolor', array(
        // 'theme_supports' => array( 'custom-header', 'header-text' ),
        'default'        => get_theme_support( 'custom-header', 'default-text-color' ),

        'sanitize_callback'    => array( $wp_customize, '_sanitize_header_textcolor' ),
        'sanitize_js_callback' => 'maybe_hash_hex_color',
    ) );

    $wp_customize->add_control( 'display_header_text', array(
        'settings' => 'header_textcolor',
        'label'    => __( 'Display Site Title and Tagline' ),
        'section'  => 'title_tagline',
        'type'     => 'checkbox',
        'priority' => 40,
    ) );

    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_textcolor', array(
        'label'   => __( 'Header Text Color' ),
        'section' => 'colors',
    ) ) );
});