Little test in case style hasn't been set for content element.

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.DS_*

assets/js/dist/canvas.js

@@ -1,7 +1,8 @@
 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
 
+    console.log('must be in debug mode ');
 ( function( ElementAPI, Views ) {
-
+console.log('must be in debug mode two');
     'use strict';
 
 	app.on( 'before:start', function() {
@@ -12,8 +13,8 @@
 	// Do something when the element renders
 	ElementAPI.onRender( 'tailor_custom_wrapper', function( atts, model ) {
 		console.log( 'Do something with or to the element when it renders' );
-		console.log( atts );
-		console.log( model );
+		//console.log( atts );
+		//console.log( model );
 		console.log( this.el ); // The element node
 		console.log( this.$el );
     } );

assets/js/dist/canvas.min.js

@@ -1 +1,102 @@
-!function a(b,c,d){function e(g,h){if(!c[g]){if(!b[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};b[g][0].call(k.exports,function(a){var c=b[g][1][a];return e(c?c:a)},k,k.exports,a,b,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(a,b,c){!function(a,b){"use strict";app.on("before:start",function(){}),a.onRender("tailor_custom_wrapper",function(a,b){console.log("Do something with or to the element when it renders"),console.log(a),console.log(b),console.log(this.el),console.log(this.$el)})}(window.Tailor.Api.Element,Tailor.Views||{})},{}]},{},[1]);
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId])
+/******/ 			return installedModules[moduleId].exports;
+
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			exports: {},
+/******/ 			id: moduleId,
+/******/ 			loaded: false
+/******/ 		};
+
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+
+/******/ 		// Flag the module as loaded
+/******/ 		module.loaded = true;
+
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+
+
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(0);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ function(module, exports) {
+
+
+	console.log('this is one');
+	( function( ElementAPI, SettingAPI, Views ) {
+	  console.log('this is two');
+
+	    'use strict';
+
+		// Do something when the element renders
+		ElementAPI.onRender( 'tailor_flipcard', function( atts, model ) {
+
+			// Do something with the current attributes or element model
+			//console.log( atts );
+			//console.log( model );
+
+			// Or update the DOM (the function is scoped to the element view)
+			console.log( this.el );
+	    console.log('this is this');
+			//console.log( this.$el );
+	    } );
+
+		// Respond to an element setting change
+		SettingAPI.onChange( 'element:tailor_flipcard', function( to, from, model ) {
+
+			// Do something with the DOM (the function is scoped to the element view)
+			this.el.classList.add( 'custom-background-color' );
+			this.$el.css( { 'background-color' : to } );
+
+	    console.log('this is this');
+			console.log(this);
+
+	    console.log('that was this');
+			// Or return a collection of custom CSS rules to apply
+			return [ {
+				selectors: [ '', '.selector-within-element' ],
+				declarations: {
+					'background-color' : to
+				}
+			} ];
+		} );
+
+		// Respond to a sidebar setting change
+		SettingAPI.onChange( 'sidebar:setting_id', function( to, from ) {
+			// Do something
+		} );
+
+		app.on( 'before:start', function() {
+			// Register custom views or behavior
+			// e.g., Views.CustomView = require( '..' );
+		} );
+
+
+	} ) ( window.Tailor.Api.Element, window.Tailor.Api.Setting, Tailor.Views || {} );
+
+
+/***/ }
+/******/ ]);

assets/js/src/canvas/canvas.js

@@ -1,27 +1,34 @@
 
+console.log('this is one');
 ( function( ElementAPI, SettingAPI, Views ) {
+  console.log('this is two');
 
     'use strict';
 
 	// Do something when the element renders
-	ElementAPI.onRender( 'tailor_custom_wrapper', function( atts, model ) {
+	ElementAPI.onRender( 'tailor_flipcard', function( atts, model ) {
 
 		// Do something with the current attributes or element model
-		console.log( atts );
-		console.log( model );
+		//console.log( atts );
+		//console.log( model );
 
 		// Or update the DOM (the function is scoped to the element view)
 		console.log( this.el );
-		console.log( this.$el );
+    console.log('this is this');
+		//console.log( this.$el );
     } );
 
 	// Respond to an element setting change
-	SettingAPI.onChange( 'element:title_background_color', function( to, from, model ) {
+	SettingAPI.onChange( 'element:tailor_flipcard', function( to, from, model ) {
 
 		// Do something with the DOM (the function is scoped to the element view)
 		this.el.classList.add( 'custom-background-color' );
 		this.$el.css( { 'background-color' : to } );
 
+    console.log('this is this');
+		console.log(this);
+
+    console.log('that was this');
 		// Or return a collection of custom CSS rules to apply
 		return [ {
 			selectors: [ '', '.selector-within-element' ],
@@ -42,4 +49,4 @@
 	} );
 
 
-} ) ( window.Tailor.Api.Element, window.Tailor.Api.Setting, Tailor.Views || {} );
+} ) ( window.Tailor.Api.Element, window.Tailor.Api.Setting, Tailor.Views || {} );

includes/elements/class-custom-content.php

@@ -21,7 +21,7 @@ class Tailor_Custom_Content_Element extends Tailor_Element {
 	     * @access protected
 	     */
 	    protected function register_controls() {
-		    
+
 		    $this->add_section( 'general', array(
 			    'title'                 =>  __( 'General' ),
 			    'priority'              =>  10,
@@ -60,7 +60,7 @@ protected function register_controls() {
 			    'section'               =>  'general',
 			    'priority'              =>  $priority += 10,
 		    ) );
-		    
+
 		    // This allows you to also add one of many standard control types..
 		    $general_control_types = array( 'style' );
 
@@ -77,7 +77,7 @@ protected function register_controls() {
 				    ),
 			    ),
 		    );
-		    
+
 		    // Note the starting priority is passed to the function
 		    tailor_control_presets( $this, $general_control_types, $general_control_arguments, $priority );
 
@@ -125,17 +125,17 @@ public function generate_css( $atts ) {
 		    // Generate CSS rules for standard settings
 		    $css_rules = tailor_css_presets( $css_rules, $atts, $excluded_control_types );
 
-		    // Create your own
-		    if ( 'style-1' == $atts['style'] ) {
-			    $color = 'red';
-		    }
-		    else if ( 'style-2' == $atts['style'] ) {
-			    $color = 'blue';
-		    }
-		    else if ( 'style-3' == $atts['style'] ) {
-			    $color = 'green';
-		    }
-		    
+		    if (isset($atts['style'])) {
+                // Create your own
+                if ('style-1' == $atts['style']) {
+                    $color = 'red';
+                } else if ('style-2' == $atts['style']) {
+                    $color = 'blue';
+                } else if ('style-3' == $atts['style']) {
+                    $color = 'green';
+                }
+            }
+
 		    if ( ! empty( $color ) ) {
 			    $css_rules[] = array(
 				    'selectors'         =>  array( '' ),
@@ -144,8 +144,8 @@ public function generate_css( $atts ) {
 				    ),
 			    );
 		    }
-		    
+
 		    return $css_rules;
 	    }
     }
-}
+}