Add live in-widget-title

Normalize JS methods to be camelCase

Author: westonruter

class-widget-form-wp-customize-control.php

@@ -31,7 +31,7 @@ public function render_content() {
 				</div>
 				<div class="widget-title">
 					<h4 class="customize-control-title">
-						<?php echo esc_html( $this->label ); ?>
+						<?php echo esc_html( $this->label ); ?><span class="in-widget-title"></span>
 					</h4>
 				</div>
 			</div>

widget-customizer.js

@@ -16,24 +16,26 @@ var WidgetCustomizer = (function ($) {
 			var control = this;
 
 			control.setting.bind( function( to ) {
-				control.update_widget( to );
+				control.updateWidget( to );
 			});
 
 			control.container.find( '.widget-control-update' ).on( 'click', function (e) {
-				control.update_widget();
+				control.updateWidget();
 			});
 
 			control.setting.previewer.channel.bind( 'synced', function () {
 				control.container.removeClass( 'previewer-loading' );
 			});
 
-			control.controlTabs();
+			control.setupControlToggle();
+
+			control.setupWidgetTitle();
 		},
 
 		/**
 		 * @param {object} instance_override  When the model changes, the instance is sent this way
 		 */
-		update_widget: function ( instance_override ) {
+		updateWidget: function ( instance_override ) {
 			var control = this;
 			var data = control.container.find(':input').serialize();
 			control.container.addClass( 'widget-form-loading' );
@@ -72,7 +74,7 @@ var WidgetCustomizer = (function ($) {
 			});
 		},
 
-		controlTabs: function() {
+		setupControlToggle: function() {
 			var control = this;
 			control.container.find('.widget-top').on( 'click', function (e) {
 				// Copied from wpWidgets.init() in wp-admin/js/widgets.js
@@ -88,9 +90,27 @@ var WidgetCustomizer = (function ($) {
 				}
 				e.preventDefault();
 			} );
+		},
 
-		}
+		setupWidgetTitle: function () {
+			var control = this;
+			control.setting.bind( function( to ) {
+				control.updateInWidgetTitle();
+			});
+			control.updateInWidgetTitle();
+		},
 
+		updateInWidgetTitle: function () {
+			var control = this;
+			var title = control.setting().title;
+			var in_widget_title = control.container.find('.in-widget-title');
+			if ( title ) {
+				in_widget_title.text( ': ' + title );
+			}
+			else {
+				in_widget_title.text( '' );
+			}
+		}
 	});
 
 	// Note that 'widget_form' must match the Widget_Form_WP_Customize_Control::$type