Show Select Control Value instead of Key in responsive Controls

1

Right now in bricks if you have a Select Control which supports breakpoints (e.g. CSS but not exclusivly) and you set a value for the base breakpoint, the other breakpoints show that Selects Key instead of it’s Value. It would be less confusing for editors if the Value would be displayed, because sometimes the Value (especially in different languages than english) doesn’t represent the espectation what the Control does at all.

Here is a simple example:

I have a custom Image Element that among others allowes users to center it and select the object-fit of that Image:

desktop
desktop1831×1226 251 KB

other breakpoint
other breakpoint1656×1245 209 KB

These are the Controls and as you can see I e.g. set margin-inline which is confusing why auto would be the equivalant to it being centered and the Translation for ‘Contain’ doesn’t appear on other breakpoints:

		$this->controls['objectFit'] = [
			'label' => esc_html__('Object fit', 'bricks'),
			'type' => 'select',
			'options' => [
				'cover' => esc_html__('Cover', 'bricks'),
				'contain' => esc_html__('Contain', 'bricks'),
				'fill' => esc_html__('Fill', 'bricks'),
			],
			'inline' => true,
			'css' => [
				[
					'property' => '--image-object-fit',
				],
			],
			'placeholder' => esc_html__('Cover', 'bricks'),
			'description' => esc_html__('How the image should be resized to fit the container.', 'uf-theme'),
		];

...

		$this->controls['centerImage'] = [
			'label' => esc_html__('Center horizontally', 'uf-theme'),
			'type' => 'select',
			'options' => [
				'auto' => esc_html__('Center', 'bricks'),
				'0' => esc_html__('None', 'bricks'),
			],
			'inline' => true,
			'css' => [
				[
					'property' => 'margin-inline',
				],
			],
			'placeholder' => esc_html__('None', 'bricks'),
			'description' => esc_html__('Centers the image outside of a grid section. Inside a grid section use "Justify self".', 'uf-theme'),
		];

Best Regards
Suat