Remove template element container on frontend (.brxe-template)

Hi,

Is it possible to remove the .brxe-template container that encapsulates the actual template on frontend?
I understand the builder can need a container, but once the template itself is recalled and rendered as html, I don’t see the use of it on frontend.

It adds complexity to CSS, especially inside grids (for alignments).

I think it would help a bit root logic as well when recalled as top level section.

Thx!

13 Likes

I would love to see this.

How does one get an element with a class of brxe-template on the front end?

Can you share the steps?

Use the native template element inside Bricks and call for any template.

1 Like

aah IC. Good request.

I don’t understand in the first place why it needs to be wrapped in a div. It kills my layout everytime, for example, when I have a card as template which I want to repeat.

ALSO it would be great to be able to use the query loop with the template. This way I could adjust the query for the card but have just ONE place to edit it.

1 Like

I’ll love to see this element container removed, any news or trick to remove it?
I am working on a website where I am using a lot of templates.

I remember this bugging me a few days ago and the solution is quiet simple.

First remove the original template element.

add_filter( 'bricks/builder/elements', function( $elements ) {

  $index = array_search( 'template', $elements );
  unset( $elements[$index] );

  return $elements;
} );

Register new one:


add_action( 'init', function() {
  $element_files = [
    __DIR__ . '/elements/template.php',
  ];

  foreach ( $element_files as $file ) {
    \Bricks\Elements::register_element( $file );
  }
}, 11 );

Now just copy the original template element (bricks\includes\elements\template.php) to bricks-child\elements and comment the lines that add wrapper around it.

if ( ! $is_popup_template ) {
	echo "<div {$this->render_attributes( '_root' )}>";
}
if ( ! $is_popup_template ) {
	echo '</div>';
}

The only thing it breaks is styling of template element obviously. There’s probably a filter to remove style controls/tab entirely somewhere.

1 Like

Thank you @Erehr looks like it is working. Nice!

Agree. Should give a choice whether to have a wrapper.

Yes, though there are workarounds, it’s often quite annoying to properly style template elements, specially related to grids and query loops.

In addition, templates should have an option to set the html tag (afair this is on the roadmap)

Aaaand it’s broken now. Without container styles don’t apply anymore.