WordPress.org

Make WordPress Core


Ignore:
Timestamp:
09/13/17 06:07:48 (5 weeks 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-admin/plugin-editor.php

    r38745 r41376  
    116116 
    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    ); 
    119152 
    120153    /** 
     
    157190        '<p>' . __('<a href="https://wordpress.org/support/">Support Forums</a>') . '</p>' 
    158191    ); 
     192 
     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    } 
    159198 
    160199    require_once(ABSPATH . 'wp-admin/admin-header.php'); 
Note: See TracChangeset for help on using the changeset viewer.