Custom element not rendering

Support
#1

Good afternoon,
I have tried to create a custom element based on your primer and API reference documents but I always get the “This element could not render due to invalid markup. You may have unclosed HTML tags in your content.” error message when rendering the element.

I have disabled all caches on my dev server and all plugins as well.

Here is the code of the element, a simple copy and paste from your pages:

<?php
// Register My Element
cs_register_element(
    'my-custom-element',
    array(

        // Define a localized title of your element and how it is labeled in the Element Library
        'title' => __('My Element', 'your-text-domain'),

        // Define some values that we want to let users customize for this element
        'values' => array(
            'text_content' => cs_value('', 'attr', true)
        ),

        // Define the control groups that will appear in the inspector navigation bar
        'control_groups' => array(
            'my-element' => __('My Element', 'your-text-domain'),
            'my-element:setup' => __('Setup', 'your-text-domain'),
        ),

        // Define the controls that connect to our values.
        'controls' => array(
            array(
                'key'   => 'text_content',
                'type'  => 'text-editor',
                'group' => 'my-element:setup',
                'label' => __('Content', 'your-text-domain'),
            )
        ),

        // Connect a function used to render this element
        'render' => 'my_element_render',

    )
);

function my_element_render($data)
{
    // extract($data);
    ob_start(); ?>

    <div class="my-element">dfsdfsdaf</div>

<?php
    return ob_get_clean();
}

Can you help me solve this, as this is quite annoying and I would like to make this work.

For your information, I have also tested with a complete new install of Wordpress, no plugins, no cache, no content, the element still displays the same error message.

Thanks,

Gil

#2

Hello Gil,

Thanks for writing in!

Please follow this format:

// Register "My Element"
cs_register_element( 'my-custom-element', array(
​
  // Define a localized title of your element and how it is labeled in the Element Library
  'title' => __( 'My Element', 'your-text-domain' ),
​
  // Define some values that we want to let users customize for this element
  'values' => array(
    'text_content' => cs_value( 'I am a custom element', 'markup', true ),
    'custom_attribute' => cs_value( '', 'attr', false )
  ),
​
  // Define the control navigation used to organize controls in the Inspector
  'control_nav' => array(
    'my-element' => __( 'My Element', 'your-text-domain' ),
    'my-element:setup' => __( 'Setup', 'your-text-domain' ),
    'my-element:design' => __( 'Design', 'your-text-domain' ),
  ),
​
  // Define the controls that connect to our values.
  'controls' => array(
    array(
      'key'   => 'text_content',
      'type'  => 'text-editor',
      'group' => 'my-element:setup',
      'label' => __( 'Content', 'your-text-domain' ),
    ),
    array(
      'key'   => 'custom_attribute',
      'type'  => 'text',
      'group' => 'my-element:design',
      'label' => __( 'Custom Attribute', 'your-text-domain' ),
    )
  ),
​
  // Connect a function used to render this element
  'render' => 'my_element_render',
​
) );
​
function my_element_render( $data ) {
​
  extract( $data );
​
  $atts = cs_atts( array(
    'class' => 'my-element',
    'data-my-attribute' => $custom_attribute
  ) );
​
  return "<div $atts>$text_content</div>";
​
}

For more information, please check this out:

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.