Make WordPress Core

09/13/2017 06:07:48 AM (10 months ago)

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.

1 edited


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

    r38745 r41376  
    117117    // List of allowable extensions
    118     $editable_extensions = array('php', 'txt', 'text', 'js', 'css', 'html', 'htm', 'xml', 'inc', 'include');
     118    $editable_extensions = array(
     119        'bash',
     120        'conf',
     121        'css',
     122        'diff',
     123        'htm',
     124        'html',
     125        'http',
     126        'inc',
     127        'include',
     128        'js',
     129        'json',
     130        'jsx',
     131        'less',
     132        'md',
     133        'patch',
     134        'php',
     135        'php3',
     136        'php4',
     137        'php5',
     138        'php7',
     139        'phps',
     140        'phtml',
     141        'sass',
     142        'scss',
     143        'sh',
     144        'sql',
     145        'svg',
     146        'text',
     147        'txt',
     148        'xml',
     149        'yaml',
     150        'yml',
     151    );
    120153    /**
    157190        '<p>' . __('<a href="https://wordpress.org/support/">Support Forums</a>') . '</p>'
    158191    );
     193    $settings = wp_enqueue_code_editor( array( 'file' => $real_file ) );
     194    if ( ! empty( $settings ) ) {
     195        wp_enqueue_script( 'wp-theme-plugin-editor' );
     196        wp_add_inline_script( 'wp-theme-plugin-editor', sprintf( 'jQuery( function() { wp.themePluginEditor.init( %s ); } )', wp_json_encode( $settings ) ) );
     197    }
    160199    require_once(ABSPATH . 'wp-admin/admin-header.php');
Note: See TracChangeset for help on using the changeset viewer.