mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-26 11:08:06 +01:00
d1948f623a
- properly labels all the code editor areas (Theme/Plugin, Custom HTML widget, Additional CSS), whether CodeMirror is enabled or disabled - adds `role="textbox"` and `aria-multiline="true"` to the CodeMirror editing area to allow assistive technologies properly identify it as a textarea - standardizes the "keyboard trap" help text across the admin and keeps it as a list for better readability - use the Help text elements as target for `aria-describedby`, to make screen readers read out the help text when focusing the editors - fixes the `aria-expanded` attribute usage in the Customizer "Additional CSS" help toggle - moves focus to the CodeMirror editing area when clicking on the associated label - in the Plugin editor screen: changes a `<big>` element to `<h2>` for better semantics and consistency with the Theme editor screen - also, removes a few textdomain leftovers, see `better-code-editing` and `default` Props westonruter, melchoyce, afercia. Fixes #41872. Built from https://develop.svn.wordpress.org/trunk@41586 git-svn-id: http://core.svn.wordpress.org/trunk@41419 1a063a9b-81f0-0310-95a4-ce76da25c4cd
287 lines
10 KiB
PHP
287 lines
10 KiB
PHP
<?php
|
|
/**
|
|
* Widget API: WP_Widget_Custom_HTML class
|
|
*
|
|
* @package WordPress
|
|
* @subpackage Widgets
|
|
* @since 4.8.1
|
|
*/
|
|
|
|
/**
|
|
* Core class used to implement a Custom HTML widget.
|
|
*
|
|
* @since 4.8.1
|
|
*
|
|
* @see WP_Widget
|
|
*/
|
|
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.
|
|
*
|
|
* @since 4.8.1
|
|
* @var array
|
|
*/
|
|
protected $default_instance = array(
|
|
'title' => '',
|
|
'content' => '',
|
|
);
|
|
|
|
/**
|
|
* Sets up a new Custom HTML widget instance.
|
|
*
|
|
* @since 4.8.1
|
|
*/
|
|
public function __construct() {
|
|
$widget_ops = array(
|
|
'classname' => 'widget_custom_html',
|
|
'description' => __( 'Arbitrary HTML code.' ),
|
|
'customize_selective_refresh' => true,
|
|
);
|
|
$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.
|
|
*
|
|
* @since 4.8.1
|
|
*
|
|
* @param array $args Display arguments including 'before_title', 'after_title',
|
|
* 'before_widget', and 'after_widget'.
|
|
* @param array $instance Settings for the current Custom HTML widget instance.
|
|
*/
|
|
public function widget( $args, $instance ) {
|
|
|
|
$instance = array_merge( $this->default_instance, $instance );
|
|
|
|
/** This filter is documented in wp-includes/widgets/class-wp-widget-pages.php */
|
|
$title = apply_filters( 'widget_title', $instance['title'], $instance, $this->id_base );
|
|
|
|
// 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.
|
|
*
|
|
* @since 4.8.1
|
|
*
|
|
* @param string $content The widget content.
|
|
* @param array $instance Array of settings for the current widget.
|
|
* @param WP_Widget_Custom_HTML $this Current Custom HTML widget instance.
|
|
*/
|
|
$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'];
|
|
}
|
|
|
|
/**
|
|
* Handles updating settings for the current Custom HTML widget instance.
|
|
*
|
|
* @since 4.8.1
|
|
*
|
|
* @param array $new_instance New settings for this instance as input by the user via
|
|
* WP_Widget::form().
|
|
* @param array $old_instance Old settings for this instance.
|
|
* @return array Settings to save or bool false to cancel saving.
|
|
*/
|
|
public function update( $new_instance, $old_instance ) {
|
|
$instance = array_merge( $this->default_instance, $old_instance );
|
|
$instance['title'] = sanitize_text_field( $new_instance['title'] );
|
|
if ( current_user_can( 'unfiltered_html' ) ) {
|
|
$instance['content'] = $new_instance['content'];
|
|
} else {
|
|
$instance['content'] = wp_kses_post( $new_instance['content'] );
|
|
}
|
|
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: 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 );
|
|
?>
|
|
<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:' ); ?></label>
|
|
<input id="{{ elementIdPrefix }}title" type="text" class="widefat title">
|
|
</p>
|
|
|
|
<p>
|
|
<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' ) ) : ?>
|
|
<?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:' ); ?>
|
|
<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: placeholder is link to user profile */
|
|
__( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain 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() ),
|
|
__( 'user profile' ),
|
|
/* 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,
|
|
) );
|
|
}
|
|
}
|