SOLVED: VUE JS Template - Classes get only properly deleted after Builder Reload

Bugs
1

Browser: Chrome & Firefox testet
OS: Windows
Video: https://youtu.be/C8AP9DXVyCU?si=-33swPma_PSHAdtZ

Elements using a Vue-js X-Template, are bugged inside the builder. Say you put a class of .bricks-type-hero via the type setting on a Heading. If you reload the Builder this, class cannot get deleted. When you change the type setting to .bricks-type-lead or reset the option, the .bricks-type-hero class stays on the element. In fact this is true for all settings that add classes to elements using the render_builder() method (as far as i’ve tested).

2

Hey @UserfreundSuat,
sorry for the late reply. I kind of lost this one. As you already have the element prepared, could you send it to me to test (and that styling).

Thanks.
Matej

3

In the Video I am useing the default Bricks Heading Element. The styling from the video is below:

[class*='bricks-type-'] {
  padding:1em;
  color:white;
  font-weight:500;
  font-size:2rem;
}

.bricks-type-hero {
  border: 4px solid darkred;
  background-color: red;
}

.bricks-type-lead{
  background-color: green;
}

If you need more to test, just let me know, but you should be able to recreate the bug with the standard brxe-heading or brxe-text element.

Cheers
Suat

4

Hi,

thank you. I was able to replicate this and I’ve added it to the bug tracker.

Matej

5

Hi There,
Since there is a new render method at play with Bricks 2.0 I was hoping this topic might be on the menu so to speak. Are there any updates yet, I tested it with the RC Version and the bug is still there.

Best Regards
Suat

6

You are right. The issue is still there, and the topic is still in WIP.

Matej

7

Since this issue is still present, I thought I share my workaround so you might implement it to lessen confusion for others.

I implemented a filter for native Bricks elements that looks like this, that filters the attributes out on initial render inside the canvas:

add_filter('bricks/element/set_root_attributes', function(array $attributes, string $key, \Bricks\Element $element){
		if ($element->name !== 'text') return $attributes;

		if ($key !== '_root') return $attributes;

		// NOTE: Remove bricks-type- classes from builder
		if (bricks_is_builder_iframe()) {
			foreach ($attributes['_root']['class'] as $key => $value) {
				if (strpos($value, 'bricks-type-') === 0) {
					unset($attributes['_root']['class'][$key]);
				}
			}

			$attributes['_root']['class'] = array_values($attributes['_root']['class']);
		}

		return $attributes;
},10,2);

And for my own custom Elements that are useing VUE-Templates I’m doing this:

	public function render()
	{
		$selector = $this->name;
		$settings = $this->settings;
		$root_class = [];

		$background = $settings['background'] ?? false;

		if ($this->is_frontend_call()) {
			$root_class[] = $selector;
			$root_class[] = 'container';
			$root_class[] = 'content-grid';
			if ($background) $root_class[] = "bg-{$background}";
		}

		$this->set_attribute('_root', 'class', $root_class);

		$output = "<{$this->tag} {$this->render_attributes('_root')}>";

		$output .= \Bricks\Frontend::render_children($this);

		$output .= "</{$this->tag}>";

		echo $output;
	}

	// MARK: Render Builder
	public static function render_builder()
	{
?>
		<script type="text/x-template" id="tmpl-bricks-element-uf-section">
			<component
					:is="tag"
					:settings="settings"
					:name="name"
					:class="[
						name,
						'container',
						'content-grid',
						settings.background ? `bg-${settings.background}` : null,
					]"
				>
					<bricks-element-children :element="element" />
				</component>
		</script>
<?php
	}

The is_frontend_call method is defined in my abstract class that extends the bricks element-abstract class works great to negate the undesired behaviour:

	// MARK: Is Builder Call
	public static function is_builder_call(): bool
	{
		return (bricks_is_builder_call() || bricks_is_builder_iframe());
	}

	// MARK: Is Frontend call
	public static function is_frontend_call(): bool
	{
		return !self::is_builder_call() && bricks_is_frontend();
	}

Best Regards
Suat

9

We’ve addressed this in Bricks 2.4-rc (release candidate), now available for manual download from your Bricks account.

Custom element attributes and classes now stay in sync on the Builder canvas when settings change, without requiring a reload.

Please read the changelog entry before testing, and let us know if you experience any issues. Release candidates are not recommended for production sites.