Changeset 41376

Timestamp:

09/13/2017 06:07:48 AM (7 years 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.

Location:

trunk

Files:

• Gruntfile.js (modified) (1 diff)
• src/wp-admin/css/code-editor.css (added)
• src/wp-admin/css/common.css (modified) (6 diffs)
• src/wp-admin/css/customize-controls.css (modified) (2 diffs)
• src/wp-admin/css/widgets.css (modified) (1 diff)
• src/wp-admin/includes/user.php (modified) (1 diff)
• src/wp-admin/js/code-editor.js (added)
• src/wp-admin/js/customize-controls.js (modified) (1 diff)
• src/wp-admin/js/theme-plugin-editor.js (added)
• src/wp-admin/js/widgets/custom-html-widgets.js (added)
• src/wp-admin/plugin-editor.php (modified) (2 diffs)
• src/wp-admin/theme-editor.php (modified) (2 diffs)
• src/wp-admin/user-edit.php (modified) (1 diff)
• src/wp-includes/author-template.php (modified) (1 diff)
• src/wp-includes/class-wp-customize-manager.php (modified) (4 diffs)
• src/wp-includes/class-wp-user.php (modified) (1 diff)
• src/wp-includes/customize/class-wp-customize-custom-css-setting.php (modified) (3 diffs)
• src/wp-includes/general-template.php (modified) (1 diff)
• src/wp-includes/js/codemirror (added)
• src/wp-includes/js/codemirror/codemirror.min.css (added)
• src/wp-includes/js/codemirror/codemirror.min.js (added)
• src/wp-includes/js/codemirror/csslint.js (added)
• src/wp-includes/js/codemirror/htmlhint-kses.js (added)
• src/wp-includes/js/codemirror/htmlhint.js (added)
• src/wp-includes/js/codemirror/jshint.js (added)
• src/wp-includes/js/codemirror/jsonlint.js (added)
• src/wp-includes/script-loader.php (modified) (5 diffs)
• src/wp-includes/user.php (modified) (5 diffs)
• src/wp-includes/widgets/class-wp-widget-custom-html.php (modified) (4 diffs)
• src/wp-includes/widgets/class-wp-widget-text.php (modified) (1 diff)
• tests/phpunit/tests/customize/custom-css-setting.php (modified) (1 diff)
• tests/phpunit/tests/customize/manager.php (modified) (1 diff)
• tests/phpunit/tests/user.php (modified) (1 diff)

trunk/Gruntfile.js

@@ -361 +361 @@
                     'wp-includes/js/tinymce/plugins/wp*/plugin.js',
                     // Third party scripts
+                    '!wp-includes/js/codemirror/*.js',
                     '!wp-admin/js/farbtastic.js',
                     '!wp-includes/js/backbone*.js',

trunk/src/wp-admin/css/common.css

@@ -2201 +2201 @@
 }
 
-#template div {
+#template > div {
     margin-right: 190px;
 }
@@ -3016 +3016 @@
     font-family: Consolas, Monaco, monospace;
     font-size: 13px;
-    width: 97%;
     background: #f9f9f9;
     -moz-tab-size: 4;
@@ -3023 +3022 @@
 }
 
+#template textarea,
+#template .CodeMirror {
+    width: 97%;
+    height: calc( 100vh - 220px );
+}
+
 /* rtl:ignore */
 #template textarea,
@@ -3033 +3038 @@
 }
 
+#file-editor-linting-error {
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+#file-editor-linting-error > .notice {
+    margin: 0;
+    display: inline-block;
+}
+#file-editor-linting-error > .notice > p {
+    width: auto;
+}
+#template .submit {
+    margin-top: 1em;
+    padding: 0;
+}
+
+#template .submit input[type=submit][disabled] {
+    cursor: not-allowed;
+}
 #templateside {
     float: right;
@@ -3586 +3610 @@
     }
 
-    #template div {
+    #template > div {
         float: none;
         margin: 0;
@@ -3592 +3616 @@
     }
 
+    #template .CodeMirror,
     #template textarea {
         width: 100%;

trunk/src/wp-admin/css/customize-controls.css

@@ -551 +551 @@
     margin-bottom: 0;
 }
+.customize-section-description ul {
+    margin-left: 1em;
+}
+.customize-section-description ul > li {
+    list-style: disc;
+}
+.section-description-buttons {
+    text-align: right;
+}
+
+.section-description-buttons button.button-link {
+    color: #0073aa;
+    text-decoration: underline;
+}
 
 .customize-control {
@@ -1153 +1167 @@
     width: calc( 100% + 24px );
     margin-bottom: -12px;
+}
+
+.customize-section-description-container + #customize-control-custom_css:last-child .CodeMirror {
+    height: calc( 100vh - 185px );
+}
+.CodeMirror-lint-tooltip,
+.CodeMirror-hints {
+    z-index: 500000 !important;
+}
+
+.customize-section-description-container + #customize-control-custom_css:last-child .customize-control-notifications-container {
+    margin-left: 12px;
+    margin-right: 12px;
 }
 

trunk/src/wp-admin/css/widgets.css

@@ -646 +646 @@
 }
 
+.custom-html-widget-fields > p > .CodeMirror {
+    border: 1px solid #e5e5e5;
+}
+.custom-html-widget-fields code {
+    padding-top: 1px;
+    padding-bottom: 1px;
+}
+ul.CodeMirror-hints {
+    z-index: 101; /* Due to z-index 100 set on .widget.open */
+}
+.widget-control-actions .custom-html-widget-save-button.button.validation-blocked {
+    cursor: not-allowed;
+}
+
 /* =Media Queries
 -------------------------------------------------------------- */

trunk/src/wp-admin/includes/user.php

@@ -92 +92 @@
 
     if ( $update ) {
-        $user->rich_editing = isset( $_POST['rich_editing'] ) && 'false' == $_POST['rich_editing'] ? 'false' : 'true';
+        $user->rich_editing = isset( $_POST['rich_editing'] ) && 'false' === $_POST['rich_editing'] ? 'false' : 'true';
+        $user->syntax_highlighting = isset( $_POST['syntax_highlighting'] ) && 'false' === $_POST['syntax_highlighting'] ? 'false' : 'true';
         $user->admin_color = isset( $_POST['admin_color'] ) ? sanitize_text_field( $_POST['admin_color'] ) : 'fresh';
         $user->show_admin_bar_front = isset( $_POST['admin_bar_front'] ) ? 'true' : 'false';

trunk/src/wp-admin/js/customize-controls.js

@@ -5632 +5632 @@
         });
 
