* @output wp-admin/js/widgets/text-widgets.js
/* global tinymce, switchEditors */
/* eslint consistent-this: [ "error", "control" ] */
* @namespace wp.textWidgets
wp.textWidgets = ( function( $ ) {
component.TextWidgetControl = Backbone.View.extend(/** @lends wp.textWidgets.TextWidgetControl.prototype */{
* @constructs wp.textWidgets.TextWidgetControl
* @augments Backbone.View
* @param {Object} options - Options.
* @param {jQuery} options.el - Control field container element.
* @param {jQuery} options.syncContainer - Container element where fields are synced for the server.
initialize: function initialize( options ) {
throw new Error( 'Missing options.el' );
if ( ! options.syncContainer ) {
throw new Error( 'Missing options.syncContainer' );
Backbone.View.prototype.initialize.call( control, options );
control.syncContainer = options.syncContainer;
control.$el.addClass( 'text-widget-fields' );
control.$el.html( wp.template( 'widget-text-control-fields' ) );
control.customHtmlWidgetPointer = control.$el.find( '.wp-pointer.custom-html-widget-pointer' );
if ( control.customHtmlWidgetPointer.length ) {
control.customHtmlWidgetPointer.find( '.close' ).on( 'click', function( event ) {
control.customHtmlWidgetPointer.hide();
$( '#' + control.fields.text.attr( 'id' ) + '-html' ).trigger( 'focus' );
control.dismissPointers( [ 'text_widget_custom_html' ] );
control.customHtmlWidgetPointer.find( '.add-widget' ).on( 'click', function( event ) {
control.customHtmlWidgetPointer.hide();
control.openAvailableWidgetsPanel();
control.pasteHtmlPointer = control.$el.find( '.wp-pointer.paste-html-pointer' );
if ( control.pasteHtmlPointer.length ) {
control.pasteHtmlPointer.find( '.close' ).on( 'click', function( event ) {
control.pasteHtmlPointer.hide();
control.dismissPointers( [ 'text_widget_custom_html', 'text_widget_paste_html' ] );
title: control.$el.find( '.title' ),
text: control.$el.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.syncContainer.find( '.sync-input.' + fieldName );
if ( syncInput.val() !== fieldInput.val() ) {
syncInput.val( fieldInput.val() );
syncInput.trigger( 'change' );
// Note that syncInput cannot be re-used because it will be destroyed with each widget-updated event.
fieldInput.val( control.syncContainer.find( '.sync-input.' + fieldName ).val() );
* Dismiss pointers for Custom HTML widget.
* @param {Array} pointers Pointer IDs to dismiss.
dismissPointers: function dismissPointers( pointers ) {
_.each( pointers, function( pointer ) {
wp.ajax.post( 'dismiss-wp-pointer', {
component.dismissedPointers.push( pointer );
* Open available widgets panel.
openAvailableWidgetsPanel: function openAvailableWidgetsPanel() {
wp.customize.section.each( function( section ) {
if ( section.extended( wp.customize.Widgets.SidebarSection ) && section.expanded() ) {
sidebarControl = wp.customize.control( 'sidebars_widgets[' + section.params.sidebarId + ']' );
if ( ! sidebarControl ) {
setTimeout( function() { // Timeout to prevent click event from causing panel to immediately collapse.
wp.customize.Widgets.availableWidgetsPanel.open( sidebarControl );
wp.customize.Widgets.availableWidgetsPanel.$search.val( 'HTML' ).trigger( 'keyup' );
* 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.
updateFields: function updateFields() {
var control = this, syncInput;
if ( ! control.fields.title.is( document.activeElement ) ) {
syncInput = control.syncContainer.find( '.sync-input.title' );
control.fields.title.val( syncInput.val() );
syncInput = control.syncContainer.find( '.sync-input.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() ) );
initializeEditor: function initializeEditor() {
var control = this, changeDebounceDelay = 1000, id, textarea, triggerChangeIfDirty, restoreTextMode = false, needsTextareaChangeTrigger = false, previousValue;
textarea = control.fields.text;
id = textarea.attr( 'id' );
previousValue = textarea.val();
* Trigger change if dirty.
triggerChangeIfDirty = function() {
var updateWidgetBuffer = 300; // See wp.customize.Widgets.WidgetControl._setupUpdateUI() which uses 250ms for updateWidgetDebounced.
if ( control.editor.isDirty() ) {
* Account for race condition in customizer where user clicks Save & Publish while
* focus was just previously given 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 ) {
wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() + 1 );
wp.customize.state( 'processing' ).set( wp.customize.state( 'processing' ).get() - 1 );
if ( ! control.editor.isHidden() ) {
// Trigger change on textarea when it has changed so the widget can enter a dirty state.
if ( needsTextareaChangeTrigger && previousValue !== textarea.val() ) {
textarea.trigger( 'change' );
needsTextareaChangeTrigger = false;
previousValue = textarea.val();
// Just-in-time force-update the hidden input fields.
control.syncContainer.closest( '.widget' ).find( '[name=savewidget]:first' ).on( 'click', function onClickSaveButton() {
* Build (or re-build) the visual editor.
var editor, onInit, showPointerElement;
// Abort building if the textarea is gone, likely due to the widget having been deleted entirely.
if ( ! document.getElementById( id ) ) {
// The user has disabled TinyMCE.
if ( typeof window.tinymce === 'undefined' ) {
wp.editor.initialize( id, {
// 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();
// Add or enable the `wpview` plugin.
$( document ).one( 'wp-before-tinymce-init.text-widget-init', function( event, init ) {
// If somebody has removed all plugins, they must have a good reason.
} else if ( ! /\bwpview\b/.test( init.plugins ) ) {
init.plugins += ',wpview';
wp.editor.initialize( id, {
* Show a pointer, focus on dismiss, and speak the contents for a11y.
* @param {jQuery} pointerElement Pointer element.
showPointerElement = function( pointerElement ) {
pointerElement.find( '.close' ).trigger( 'focus' );
wp.a11y.speak( pointerElement.find( 'h3, p' ).map( function() {
} ).get().join( '\n\n' ) );
editor = window.tinymce.get( id );
throw new Error( 'Failed to initialize editor' );
// 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() {
// If a prior mce instance was replaced, and it was in text mode, toggle to text mode.
switchEditors.go( id, 'html' );
$( '#' + id + '-html' ).on( 'click', function() {
control.pasteHtmlPointer.hide(); // Hide the HTML pasting pointer.
if ( -1 !== component.dismissedPointers.indexOf( 'text_widget_custom_html' ) ) {
showPointerElement( control.customHtmlWidgetPointer );
// Hide the pointer when switching tabs.
$( '#' + id + '-tmce' ).on( 'click', function() {
control.customHtmlWidgetPointer.hide();
// Show pointer when pasting HTML.
editor.on( 'pastepreprocess', function( event ) {
var content = event.content;
if ( -1 !== component.dismissedPointers.indexOf( 'text_widget_paste_html' ) || ! content || ! /<\w+.*?>/.test( content ) ) {
// Show the pointer after a slight delay so the user sees what they pasted.
showPointerElement( control.pasteHtmlPointer );
if ( editor.initialized ) {
editor.on( 'init', onInit );
control.editorFocused = false;
editor.on( 'focus', function onEditorFocus() {
control.editorFocused = true;
editor.on( 'paste', function onEditorPaste() {
editor.setDirty( true ); // Because pasting doesn't currently set the dirty state.
editor.on( 'NodeChange', function onNodeChange() {
needsTextareaChangeTrigger = true;
editor.on( 'NodeChange', _.debounce( triggerChangeIfDirty, changeDebounceDelay ) );
editor.on( 'blur hide', function onEditorBlur() {
control.editorFocused = false;
* Mapping of widget ID to instances of TextWidgetControl subclasses.
* @memberOf wp.textWidgets
* @type {Object.<string, wp.textWidgets.TextWidgetControl>}
component.widgetControls = {};
* Handle widget being added or initialized for the first time at the widget-added event.
* @memberOf wp.textWidgets
* @param {jQuery.Event} event - Event.
* @param {jQuery} widgetContainer - Widget container element.
component.handleWidgetAdded = function handleWidgetAdded( event, widgetContainer ) {
var widgetForm, idBase, widgetControl, widgetId, animatedCheckDelay = 50, renderWhenAnimationDone, fieldContainer, syncContainer;
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 ( -1 === component.idBases.indexOf( idBase ) ) {
// Prevent initializing already-added widgets.
widgetId = widgetForm.find( '.widget-id' ).val();
if ( component.widgetControls[ widgetId ] ) {
// Bypass using TinyMCE when widget is in legacy mode.
if ( ! widgetForm.find( '.visual' ).val() ) {
* Create a container element for the widget control fields.
* This is inserted into the DOM immediately before 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
fieldContainer = $( '<div></div>' );
syncContainer = widgetContainer.find( '.widget-content:first' );
syncContainer.before( fieldContainer );
widgetControl = new component.TextWidgetControl({
syncContainer: syncContainer
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.
renderWhenAnimationDone = function() {
if ( ! widgetContainer.hasClass( 'open' ) ) {
setTimeout( renderWhenAnimationDone, animatedCheckDelay );
widgetControl.initializeEditor();
renderWhenAnimationDone();
* Setup widget in accessibility mode.
* @memberOf wp.textWidgets
component.setupAccessibleMode = function setupAccessibleMode() {
var widgetForm, idBase, widgetControl, fieldContainer, syncContainer;
widgetForm = $( '.editwidget > form' );
if ( 0 === widgetForm.length ) {
idBase = widgetForm.find( '.id_base' ).val();
if ( -1 === component.idBases.indexOf( idBase ) ) {
// Bypass using TinyMCE when widget is in legacy mode.
if ( ! widgetForm.find( '.visual' ).val() ) {
fieldContainer = $( '<div></div>' );
syncContainer = widgetForm.find( '> .widget-inside' );
syncContainer.before( fieldContainer );
widgetControl = new component.TextWidgetControl({
syncContainer: syncContainer
widgetControl.initializeEditor();
* 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.
* @memberOf wp.textWidgets
* @param {jQuery.Event} event - Event.
* @param {jQuery} widgetContainer - Widget container element.
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 ( -1 === component.idBases.indexOf( idBase ) ) {
widgetId = widgetForm.find( '> .widget-id' ).val();
widgetControl = component.widgetControls[ widgetId ];