WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/13/2017 06:07:48 AM (8 months ago)
Author:
westonruter
Message:

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.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r41374 r41376  
    212212     */
    213213    private $_changeset_data;
     214
     215    /**
     216     * Code Editor Settings for Custom CSS.
     217     *
     218     * This variable contains the settings returned by `wp_enqueue_code_editor()` which are then later output
     219     * to the client in `WP_Customize_Manager::customize_pane_settings()`. A value of false means that the
     220     * Custom CSS section or control was removed, or that the Syntax Highlighting user pref was turned off.
     221     *
     222     * @see wp_enqueue_code_editor()
     223     * @see WP_Customize_Manager::enqueue_control_scripts()
     224     * @see WP_Customize_Manager::customize_pane_settings()
     225     * @since 4.9.0
     226     * @var array|false
     227     */
     228    private $_custom_css_code_editor_settings = false;
    214229
    215230    /**
     
    33233338            $control->enqueue();
    33243339        }
     3340
     3341        if ( $this->get_section( 'custom_css' ) && $this->get_control( 'custom_css' ) ) {
     3342            $this->_custom_css_code_editor_settings = wp_enqueue_code_editor( array(
     3343                'type' => 'text/css',
     3344            ) );
     3345        }
    33253346    }
    33263347
     
    35793600                'stylesheet' => $this->get_stylesheet(),
    35803601                'active'     => $this->is_theme_active(),
     3602            ),
     3603            'customCss' => array(
     3604                'codeEditor' => $this->_custom_css_code_editor_settings,
    35813605            ),
    35823606            'url'      => array(
     
    41784202
    41794203        /* Custom CSS */
     4204        $section_description = '<p>';
     4205        $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.', 'better-code-editing' );
     4206        $section_description .= sprintf(
     4207            ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
     4208            esc_url( __( 'https://codex.wordpress.org/CSS', 'default' ) ),
     4209            __( 'Learn more about CSS', 'default' ),
     4210            /* translators: accessibility text */
     4211            __( '(opens in a new window)', 'default' )
     4212        );
     4213        $section_description .= '</p>';
     4214
     4215        $section_description .= '<p>' . __( 'When using a keyboard to navigate:', 'better-code-editing' ) . '</p>';
     4216        $section_description .= '<ul>';
     4217        $section_description .= '<li>' . __( 'In the CSS edit field, Tab enters a tab character.', 'better-code-editing' ) . '</li>';
     4218        $section_description .= '<li>' . __( 'To move keyboard focus, press Esc then Tab for the next element, or Esc then Shift+Tab for the previous element.', 'better-code-editing' ) . '</li>';
     4219        $section_description .= '</ul>';
     4220
     4221        if ( 'false' !== wp_get_current_user()->syntax_highlighting ) {
     4222            $section_description .= '<p>';
     4223            $section_description .= sprintf(
     4224                /* translators: placeholder is link to user profile */
     4225                __( 'The edit field automatically highlights code syntax. You can disable this in your %s to work in plain text mode.', 'better-code-editing' ),
     4226                sprintf(
     4227                    ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
     4228                    esc_url( get_edit_profile_url() . '#syntax_highlighting' ),
     4229                    __( 'user profile', 'better-code-editing' ),
     4230                    /* translators: accessibility text */
     4231                    __( '(opens in a new window)', 'default' )
     4232                )
     4233            );
     4234            $section_description .= '</p>';
     4235        }
     4236
     4237        $section_description .= '<p class="section-description-buttons">';
     4238        $section_description .= '<button type="button" class="button-link section-description-close">' . __( 'Close', 'default' ) . '</button>';
     4239        $section_description .= '</p>';
     4240
    41804241        $this->add_section( 'custom_css', array(
    41814242            'title'              => __( 'Additional CSS' ),
    41824243            'priority'           => 200,
    41834244            'description_hidden' => true,
    4184             'description'        => sprintf( '%s<br /><a href="%s" class="external-link" target="_blank">%s<span class="screen-reader-text">%s</span></a>',
    4185                 __( 'CSS allows you to customize the appearance and layout of your site with code. Separate CSS is saved for each of your themes. In the editing area the Tab key enters a tab character. To move below this area by pressing Tab, press the Esc key followed by the Tab key.' ),
    4186                 esc_url( __( 'https://codex.wordpress.org/CSS' ) ),
    4187                 __( 'Learn more about CSS' ),
    4188                 /* translators: accessibility text */
    4189                 __( '(opens in a new window)' )
    4190             ),
     4245            'description'        => $section_description,
    41914246        ) );
    41924247
    41934248        $custom_css_setting = new WP_Customize_Custom_CSS_Setting( $this, sprintf( 'custom_css[%s]', get_stylesheet() ), array(
    41944249            'capability' => 'edit_css',
    4195             'default' => sprintf( "/*\n%s\n*/", __( "You can add your own CSS here.\n\nClick the help icon above to learn more." ) ),
     4250            'default' => '',
    41964251        ) );
    41974252        $this->add_setting( $custom_css_setting );
Note: See TracChangeset for help on using the changeset viewer.