Editor: Add CodeMirror-powered code editor with syntax highlighting, linting, and auto-completion.
* Code editor is integrated into the Theme/Plugin Editor, Additional CSS in Customizer, and Custom HTML widget. Code editor is not yet integrated into the post editor, and it may not be until accessibility concerns are addressed. * The CodeMirror component in the Custom HTML widget is integrated in a similar way to TinyMCE being integrated into the Text widget, adopting the same approach for integrating dynamic JavaScript-initialized fields. * Linting is performed for JS, CSS, HTML, and JSON via JSHint, CSSLint, HTMLHint, and JSONLint respectively. Linting is not yet supported for PHP. * When user lacks `unfiltered_html` the capability, the Custom HTML widget will report any Kses-invalid elements and attributes as errors via a custom Kses rule for HTMLHint. * When linting errors are detected, the user will be prevented from saving the code until the errors are fixed, reducing instances of broken websites. * The placeholder value is removed from Custom CSS in favor of a fleshed-out section description which now auto-expands when the CSS field is empty. See #39892. * The CodeMirror library is included as `wp.CodeMirror` to prevent conflicts with any existing `CodeMirror` global. * An `wp.codeEditor.initialize()` API in JS is provided to convert a `textarea` into CodeMirror, with a `wp_enqueue_code_editor()` function in PHP to manage enqueueing the assets and settings needed to edit a given type of code. * A user preference is added to manage whether or not "syntax highlighting" is enabled. The feature is opt-out, being enabled by default. * Allowed file extensions in the theme and plugin editors have been updated to include formats which CodeMirror has modes for: `conf`, `css`, `diff`, `patch`, `html`, `htm`, `http`, `js`, `json`, `jsx`, `less`, `md`, `php`, `phtml`, `php3`, `php4`, `php5`, `php7`, `phps`, `scss`, `sass`, `sh`, `bash`, `sql`, `svg`, `xml`, `yml`, `yaml`, `txt`. Props westonruter, georgestephanis, obenland, melchoyce, pixolin, mizejewski, michelleweber, afercia, grahamarmfield, samikeijonen, rianrietveld, iseulde. See #38707. Fixes #12423, #39892. Built from https://develop.svn.wordpress.org/trunk@41376 git-svn-id: http://core.svn.wordpress.org/trunk@41209 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Weston Ruter
@@ -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.
|
||||
*
|
||||
@@ -45,6 +53,33 @@ class WP_Widget_Custom_HTML extends WP_Widget {
|
||||
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.
|
||||
*
|
||||
@@ -117,40 +152,128 @@ 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',
|
||||
) );
|
||||
|
||||
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: placeholder is 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 );
|
||||
?>
|
||||
<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'] ); ?>"/>
|
||||
</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>
|
||||
</p>
|
||||
|
||||
<?php if ( ! current_user_can( 'unfiltered_html' ) ) : ?>
|
||||
<?php
|
||||
$probably_unsafe_html = array( 'script', 'iframe', 'form', 'input', 'style' );
|
||||
$allowed_html = wp_kses_allowed_html( 'post' );
|
||||
$disallowed_html = array_diff( $probably_unsafe_html, array_keys( $allowed_html ) );
|
||||
?>
|
||||
<?php if ( ! empty( $disallowed_html ) ) : ?>
|
||||
<p>
|
||||
<?php _e( 'Some HTML tags are not permitted, including:' ); ?>
|
||||
<code><?php echo join( '</code>, <code>', $disallowed_html ); ?></code>
|
||||
</p>
|
||||
<?php endif; ?>
|
||||
<?php endif; ?>
|
||||
<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="{{ elementIdPrefix }}title"><?php esc_html_e( 'Title:', 'default' ); ?></label>
|
||||
<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<label for="{{ elementIdPrefix }}content" class="screen-reader-text"><?php esc_html_e( 'Content:', 'default' ); ?></label>
|
||||
<textarea id="{{ elementIdPrefix }}content" class="widefat code content" rows="16" cols="20"></textarea>
|
||||
</p>
|
||||
|
||||
<?php if ( ! current_user_can( 'unfiltered_html' ) ) : ?>
|
||||
<?php
|
||||
$probably_unsafe_html = array( 'script', 'iframe', 'form', 'input', 'style' );
|
||||
$allowed_html = wp_kses_allowed_html( 'post' );
|
||||
$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:', 'default' ); ?>
|
||||
<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>';
|
||||
|
||||
$content .= '<p>' . __( 'When using a keyboard to navigate:' ) . '</p>';
|
||||
$content .= '<ul>';
|
||||
$content .= '<li>' . __( 'In the HTML edit field, Tab enters a tab character.' ) . '</li>';
|
||||
$content .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.' ) . '</li>';
|
||||
$content .= '</ul>';
|
||||
|
||||
$content .= '<p>';
|
||||
$content .= sprintf(
|
||||
/* translators: placeholder is link to user profile */
|
||||
__( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plan text mode.' ),
|
||||
sprintf(
|
||||
' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
|
||||
esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
|
||||
__( 'user profile' ),
|
||||
/* translators: accessibility text */
|
||||
__( '(opens in a new window)', 'default' )
|
||||
)
|
||||
);
|
||||
$content .= '</p>';
|
||||
|
||||
$screen->add_help_tab( array(
|
||||
'id' => 'custom_html_widget',
|
||||
'title' => __( 'Custom HTML Widget' ),
|
||||
'content' => $content,
|
||||
) );
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user