Bricks Controls: Add Classes like CSS inside the Controls

Feature Requests / Improvements
1

It would be such a nice feature, to add Classes directly via the Controls (Kind of like CSS Controls). This way we could influence the behaviour of elements that have a VUE-JS Template inside the builder with very little code.

Example:

        $this->controls['type'] = [
	 		'label'       => esc_html__('Type', 'bricks'),
	 		'type'        => 'select',
	 		'options'     => [
	 			'hero' => esc_html__('Hero', 'bricks'),
	 			'lead' => esc_html__('Lead', 'bricks'),
	 			'subtle' => esc_html__('Subtle', 'uf-theme'),
	 			'h4' => 'H4',
	 			'h5' => 'H5',
	 			'h6' => 'H6',
	 		],
	 		'inline'      => true,
	 		'reset'       => true,
	 		'placeholder' => esc_html__('None', 'bricks'),
            'class' => [
                [
                    'selector' => "_root",
                    'value' => 'bricks-type-%s'
                ],
            ],
	 	];

This would also help modify Bricks Default Elements like text,heading,section etc. that have a VUE-JS template, where if you use a filter like bricks/element/set_root_attributes all the rerendering after changing a setting doesn’t get displayed on the canvas. This combined with the bricks/elements/{element_name}/controls filter would have huge potential.

1 Like