class-wp-custom-html-widget.php.diff

diff --git src/wp-includes/widgets/class-wp-widget-custom-html.php src/wp-includes/widgets/class-wp-widget-custom-html.php
index f6d28fd625..a75e264479 100644
--- src/wp-includes/widgets/class-wp-widget-custom-html.php
+++ src/wp-includes/widgets/class-wp-widget-custom-html.php
@@ -16,6 +16,14 @@
  */
 class WP_Widget_Custom_HTML extends WP_Widget {
 
+	/**
+	 * Whether or not the widget has been registered yet.
+	 *
+	 * @since 4.9.0
+	 * @var bool
+	 */
+	protected $registered = false;
+
 	/**
 	 * Default instance.
 	 *
@@ -38,10 +46,40 @@ class WP_Widget_Custom_HTML extends WP_Widget {
 			'description' => __( 'Arbitrary HTML code.' ),
 			'customize_selective_refresh' => true,
 		);
-		$control_ops = array();
+		$control_ops = array(
+			'width' => 400,
+			'height' => 350,
+		);
 		parent::__construct( 'custom_html', __( 'Custom HTML' ), $widget_ops, $control_ops );
 	}
 
+	/**
+	 * Add hooks for enqueueing assets when registering all widget instances of this widget class.
+	 *
+	 * @since 4.9.0
+	 *
+	 * @param integer $number Optional. The unique order number of this widget instance
+	 *                        compared to other instances of the same class. Default -1.
+	 */
+	public function _register_one( $number = -1 ) {
+		parent::_register_one( $number );
+		if ( $this->registered ) {
+			return;
+		}
+		$this->registered = true;
+
+		wp_add_inline_script( 'custom-html-widgets', sprintf( 'wp.customHtmlWidgets.idBases.push( %s );', wp_json_encode( $this->id_base ) ) );
+
+		// 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( 'WP_Widget_Custom_HTML', 'render_control_template_scripts' ) );
+
+		// Note this action is used to ensure the help text is added to the end.
+		add_action( 'admin_head-widgets.php', array( 'WP_Widget_Custom_HTML', 'add_help_text' ) );
+	}
+
 	/**
 	 * Outputs the content for the current Custom HTML widget instance.
 	 *
@@ -58,7 +96,16 @@ class WP_Widget_Custom_HTML extends WP_Widget {
 		/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
 		$title = apply_filters( 'widget_title', $instance['title'], $instance, $this->id_base );
 
-		$content = $instance['content'];
+		// Prepare instance data that looks like a normal Text widget.
+		$simulated_text_widget_instance = array_merge( $instance, array(
+			'text' => isset( $instance['content'] ) ? $instance['content'] : '',
+			'filter' => false, // Because wpautop is not applied.
+			'visual' => false, // Because it wasn't created in TinyMCE.
+		) );
+		unset( $simulated_text_widget_instance['content'] ); // Was moved to 'text' prop.
+
+		/** This filter is documented in wp-includes/widgets/class-wp-widget-text.php */
+		$content = apply_filters( 'widget_text', $instance['content'], $simulated_text_widget_instance, $this );
 
 		/**
 		 * Filters the content of the Custom HTML widget.
@@ -71,11 +118,16 @@ class WP_Widget_Custom_HTML extends WP_Widget {
 		 */
 		$content = apply_filters( 'widget_custom_html_content', $content, $instance, $this );
 
+		// Inject the Text widget's container class name alongside this widget's class name for theme styling compatibility.
+		$args['before_widget'] = preg_replace( '/(?<=\sclass=["\'])/', 'widget_text ', $args['before_widget'] );
+
 		echo $args['before_widget'];
 		if ( ! empty( $title ) ) {
 			echo $args['before_title'] . $title . $args['after_title'];
 		}
+		echo '<div class="textwidget custom-html-widget">'; // The textwidget class is for theme styling compatibility.
 		echo $content;
+		echo '</div>';
 		echo $args['after_widget'];
 	}
 
@@ -100,25 +152,73 @@ class WP_Widget_Custom_HTML extends WP_Widget {
 		return $instance;
 	}
 
