Why is "input_attrs" attribute not used in Customizer checkbox, radio, select, textarea controls?

[Collizo4sky]

I am at a crossroad. Only solution is to reimplement the checkbox and textarea control because i want to include an ID attribute to the above controls. Why isn't "input_attrs" support for them?

[westonruter]

@Collizo4sky See #28477 for when this was introduced. It was probably an oversight that input_attrs wasn't used for checkboxes, textareas, and other non-fallthrough cases. Probably there wasn't a clear use case. Why are you adding an ID to the input?

[Collizo4sky]

I want an ID attached to a checkbox control and then target the checkbox using it Id with javascript so that when it is checked or unchecked, certain controls in customizer will be toggled.

I was able to achieve this by manually adding the ID attribute. It will be a pain for me to reimplement a checkbox control just to accomplish something that core should handle.

Let me know if anything isn't clear to you.

[westonruter]

@Collizo4sky I would say you're probably taking the wrong approach. The contents of the controls really should be considered a black box (shadow DOM) where JS outside of the control shouldn't be directly interacting with the contents of the control like that. I think you should take inspiration from the show_on_front setting in the Static Front Page section, and how changing this setting causes the controls for Page on Front and Page for Posts to show or hide. For a somewhat dense example, see: https://core.trac.wordpress.org/browser/tags/4.5.3/src/wp-admin/js/customize-controls.js#L3754

[Collizo4sky]

Could you help with a code example to accomplish this using the customizer JS API?

Couldn't wrap my head as to how to accomplish same using your stated approach.

[westonruter]

@Collizo4sky it would help if you gave all of the specifics of what you're trying to accomplish. This checkbox you want to add: what does the checkbox represent? What is its associated setting (e.g. show_on_front)? What are the controls that get toggled when the setting for the checkbox is toggled?

[Collizo4sky]

This is what am trying to accomplished.

I have a checkbox and three text fields controls.

I want a situation where if the checkbox is checked, the three text fields becomes hidden. and if unchecked, shows up.

Does this clarify?

[westonruter]

@Collizo4sky not really as I pretty much knew that much already. If you could share what the labels are for the checkbox and three text fields, it would be easier to come up with a code sample. The main question I have is the checkbox, and what “state” this checkbox represents. For example, the “Display Site Title and Tagline” checkbox might be analogous to what you're wanting to show?

I'm going to close this ticket, but we can continue to comment on it.

[Collizo4sky]

“Display Site Title and Tagline” checkbox might be analogous to what you're wanting to show?

Yes please. A code sample describing the toggling of the site title and tagline text field in customizer depending on the state of their respective checkbox would suffice.

[westonruter]

@Collizo4sky I've written up a blog post with a full example for you: ​https://make.xwp.co/2016/07/24/dependently-contextual-customizer-controls/

[Collizo4sky]

Cant thank you enough. Will go through it and let you know how it shakes out.

[Collizo4sky]

I finally read and got the contectual display of controls working in my project.

Thanks a bunch.

I always don't grok the customizer JS API code. I guess its because of my lacking JS skills. Can you point me to the js library the customizer is using (guessing backbone) and resources to read up to learn its architecture, where it draws its inspiration from etc.

[westonruter]

@Collizo4sky it does draw inspiration from Backbone, however it is not Backbone. It was developed before Backbone was introduced to Core. I'd say the most important “backbone” of the Customizer JS is the wp.customize.Value class. It can be compared to a Model in Backbone. The active state is an instance of this Value class. There is also wp.customize.Values which can be compared to a Collection in Backbone. There is some JS information in the ​The Customizer API docs, though I agree that there is a lack of documentation for the underlying framework and paradigm for the JS in the Customizer. I'll make a note to start writing some posts to dive into the various aspects of the JS framework.

[westonruter]

@Collizo4sky FYI, input_attrs may get included for textarea in #38493.

[westonruter]

In 38933:

Customize: Add explanatory note for custom_css control via textarea[placeholder] and expose any defined input_attrs on such textarea controls.

Props melchoyce, westonruter, celloexpressions.
See #37439.
Fixes #38493.

[Collizo4sky]

Please also give checkbox, radio, select fields some input_attrs love.

[jrobertblack]

I need the the class for radio and checkbox as well!

I am splitting some parts into halfs and thrids. I can list every id and do this, but is not very easy way.

Why cant I add a custom class to these?

[westonruter]

@jrobertblack what is your use case? Can you elaborate? Share your existing code?

[jrobertblack]

Replying to westonruter:

@jrobertblack what is your use case? Can you elaborate? Share your existing code?

I am trying to set up columns on some parts. I was just putting the ids in css file and make the columns that way, but it took too long and adding new ones was a pain.. With hundreds of settings its very useful to have target groups for styling. If you have padding or some smaller settings, breaking those little numbers up into 4 or 3 columns makes it much easier to read and use.

I was searching again for class options and found this "input_attrs" settings and was excited I could add in classes. Although I have to use jquery to add another class two parents up, it worked fine. I also could insert "px" text after a bunch of number entries so the user knew it was in px and they didnt need to add it.

I added this to the main file.

  'input_attrs' => array( 'class' => 'ev-px ev-third' ),

then I used the "customize_controls_print_scripts" to load a js file with this in it.

        jQuery( ".ev-px" ).parent().append( "px" )
	jQuery( ".ev-third" ).parent().parent().addClass( "ev-third-trigger" );

then I used the "customize_controls_print_styles" to load a css file with this in it.

.customize-control .ev-px {
	width: calc(100% - 22px) !important;
}
.customize-control .ev-third-trigger {
	width: 30% ;
	float: left ;
	clear: none ;
	margin-right: 3% ;
}

It all works great for the text boxes, but when I tried it on the selects and others it sadly didnt work. right now im half using this way and half targeting id on the other half.

Obviously I would like to add a class to the main li container of each entry so I would not have use js, I could even add the "px" using css :after instead of the js append, but either way I would be happy.

Am i missing another setting to set classes, I really surprised i cant do this. My customizer.css file is 1500 lines long now with you classes!

[jrobertblack]

Replying to westonruter:

@jrobertblack what is your use case? Can you elaborate? Share your existing code?

here was an image of what how it looks. the checkboxes I have to do manually each one.