-        // Allow tabs to be entered in Custom CSS textarea.
-        api.control( 'custom_css', function setupCustomCssControl( control ) {
-            control.deferred.embedded.done( function allowTabs() {
-                var $textarea = control.container.find( 'textarea' ), textarea = $textarea[0];
-
-                $textarea.on( 'blur', function onBlur() {
-                    $textarea.data( 'next-tab-blurs', false );
-                } );
-
-                $textarea.on( 'keydown', function onKeydown( event ) {
-                    var selectionStart, selectionEnd, value, tabKeyCode = 9, escKeyCode = 27;
-
-                    if ( escKeyCode === event.keyCode ) {
-                        if ( ! $textarea.data( 'next-tab-blurs' ) ) {
-                            $textarea.data( 'next-tab-blurs', true );
-                            event.stopPropagation(); // Prevent collapsing the section.
+        // Add code editor for Custom CSS.
+        (function() {
+            var ready, sectionReady = $.Deferred(), controlReady = $.Deferred();
+
+            api.section( 'custom_css', function( section ) {
+                section.deferred.embedded.done( function() {
+                    if ( section.expanded() ) {
+                        sectionReady.resolve( section );
+                    } else {
+                        section.expanded.bind( function( isExpanded ) {
+                            if ( isExpanded ) {
+                                sectionReady.resolve( section );
+                            }
+                        } );
+                    }
+                });
+            });
+            api.control( 'custom_css', function( control ) {
+                control.deferred.embedded.done( function() {
+                    controlReady.resolve( control );
+                });
+            });
+
+            ready = $.when( sectionReady, controlReady );
+
+            // Set up the section desription behaviors.
+            ready.done( function setupSectionDescription( section, control ) {
+
+                // Close the section description when clicking the close button.
+                section.container.find( '.section-description-buttons .section-description-close' ).on( 'click', function() {
+                    section.container.find( '.section-meta .customize-section-description:first' )
+                        .removeClass( 'open' )
+                        .slideUp()
+                        .attr( 'aria-expanded', 'false' );
+                });
+
+                // Reveal help text if setting is empty.
+                if ( ! control.setting.get() ) {
+                    section.container.find( '.section-meta .customize-section-description:first' )
+                        .addClass( 'open' )
+                        .show()
+                        .attr( 'aria-expanded', 'true' );
+                }
+            });
+
+            // Set up the code editor itself.
+            if ( api.settings.customCss && api.settings.customCss.codeEditor ) {
+
+                // Set up the syntax highlighting editor.
+                ready.done( function setupSyntaxHighlightingEditor( section, control ) {
+                    var $textarea = control.container.find( 'textarea' ), settings, suspendEditorUpdate = false;
+
+                    // Make sure editor gets focused when control is focused.
+                    control.focus = (function( originalFocus ) { // eslint-disable-line max-nested-callbacks
+                        return function( params ) { // eslint-disable-line max-nested-callbacks
+                            var extendedParams = _.extend( {}, params ), originalCompleteCallback;
+                            originalCompleteCallback = extendedParams.completeCallback;
+                            extendedParams.completeCallback = function() {
+                                if ( originalCompleteCallback ) {
+                                    originalCompleteCallback();
+                                }
+                                if ( control.editor ) {
+                                    control.editor.codemirror.focus();
+                                }
+                            };
+                            originalFocus.call( this, extendedParams );
+                        };
+                    })( control.focus );
+
+                    settings = _.extend( {}, api.settings.customCss.codeEditor, {
+
+                        /**
+                         * Handle tabbing to the field after the editor.
+                         *
+                         * @returns {void}
+                         */
+                        onTabNext: function onTabNext() {
+                            var controls, controlIndex;
+                            controls = section.controls();
+                            controlIndex = controls.indexOf( control );
+                            if ( controls.length === controlIndex + 1 ) {
+                                $( '#customize-footer-actions .collapse-sidebar' ).focus();
+                            } else {
+                                controls[ controlIndex + 1 ].container.find( ':focusable:first' ).focus();
+                            }
+                        },
+
+                        /**
+                         * Handle tabbing to the field before the editor.
+                         *
+                         * @returns {void}
+                         */
+                        onTabPrevious: function onTabPrevious() {
+                            var controls, controlIndex;
+                            controls = section.controls();
+                            controlIndex = controls.indexOf( control );
+                            if ( 0 === controlIndex ) {
+                                section.contentContainer.find( '.customize-section-title .customize-help-toggle, .customize-section-title .customize-section-description.open .section-description-close' ).last().focus();
+                            } else {
+                                controls[ controlIndex - 1 ].contentContainer.find( ':focusable:first' ).focus();
+                            }
+                        },
+
+                        /**
+                         * Update error notice.
+                         *
+                         * @param {Array} errorAnnotations - Error annotations.
+                         * @returns {void}
+                         */
+                        onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
+                            var message;
+                            control.setting.notifications.remove( 'csslint_error' );
+
+                            if ( 0 !== errorAnnotations.length ) {
+                                if ( 1 === errorAnnotations.length ) {
+                                    message = api.l10n.customCssError.singular.replace( '%d', '1' );
+                                } else {
+                                    message = api.l10n.customCssError.plural.replace( '%d', String( errorAnnotations.length ) );
+                                }
+                                control.setting.notifications.add( 'csslint_error', new api.Notification( 'csslint_error', {
+                                    message: message,
+                                    type: 'error'
+                                } ) );
+                            }
                         }
-                        return;
-                    }
-
-                    // Short-circuit if tab key is not being pressed or if a modifier key *is* being pressed.
-                    if ( tabKeyCode !== event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ) {
-                        return;
-                    }
-
-                    // Prevent capturing Tab characters if Esc was pressed.
-                    if ( $textarea.data( 'next-tab-blurs' ) ) {
-                        return;
-                    }
-
-                    selectionStart = textarea.selectionStart;
-                    selectionEnd = textarea.selectionEnd;
-                    value = textarea.value;
-
-                    if ( selectionStart >= 0 ) {
-                        textarea.value = value.substring( 0, selectionStart ).concat( '\t', value.substring( selectionEnd ) );
-                        $textarea.selectionStart = textarea.selectionEnd = selectionStart + 1;
-                    }
-
-                    event.stopPropagation();
-                    event.preventDefault();
-                } );
-            } );
-        } );
+                    });
+
+                    control.editor = wp.codeEditor.initialize( $textarea, settings );
+
+                    // Refresh when receiving focus.
+                    control.editor.codemirror.on( 'focus', function( codemirror ) {
+                        codemirror.refresh();
+                    });
+
+                    /*
+                     * When the CodeMirror instance changes, mirror to the textarea,
+                     * where we have our "true" change event handler bound.
+                     */
+                    control.editor.codemirror.on( 'change', function( codemirror ) {
+                        suspendEditorUpdate = true;
+                        $textarea.val( codemirror.getValue() ).trigger( 'change' );
+                        suspendEditorUpdate = false;
+                    });
+
+                    // Update CodeMirror when the setting is changed by another plugin.
+                    control.setting.bind( function( value ) {
+                        if ( ! suspendEditorUpdate ) {
+                            control.editor.codemirror.setValue( value );
+                        }
+                    });
+
+                    // Prevent collapsing section when hitting Esc to tab out of editor.
+                    control.editor.codemirror.on( 'keydown', function onKeydown( codemirror, event ) {
+                        var escKeyCode = 27;
+                        if ( escKeyCode === event.keyCode ) {
+                            event.stopPropagation();
+                        }
+                    });
+                });
+            } else {
+
+                // Allow tabs to be entered in Custom CSS textarea.
+                ready.done( function allowTabs( section, control ) {
+
+                    var $textarea = control.container.find( 'textarea' ), textarea = $textarea[0];
+
+                    $textarea.on( 'blur', function onBlur() {
+                        $textarea.data( 'next-tab-blurs', false );
+                    } );
+
+                    $textarea.on( 'keydown', function onKeydown( event ) {
+                        var selectionStart, selectionEnd, value, tabKeyCode = 9, escKeyCode = 27;
+
+                        if ( escKeyCode === event.keyCode ) {
+                            if ( ! $textarea.data( 'next-tab-blurs' ) ) {
+                                $textarea.data( 'next-tab-blurs', true );
+                                event.stopPropagation(); // Prevent collapsing the section.
+                            }
+                            return;
+                        }
+
+                        // Short-circuit if tab key is not being pressed or if a modifier key *is* being pressed.
+                        if ( tabKeyCode !== event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ) {
+                            return;
+                        }
+
+                        // Prevent capturing Tab characters if Esc was pressed.
+                        if ( $textarea.data( 'next-tab-blurs' ) ) {
+                            return;
+                        }
+
+                        selectionStart = textarea.selectionStart;
+                        selectionEnd = textarea.selectionEnd;
+                        value = textarea.value;
+
+                        if ( selectionStart >= 0 ) {
+                            textarea.value = value.substring( 0, selectionStart ).concat( '\t', value.substring( selectionEnd ) );
+                            $textarea.selectionStart = textarea.selectionEnd = selectionStart + 1;
+                        }
+
+                        event.stopPropagation();
+                        event.preventDefault();
+                    });
+                });
+            }
+        })();
 
         // Toggle visibility of Header Video notice when active state change.

