Preview and defaults not showing for a new plugin with custom elements

It’s been a long time since I wrote a WordPress plugin but I’m getting back into it. I’m also pretty new to Bricks.

I’ve got the plugin installed and activated locally. It is showing my element in the builder UI in the section I specified. The controls are showing up when I add the element to my page and select it in the structure pane.

Here are my problems:

  1. The defaults I have set in the controls are not showing in the bricks builder. For example, I have this checkbox control which is supposed to be true/on by default but the UI shows it as false/off.
$this->controls['itemShowOverlay'] = array(
    'tab'           => 'content',
    'group'         => 'overlay',
    'label'         => esc_html__( 'Show overlay', 'me' ),
    'type'          => 'checkbox',
    'inline'        => true,
    'small'         => true,
    'default'       => true,
);

Screenshot 2023-02-17 at 3.18.14 PM

  1. I’m not sure where I’m going wrong, but the preview of my element won’t show anything, even if all I’m doing in the render function is returning $this->render_element_placeholder. Inspecting the page shows that other installed elements have a brxe-[name] class on the container, mine doesn’t have that either. I’m not sure why my render function doesn’t seem to be getting called.

I’d appreciate if anyone could shed some light on what’s happening for both or either of these. :slight_smile:

yes, I noticed that the checkbox UI is not reflecting the checked value, it might be a bug.

The overlay element is :before/:after overlay or standalone div overlay ? if standalone div overlay you need to render it in render().

Element ID & Classname with brxe-, you need to set and render the attribute at element _root wrapper.

public function render() {
    $settings = $this->settings;
    $this->set_attribute( '_root', 'class', 'your-classname' );
    echo "<div {$this->render_attributes( '_root' )}>";
    /******** others code here *********/
   if ( isset( $settings['itemShowOverlay'] ) ) {
        echo "<div class='overlay'></div>";
    }
    echo "</div>";
}

I can’t believe how stupid I was. This whole time I’ve had it written as $this->set_attributes versus $this->set_attribute. :man_facepalming:

Thank you for setting me straight.

Unfortunately the defaults still aren’t showing correctly in the element controls (but seem to be taking affect in the preview regardless). In my case it isn’t just the checkboxes, it’s number inputs as well as selects and colors.

1 Like

Well, this is not exactly a “solution” but you could invert the wording of the toggle.

“Hide Overlay”
“Overlay is shown by default over the title.”

I think I’ve run into this before and it’s quite possibly a bug. Might be worth reporting. :man_shrugging: