Widgets: Extend the Text widget with TinyMCE.

Introduces rich text formatting: bold, italic, lists, links.

Props westonruter, azaozz, timmydcrawford, obenland, melchoyce.
See #35760.
Fixes #35243.

Built from https://develop.svn.wordpress.org/trunk@40631


git-svn-id: http://core.svn.wordpress.org/trunk@40492 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/customize-widgets-rtl.css

@@ -213,6 +213,21 @@
 	display: block;
 }
 
+/* Text Widget */
+.wp-customizer div.mce-inline-toolbar-grp,
+.wp-customizer div.mce-tooltip {
+	z-index: 500100 !important;
+}
+.wp-customizer .ui-autocomplete.wplink-autocomplete {
+	z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */
+}
+.wp-customizer #wp-link-backdrop {
+	z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */
+}
+.wp-customizer #wp-link-wrap {
+	z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */
+}
+
 /**
  * Styles for new widget addition panel
  */

wp-admin/css/customize-widgets.css

@@ -213,6 +213,21 @@
 	display: block;
 }
 
+/* Text Widget */
+.wp-customizer div.mce-inline-toolbar-grp,
+.wp-customizer div.mce-tooltip {
+	z-index: 500100 !important;
+}
+.wp-customizer .ui-autocomplete.wplink-autocomplete {
+	z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */
+}
+.wp-customizer #wp-link-backdrop {
+	z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */
+}
+.wp-customizer #wp-link-wrap {
+	z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */
+}
+
 /**
  * Styles for new widget addition panel
  */

wp-admin/js/widgets/text-widgets.js