trunk/src/wp-admin/plugin-editor.php

@@ -116 +116 @@
 
     // List of allowable extensions
-    $editable_extensions = array('php', 'txt', 'text', 'js', 'css', 'html', 'htm', 'xml', 'inc', 'include');
+    $editable_extensions = array(
+        'bash',
+        'conf',
+        'css',
+        'diff',
+        'htm',
+        'html',
+        'http',
+        'inc',
+        'include',
+        'js',
+        'json',
+        'jsx',
+        'less',
+        'md',
+        'patch',
+        'php',
+        'php3',
+        'php4',
+        'php5',
+        'php7',
+        'phps',
+        'phtml',
+        'sass',
+        'scss',
+        'sh',
+        'sql',
+        'svg',
+        'text',
+        'txt',
+        'xml',
+        'yaml',
+        'yml',
+    );
 
     /**
@@ -157 +190 @@
         '<p>' . __('<a href="https://wordpress.org/support/">Support Forums</a>') . '</p>'
     );
+
+    $settings = wp_enqueue_code_editor( array( 'file' => $real_file ) );
+    if ( ! empty( $settings ) ) {
+        wp_enqueue_script( 'wp-theme-plugin-editor' );
+        wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'jQuery( function() { wp.themePluginEditor.init( %s ); } )', wp_json_encode( $settings ) ) );
+    }
 
     require_once(ABSPATH . 'wp-admin/admin-header.php');

trunk/src/wp-admin/theme-editor.php

@@ -64 +64 @@
 $allowed_files = $style_files = array();
 $has_templates = false;
-$default_types = array( 'php', 'css' );
+$default_types = array(
+    'bash',
+    'conf',
+    'css',
+    'diff',
+    'htm',
+    'html',
+    'http',
+    'inc',
+    'include',
+    'js',
+    'json',
+    'jsx',
+    'less',
+    'md',
+    'patch',
+    'php',
+    'php3',
+    'php4',
+    'php5',
+    'php7',
+    'phps',
+    'phtml',
+    'sass',
+    'scss',
+    'sh',
+    'sql',
+    'svg',
+    'text',
+    'txt',
+    'xml',
+    'yaml',
+    'yml',
+);
 
 /**
@@ -126 +159 @@
 
 default:
+
+    $settings = wp_enqueue_code_editor( compact( 'file' ) );
+    if ( ! empty( $settings ) ) {
+        wp_enqueue_script( 'wp-theme-plugin-editor' );
+        wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'jQuery( function() { wp.themePluginEditor.init( %s ); } )', wp_json_encode( $settings ) ) );
+    }
 
     require_once( ABSPATH . 'wp-admin/admin-header.php' );

trunk/src/wp-admin/user-edit.php

@@ -246 +246 @@
         <th scope="row"><?php _e( 'Visual Editor' ); ?></th>
         <td><label for="rich_editing"><input name="rich_editing" type="checkbox" id="rich_editing" value="false" <?php if ( ! empty( $profileuser->rich_editing ) ) checked( 'false', $profileuser->rich_editing ); ?> /> <?php _e( 'Disable the visual editor when writing' ); ?></label></td>
+    </tr>
+<?php endif; ?>
+<?php
+$show_syntax_highlighting_preference = (
+    // For Custom HTML widget and Additional CSS in Customizer.
+    user_can( $profileuser, 'edit_theme_options' )
+    ||
+    // Edit plugins.
+    user_can( $profileuser, 'edit_plugins' )
+    ||
+    // Edit themes.
+    user_can( $profileuser, 'edit_themes' )
+);
+?>
+<?php if ( $show_syntax_highlighting_preference ) : ?>
+    <tr class="user-syntax-highlighting-wrap">
+        <th scope="row"><?php _e( 'Syntax Highlighting' ); ?></th>
+        <td>
+            <label for="syntax_highlighting"><input name="syntax_highlighting" type="checkbox" id="syntax_highlighting" value="false" <?php if ( ! empty( $profileuser->syntax_highlighting ) ) checked( 'false', $profileuser->syntax_highlighting ); ?> /> <?php _e( 'Disable syntax highlighting when editing code' ); ?></label>
+        </td>
     </tr>
 <?php endif; ?>

trunk/src/wp-includes/author-template.php

@@ -129 +129 @@
  * - plugins_per_page
  * - rich_editing
+ * - syntax_highlighting
  * - user_activation_key
  * - user_description

trunk/src/wp-includes/class-wp-customize-manager.php

@@ -212 +212 @@
      */
     private $_changeset_data;
+
+    /**
+     * Code Editor Settings for Custom CSS.
+     *
+     * This variable contains the settings returned by `wp_enqueue_code_editor()` which are then later output
+     * to the client in `WP_Customize_Manager::customize_pane_settings()`. A value of false means that the
+     * Custom CSS section or control was removed, or that the Syntax Highlighting user pref was turned off.
+     *
+     * @see wp_enqueue_code_editor()
+     * @see WP_Customize_Manager::enqueue_control_scripts()
+     * @see WP_Customize_Manager::customize_pane_settings()
+     * @since 4.9.0
+     * @var array|false
+     */
+    private $_custom_css_code_editor_settings = false;
 
     /**
@@ -3323 +3338 @@
             $control->enqueue();
         }
+
+        if ( $this->get_section( 'custom_css' ) && $this->get_control( 'custom_css' ) ) {
+            $this->_custom_css_code_editor_settings = wp_enqueue_code_editor( array(
+                'type' => 'text/css',
+            ) );
+        }
     }
 
@@ -3579 +3600 @@
                 'stylesheet' => $this->get_stylesheet(),
                 'active'     => $this->is_theme_active(),
+            ),
+            'customCss' => array(
+                'codeEditor' => $this->_custom_css_code_editor_settings,
             ),
             'url'      => array(
@@ -4178 +4202 @@
 
         /* Custom CSS */
