More class names for form groups

Feature Requests / Improvements
1

it would be nice if the form groups had more class names depending on the field type.

selector specificity needed

all of this form-groups looks same but they have different fields inside.

I want to select only lets say checkbox field but I cant since its not possible to select that group only :slight_smile:

I usualy just select the nth-child but thats not the way to go soon as one of my team member changes something adds field or removes field my css style gets broken :slight_smile:

image

2 Likes
2

I want to select only lets say checkbox field but I cant since its not possible to select that group only :slight_smile:

For now, this is a solution…

.form-group:has([type=checkbox]) {
 /* style the group with the checkbox */
}
3

you can use the 'bricks/element/render_attributes' filter in bricks to programmatically add classes.

this is what I do. I plan on expanding it to include HTML-Form Groups some day, but works fine for radio-fields etc.

add_filter( 'bricks/element/render_attributes', function( $attributes, $key, $element ) {
    if ($element->name !== 'form') return $attributes;

		if (strpos($key, 'field-wrapper-') !== 0) return $attributes;

		$index = substr($key, strlen('field-wrapper-'));

		$field_key = "field-$index";

		if (isset($attributes[$field_key])) {
			$field = $attributes[$field_key];

			if (isset($field['id'][0])) {
				$id = substr($field['id'][0], strlen('form-field-'));
				$attributes[$key]['id'] = "form-group-$id";
				$attributes[$key]['data-id'] = $field['id'][0];
			}

			if (isset($field['name'][0])) {
				$attributes[$key]['data-name'] = $field['name'][0];
			}

			if (isset($field['type'][0])) {
				$attributes[$key]['data-type'] = $field['type'][0];
			}

			if (isset($attributes[$key]["role"][0]) && $attributes[$key]["role"][0] === 'radiogroup') {
				$attributes[$key]['data-type'] = 'radio';
			}

			if (isset($attributes[$key]["role"][0]) && $attributes[$key]["role"][0] === 'group' && isset($attributes[$key]["aria-labelledby"])) {
				$attributes[$key]['data-type'] = 'checkbox';
			}
		}
    
    return $attributes;
}, 10, 3 );
1 Like
4

You can hook into the form to generate responsive CSS for each repeater item based on its field ID, instead of relying on the default nth-child() selectors.

This way, field style controls will always be tied to their field IDs, ensuring that adding, removing, or reordering fields won’t affect the styles you’ve already assigned.

Look at the code at line 1407 of assets.php.