How to Add a Custom Component

This is an example for adding a relatively simple custom component to the component list. The following PHP code would add a new custom button to the component list.

//sample html content insertion
class editus_SimpleHtmlContent {
   
    public function __construct(){
        add_action('wp_enqueue_scripts', array($this,'scripts'));
    }
   
    function scripts()
    {
        // the following line adds the content that would be inserted
        add_filter('lasso_components',array($this,'add_SimpleHtmlContent_content'),10,1);
        // the following adds the button for the UI
        add_action( 'lasso_toolbar_components', array($this,'add_SimpleHtmlContent_button'), 10 );
       
        // if you need to add extra JS or CSS files, add them here
        //wp_enqueue_style( ..blah blah... );
        //wp_enqueue_script( ..blah blah... );
    }
   
   
    function editus_SimpleHtmlContent_content()
    {
         return '<p><span>***</span></p>';
    }


    function add_SimpleHtmlContent_content( $array ){
        $custom = array(
               'dotdotdot' => array(
                         'name'    => __('Separator','lasso'),
                          'content' => self::editus_SimpleHtmlContent_content(),
                )
        );
        return array_merge( $array, $custom );
    }


    function add_SimpleHtmlContent_button( ) {
          ?>
          <style>
          #lasso-toolbar--components__list .lasso-toolbar--component__SimpleHtmlContent:before
            {
                content: "\f11c";
                font-family: 'dashicons' !important;
            }
          </style>
          <li data-type="SimpleHtmlContent" title="<?php esc_attr_e( 'Separator', 'lasso' );?>" class="quote lasso-toolbar--component__SimpleHtmlContent"></li>
          <?php
    }
}

new editus_SimpleHtmlContent();

The following example is similar to the above except that the content contains a shortcode:

//sample shortcode insertion
class editus_shortcode1 {
   
    public function __construct(){
        add_action('wp_enqueue_scripts', array($this,'scripts'));
    }
   
    function scripts()
    {
        // the following line adds the content that would be inserted
        add_filter('lasso_components',array($this,'add_shortcode1_content'),10,1);
        // the following adds the button for the UI
        add_action( 'lasso_toolbar_components', array($this,'add_shortcode1_button'), 10 );
       
        // if you need to add extra JS or CSS files, add them here
        //wp_enqueue_style( ..blah blah... );
        //wp_enqueue_script( ..blah blah... );
    }
   
    //how to return shortcode content
    function editus_shortcode1_content()
    {
        $code_wrapped = lasso_wrap_shortcodes( "[shortcode1]");
        return do_shortcode( $code_wrapped );
    }


    function add_shortcode1_content( $array ){
        $custom = array(
               'shortcode1' => array(
                         'name'    => __('Shortcode1','lasso'),
                          'content' => self::editus_shortcode1_content(),
                )
        );
        return array_merge( $array, $custom );
    }


    function add_shortcode1_button( ) {
          ?>
          <style>
          #lasso-toolbar--components__list .lasso-toolbar--component__shortcode1:before
            {
                content: "SC1";
            }
			  
			  ul.lasso-component--controls {
				padding-left:0;  
			  }
          </style>
          <li data-type="shortcode1" title="<?php esc_attr_e( 'Shortcode1', 'lasso' );?>" class="quote lasso-toolbar--component__shortcode1"></li>
          <?php
    }
}