+        $section_description = '<p>';
+        $section_description .= __( 'Add your own CSS code here to customize the appearance and layout of your site.', 'better-code-editing' );
+        $section_description .= sprintf(
+            ' <a href="%1$s" class="external-link" target="_blank">%2$s<span class="screen-reader-text">%3$s</span></a>',
+            esc_url( __( 'https://codex.wordpress.org/CSS', 'default' ) ),
+            __( 'Learn more about CSS', 'default' ),
+            /* translators: accessibility text */
+            __( '(opens in a new window)', 'default' )
+        );
+        $section_description .= '</p>';
+
+        $section_description .= '<p>' . __( 'When using a keyboard to navigate:', 'better-code-editing' ) . '</p>';
+        $section_description .= '<ul>';
+        $section_description .= '<li>' . __( 'In the CSS edit field, Tab enters a tab character.', 'better-code-editing' ) . '</li>';
+        $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>';
+        $section_description .= '</ul>';
+
+        if ( 'false' !== wp_get_current_user()->syntax_highlighting ) {
+            $section_description .= '<p>';
+            $section_description .= 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.', 'better-code-editing' ),
+                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', 'better-code-editing' ),
+                    /* translators: accessibility text */
+                    __( '(opens in a new window)', 'default' )
+                )
+            );
+            $section_description .= '</p>';
+        }
+
+        $section_description .= '<p class="section-description-buttons">';
+        $section_description .= '<button type="button" class="button-link section-description-close">' . __( 'Close', 'default' ) . '</button>';
+        $section_description .= '</p>';
+
         $this->add_section( 'custom_css', array(
             'title'              => __( 'Additional CSS' ),
             'priority'           => 200,
             'description_hidden' => true,
-            'description'        => sprintf( '%s<br /><a href="%s" class="external-link" target="_blank">%s<span class="screen-reader-text">%s</span></a>',
-                __( '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.' ),
-                esc_url( __( 'https://codex.wordpress.org/CSS' ) ),
-                __( 'Learn more about CSS' ),
-                /* translators: accessibility text */
-                __( '(opens in a new window)' )
-            ),
+            'description'        => $section_description,
         ) );
 
         $custom_css_setting = new WP_Customize_Custom_CSS_Setting( $this, sprintf( 'custom_css[%s]', get_stylesheet() ), array(
             'capability' => 'edit_css',
-            'default' => sprintf( "/*\n%s\n*/", __( "You can add your own CSS here.\n\nClick the help icon above to learn more." ) ),
+            'default' => '',
         ) );
         $this->add_setting( $custom_css_setting );

trunk/src/wp-includes/class-wp-user.php

@@ -33 +33 @@
  * @property string $deleted
  * @property string $locale
+ * @property string $rich_editing
+ * @property string $syntax_highlighting
  */
 class WP_User {

trunk/src/wp-includes/customize/class-wp-customize-custom-css-setting.php

@@ -149 +149 @@
      * Notifications are rendered when the customizer state is saved.
      *
-     * @todo There are cases where valid CSS can be incorrectly marked as invalid when strings or comments include balancing characters. To fix, CSS tokenization needs to be used.
-     *
      * @since 4.7.0
+     * @since 4.9.0 Checking for balanced characters has been moved client-side via linting in code editor.
      *
      * @param string $css The input string.
@@ -161 +160 @@
         if ( preg_match( '#</?\w+#', $css ) ) {
             $validity->add( 'illegal_markup', __( 'Markup is not allowed in CSS.' ) );
-        }
-
-        $imbalanced = false;
-
-        // Make sure that there is a closing brace for each opening brace.
-        if ( ! $this->validate_balanced_characters( '{', '}', $css ) ) {
-            $validity->add( 'imbalanced_curly_brackets', sprintf(
-                /* translators: 1: {}, 2: }, 3: { */
-                __( 'Your curly brackets %1$s are imbalanced. Make sure there is a closing %2$s for every opening %3$s.' ),
-                '<code>{}</code>',
-                '<code>}</code>',
-                '<code>{</code>'
-            ) );
-            $imbalanced = true;
-        }
-
-        // Ensure brackets are balanced.
-        if ( ! $this->validate_balanced_characters( '[', ']', $css ) ) {
-            $validity->add( 'imbalanced_braces', sprintf(
-                /* translators: 1: [], 2: ], 3: [ */
-                __( 'Your brackets %1$s are imbalanced. Make sure there is a closing %2$s for every opening %3$s.' ),
-                '<code>[]</code>',
-                '<code>]</code>',
-                '<code>[</code>'
-            ) );
-            $imbalanced = true;
-        }
-
-        // Ensure parentheses are balanced.
-        if ( ! $this->validate_balanced_characters( '(', ')', $css ) ) {
-            $validity->add( 'imbalanced_parentheses', sprintf(
-                /* translators: 1: (), 2: ), 3: ( */
-                __( 'Your parentheses %1$s are imbalanced. Make sure there is a closing %2$s for every opening %3$s.' ),
-                '<code>()</code>',
-                '<code>)</code>',
-                '<code>(</code>'
-            ) );
-            $imbalanced = true;
-        }
-
-        // Ensure double quotes are equal.
-        if ( ! $this->validate_equal_characters( '"', $css ) ) {
-            $validity->add( 'unequal_double_quotes', sprintf(
-                /* translators: 1: " (double quote) */
-                __( 'Your double quotes %1$s are uneven. Make sure there is a closing %1$s for every opening %1$s.' ),
-                '<code>"</code>'
-            ) );
-            $imbalanced = true;
-        }
-
-        /*
-         * Make sure any code comments are closed properly.
-         *
-         * The first check could miss stray an unpaired comment closing figure, so if
-         * The number appears to be balanced, then check for equal numbers
-         * of opening/closing comment figures.
-         *
-         * Although it may initially appear redundant, we use the first method
-         * to give more specific feedback to the user.
-         */
-        $unclosed_comment_count = $this->validate_count_unclosed_comments( $css );
-        if ( 0 < $unclosed_comment_count ) {
-            $validity->add( 'unclosed_comment', sprintf(
-                /* translators: 1: number of unclosed comments, 2: *​/ */
-                _n(
-                    'There is %1$s unclosed code comment. Close each comment with %2$s.',
-                    'There are %1$s unclosed code comments. Close each comment with %2$s.',
-                    $unclosed_comment_count
-                ),
-                $unclosed_comment_count,
-                '<code>*/</code>'
-            ) );
-            $imbalanced = true;
-        } elseif ( ! $this->validate_balanced_characters( '/*', '*/', $css ) ) {
-            $validity->add( 'imbalanced_comments', sprintf(
-                /* translators: 1: *​/, 2: /​* */
-                __( 'There is an extra %1$s, indicating an end to a comment. Be sure that there is an opening %2$s for every closing %1$s.' ),
-                '<code>*/</code>',
-                '<code>/*</code>'
-            ) );
-            $imbalanced = true;
-        }
-        if ( $imbalanced && $this->is_possible_content_error( $css ) ) {
-            $validity->add( 'possible_false_positive', sprintf(
-                /* translators: %s: content: ""; */
-                __( 'Imbalanced/unclosed character errors can be caused by %s declarations. You may need to remove this or add it to a custom CSS file.' ),
-                '<code>content: "";</code>'
-            ) );
         }
 
@@ -286 +197 @@
         return $post_id;
     }