@@ -0,0 +1,326 @@
+/* global tinymce, switchEditors */
+/* eslint consistent-this: [ "error", "control" ] */
+wp.textWidgets = ( function( $ ) {
+	'use strict';
+
+	var component = {};
+
+	/**
+	 * Text widget control.
+	 *
+	 * @class TextWidgetControl
+	 * @constructor
+	 * @abstract
+	 */
+	component.TextWidgetControl = Backbone.View.extend({
+
+		/**
+		 * View events.
+		 *
+		 * @type {Object}
+		 */
+		events: {},
+
+		/**
+		 * Initialize.
+		 *
+		 * @param {Object}         options - Options.
+		 * @param {Backbone.Model} options.model - Model.
+		 * @param {jQuery}         options.el - Control container element.
+		 * @returns {void}
+		 */
+		initialize: function initialize( options ) {
+			var control = this;
+
+			if ( ! options.el ) {
+				throw new Error( 'Missing options.el' );
+			}
+
+			Backbone.View.prototype.initialize.call( control, options );
+
+			/*
+			 * Create a container element for the widget control fields.
+			 * This is inserted into the DOM immediately before the the .widget-content
+			 * element because the contents of this element are essentially "managed"
+			 * by PHP, where each widget update cause the entire element to be emptied
+			 * and replaced with the rendered output of WP_Widget::form() which is
+			 * sent back in Ajax request made to save/update the widget instance.
+			 * To prevent a "flash of replaced DOM elements and re-initialized JS
+			 * components", the JS template is rendered outside of the normal form
+			 * container.
+			 */
+			control.fieldContainer = $( '<div class="text-widget-fields"></div>' );
+			control.fieldContainer.html( wp.template( 'widget-text-control-fields' ) );
+			control.widgetContentContainer = control.$el.find( '.widget-content:first' );
+			control.widgetContentContainer.before( control.fieldContainer );
+
+			control.fields = {
+				title: control.fieldContainer.find( '.title' ),
+				text: control.fieldContainer.find( '.text' )
+			};
+
+			// Sync input fields to hidden sync fields which actually get sent to the server.
+			_.each( control.fields, function( fieldInput, fieldName ) {
+				fieldInput.on( 'input change', function updateSyncField() {
+					var syncInput = control.widgetContentContainer.find( 'input[type=hidden].' + fieldName );
+					if ( syncInput.val() !== $( this ).val() ) {
+						syncInput.val( $( this ).val() );
+						syncInput.trigger( 'change' );
+					}
+				});
+
+				// Note that syncInput cannot be re-used because it will be destroyed with each widget-updated event.
+				fieldInput.val( control.widgetContentContainer.find( 'input[type=hidden].' + fieldName ).val() );
+			});
+		},
+
+		/**
+		 * Update input fields from the sync fields.
+		 *
+		 * This function is called at the widget-updated and widget-synced events.
+		 * A field will only be updated if it is not currently focused, to avoid
+		 * overwriting content that the user is entering.
+		 *
+		 * @returns {void}
+		 */
+		updateFields: function updateFields() {
+			var control = this, syncInput;
+
+			if ( ! control.fields.title.is( document.activeElement ) ) {
+				syncInput = control.widgetContentContainer.find( 'input[type=hidden].title' );
+				control.fields.title.val( syncInput.val() );
+			}
+
+			syncInput = control.widgetContentContainer.find( 'input[type=hidden].text' );
+			if ( control.fields.text.is( ':visible' ) ) {
+				if ( ! control.fields.text.is( document.activeElement ) ) {
+					control.fields.text.val( syncInput.val() );
+				}
+			} else if ( control.editor && ! control.editorFocused && syncInput.val() !== control.fields.text.val() ) {
+				control.editor.setContent( wp.editor.autop( syncInput.val() ) );
+			}
+		},
+
+		/**
+		 * Initialize editor.
+		 *
+		 * @returns {void}
+		 */
+		initializeEditor: function initializeEditor() {
+			var control = this, changeDebounceDelay = 1000, id, textarea, restoreTextMode = false;
+			textarea = control.fields.text;
+			id = textarea.attr( 'id' );
+
+			/**
+			 * Build (or re-build) the visual editor.
+			 *
+			 * @returns {void}
+			 */
+			function buildEditor() {
+				var editor, triggerChangeIfDirty, onInit;
+
+				// Abort building if the textarea is gone, likely due to the widget having been deleted entirely.
+				if ( ! document.getElementById( id ) ) {
+					return;
+				}
+
+				// Destroy any existing editor so that it can be re-initialized after a widget-updated event.
+				if ( tinymce.get( id ) )    {
+					restoreTextMode = tinymce.get( id ).isHidden();
+					wp.editor.remove( id );
+				}
+
+				wp.editor.initialize( id, {
+					tinymce: {
+						wpautop: true
+					},
+					quicktags: true
+				} );
+
+				editor = window.tinymce.get( id );
+				if ( ! editor ) {
+					throw new Error( 'Failed to initialize editor' );
+				}
+				onInit = function() {
+
+					// When a widget is moved in the DOM the dynamically-created TinyMCE iframe will be destroyed and has to be re-built.
+					$( editor.getWin() ).on( 'unload', function() {
+						_.defer( buildEditor );
+					});
+
+					// If a prior mce instance was replaced, and it was in text mode, toggle to text mode.
+					if ( restoreTextMode ) {
+						switchEditors.go( id, 'toggle' );
+					}
+				};
+
+				if ( editor.initialized ) {
+					onInit();
+				} else {
+					editor.on( 'init', onInit );
+				}
+
+				control.editorFocused = false;
+				triggerChangeIfDirty = function() {
+					var updateWidgetBuffer = 300; // See wp.customize.Widgets.WidgetControl._setupUpdateUI() which uses 250ms for updateWidgetDebounced.
+					if ( editor.isDirty() ) {
+
+						/*
+						 * Account for race condition in customizer where user clicks Save & Publish while
+						 * focus was just previously given to to the editor. Since updates to the editor
+						 * are debounced at 1 second and since widget input changes are only synced to
+						 * settings after 250ms, the customizer needs to be put into the processing
+						 * state during the time between the change event is triggered and updateWidget
+						 * logic starts. Note that the debounced update-widget request should be able
+						 * to be removed with the removal of the update-widget request entirely once
+						 * widgets are able to mutate their own instance props directly in JS without
+						 * having to make server round-trips to call the respective WP_Widget::update()
+						 * callbacks. See <https://core.trac.wordpress.org/ticket/33507>.
+						 */
+						if ( wp.customize ) {
+							wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() + 1 );
+							_.delay( function() {
+								wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() - 1 );
+							}, updateWidgetBuffer );
+						}
+
+						editor.save();
+						textarea.trigger( 'change' );
+					}
+				};
+				editor.on( 'focus', function() {
+					control.editorFocused = true;
+				} );
+				editor.on( 'NodeChange', _.debounce( triggerChangeIfDirty, changeDebounceDelay ) );
+				editor.on( 'blur', function() {
+					control.editorFocused = false;
+					triggerChangeIfDirty();
+				} );
+
+				control.editor = editor;
+			}
+
+			buildEditor();
+		}
+	});
+
+	/**
+	 * Mapping of widget ID to instances of TextWidgetControl subclasses.
+	 *
+	 * @type {Object.<string, wp.textWidgets.TextWidgetControl>}
+	 */
+	component.widgetControls = {};
+
+	/**
+	 * Handle widget being added or initialized for the first time at the widget-added event.
+	 *
+	 * @param {jQuery.Event} event - Event.
+	 * @param {jQuery}       widgetContainer - Widget container element.
+	 * @returns {void}
+	 */
+	component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
+		var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, widgetInside, renderWhenAnimationDone;
+		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' ); // Note: '.form' appears in the customizer, whereas 'form' on the widgets admin screen.
+
+		idBase = widgetForm.find( '> .id_base' ).val();
+		if ( 'text' !== idBase ) {
+			return;
+		}
+
+		// Prevent initializing already-added widgets.
+		widgetId = widgetForm.find( '> .widget-id' ).val();
+		if ( component.widgetControls[ widgetId ] ) {
+			return;
+		}
+
+		widgetControl = new component.TextWidgetControl({
+			el: widgetContainer
+		});
+
+		component.widgetControls[ widgetId ] = widgetControl;
+
+		/*
+		 * Render the widget once the widget parent's container finishes animating,
+		 * as the widget-added event fires with a slideDown of the container.
+		 * This ensures that the textarea is visible and an iframe can be embedded
+		 * with TinyMCE being able to set contenteditable on it.
+		 */
+		widgetInside = widgetContainer.parent();
+		renderWhenAnimationDone = function() {
+			if ( widgetInside.is( ':animated' ) ) {
+				setTimeout( renderWhenAnimationDone, animatedCheckDelay );
+			} else {
+				widgetControl.initializeEditor();
+			}
+		};
+		renderWhenAnimationDone();
+	};
+
+	/**
+	 * Sync widget instance data sanitized from server back onto widget model.
+	 *
+	 * This gets called via the 'widget-updated' event when saving a widget from
+	 * the widgets admin screen and also via the 'widget-synced' event when making
+	 * a change to a widget in the customizer.
+	 *
+	 * @param {jQuery.Event} event - Event.
+	 * @param {jQuery}       widgetContainer - Widget container element.
+	 * @returns {void}
+	 */
+	component.handleWidgetUpdated = function handleWidgetUpdated( event, widgetContainer ) {
+		var widgetForm, widgetId, widgetControl, idBase;
+		widgetForm = widgetContainer.find( '> .widget-inside > .form, > .widget-inside > form' );
+
+		idBase = widgetForm.find( '> .id_base' ).val();
+		if ( 'text' !== idBase ) {
+			return;
+		}
+
+		widgetId = widgetForm.find( '> .widget-id' ).val();
+		widgetControl = component.widgetControls[ widgetId ];
+		if ( ! widgetControl ) {
+			return;
+		}
+
+		widgetControl.updateFields();
+	};
+
+	/**
+	 * Initialize functionality.
+	 *
+	 * This function exists to prevent the JS file from having to boot itself.
+	 * When WordPress enqueues this script, it should have an inline script
+	 * attached which calls wp.textWidgets.init().
+	 *
+	 * @returns {void}
+	 */
+	component.init = function init() {
+		var $document = $( document );
+		$document.on( 'widget-added', component.handleWidgetAdded );
+		$document.on( 'widget-synced widget-updated', component.handleWidgetUpdated );
+
+		/*
+		 * Manually trigger widget-added events for media widgets on the admin
+		 * screen once they are expanded. The widget-added event is not triggered
+		 * for each pre-existing widget on the widgets admin screen like it is
+		 * on the customizer. Likewise, the customizer only triggers widget-added
+		 * when the widget is expanded to just-in-time construct the widget form
+		 * when it is actually going to be displayed. So the following implements
+		 * the same for the widgets admin screen, to invoke the widget-added
+		 * handler when a pre-existing media widget is expanded.
+		 */
+		$( function initializeExistingWidgetContainers() {
+			var widgetContainers;
+			if ( 'widgets' !== window.pagenow ) {
+				return;
+			}
+			widgetContainers = $( '.widgets-holder-wrap:not(#available-widgets)' ).find( 'div.widget' );
+			widgetContainers.one( 'click.toggle-widget-expanded', function toggleWidgetExpanded() {
+				var widgetContainer = $( this );
+				component.handleWidgetAdded( new jQuery.Event( 'widget-added' ), widgetContainer );
+			});
+		});
+	};
+
+	return component;
+})( jQuery );

