The new setting/control of a numerical field (Opacity) is not working in the WordPress Customizer

Question

To make it short, my question is : How can I get input_attrs parameter value of a Control please ?

To explain more, I've created a new setting/control (my section and its other settings/controls work perfectly), the new setting/control is a numerical field that edits background color opacity, its value changes from 0 to 1 with a step 0.001. when I debugged my code, I found that this line : $atts = $setting -> manager -> get_control( $setting->id ) -> input_attrs(); is giving me a null result, because $setting->id is getting setting name, and not control name, and even I put the same name for setting/control, it doesn't work.

Here my code :

    //Add Header Background Color Opacity value setting
    $wp_customize->add_setting( 'header_opacity_settings' , array(
        'type' => 'option',
        'capability' => 'manage_options',
        'default' => 1,
        'sanitize_callback' => 'sanitize_color_opacity', 
    ) );

        //Add Header Background Color Opacity value control
        $wp_customize->add_control( 'header_opacity_control', array(
            'type'     => 'number',
            'label'    => __( 'Background Color Opacity' ),
            'description' => __( 'This is a custom number.' ), // Tooltip to understand what is this field made for
            'section'  => 'a_s_h_section',
            'settings' => 'header_opacity_settings',
            'input_attrs' => array( 
                'min'  => 0,
                'max'  => 1.000,
                'step' => 0.001,
            )
        ) );


    //sanitize the given opacity value 
    function sanitize_color_opacity( $number, $setting ) {
        
        $atts = $setting -> manager -> get_control( $setting->id ) -> input_attrs();
        $min = $atts['min'] ;
        $max = $atts['max'] ;
        $step = $atts['step'] ;

        $number = floor($number / $atts['step']) * $atts['step'];

        return ( $min <= $number && $number <= $max ) ? $number : $setting->default;
    }

You can see what I was talking about in the sanitize_color_opacity function, the variable $atts is always null

Do you know how can I get input_attrs in another way please ?

See above please, thanks

Answer 1

Could you please try to use different approach to fix this issue because accessing the control's input_attrs directly in the sanitize_callback can cause issue.

Instead of trying to access the input_attrs within the sanitize_callback, we can set these attributes directly when defining the setting and control, and reference them within our sanitization function.

You can also give a try to given code.

// Define input_attrs attributes globally.
$input_attrs = array(
    'min'  => 0,
    'max'  => 1.000,
    'step' => 0.001,
);

// Add setting for Header Background Color Opacity value.
$wp_customize->add_setting('header_opacity_settings', array(
    'type'              => 'option',
    'capability'        => 'manage_options',
    'default'           => 1,
    'sanitize_callback' => function($number) use ($input_attrs) {
        return sanitize_color_opacity($number, $input_attrs);
    },
));

// Add control for Header Background Color Opacity value.
$wp_customize->add_control('header_opacity_control', array(
    'type'        => 'number',
    'label'       => __('Background Color Opacity'),
    'description' => __('This is a custom number.'), // Tooltip to understand what this field is for
    'section'     => 'a_s_h_section',
    'settings'    => 'header_opacity_settings',
    'input_attrs' => $input_attrs,
));

// Sanitize the given opacity value for security.
function sanitize_color_opacity($number, $input_attrs) {
    $min  = $input_attrs['min'];
    $max  = $input_attrs['max'];
    $step = $input_attrs['step'];

    // Here we are ensuring the number is within the defined step
    $number = floor($number / $step) * $step;

    // Return the sanitized number if within range, otherwise return the default value.
    return ($min <= $number && $number <= $max) ? $number : 1; // 1 is the default value defined in the setting.
}