-
-    /**
-     * Ensure there are a balanced number of paired characters.
-     *
-     * This is used to check that the number of opening and closing
-     * characters is equal.
-     *
-     * For instance, there should be an equal number of braces ("{", "}")
-     * in the CSS.
-     *
-     * @since 4.7.0
-     *
-     * @param string $opening_char The opening character.
-     * @param string $closing_char The closing character.
-     * @param string $css The CSS input string.
-     *
-     * @return bool
-     */
-    private function validate_balanced_characters( $opening_char, $closing_char, $css ) {
-        return substr_count( $css, $opening_char ) === substr_count( $css, $closing_char );
-    }
-
-    /**
-     * Ensure there are an even number of paired characters.
-     *
-     * This is used to check that the number of a specific
-     * character is even.
-     *
-     * For instance, there should be an even number of double quotes
-     * in the CSS.
-     *
-     * @since 4.7.0
-     *
-     * @param string $char A character.
-     * @param string $css The CSS input string.
-     * @return bool Equality.
-     */
-    private function validate_equal_characters( $char, $css ) {
-        $char_count = substr_count( $css, $char );
-        return ( 0 === $char_count % 2 );
-    }
-
-    /**
-     * Count unclosed CSS Comments.
-     *
-     * Used during validation.
-     *
-     * @see self::validate()
-     *
-     * @since 4.7.0
-     *
-     * @param string $css The CSS input string.
-     * @return int Count.
-     */
-    private function validate_count_unclosed_comments( $css ) {
-        $count = 0;
-        $comments = explode( '/*', $css );
-
-        if ( ! is_array( $comments ) || ( 1 >= count( $comments ) ) ) {
-            return $count;
-        }
-
-        unset( $comments[0] ); // The first item is before the first comment.
-        foreach ( $comments as $comment ) {
-            if ( false === strpos( $comment, '*/' ) ) {
-                $count++;
-            }
-        }
-        return $count;
-    }
-
-    /**
-     * Find "content:" within a string.
-     *
-     * Imbalanced/Unclosed validation errors may be caused
-     * when a character is used in a "content:" declaration.
-     *
-     * This function is used to detect if this is a possible
-     * cause of the validation error, so that if it is,
-     * a notification may be added to the Validation Errors.
-     *
-     * Example:
-     * .element::before {
-     *   content: "(\"";
-     * }
-     * .element::after {
-     *   content: "\")";
-     * }
-     *
-     * Using ! empty() because strpos() may return non-boolean values
-     * that evaluate to false. This would be problematic when
-     * using a strict "false === strpos()" comparison.
-     *
-     * @since 4.7.0
-     *
-     * @param string $css The CSS input string.
-     * @return bool
-     */
-    private function is_possible_content_error( $css ) {
-        $found = preg_match( '/\bcontent\s*:/', $css );
-        if ( ! empty( $found ) ) {
-            return true;
-        }
-        return false;
-    }
 }

trunk/src/wp-includes/general-template.php