wp-admin/js/widgets/text-widgets.min.js

@@ -0,0 +1 @@
+wp.textWidgets=function(a){"use strict";var b={};return b.TextWidgetControl=Backbone.View.extend({events:{},initialize:function(b){var c=this;if(!b.el)throw new Error("Missing options.el");Backbone.View.prototype.initialize.call(c,b),c.fieldContainer=a('<div class="text-widget-fields"></div>'),c.fieldContainer.html(wp.template("widget-text-control-fields")),c.widgetContentContainer=c.$el.find(".widget-content:first"),c.widgetContentContainer.before(c.fieldContainer),c.fields={title:c.fieldContainer.find(".title"),text:c.fieldContainer.find(".text")},_.each(c.fields,function(b,d){b.on("input change",function(){var b=c.widgetContentContainer.find("input[type=hidden]."+d);b.val()!==a(this).val()&&(b.val(a(this).val()),b.trigger("change"))}),b.val(c.widgetContentContainer.find("input[type=hidden]."+d).val())})},updateFields:function(){var a,b=this;b.fields.title.is(document.activeElement)||(a=b.widgetContentContainer.find("input[type=hidden].title"),b.fields.title.val(a.val())),a=b.widgetContentContainer.find("input[type=hidden].text"),b.fields.text.is(":visible")?b.fields.text.is(document.activeElement)||b.fields.text.val(a.val()):b.editor&&!b.editorFocused&&a.val()!==b.fields.text.val()&&b.editor.setContent(wp.editor.autop(a.val()))},initializeEditor:function(){function b(){var h,i,j;if(document.getElementById(c)){if(tinymce.get(c)&&(g=tinymce.get(c).isHidden(),wp.editor.remove(c)),wp.editor.initialize(c,{tinymce:{wpautop:!0},quicktags:!0}),h=window.tinymce.get(c),!h)throw new Error("Failed to initialize editor");j=function(){a(h.getWin()).on("unload",function(){_.defer(b)}),g&&switchEditors.go(c,"toggle")},h.initialized?j():h.on("init",j),e.editorFocused=!1,i=function(){var a=300;h.isDirty()&&(wp.customize&&(wp.customize.state("processing").set(wp.customize.state("processing").get()+1),_.delay(function(){wp.customize.state("processing").set(wp.customize.state("processing").get()-1)},a)),h.save(),d.trigger("change"))},h.on("focus",function(){e.editorFocused=!0}),h.on("NodeChange",_.debounce(i,f)),h.on("blur",function(){e.editorFocused=!1,i()}),e.editor=h}}var c,d,e=this,f=1e3,g=!1;d=e.fields.text,c=d.attr("id"),b()}}),b.widgetControls={},b.handleWidgetAdded=function(a,c){var d,e,f,g,h,i,j=50;d=c.find("> .widget-inside > .form, > .widget-inside > form"),e=d.find("> .id_base").val(),"text"===e&&(g=d.find("> .widget-id").val(),b.widgetControls[g]||(f=new b.TextWidgetControl({el:c}),b.widgetControls[g]=f,h=c.parent(),(i=function(){h.is(":animated")?setTimeout(i,j):f.initializeEditor()})()))},b.handleWidgetUpdated=function(a,c){var d,e,f,g;d=c.find("> .widget-inside > .form, > .widget-inside > form"),g=d.find("> .id_base").val(),"text"===g&&(e=d.find("> .widget-id").val(),f=b.widgetControls[e],f&&f.updateFields())},b.init=function(){var c=a(document);c.on("widget-added",b.handleWidgetAdded),c.on("widget-synced widget-updated",b.handleWidgetUpdated),a(function(){var c;"widgets"===window.pagenow&&(c=a(".widgets-holder-wrap:not(#available-widgets)").find("div.widget"),c.one("click.toggle-widget-expanded",function(){var c=a(this);b.handleWidgetAdded(new jQuery.Event("widget-added"),c)}))})},b}(jQuery);

