I'm trying to put a section in the customizer where you can choose how to put a box-shadow in a h1. The problem is that i need to write the whole box-shadow box at once, is not like border where you can split in border-top, border-color, border-style, border-with, etc. Then, i need to get some css values different than the one im changing at that moment. Well, i dont know if i explained my self properly. You can see what i mean in the following example code (it's just an example, this code doesnt work):

    wp.customize( 'shadowh1', function( value ) {
    value.bind( function( newval ) {
        if(newval == 1){
            let Hshadow = wp.customize.newvalue( 'horizontalShadow' );
            let Vshadow = wp.customize.newvalue( 'verticalShadow' );
            let Bshadow = wp.customize.newvalue( 'blurShadow' );
            let Sshadow = wp.customize.newvalue( 'SpreadShadow' );
            let Cshadow = wp.customize.newvalue( 'colorShadow' );
            $( 'h1' ).css( 'box-shadow', Hshadow . "px " . Vshadow . "px " . Bshadow . "px " . Sshadow . "px #" . Cshadow);
        }
    } );
} );

I'm trying to put a section in the customizer where you can choose how to put a box-shadow in a h1. The problem is that i need to write the whole box-shadow box at once, is not like border where you can split in border-top, border-color, border-style, border-with, etc. Then, i need to get some css values different than the one im changing at that moment. Well, i dont know if i explained my self properly. You can see what i mean in the following example code (it's just an example, this code doesnt work):

    wp.customize( 'shadowh1', function( value ) {
    value.bind( function( newval ) {
        if(newval == 1){
            let Hshadow = wp.customize.newvalue( 'horizontalShadow' );
            let Vshadow = wp.customize.newvalue( 'verticalShadow' );
            let Bshadow = wp.customize.newvalue( 'blurShadow' );
            let Sshadow = wp.customize.newvalue( 'SpreadShadow' );
            let Cshadow = wp.customize.newvalue( 'colorShadow' );
            $( 'h1' ).css( 'box-shadow', Hshadow . "px " . Vshadow . "px " . Bshadow . "px " . Sshadow . "px #" . Cshadow);
        }
    } );
} );

• plugin-development
• theme-development
• theme-customizer

1 Answer 1

Well i couldnt find any answer all around internet... So, what i did was creating a hidden input where is collecting an array with every box-shadow value. So, when i change only a part of the total box-shadow value, only this part of the array is changed. Of course, each change must be triggered by javascript in that input. I dont know if it's the best option but it's the best i can do right now with my knowledge:

class My_customize_shadow extends WP_Customize_Control {
public $type = 'shadowh1';

public function __construct( $manager, $id, $args = array() ) {
    parent::__construct( $manager, $id, $args );
    $defaults = array(
        'min' => 0,
        'max' => 100,
        'step' => 1,
        'max_color' => 14,
    );
    $args = wp_parse_args( $args, $defaults );

    $this->min = $args['min'];
    $this->max = $args['max'];
    $this->step = $args['step'];
    $this->max_color = $args['max_color'];
}

public function render_content() {
?>
<p id="otec_shadow-button" onclick='jQuery("#shadow-block").slideToggle();'>
SOMBRA
</p>
<div id="shadow-block" style="display:none">
    <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    <span class="customize-control-description"><?php echo esc_html( $this->description ); ?></span>
    
    <label style="display:block">Sombra Horizontal</label>
    <input id="shadowx" class='range-slider' value="0" min="-50" max="50" step="<?php echo $this->step ?>" type='range'>
    
    <label style="display:block">Sombra Vertical</label>
    <input id="shadowy" class='range-slider' value="0" min="-50" max="50" step="<?php echo $this->step ?>" type='range'>
    
    <label style="display:block">Profundidad de sombra</label>
    <input id="shadowz" class='range-slider' value="0" min="<?php echo $this->min ?>" max="<?php echo $this->max ?>" step="<?php echo $this->step ?>" type='range'>
    
    <label style="display:block">Extensión de sombra</label>
    <input id="shadoww" class='range-slider' value="0" min="<?php echo $this->min ?>" max="<?php echo $this->max ?>" step="<?php echo $this->step ?>" type='range'>
    
    <label style="display:block">Color de la sombra</label>
    <input id="shadowc" type="text" placeholder="Escriba su código HTML">
    
    <a style="display:block" href="https://orbitalthemetips/colorpicker" target="__blank">color picker</a>
    
    <script>
    jQuery(document).ready(function(){
        let sombra = jQuery("#envio").val();
        let shadow = [];

        console.log(sombra);

        if(sombra == 0){
            shadow = ['0', '0', '0', '0', 'transparent'];
        }else{
            shadow = sombra.split(" ");
            for(let i = 0; i < 5; i++){
                shadow[i] = shadow[i].replace("px", "");
            }
        }
        
        jQuery("#shadowx").val(shadow[0]);
        jQuery("#shadowy").val(shadow[1]);
        jQuery("#shadowz").val(shadow[2]);
        jQuery("#shadoww").val(shadow[3]);
        jQuery("#shadowc").val(shadow[4]);
        

        let shadows = ["#shadowx", "#shadowy", "#shadowz", "#shadoww", "#shadowc"];
        
        jQuery(shadows).each(function(i, e){
            jQuery(e).change(function(){
                shadow[i] = jQuery(this).val();
                jQuery("#envio").val(shadow[0] + 'px ' + shadow[1] + 'px ' + shadow[2] + 'px ' + shadow[3] + 'px ' + shadow[4]);
                jQuery("#envio").trigger('change');
            })
        })
        
    })
    </script>

    <input id="envio" type="hidden" <?php echo $this->link(); ?> 
value='jQuery("#envio").val()'>
    
</div>
<?php
}
}