@@ -3117 +3117 @@
 
 /**
+ * Enqueue assets needed by the code editor for the given settings.
+ *
+ * @since 4.9.0
+ *
+ * @see wp_enqueue_editor()
+ * @see _WP_Editors::parse_settings()
+ * @param array $args {
+ *     Args.
+ *
+ *     @type string   $type     The MIME type of the file to be edited.
+ *     @type string   $file     Filename to be edited. Extension is used to sniff the type. Can be supplied as alternative to `$type` param.
+ *     @type array    $settings Settings to merge on top of defaults which derive from `$type` or `$file` args.
+ *     @type WP_Theme $theme    Theme being edited when on theme editor.
+ *     @type string   $plugin   Plugin being edited when on plugin editor.
+ * }
+ * @returns array|false Settings for the enqueued code editor, or false if the editor was not enqueued .
+ */
+function wp_enqueue_code_editor( $args ) {
+    if ( is_user_logged_in() && 'false' === wp_get_current_user()->syntax_highlighting ) {
+        return false;
+    }
+
+    $settings = array(
+        'codemirror' => array(
+            'indentUnit' => 4,
+            'indentWithTabs' => true,
+            'inputStyle' => 'contenteditable',
+            'lineNumbers' => true,
+            'lineWrapping' => true,
+            'styleActiveLine' => true,
+            'continueComments' => true,
+            'extraKeys' => array(
+                'Ctrl-Space' => 'autocomplete',
+                'Ctrl-/' => 'toggleComment',
+                'Cmd-/' => 'toggleComment',
+                'Alt-F' => 'findPersistent',
+            ),
+            'direction' => 'ltr', // Code is shown in LTR even in RTL languages.
+        ),
+        'csslint' => array(
+            'errors' => true, // Parsing errors.
+            'box-model' => true,
+            'display-property-grouping' => true,
+            'duplicate-properties' => true,
+            'known-properties' => true,
+            'outline-none' => true,
+        ),
+        'jshint' => array(
+            // The following are copied from <https://github.com/WordPress/wordpress-develop/blob/4.8.1/.jshintrc>.
+            'boss' => true,
+            'curly' => true,
+            'eqeqeq' => true,
+            'eqnull' => true,
+            'es3' => true,
+            'expr' => true,
+            'immed' => true,
+            'noarg' => true,
+            'nonbsp' => true,
+            'onevar' => true,
+            'quotmark' => 'single',
+            'trailing' => true,
+            'undef' => true,
+            'unused' => true,
+
+            'browser' => true,
+
+            'globals' => array(
+                '_' => false,
+                'Backbone' => false,
+                'jQuery' => false,
+                'JSON' => false,
+                'wp' => false,
+            ),
+        ),
+        'htmlhint' => array(
+            'tagname-lowercase' => true,
+            'attr-lowercase' => true,
+            'attr-value-double-quotes' => true,
+            'doctype-first' => false,
+            'tag-pair' => true,
+            'spec-char-escape' => true,
+            'id-unique' => true,
+            'src-not-empty' => true,
+            'attr-no-duplication' => true,
+            'alt-require' => true,
+            'space-tab-mixed-disabled' => 'tab',
+            'attr-unsafe-chars' => true,
+        ),
+    );
+
+    $type = '';
+    if ( isset( $args['type'] ) ) {
+        $type = $args['type'];
+
+        // Remap MIME types to ones that CodeMirror modes will recognize.
+        if ( 'application/x-patch' === $type || 'text/x-patch' === $type ) {
+            $type = 'text/x-diff';
+        }
+    } elseif ( isset( $args['file'] ) && false !== strpos( basename( $args['file'] ), '.' ) ) {
+        $extension = strtolower( pathinfo( $args['file'], PATHINFO_EXTENSION ) );
+        foreach ( wp_get_mime_types() as $exts => $mime ) {
+            if ( preg_match( '!^(' . $exts . ')$!i', $extension ) ) {
+                $type = $mime;
+                break;
+            }
+        }
+
+        // Supply any types that are not matched by wp_get_mime_types().
+        if ( empty( $type ) ) {
+            switch ( $extension ) {
+                case 'conf':
+                    $type = 'text/nginx';
+                    break;
+                case 'css':
+                    $type = 'text/css';
+                    break;
+                case 'diff':
+                case 'patch':
+                    $type = 'text/x-diff';
+                    break;
+                case 'html':
+                case 'htm':
+                    $type = 'text/html';
+                    break;
+                case 'http':
+                    $type = 'message/http';
+                    break;
+                case 'js':
+                    $type = 'text/javascript';
+                    break;
+                case 'json':
+                    $type = 'application/json';
+                    break;
+                case 'jsx':
+                    $type = 'text/jsx';
+                    break;
+                case 'less':
+                    $type = 'text/x-less';
+                    break;
+                case 'md':
+                    $type = 'text/x-gfm';
+                    break;
+                case 'php':
+                case 'phtml':
+                case 'php3':
+                case 'php4':
+                case 'php5':
+                case 'php7':
+                case 'phps':
+                    $type = 'application/x-httpd-php';
+                    break;
+                case 'scss':
+                    $type = 'text/x-scss';
+                    break;
+                case 'sass':
+                    $type = 'text/x-sass';
+                    break;
+                case 'sh':
+                case 'bash':
+                    $type = 'text/x-sh';
+                    break;
+                case 'sql':
+                    $type = 'text/x-sql';
+                    break;
+                case 'svg':
+                    $type = 'application/svg+xml';
+                    break;
+                case 'xml':
+                    $type = 'text/xml';
+                    break;
+                case 'yml':
+                case 'yaml':
+                    $type = 'text/x-yaml';
+                    break;
+                case 'txt':
+                default:
+                    $type = 'text/plain';
+                    break;
+            }
+        }
+    }
+
+    if ( 'text/css' === $type ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'css',
+            'lint' => true,
+            'autoCloseBrackets' => true,
+            'matchBrackets' => true,
+        ) );
+    } elseif ( 'text/x-scss' === $type || 'text/x-less' === $type || 'text/x-sass' === $type ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => $type,
+            'autoCloseBrackets' => true,
+            'matchBrackets' => true,
+        ) );
+    } elseif ( 'text/x-diff' === $type ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'diff',
+        ) );
+    } elseif ( 'text/html' === $type ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'htmlmixed',
+            'lint' => true,
+            'autoCloseBrackets' => true,
+            'autoCloseTags' => true,
+            'matchTags' => array(
+                'bothTags' => true,
+            ),
+        ) );
+
+        if ( ! current_user_can( 'unfiltered_html' ) ) {
+            $settings['htmlhint']['kses'] = wp_kses_allowed_html( 'post' );
+        }
+    } elseif ( 'text/x-gfm' === $type ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'gfm',
+            'highlightFormatting' => true,
+        ) );
+    } elseif ( 'application/javascript' === $type || 'text/javascript' === $type ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'javascript',
+            'lint' => true,
+            'autoCloseBrackets' => true,
+            'matchBrackets' => true,
+        ) );
+    } elseif ( false !== strpos( $type, 'json' ) ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => array(
+                'name' => 'javascript',
+            ),
+            'lint' => true,
+            'autoCloseBrackets' => true,
+            'matchBrackets' => true,
+        ) );
+        if ( 'application/ld+json' === $type ) {
+            $settings['codemirror']['mode']['jsonld'] = true;
+        } else {
+            $settings['codemirror']['mode']['json'] = true;
+        }
+    } elseif ( false !== strpos( $type, 'jsx' ) ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'jsx',
+            'autoCloseBrackets' => true,
+            'matchBrackets' => true,
+        ) );
+    } elseif ( 'text/x-markdown' === $type ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'markdown',
+            'highlightFormatting' => true,
+        ) );
+    } elseif ( 'text/nginx' === $type ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'nginx',
+        ) );
+    } elseif ( 'application/x-httpd-php' === $type ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'php',
+            'autoCloseBrackets' => true,
+            'autoCloseTags' => true,
+            'matchBrackets' => true,
+            'matchTags' => array(
+                'bothTags' => true,
+            ),
+        ) );
+    } elseif ( 'text/x-sql' === $type || 'text/x-mysql' === $type ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'sql',
+            'autoCloseBrackets' => true,
+            'matchBrackets' => true,
+        ) );
+    } elseif ( false !== strpos( $type, 'xml' ) ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'xml',
+            'autoCloseBrackets' => true,
+            'autoCloseTags' => true,
+            'matchTags' => array(
+                'bothTags' => true,
+            ),
+        ) );
+    } elseif ( 'text/x-yaml' === $type ) {
+        $settings['codemirror'] = array_merge( $settings['codemirror'], array(
+            'mode' => 'yaml',
+        ) );
+    } else {
+        $settings['codemirror']['mode'] = $type;
+    }
+
+    if ( ! empty( $settings['codemirror']['lint'] ) ) {
+        $settings['codemirror']['gutters'][] = 'CodeMirror-lint-markers';
+    }
+
+    // Let settings supplied via args override any defaults.
+    if ( isset( $args['settings'] ) ) {
+        foreach ( $args['settings'] as $key => $value ) {
+            $settings[ $key ] = array_merge(
+                $settings[ $key ],
+                $value
+            );
+        }
+    }
+
+    /**
+     * Filters settings that are passed into the code editor.
+     *
+     * Returning a falsey value will disable the syntax-highlighting code editor.
+     *
+     * @since 4.9.0
+     *
+     * @param array $settings The array of settings passed to the code editor. A falsey value disables the editor.
+     * @param array $args {
+     *     Args passed when calling `wp_enqueue_code_editor()`.
+     *
+     *     @type string   $type     The MIME type of the file to be edited.
+     *     @type string   $file     Filename being edited.
+     *     @type array    $settings Settings to merge on top of defaults which derive from `$type` or `$file` args.
+     *     @type WP_Theme $theme    Theme being edited when on theme editor.
+     *     @type string   $plugin   Plugin being edited when on plugin editor.
+     * }
+     */
+    $settings = apply_filters( 'wp_code_editor_settings', $settings, $args );
+
+    if ( empty( $settings ) || empty( $settings['codemirror'] ) ) {
+        return false;
+    }
+
+    wp_enqueue_script( 'code-editor' );
+    wp_enqueue_style( 'code-editor' );
+
+    wp_enqueue_script( 'codemirror' );
+    wp_enqueue_style( 'codemirror' );
+
+    if ( isset( $settings['codemirror']['mode'] ) ) {
+        $mode = $settings['codemirror']['mode'];
+        if ( is_string( $mode ) ) {
+            $mode = array(
+                'name' => $mode,
+            );
+        }
+
+        if ( ! empty( $settings['codemirror']['lint'] ) ) {
+            switch ( $mode['name'] ) {
+                case 'css':
+                case 'text/css':
+                case 'text/x-scss':
+                case 'text/x-less':
+                    wp_enqueue_script( 'csslint' );
+                    break;
+                case 'htmlmixed':
+                case 'text/html':
+                case 'php':
+                case 'application/x-httpd-php':
+                case 'text/x-php':
+                    wp_enqueue_script( 'htmlhint' );
+                    wp_enqueue_script( 'csslint' );
+                    wp_enqueue_script( 'jshint' );
+                    if ( ! current_user_can( 'unfiltered_html' ) ) {
+                        wp_enqueue_script( 'htmlhint-kses' );
+                    }
+                    break;
+                case 'javascript':
+                case 'application/ecmascript':
+                case 'application/json':
+                case 'application/javascript':
+                case 'application/ld+json':
+                case 'text/typescript':
+                case 'application/typescript':
+                    wp_enqueue_script( 'jshint' );
+                    wp_enqueue_script( 'jsonlint' );
+                    break;
+            }
+        }
+    }
+
+    wp_add_inline_script( 'code-editor', sprintf( 'jQuery.extend( wp.codeEditor.defaultSettings, %s );', wp_json_encode( $settings ) ) );
+
+    /**
+     * Fires when scripts and styles are enqueued for the code editor.
+     *
+     * @since 4.9.0
+     *
+     * @param array $settings Settings for the enqueued code editor.
+     */
+    do_action( 'wp_enqueue_code_editor', $settings );
+
+    return $settings;
+}
+
+/**
  * Retrieves the contents of the search WordPress query variable.
  *

trunk/src/wp-includes/script-loader.php

@@ -467 +467 @@
     );
 
+    $scripts->add( 'codemirror', '/wp-includes/js/codemirror/codemirror.min.js', array(), '5.29.1-alpha-ee20357' );
+    $scripts->add( 'csslint', '/wp-includes/js/codemirror/csslint.js', array(), '1.0.5' );
+    $scripts->add( 'jshint', '/wp-includes/js/codemirror/jshint.js', array(), '2.9.5' );
+    $scripts->add( 'jsonlint', '/wp-includes/js/codemirror/jsonlint.js', array(), '1.6.2' );
+    $scripts->add( 'htmlhint', '/wp-includes/js/codemirror/htmlhint.js', array(), '0.9.14-xwp' );
+    $scripts->add( 'htmlhint-kses', '/wp-includes/js/codemirror/htmlhint-kses.js', array( 'htmlhint' ) );
+    $scripts->add( 'code-editor', "/wp-admin/js/code-editor$suffix.js", array( 'jquery', 'codemirror' ) );
+    $scripts->add( 'wp-theme-plugin-editor', "/wp-admin/js/theme-plugin-editor$suffix.js", array( 'code-editor', 'jquery', 'jquery-ui-core', 'wp-a11y', 'underscore' ) );
+    did_action( 'init' ) && $scripts->add_inline_script( 'wp-theme-plugin-editor', sprintf( 'wp.themePluginEditor.l10n = %s;', wp_json_encode( 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' )
+    ) ) ) );
+
     $scripts->add( 'wp-playlist', "/wp-includes/js/mediaelement/wp-playlist$suffix.js", array( 'wp-util', 'backbone', 'mediaelement' ), false, 1 );
 
@@ -552 +566 @@
         // Used for overriding the file types allowed in plupload.
         'allowedFiles'       => __( 'Allowed Files' ),
+        'customCssError'     => 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' )
+        ),
     ) );
     $scripts->add( 'customize-selective-refresh', "/wp-includes/js/customize-selective-refresh$suffix.js", array( 'jquery', 'wp-util', 'customize-preview' ), false, 1 );
@@ -689 +708 @@
         $scripts->add( 'media-video-widget', "/wp-admin/js/widgets/media-video-widget$suffix.js", array( 'media-widgets', 'media-audiovideo', 'wp-api-request' ) );
         $scripts->add( 'text-widgets', "/wp-admin/js/widgets/text-widgets$suffix.js", array( 'jquery', 'backbone', 'editor', 'wp-util', 'wp-a11y' ) );
-        $scripts->add_inline_script( 'text-widgets', 'wp.textWidgets.init();', 'after' );
+        $scripts->add( 'custom-html-widgets', "/wp-admin/js/widgets/custom-html-widgets$suffix.js", array( 'code-editor', 'jquery', 'backbone', 'wp-util', 'jquery-ui-core', 'wp-a11y' ) );
 
         $scripts->add( 'theme', "/wp-admin/js/theme$suffix.js", array( 'wp-backbone', 'wp-a11y' ), false, 1 );
@@ -930 +949 @@
     $styles->add( 'site-icon',           "/wp-admin/css/site-icon$suffix.css" );
     $styles->add( 'l10n',                "/wp-admin/css/l10n$suffix.css" );
+    $styles->add( 'code-editor',         "/wp-admin/css/code-editor$suffix.css", array( 'codemirror' ) );
 
     $styles->add( 'wp-admin', false, array( 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus', 'widgets', 'site-icon', 'l10n' ) );
@@ -964 +984 @@
     $styles->add( 'wp-mediaelement',     "/wp-includes/js/mediaelement/wp-mediaelement$suffix.css", array( 'mediaelement' ) );
     $styles->add( 'thickbox',            '/wp-includes/js/thickbox/thickbox.css', array( 'dashicons' ) );
+    $styles->add( 'codemirror',          '/wp-includes/js/codemirror/codemirror.min.css', array(), '5.29.1-alpha-ee20357' );
 
     // Deprecated CSS

trunk/src/wp-includes/user.php

@@ -1377 +1377 @@
  *
  * Most of the `$userdata` array fields have filters associated with the values. Exceptions are
- * 'ID', 'rich_editing', 'comment_shortcuts', 'admin_color', 'use_ssl',
+ * 'ID', 'rich_editing', 'syntax_highlighting', 'comment_shortcuts', 'admin_color', 'use_ssl',
  * 'user_registered', and 'role'. The filters have the prefix 'pre_user_' followed by the field
  * name. An example using 'description' would have the filter called, 'pre_user_description' that
@@ -1411 +1411 @@
  *     @type string|bool $rich_editing         Whether to enable the rich-editor for the user.
  *                                             False if not empty.
+ *     @type string|bool $syntax_highlighting  Whether to enable the rich code editor for the user.
+ *                                             False if not empty.
  *     @type string|bool $comment_shortcuts    Whether to enable comment moderation keyboard
  *                                             shortcuts for the user. Default false.
@@ -1623 +1625 @@
 
     $meta['rich_editing'] = empty( $userdata['rich_editing'] ) ? 'true' : $userdata['rich_editing'];
+
+    $meta['syntax_highlighting'] = empty( $userdata['syntax_highlighting'] ) ? 'true' : $userdata['syntax_highlighting'];
 
     $meta['comment_shortcuts'] = empty( $userdata['comment_shortcuts'] ) || 'false' === $userdata['comment_shortcuts'] ? 'false' : 'true';
@@ -1710 +1714 @@
      *     @type string   $description          The user's description.
      *     @type bool     $rich_editing         Whether to enable the rich-editor for the user. False if not empty.
+     *     @type bool     $syntax_highlighting  Whether to enable the rich code editor for the user. False if not empty.
      *     @type bool     $comment_shortcuts    Whether to enable keyboard shortcuts for the user. Default false.
      *     @type string   $admin_color          The color scheme for a user's admin screen. Default 'fresh'.
@@ -2036 +2041 @@
  */
 function _get_additional_user_keys( $user ) {
-    $keys = array( 'first_name', 'last_name', 'nickname', 'description', 'rich_editing', 'comment_shortcuts', 'admin_color', 'use_ssl', 'show_admin_bar_front', 'locale' );
+    $keys = array( 'first_name', 'last_name', 'nickname', 'description', 'rich_editing', 'syntax_highlighting', 'comment_shortcuts', 'admin_color', 'use_ssl', 'show_admin_bar_front', 'locale' );
     return array_merge( $keys, array_keys( wp_get_user_contact_methods( $user ) ) );
 }