wp-includes/default-filters.php

@@ -164,7 +164,11 @@ add_filter( 'list_cats',         'wptexturize' );
 
 add_filter( 'wp_sprintf', 'wp_sprintf_l', 10, 2 );
 
-add_filter( 'widget_text', 'balanceTags' );
+add_filter( 'widget_text',         'balanceTags'          );
+add_filter( 'widget_text_content', 'capital_P_dangit', 11 );
+add_filter( 'widget_text_content', 'wptexturize'          );
+add_filter( 'widget_text_content', 'convert_smilies',  20 );
+add_filter( 'widget_text_content', 'wpautop'              );
 
 add_filter( 'date_i18n', 'wp_maybe_decline_date' );
 

wp-includes/script-loader.php

@@ -602,6 +602,8 @@ function wp_default_scripts( &$scripts ) {
 		$scripts->add( 'admin-gallery', "/wp-admin/js/gallery$suffix.js", array( 'jquery-ui-sortable' ) );
 
 		$scripts->add( 'admin-widgets', "/wp-admin/js/widgets$suffix.js", array( 'jquery-ui-sortable', 'jquery-ui-draggable', 'jquery-ui-droppable' ), false, 1 );
+		$scripts->add( 'text-widgets', "/wp-admin/js/widgets/text-widgets$suffix.js", array( 'jquery', 'backbone', 'editor', 'wp-util' ) );
+		$scripts->add_inline_script( 'text-widgets', 'wp.textWidgets.init();', 'after' );
 
 		$scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone', 'wp-a11y' ), false, 1 );
 

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.8-alpha-40630';
+$wp_version = '4.8-alpha-40631';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

wp-includes/widgets/class-wp-widget-text.php

@@ -28,10 +28,30 @@ class WP_Widget_Text extends WP_Widget {
 			'description' => __( 'Arbitrary text or HTML.' ),
 			'customize_selective_refresh' => true,
 		);
-		$control_ops = array( 'width' => 400, 'height' => 350 );
+		$control_ops = array(
+			'width' => 400,
+			'height' => 350,
+		);
 		parent::__construct( 'text', __( 'Text' ), $widget_ops, $control_ops );
 	}
 
