Hey Jenn,
I think I found the reason for the bug stated above.
The bug only effects Elements that are nested inside a Custom Element that’s useing the nestable Elements API.
Every Element outside this Custom Element is being rendered and it doesn’t matter if it is a Custom Element or not.
My Template Setup: Element inside Custom Element useing nestable API.
Content NOT showing when useing shortcode for the Template:
Content showing after useing Canvas refresh:
I have tried this with custom Elements inside the Parent Element, and standard Bricks-Elements → same result.
I am useing the render_builder function to display the element as a x-template. When disabling the render_builder-function the bug still remains.
underneath my Custom Element. If you need I can provide you with a temporary admin access but I didn’t have the time yet.
Best Regards
Suat
<?php
if (!defined('ABSPATH')) exit;
class UF_IMAGE_SECTION extends \Bricks\Element
{
public $category = 'gerland-layout';
public $name = 'uf-image-section';
public $icon = 'ti-layout-media-left';
public $css_selector = '.uf-image-section';
public $nestable = true;
public function get_label()
{
return 'Abschnitt mit Bild';
}
public function get_keywords()
{
return ['Bild', 'Abschnitt'];
}
public function set_controls()
{
//Layout & Stil
$this->controls['layoutStyleSeparator'] = [
'label' => 'Layout & Stil',
'type' => 'separator',
];
$this->controls['style'] = [
'tab' => 'content',
'label' => 'Stil',
'type' => 'select',
'options' => [
'primary' => 'Blau',
'primary-light' => 'Hellblau',
'white' => 'Weiß',
'neutral-light' => 'Hellgrau',
'neutral' => 'Grau',
'null' => 'Nulltarif',
'null-light' => 'Nulltarif Hell',
],
'inline' => true,
'clearable' => false,
'default' => 'primary',
'placeholder' => 'Blau',
];
$this->controls['accent'] = [
'tab' => 'content',
'label' => 'Akzentfarbe',
'type' => 'select',
'options' => [
'dark' => 'Schwarz',
'null' => 'Nulltarif',
],
'inline' => true,
'clearable' => true,
'placeholder' => 'Standard',
'required' => [['style', '!=', 'primary'], ['style', '!=', 'primary-light'], ['style', '!=', 'null'], ['style', '!=', 'null-light']]
];
$this->controls['layout'] = [
'tab' => 'content',
'label' => 'Layout',
'type' => 'select',
'options' => [
'big' => 'Groß',
'small' => 'Klein',
],
'inline' => true,
'clearable' => false,
'default' => 'big',
'placeholder' => 'Groß',
];
$this->controls['reverse'] = [
'tab' => 'content',
'label' => "Horizontal spiegeln",
'type' => 'checkbox',
'inline' => true,
'small' => true,
];
//Bild
$this->controls['imageSeparator'] = [
'label' => 'Bild',
'type' => 'separator',
];
$this->controls['image'] = [
'tab' => 'content',
'type' => 'image',
];
$this->controls['imgPosX'] = [
'tab' => 'content',
'label' => 'X-Achse:',
'type' => 'slider',
'units' => [
'%' => [
'min' => 1,
'max' => 100,
'step' => 1,
],
],
'default' => '50%',
'placeholder' => '50%',
'required' => ['image', '!=', false]
];
$this->controls['imgPosY'] = [
'tab' => 'content',
'label' => 'Y-Achse:',
'type' => 'slider',
'units' => [
'%' => [
'min' => 1,
'max' => 100,
'step' => 1,
],
],
'default' => '50%',
'placeholder' => '50%',
'description' => 'Setz den Bildschwerpunkt auf der X- und Y-Achse.',
'required' => ['image', '!=', false]
];
}
public function render()
{
$settings = $this->settings;
$style = !empty($settings['style']) ? $settings['style'] : false;
$layout = !empty($settings['layout']) ? $settings['layout'] : false;
$reverse = !empty($settings['reverse']) ? $settings['reverse'] : false;
$image = !empty($settings['image']) ? $settings['image'] : false;
$imgPosX = !empty($settings['imgPosX']) ? $settings['imgPosX'] : false;
$imgPosY = !empty($settings['imgPosY']) ? $settings['imgPosY'] : false;
$accent = !empty($settings['accent']) ? $settings['accent'] : false;
if ($reverse) {
$reverse_class = " uf-image-section--reverse";
} else {
$reverse_class = "";
}
if (!$imgPosX) {
$imgPosX = "50%";
}
if (!$imgPosY) {
$imgPosY = "50%";
}
if ($style) {
switch ($style) {
case 'primary':
$style_class = ' bg-primary--dark';
break;
case 'primary-light':
$style_class = ' bg-primary--light';
break;
case 'neutral':
$style_class = ' bg-neutral';
break;
case 'neutral-light':
$style_class = ' bg-neutral--light';
break;
case 'white':
$style_class = ' bg-white';
break;
case 'null':
$style_class = ' bg-null--dark';
break;
case 'null-light':
$style_class = ' bg-null--light';
break;
}
} else {
$style_class = '';
}
if ($accent && ($style === 'neutral' || $style === 'neutral-light' || $style === 'white')) {
switch ($accent) {
case 'dark':
$accent_class = ' accent-dark';
break;
case 'null':
$accent_class = ' accent-null';
break;
}
} else {
$accent_class = '';
}
if ($layout) {
switch ($layout) {
case 'small':
$layout_class = ' layout-small';
break;
case 'big':
$layout_class = ' layout-big';
break;
}
} else {
$layout_class = '';
}
if ($image) {
$img = wp_get_attachment_image($settings['image']['id'], $settings['image']['size'], false, ["class" => "uf-image-section__img"]);
} else {
$img = wp_get_attachment_image('2180', "full", false, ["class" => "uf-image-section__img placeholder"]);
}
//md-col-2 md-cq-fb-col-2 sec-p-unset section-col-2
$root_classes[] = "uf-image-section $reverse_class$style_class$accent_class$layout_class";
$root_styles[] = "--_pos-x: $imgPosX; --_pos-y: $imgPosY";
$this->set_attribute('_root', 'class', $root_classes);
$this->set_attribute('_root', 'style', $root_styles);
$output = "<section {$this->render_attributes('_root')}>";
//section-col-2__col-img section-col-2__col
$output .= '<div class="uf-image-section__col uf-image-section__col--img">';
$output .= '<div class="uf-image-section__img-wrapper">';
$output .= $img;
$output .= '</div>';
$output .= '</div>';
//section-col-2__col-content section-col-2__col
$output .= '<div class="uf-image-section__col uf-image-section__col--content">';
$output .= \Bricks\Frontend::render_children($this);
$output .= '</div>';
$output .= '</section>';
echo $output;
}
public static function render_builder()
{
?>
<script type="text/x-template" id="tmpl-bricks-element-uf-image-section">
<component
:is="'section'"
:settings="settings"
:class="[
'uf-image-section',
settings.style === 'primary' ? `bg-primary--dark` : null,
settings.style === 'primary-light' ? `bg-primary--light` : null,
settings.style === 'white' ? `bg-white` : null,
settings.style === 'neutral' ? `bg-neutral` : null,
settings.style === 'neutral-light' ? `bg-neutral--light` : null,
settings.style === 'null'? `bg-null--dark` : null,
settings.style === 'null-light'? `bg-null--light` : null,
settings.accent === 'dark' ? `accent-dark` : null,
settings.accent === 'null' ? `accent-null` : null,
settings.layout === 'big' ? `layout-big` : null,
settings.layout === 'small' ? `layout-small` : null,
settings.reverse ? `uf-image-section--reverse` : null,
]"
:style="{ '--_pos-x': settings.imgPosX ? `${settings.imgPosX}` : '50%', '--_pos-y': settings.imgPosY ? `${settings.imgPosY}` : '50%' }"
>
<div class="uf-image-section__col uf-image-section__col--img">
<div class="uf-image-section__img-wrapper">
<img v-if="settings.image" :src="settings.image.url" class="uf-image-section__img"/>
<img v-else src="/wp-content/uploads/2023/10/placeholder.png" class="uf-image-section__img placeholder"/>
</div>
</div>
<div class="uf-image-section__col uf-image-section__col--content">
<bricks-element-children :element="element"/>
</div>
</component>
</script>
<?php
}
}