trunk/src/wp-includes/widgets/class-wp-widget-custom-html.php

@@ -18 +18 @@
 
     /**
+     * Whether or not the widget has been registered yet.
+     *
+     * @since 4.9.0
+     * @var bool
+     */
+    protected $registered = false;
+
+    /**
      * Default instance.
      *
@@ -44 +52 @@
         );
         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' ) );
     }
 
@@ -119 +154 @@
 
     /**
+     * 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
@@ -129 +194 @@
         $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>
+        <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; ?>
-        <?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,
+        ) );
+    }
 }

trunk/src/wp-includes/widgets/class-wp-widget-text.php

@@ -354 +354 @@
         wp_enqueue_editor();
         wp_enqueue_script( 'text-widgets' );
+        wp_add_inline_script( 'text-widgets', 'wp.textWidgets.init();', 'after' );
     }
 

trunk/tests/phpunit/tests/customize/custom-css-setting.php

@@ -356 +356 @@
         $this->assertTrue( $result );
 
-        // Check for Unclosed Comment.
-        $unclosed_comment = $basic_css . ' /* This is a comment. ';
+        // Check for markup.
+        $unclosed_comment = $basic_css . '</style>';
         $result = $this->setting->validate( $unclosed_comment );
-        $this->assertTrue( array_key_exists( 'unclosed_comment', $result->errors ) );
-
-        // Check for Unopened Comment.
-        $unclosed_comment = $basic_css . ' This is a comment.*/';
-        $result = $this->setting->validate( $unclosed_comment );
-        $this->assertTrue( array_key_exists( 'imbalanced_comments', $result->errors ) );
-
-        // Check for Unclosed Curly Brackets.
-        $unclosed_curly_bracket = $basic_css . '  a.link { text-decoration: none;';
-        $result = $this->setting->validate( $unclosed_curly_bracket );
-        $this->assertTrue( array_key_exists( 'imbalanced_curly_brackets', $result->errors ) );
-
-        // Check for Unopened Curly Brackets.
-        $unopened_curly_bracket = $basic_css . '  a.link text-decoration: none; }';
-        $result = $this->setting->validate( $unopened_curly_bracket );
-        $this->assertTrue( array_key_exists( 'imbalanced_curly_brackets', $result->errors ) );
-
-        // Check for Unclosed Braces.
-        $unclosed_brace = $basic_css . '  input[type="text" { color: #f00; } ';
-        $result = $this->setting->validate( $unclosed_brace );
-        $this->assertTrue( array_key_exists( 'imbalanced_braces', $result->errors ) );
-
-        // Check for Unopened Braces.
-        $unopened_brace = $basic_css . ' inputtype="text"] { color: #f00; } ';
-        $result = $this->setting->validate( $unopened_brace );
-        $this->assertTrue( array_key_exists( 'imbalanced_braces', $result->errors ) );
-
-        // Check for Imbalanced Double Quotes.
-        $imbalanced_double_quotes = $basic_css . ' div.background-image { background-image: url( "image.jpg ); } ';
-        $result = $this->setting->validate( $imbalanced_double_quotes );
-        $this->assertTrue( array_key_exists( 'unequal_double_quotes', $result->errors ) );
-
-        // Check for Unclosed Parentheses.
-        $unclosed_parentheses = $basic_css . ' div.background-image { background-image: url( "image.jpg" ; } ';
-        $result = $this->setting->validate( $unclosed_parentheses );
-        $this->assertTrue( array_key_exists( 'imbalanced_parentheses', $result->errors ) );
-
-        // Check for Unopened Parentheses.
-        $unopened_parentheses = $basic_css . ' div.background-image { background-image: url "image.jpg" ); } ';
-        $result = $this->setting->validate( $unopened_parentheses );
-        $this->assertTrue( array_key_exists( 'imbalanced_parentheses', $result->errors ) );
-
-        // A basic Content declaration with no other errors should not throw an error.
-        $content_declaration = $basic_css . ' a:before { content: ""; display: block; }';
-        $result = $this->setting->validate( $content_declaration );
-        $this->assertTrue( $result );
-
-        // An error, along with a Content declaration will throw two errors.
-        // In this case, we're using an extra opening brace.
-        $content_declaration = $basic_css . ' a:before { content: "["; display: block; }';
-        $result = $this->setting->validate( $content_declaration );
-        $this->assertTrue( array_key_exists( 'imbalanced_braces', $result->errors ) );
-        $this->assertTrue( array_key_exists( 'possible_false_positive', $result->errors ) );
-
-        $css = 'body { background: #f00; } h1.site-title { font-size: 36px; } a:hover { text-decoration: none; } input[type="text"] { padding: 1em; } /* This is a comment */';
-        $this->assertTrue( $this->setting->validate( $css ) );
-
-        $validity = $this->setting->validate( $css . ' /* This is another comment.' );
-        $this->assertInstanceOf( 'WP_Error', $validity );
-        $this->assertContains( 'unclosed code comment', join( ' ', $validity->get_error_messages() ) );
-
-        $css = '/* This is comment one. */  /* This is comment two. */';
-        $this->assertTrue( $this->setting->validate( $css ) );
-
-        $basic_css = 'body { background: #f00; } h1.site-title { font-size: 36px; } a:hover { text-decoration: none; } input[type="text"] { padding: 1em; }';
-        $this->assertTrue( $this->setting->validate( $basic_css ) );
-
-        $css = $basic_css . ' .link:before { content: "*"; display: block; }';
-        $this->assertTrue( $this->setting->validate( $css ) );
-
-        $css .= ' ( trailing';
-        $validity = $this->setting->validate( $css );
-        $this->assertWPError( $validity );
-        $this->assertNotEmpty( $result->get_error_message( 'possible_false_positive' ) );
+        $this->assertTrue( array_key_exists( 'illegal_markup', $result->errors ) );
     }
 }

trunk/tests/phpunit/tests/customize/manager.php

@@ -2352 +2352 @@
         $this->assertNotEmpty( $data );
 
-        $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts' ), array_keys( $data ) );
+        $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'customCss', 'changeset', 'timeouts' ), array_keys( $data ) );
         $this->assertEquals( $autofocus, $data['autofocus'] );
         $this->assertArrayHasKey( 'save', $data['nonce'] );

trunk/tests/phpunit/tests/user.php

@@ -359 +359 @@
         $user_data = array(
             'ID' => self::$author_id, 'use_ssl' => 1, 'show_admin_bar_front' => 1,
-            'rich_editing' => 1, 'first_name' => 'first', 'last_name' => 'last',
+            'rich_editing' => 1, 'syntax_highlighting' => 1, 'first_name' => 'first', 'last_name' => 'last',
             'nickname' => 'nick', 'comment_shortcuts' => 'true', 'admin_color' => 'classic',
             'description' => 'describe'