+	/**
+	 * Add hooks for enqueueing assets when registering all widget instances of this widget class.
+	 *
+	 * @since 4.8.0
+	 * @access public
+	 */
+	public function _register() {
+
+		// Note that the widgets component in the customizer will also do the 'admin_print_scripts-widgets.php' action in WP_Customize_Widgets::print_scripts().
+		add_action( 'admin_print_scripts-widgets.php', array( $this, 'enqueue_admin_scripts' ) );
+
+		// Note that the widgets component in the customizer will also do the 'admin_footer-widgets.php' action in WP_Customize_Widgets::print_footer_scripts().
+		add_action( 'admin_footer-widgets.php', array( $this, 'render_control_template_scripts' ) );
+
+		parent::_register();
+	}
+
 	/**
 	 * Outputs the content for the current Text widget instance.
 	 *
@@ -61,11 +81,34 @@ class WP_Widget_Text extends WP_Widget {
 		 */
 		$text = apply_filters( 'widget_text', $widget_text, $instance, $this );
 
+		if ( isset( $instance['filter'] ) ) {
+			if ( 'content' === $instance['filter'] ) {
+
+				/**
+				 * Filters the content of the Text widget to apply changes expected from the visual (TinyMCE) editor.
+				 *
+				 * By default a subset of the_content filters are applied, including wpautop and wptexturize.
+				 *
+				 * @since 4.8.0
+				 *
+				 * @param string         $widget_text The widget content.
+				 * @param array          $instance    Array of settings for the current widget.
+				 * @param WP_Widget_Text $this        Current Text widget instance.
+				 */
+				$text = apply_filters( 'widget_text_content', $widget_text, $instance, $this );
+
+			} elseif ( $instance['filter'] ) {
+				$text = wpautop( $text ); // Back-compat for instances prior to 4.8.
+			}
+		}
+
 		echo $args['before_widget'];
 		if ( ! empty( $title ) ) {
 			echo $args['before_title'] . $title . $args['after_title'];
-		} ?>
-			<div class="textwidget"><?php echo !empty( $instance['filter'] ) ? wpautop( $text ) : $text; ?></div>
+		}
+
+		?>
+			<div class="textwidget"><?php echo $text; ?></div>
 		<?php
 		echo $args['after_widget'];
 	}
