Oxygen Elements API render order

[AlejandroDenche]

Hi! Im trying to create my custom Oxygen Elements using the Elements API. Since it's not documented yet, I'm facing an issue that I home someone can help me with.

My element have the nesting enabled ($this->enableNesting() in init function). I can nest elements inside of it, but when I render them (echo do_shortcode($content)) they got rendered on the top of the elements (outside the div with content class). Is this the right behaviour? Is there any way to render inside some elements instead of the top? Thanks in advance!!

 function render($options, $default, $content) {
 ?>
<!-- content renders here!! -->
        <div class="container">
            <<?php echo $options['tag'];?> class="title"><?php echo $options['tetx']; ?></<?php echo $options['tag'];?>>
            <div class="content">
                <?php
                    echo do_shortcode($content);          
                ?>
<!-- I want content here!! -->
            </div>
        </div>

        <?php
    }

    ```

[Spellhammer]

Your code is working fine for me. Here's the resulting structure on the front-end when I drop it into my example nestable element's render function: https://d.pr/i/fjw0xE.

I suspect the issue lies somewhere else within your code.

Note that as of 4.0 you'll need to use the new do_oxygen_elements function instead of do_shortcode. You can see an example of a 4.0 compatible nestable element at https://github.com/Spellhammer/example-oxygen-api-plugin/blob/main/elements/example.nestable.element.php.

[AlejandroDenche]

Hi! Your link is not working for me. Anyways, it could be true that I have some error in my code, but can't find it since I used that example that you sent.

Can you please check out my code to see if I'm missing something?

<?php

class ToggleElement extends OxyEl {
    function init() {
        $this->enableNesting();
    }

    function afterInit() {
        //Remove the apply params button
        // $this->removeApplyParamsButton();
    }
    function name() {return 'My Toggle';}
    function slug(){ return 'my-toggle';}
    function icon(){}//TODO

    function render($options, $default, $content) {
        ?>
<!-- Content renders here -->
        <div class="container">
            <<?php echo $options['title_tag'];?> class="title"><?php echo $options['toggle_title_text']; ?></<?php echo $options['title_tag'];?>>
            <div class="content">
                <?php
                    echo do_shortcode($content);          
                ?>
<!--Its suposed to be rendered here -->
            </div>
        </div>

        <?php
    }

    function controls() {
        $this->typographySection(
            __("Tittle styles"),
            '.title',
            $this
        );

        $this->addOptionControl(array(
            'type' => 'textfield',
            'name' => __('Toggle title'),
            'slug' => 'toggle_title_text',
            'default' => 'This is the toggle title'
        ));

        // $this->typographySection(
        //     __("Content Styles"),
        //     '.content',
        //     $this
        // );

        // $this->addOptionControl(array(
        //     'type' => 'textarea',
        //     'name' => __('Toggle content'),
        //     'slug' => 'toggle_content_text',
        //     'default' => 'This is the toggle default content'
        // ));

        $this->addOptionControl(
            array(
                'type' => 'dropdown',
                'name' => 'Title tag',
                'slug' => 'title_tag',
                'default' => 'h4'
            )
        )->setValue(
            array(
                'h1' => 'h1',
                'h2' => 'h2',
                'h3' => 'h3',
                'h4' => 'h4',
                'h5' => 'h5',
                'h6' => 'h6',
                'p' => 'p'
            )
        );

        $this->El->inlineJS(
            "document.querySelectorAll('.container').forEach(function(container) {
                container.addEventListener('click', function() {
                    var content = container.querySelector('.content');
                    
                    content.style.height = container.classList.contains('active') ? '0px' : content.scrollHeight + 20 + 'px';
            
                    container.classList.toggle('active');
                });
            });"
        );
    }

    function defaultCSS() {
        return file_get_contents(__DIR__.'/'.basename(__FILE__, '.php').'.css');
    }
}


new ToggleElement();

?>

Here's an example of how I see the rendered. As you can see, I have a text nested inside the toggle, but when its rendered, it does outside the .content element

.