Custom classes to control wrapper

[timiwahalahti]

Hi, I tested this framework and it is awesome!

One thing i'm kinda needing and hoping, is possibility to add custom classes for control wrapper divs. That would allow more versatile usage, since it would make e.g. adding styles for 50/50 grid or separators much mode easier. Now you need to target every control with it's id, and that's somewhat tedious.

[samikeijonen]

👍

[justintadlock]

Why not use the .butterbean-control-{$type} class? You shouldn't target the specific control. Target the control type.

[timiwahalahti]

That won't work if i have multiple controls with same type, but only one or two of those needs custom styles. Maybe later few other controls would need those styles also, but i don't want every same type control to have that style.

E.g. thee text controls: address, postal code and state. First can be with class .widefat which will do the trick. Postal code and state are so short, that i could combine those into same "row" in favor of saving space, but to do that i would need custom class to target.

[justintadlock]

See, those are not the same type of controls and wouldn't be my recommended method of handling that.

For your specific example, I'd actually build an "address" control, which would have the address type and the .butterbean-control-address class.

[justintadlock]

Here's a quick address control example:

<?php

class ButterBean_Control_Address {

    public $type = 'address';

    public function to_json() {
        parent::to_json();

        $this->json['address'] = array(
            'label'      => 'address',
            'value'      => $this->get_value( 'street' ),
            'field_name' => $this->get_field_name( 'street' )
        );

        $this->json['state'] = array(
            'label'      => 'State',
            'value'      => $this->get_value( 'state' ),
            'field_name' => $this->get_field_name( 'state' )
        );

        $this->json['zip'] = array(
            'label'      => 'ZIP Code',
            'value'      => $this->get_value( 'zip_code' ),
            'field_name' => $this->get_field_name( 'zip_code' )
        );
    }

    public function get_template() { ?>

        <label>
            <span class="butterbean-label">{{ data.address.label }}</span>
            <input type="text" value="{{ data.address.value }}" name="{{ data.address.field_name }}" />
        </label>

        <label>
            <span class="butterbean-label">{{ data.state.label }}</span>
            <input type="text" value="{{ data.state.value }}" name="{{ data.state.field_name }}" />
        </label>

        <label>
            <span class="butterbean-label">{{ data.zip.label }}</span>
            <input type="text" value="{{ data.zip.value }}" name="{{ data.zip.field_name }}" />
        </label>
    <?php }
}

[justintadlock]

Anyway, what I'm getting at here is that all controls of a specific type should be uniform. They should look and behave in the same way.

If you have a type that's already handled but want it to be different, you should extend the ButterBean_Control class.

[m-e-h]

Thanks for the example! I was needing this exact thing.
I was also thinking control of the wrapper class would be nice. Maybe define a utility css class or two that one could enable for inline-block or width 50% or 100%?

[timiwahalahti]

Thanks for example, that will do the trick in this specific situation. Like m-e-h said above, some utility class(es) would be nice, since there could be situation where somebody want's let's say two email fields side by side. In that case, making custom control for that is just overkill. At least in my opinion.

[caercam]

I second @m-e-h's suggestion on 50% and 100% utility classes. I have several controls that I'd like to have display on two columns among one-columns controls, and I have currently no way to make that happen due to the lack of custom CSS on wrappers. I guess I could use additional ButterBean_Control classes, but it'd be easier to add a CSS class than to duplicate text and select PHP classes just for a minor visual tweak.

[slaFFik]

+1 for additional classes, @justintadlock