NO BUG: Template Element - Always renders root wrapper even when 'Render without wrapper' is True

Browser: Brave latest
OS: Windows 10.
Video: Template Element Issue in Bricks | Loom

Please watch video above. I demo the issue and the fix.

I demo that the ‘Render without wrapper’ checkbox behaviour is incorrect.

To replicate:

  1. Create a new section template.
  2. Add template element to a page.
  3. Toggle off the ‘Render without wrapper’ checkbox.
  4. View on frontend and inspect; outer wrapper with brxe-template class should be applied.
  5. Back to builder. Toggle on the ‘Render without wrapper’ checkbox.
  6. View on frontend and inspect; outer wrapper with brxe-template is still applied.
  7. Expected behaviour (and previous behaviour): outer wrapper is removed.

On investigating the theme files, the issue is with the in the includes/elements/template.php file:

$render_root_div = bricks_is_builder_call() || ( ! isset( $settings['noRoot'] ) && $template_type !== 'popup' );`

The value of the noRoot setting is not explicitly checked so the statement always evaluates to true which triggers the render of the root div:

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

I refactored slightly by explicitly checking the noRoot setting value and having a separate variable for readability and it works.

$no_root = isset( $settings['noRoot'] ) && $settings['noRoot'];
$render_root_div = bricks_is_builder_call() || ( !$no_root && $template_type !== 'popup' );

I checked v1-11-beta and the issue still persists although there was a change to this part of the code. The simple change I added can be applied like this and is working:

			/**
			 * STEP: Render .brxe-template root div
			 *
			 * If builder call OR 'noRoot' setting is not set (@since 1.8) && if template is not a popup template
			 */
			$no_root = isset( $settings['noRoot'] ) && $settings['noRoot'];
			$render_root_div = bricks_is_builder_call() || ( !$no_root && $template_type !== 'popup' );

			// Always render .brxe-template in builder (as we need a single root element in the Vue component)
			if ( $render_root_div ) {
				if ( $no_root && bricks_is_builder_call() ) {
					$this->attributes['_root']['id'] = '';
				}

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

EDIT. Issue seems to have resurfaced following further work on the site :frowning: Rolling back to 1.9.9 and everything works as it should again even though the same $render_root_div logic exists in the template file… so I’m stumped!

Any questions let me know!

Cheers,
Johnny

Hello @johnnyhatz,

thank you a lot for the video. I can see the problem on your site, but I can not reproduce it locally.
Does this happen with every template, or just this one?

I’ve tested on 1.10.3 and the latest 1.11 beta (can you try with it?), but it works. For example, in the image below, the middle section it’s from the template.

I’m wondering what is the difference in your setup.
Matej

@Matej - this seems to have fixed itself and the behaviour is back to normal, even without updating to the latest Bricks. Rather odd.
After updating to the latest Bricks, the issue does not persist either, so happy days.
Will monitor but consider solved for now.
Thanks!

1 Like