+	/**
+	 * Loads the required scripts and styles for the widget control.
+	 *
+	 * @since 4.9.0
+	 */
+	public function enqueue_admin_scripts() {
+		$settings = wp_enqueue_code_editor( array(
+			'type' => 'text/html',
+			'codemirror' => array(
+				'indentUnit' => 2,
+				'tabSize' => 2,
+			),
+		) );
+
+		wp_enqueue_script( 'custom-html-widgets' );
+		if ( empty( $settings ) ) {
+			$settings = array(
+				'disabled' => true,
+			);
+		}
+		wp_add_inline_script( 'custom-html-widgets', sprintf( 'wp.customHtmlWidgets.init( %s );', wp_json_encode( $settings ) ), 'after' );
+
+		$l10n = array(
+			'errorNotice' => wp_array_slice_assoc(
+				/* translators: %d: error count */
+				_n_noop( 'There is %d error which must be fixed before you can save.', 'There are %d errors which must be fixed before you can save.' ),
+				array( 'singular', 'plural' )
+			),
+		);
+		wp_add_inline_script( 'custom-html-widgets', sprintf( 'jQuery.extend( wp.customHtmlWidgets.l10n, %s );', wp_json_encode( $l10n ) ), 'after' );
+	}
+
 	/**
 	 * Outputs the Custom HTML widget settings form.
 	 *
 	 * @since 4.8.1
+	 * @since 4.9.0 The form contains only hidden sync inputs. For the control UI, see `WP_Widget_Custom_HTML::render_control_template_scripts()`.
 	 *
+	 * @see WP_Widget_Custom_HTML::render_control_template_scripts()
 	 * @param array $instance Current instance.
 	 * @returns void
 	 */
 	public function form( $instance ) {
 		$instance = wp_parse_args( (array) $instance, $this->default_instance );
 		?>
+		<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" class="title sync-input" type="hidden" value="<?php echo esc_attr( $instance['title'] ); ?>"/>
+		<textarea id="<?php echo $this->get_field_id( 'content' ); ?>" name="<?php echo $this->get_field_name( 'content' ); ?>" class="content sync-input" hidden><?php echo esc_textarea( $instance['content'] ); ?></textarea>
+		<?php
+	}
+
+	/**
+	 * Render form template scripts.
+	 *
+	 * @since 4.9.0
+	 */
+	public static function render_control_template_scripts() {
+		?>
+		<script type="text/html" id="tmpl-widget-custom-html-control-fields">
+			<# var elementIdPrefix = 'el' + String( Math.random() ).replace( /\D/g, '' ) + '_' #>
 			<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( $instance['title'] ); ?>"/>
+				<label for="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:' ); ?></label>
+				<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
 			</p>
 
 			<p>
-			<label for="<?php echo $this->get_field_id( 'content' ); ?>"><?php _e( 'Content:' ); ?></label>
-			<textarea class="widefat code" rows="16" cols="20" id="<?php echo $this->get_field_id( 'content' ); ?>" name="<?php echo $this->get_field_name( 'content' ); ?>"><?php echo esc_textarea( $instance['content'] ); ?></textarea>
+				<label for="{{ elementIdPrefix }}content" id="{{ elementIdPrefix }}content-label"><?php esc_html_e( 'Content:' ); ?></label>
+				<textarea id="{{ elementIdPrefix }}content" class="widefat code content" rows="16" cols="20"></textarea>
 			</p>
 
 			<?php if ( ! current_user_can( 'unfiltered_html' ) ) : ?>
@@ -128,12 +228,58 @@ class WP_Widget_Custom_HTML extends WP_Widget {
 				$disallowed_html = array_diff( $probably_unsafe_html, array_keys( $allowed_html ) );
 				?>
 				<?php if ( ! empty( $disallowed_html ) ) : ?>
+					<# if ( data.codeEditorDisabled ) { #>
 						<p>
 							<?php _e( 'Some HTML tags are not permitted, including:' ); ?>
 							<code><?php echo join( '</code>, <code>', $disallowed_html ); ?></code>
 						</p>
+					<# } #>
 				<?php endif; ?>
 			<?php endif; ?>
+
+			<div class="code-editor-error-container"></div>
+		</script>
 		<?php
 	}
+
+	/**
+	 * Add help text to widgets admin screen.
+	 *
+	 * @since 4.9.0
+	 */
+	public static function add_help_text() {
+		$screen = get_current_screen();
+
+		$content = '<p>';
+		$content .= __( 'Use the Custom HTML widget to add arbitrary HTML code to your widget areas.' );
+		$content .= '</p>';
+
+		if ( 'false' !== wp_get_current_user()->syntax_highlighting ) {
+			$content .= '<p>';
+			$content .= sprintf(
+				/* translators: 1: link to user profile, 2: additional link attributes, 3: accessibility text */
+				__( 'The edit field automatically highlights code syntax. You can disable this in your <a href="%1$s" %2$s>user profile%3$s</a> to work in plain text mode.' ),
+				esc_url( get_edit_profile_url() ),
+				'class="external-link" target="_blank"',
+				sprintf( '<span class="screen-reader-text"> %s</span>',
+					/* translators: accessibility text */
+					__( '(opens in a new window)' )
+				)
+			);
+			$content .= '</p>';
+
+			$content .= '<p id="editor-keyboard-trap-help-1">' . __( 'When using a keyboard to navigate:' ) . '</p>';
+			$content .= '<ul>';
+			$content .= '<li id="editor-keyboard-trap-help-2">' . __( 'In the editing area, the Tab key enters a tab character.' ) . '</li>';
+			$content .= '<li id="editor-keyboard-trap-help-3">' . __( 'To move away from this area, press the Esc key followed by the Tab key.' ) . '</li>';
+			$content .= '<li id="editor-keyboard-trap-help-4">' . __( 'Screen reader users: when in forms mode, you may need to press the Esc key twice.' ) . '</li>';
+			$content .= '</ul>';
+		}
+
+		$screen->add_help_tab( array(
+			'id' => 'custom_html_widget',
+			'title' => __( 'Custom HTML Widget' ),
+			'content' => $content,
+		) );
+	}
 }