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:
- Create a new section template.
- Add template element to a page.
- Toggle off the ‘Render without wrapper’ checkbox.
- View on frontend and inspect; outer wrapper with
brxe-template
class should be applied. - Back to builder. Toggle on the ‘Render without wrapper’ checkbox.
- View on frontend and inspect; outer wrapper with
brxe-template
is still applied. - 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 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