@@ -89,30 +132,73 @@ class WP_Widget_Text extends WP_Widget {
 		} else {
 			$instance['text'] = wp_kses_post( $new_instance['text'] );
 		}
-		$instance['filter'] = ! empty( $new_instance['filter'] );
+
+		/*
+		 * Re-use legacy 'filter' (wpautop) property to now indicate content filters will always apply.
+		 * Prior to 4.8, this is a boolean value used to indicate whether or not wpautop should be
+		 * applied. By re-using this property, downgrading WordPress from 4.8 to 4.7 will ensure
+		 * that the content for Text widgets created with TinyMCE will continue to get wpautop.
+		 */
+		$instance['filter'] = 'content';
+
 		return $instance;
 	}
 
+	/**
+	 * Loads the required scripts and styles for the widget control.
+	 *
+	 * @since 4.8.0
+	 * @access public
+	 */
+	public function enqueue_admin_scripts() {
+		wp_enqueue_editor();
+		wp_enqueue_script( 'text-widgets' );
+	}
+
 	/**
 	 * Outputs the Text widget settings form.
 	 *
 	 * @since 2.8.0
+	 * @since 4.8.0 Form only contains hidden inputs which are synced with JS template.
 	 * @access public
+	 * @see WP_Widget_Visual_Text::render_control_template_scripts()
 	 *
 	 * @param array $instance Current settings.
+	 * @return void
 	 */
 	public function form( $instance ) {
-		$instance = wp_parse_args( (array) $instance, array( 'title' => '', 'text' => '' ) );
-		$filter = isset( $instance['filter'] ) ? $instance['filter'] : 0;
-		$title = sanitize_text_field( $instance['title'] );
+		$instance = wp_parse_args(
+			(array) $instance,
+			array(
+				'title' => '',
+				'text' => '',
+			)
+		);
 		?>
-		<p><label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
-		<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>" /></p>
+		<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" class="title" type="hidden" value="<?php echo esc_attr( $instance['title'] ); ?>">
+		<input id="<?php echo $this->get_field_id( 'text' ); ?>" name="<?php echo $this->get_field_name( 'text' ); ?>" class="text" type="hidden" value="<?php echo esc_attr( $instance['text'] ); ?>">
+		<?php
+	}
 
-		<p><label for="<?php echo $this->get_field_id( 'text' ); ?>"><?php _e( 'Content:' ); ?></label>
-		<textarea class="widefat" rows="16" cols="20" id="<?php echo $this->get_field_id('text'); ?>" name="<?php echo $this->get_field_name('text'); ?>"><?php echo esc_textarea( $instance['text'] ); ?></textarea></p>
-
-		<p><input id="<?php echo $this->get_field_id('filter'); ?>" name="<?php echo $this->get_field_name('filter'); ?>" type="checkbox"<?php checked( $filter ); ?> />&nbsp;<label for="<?php echo $this->get_field_id('filter'); ?>"><?php _e('Automatically add paragraphs'); ?></label></p>
+	/**
+	 * Render form template scripts.
+	 *
+	 * @since 4.8.0
+	 * @access public
+	 */
+	public function render_control_template_scripts() {
+		?>
+		<script type="text/html" id="tmpl-widget-text-control-fields">
+			<# var elementIdPrefix = 'el' + String( Math.random() ).replace( /\D/g, '' ) + '_' #>
+			<p>
+				<label for="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:' ); ?></label>
+				<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
+			</p>
+			<p>
+				<label for="{{ elementIdPrefix }}text" class="screen-reader-text"><?php esc_html_e( 'Content:' ); ?></label>
+				<textarea id="{{ elementIdPrefix }}text" class="widefat text" style="height: 200px" rows="16" cols="20"></textarea>
+			</p>
+		</script>
 		<?php
 	}
 }