SOLVED: Nestable Element API Bug - Some Elements, render as div inside custom nestable element

Bugs
1

Since v1.11 "brxe-heading"s which have no explicit HTML tag set are being rendererd as "div"s on the frontend when the direct parent element is a custom nestable element. Funny enough the vue-x-template renders correctly.

If needed i can make a screenrecording tomorrow, but i think should be easy enough to recreate with this element below, which worked fine even in 1-11 beta:

<?php

if (!defined('ABSPATH')) exit;

class UF_Section extends \Bricks\Element
{
    public $category     = 'layout';
    public $name         = 'uf-section';
    public $icon         = 'uf-icon-grid-section';
    public $nestable     = true;

    public function get_label()
    {
        return 'Grid Section';
    }

    public function get_keywords()
    {
        return ['section', 'container', 'layout', 'div', 'article', 'aside', 'nav', 'header', 'footer'];
    }

    public function set_controls()
    {
        //Settings
        $this->controls['seperatorGeneral'] = [
            'label' => 'Allgemein',
            'type'  => 'separator',
        ];

        $this->controls['tag'] = [
            'tab'         => 'content',
            'label'       => 'HTML tag',
            'type'        => 'select',
            'options'     => [
                'section'   => 'section',
                'div'       => 'div',
                'article'   => 'article',
                'aside'     => 'aside',
                'nav'       => 'nav',
                'header'    => 'header',
                'footer'    => 'footer',
            ],
            'inline'      => true,
            'clearable' => true,
            'default' => false,
            'placeholder' => 'section',
        ];

        $this->controls['background'] = [
            'tab'         => 'content',
            'label'       => 'Hintergrundfarbe',
            'type'        => 'select',
            'options'     => [
                'bg-white'   => 'Weiß',
                'bg-primary' => 'PrimÀrfarbe',
                'bg-neutral' => 'Grau',
            ],
            'inline'      => true,
            'clearable' => true,
            'default' => false,
            'placeholder' => 'Keine Farbe',
        ];

        //Settings
        $this->controls['seperatorLayout'] = [
            'label' => 'Layout',
            'type'  => 'separator',
        ];

        $this->controls['paddingBlockStart'] = [
            'tab' => 'content',
            'label' => 'Padding oben',
            'type' => 'checkbox',
            'inline' => true,
            'small' => true,
            'default' => true,
        ];

        $this->controls['paddingBlockEnd'] = [
            'tab' => 'content',
            'label' => 'Padding unten',
            'type' => 'checkbox',
            'inline' => true,
            'small' => true,
            'default' => true,
        ];

        $this->controls['flow'] = [
            'tab' => 'content',
            'label' => 'Content-Flow',
            'type' => 'checkbox',
            'description' => 'Sorgt fĂŒr natĂŒrliche AbstĂ€nde zwischen allen Elementen.',
            'inline' => true,
            'small' => true,
        ];
    }

    public function enqueue_scripts()
    {
        if (!bricks_is_builder_main()) {
            $name = $this->name;
            $file_name = basename(__FILE__, ".php");
            wp_enqueue_style($name, URL_ELEMENTS . "/{$file_name}/css/{$file_name}.min.css");
        }
    }

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

        $tag = $settings['tag'] ?? 'section';
        $flow = $settings['flow'] ?? false;
        $padding_block_start = $settings['paddingBlockStart'] ?? false;
        $padding_block_end = $settings['paddingBlockEnd'] ?? false;
        $background = $settings['background'] ?? false;

        if ($flow) $root_class[] = 'flow';
        if ($padding_block_start) $root_class[] = 'uf-section--p-block-start';
        if ($padding_block_end) $root_class[] = 'uf-section--p-block-end';
        if ($background) $root_class[] = $background;

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

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

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

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

        echo $output;
    }

    public static function render_builder()
    {
?>
        <script type="text/x-template" id="tmpl-bricks-element-uf-section">
            <component
        :is="settings.tag ?? 'section'"
        :settings="settings"
        :class="['uf-section',
            settings.paddingBlockStart ? 'uf-section--p-block-start' : null,        
            settings.paddingBlockEnd ? 'uf-section--p-block-end' : null,      
            settings.background ? settings.background : null,
            settings.flow ? 'flow' : null,
        ]"
      >
          <bricks-element-children :element="element"/>
      </component>
    </script>
<?php
    }
}
2

BUMP:
I just found the time to record this behavior. Also this bug is more far reaching than the title says. It conserns multiple elements inside a custom element using the nestable element api:

3

I was just about to report the same. I can replicate with native nestable elements also (nestable slider, accordion etc).

Trying to add a section element, which has a ‘section’ tag by default, will change to a div tag when on the front end if inside of a nestable element.

Applies to all nestable elements as far as I can tell. Only the following is needed to replicate


echo "<div {$this->render_attributes('_root')}>";
echo \Bricks\Frontend::render_children($this);
echo "</div>";
1 Like
4

Hi @UserfreundSuat, thanks for the report and the video. I was able to reproduce it by creating a custom element like this.

<?php 
class Simple_Nestable extends \Bricks\Element
{

    public $category     = 'custom';
    public $name         = 'simple-nestable';
    public $icon         = 'fas fa-anchor';
    public $css_selector = '';

    public function get_label()
    {
        return esc_html__('Simple Nestable', 'bricks');
    }

    public function set_control_groups(){}

    public function set_controls(){}

    public function render()
    {
        echo "<div {$this->render_attributes('_root')}>";
        echo \Bricks\Frontend::render_children($this);
        echo "</div>";

    }
}

@wplit, I was able to replicate it with the “Back to top” element, so I guess this will be the same for all others.

Thank you both, I’ll create an internal bug report.
Matej

1 Like
5

Hi Suat,
We’ve fixed this issue in Bricks 1.11.1, now available as a one-click update in your WordPress Dashboard.

Changelog: Bricks 1.11.1 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse

6

Appreciate the quick fix :pray:

1 Like