<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[41558] trunk: Customize: Introduce extensible code editor Customizer control for CodeMirror.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/41558">41558</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/41558","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>westonruter</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2017-09-21 23:03:06 +0000 (Thu, 21 Sep 2017)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Customize: Introduce extensible code editor Customizer control for CodeMirror.
* Adds `WP_Customize_Code_Editor_Control` and `wp.customize.CodeEditorControl()`.
* Control respects user preference for syntax highlighting, showing a textarea when user opts out.
* Code editor control takes the ad hoc code for Additional CSS and makes it reusable and extensible, for Additional CSS in core and plugins to use (such as Jetpack).
* Replace `settings` arg in `wp_enqueue_code_editor()` with separate args for `codemirror`, `csslint`, `jshint`, and `htmlhint`.
* Prefix `codemirror` script and style handles with `wp-` to prevent collisions, as also the object is exported as `wp.CodeMirror` in JS.
* Reduce indent size in Customizer code editor instances and Custom HTML widget to use tab size of 2 instead of 4 to save on space.
See <a href="https://core.trac.wordpress.org/ticket/12423">#12423</a>, <a href="https://core.trac.wordpress.org/ticket/38707">#38707</a>, <a href="https://core.trac.wordpress.org/ticket/35395">#35395</a>.
Fixes <a href="https://core.trac.wordpress.org/ticket/41897">#41897</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadmincsscustomizecontrolscss">trunk/src/wp-admin/css/customize-controls.css</a></li>
<li><a href="#trunksrcwpadminjscustomizecontrolsjs">trunk/src/wp-admin/js/customize-controls.js</a></li>
<li><a href="#trunksrcwpincludesclasswpcustomizemanagerphp">trunk/src/wp-includes/class-wp-customize-manager.php</a></li>
<li><a href="#trunksrcwpincludesgeneraltemplatephp">trunk/src/wp-includes/general-template.php</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
<li><a href="#trunksrcwpincludeswidgetsclasswpwidgetcustomhtmlphp">trunk/src/wp-includes/widgets/class-wp-widget-custom-html.php</a></li>
<li><a href="#trunktestsphpunittestscustomizemanagerphp">trunk/tests/phpunit/tests/customize/manager.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpincludescustomizeclasswpcustomizecodeeditorcontrolphp">trunk/src/wp-includes/customize/class-wp-customize-code-editor-control.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadmincsscustomizecontrolscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/css/customize-controls.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/css/customize-controls.css 2017-09-21 22:44:38 UTC (rev 41557)
+++ trunk/src/wp-admin/css/customize-controls.css 2017-09-21 23:03:06 UTC (rev 41558)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1164,12 +1164,26 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Custom CSS Section
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Code Editor Control and Custom CSS Section
</ins><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * Modifications to the Section Container to make the textarea full-width and
</span><span class="cx" style="display: block; padding: 0 10px"> * full-height, if the control is the only control in the section.
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.customize-control-code_editor textarea {
+ width: 100%;
+ font-family: Consolas, Monaco, monospace;
+ font-size: 12px;
+ padding: 6px 8px;
+ -moz-tab-size: 2;
+ -o-tab-size: 2;
+ tab-size: 2;
+}
+.customize-control-code_editor textarea,
+.customize-control-code_editor .CodeMirror {
+ height: 14em;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> #customize-controls .customize-section-description-container.section-meta.customize-info {
</span><span class="cx" style="display: block; padding: 0 10px"> border-bottom: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1180,13 +1194,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> #customize-control-custom_css textarea {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- font-family: Consolas, Monaco, monospace;
- font-size: 12px;
- padding: 6px 8px;
</del><span class="cx" style="display: block; padding: 0 10px"> height: 500px;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- -moz-tab-size: 4;
- -o-tab-size: 4;
- tab-size: 4;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .customize-section-description-container + #customize-control-custom_css:last-child textarea {
</span></span></pre></div>
<a id="trunksrcwpadminjscustomizecontrolsjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/customize-controls.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/customize-controls.js 2017-09-21 22:44:38 UTC (rev 41557)
+++ trunk/src/wp-admin/js/customize-controls.js 2017-09-21 23:03:06 UTC (rev 41558)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3677,6 +3677,250 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /**
+ * Class wp.customize.CodeEditorControl
+ *
+ * @since 4.9.0
+ *
+ * @constructor
+ * @augments wp.customize.Control
+ * @augments wp.customize.Class
+ */
+ api.CodeEditorControl = api.Control.extend({
+
+ /**
+ * Initialize the editor when the containing section is ready and expanded.
+ *
+ * @since 4.9.0
+ * @returns {void}
+ */
+ ready: function() {
+ var control = this;
+ if ( ! control.section() ) {
+ control.initEditor();
+ return;
+ }
+
+ // Wait to initialize editor until section is embedded and expanded.
+ api.section( control.section(), function( section ) {
+ section.deferred.embedded.done( function() {
+ var onceExpanded;
+ if ( section.expanded() ) {
+ control.initEditor();
+ } else {
+ onceExpanded = function( isExpanded ) {
+ if ( isExpanded ) {
+ control.initEditor();
+ section.expanded.unbind( onceExpanded );
+ }
+ };
+ section.expanded.bind( onceExpanded );
+ }
+ } );
+ } );
+ },
+
+ /**
+ * Initialize editor.
+ *
+ * @since 4.9.0
+ * @returns {void}
+ */
+ initEditor: function() {
+ var control = this, element;
+
+ element = new api.Element( control.container.find( 'textarea' ) );
+ control.elements.push( element );
+ element.sync( control.setting );
+ element.set( control.setting() );
+
+ if ( control.params.editor_settings ) {
+ control.initSyntaxHighlightingEditor( control.params.editor_settings );
+ } else {
+ control.initPlainTextareaEditor();
+ }
+ },
+
+ /**
+ * Make sure editor gets focused when control is focused.
+ *
+ * @since 4.9.0
+ * @param {Object} [params] - Focus params.
+ * @param {Function} [params.completeCallback] - Function to call when expansion is complete.
+ * @returns {void}
+ */
+ focus: function( params ) {
+ var control = this, extendedParams = _.extend( {}, params ), originalCompleteCallback;
+ originalCompleteCallback = extendedParams.completeCallback;
+ extendedParams.completeCallback = function() {
+ if ( originalCompleteCallback ) {
+ originalCompleteCallback();
+ }
+ if ( control.editor ) {
+ control.editor.codemirror.focus();
+ }
+ };
+ api.Control.prototype.focus.call( control, extendedParams );
+ },
+
+ /**
+ * Initialize syntax-highlighting editor.
+ *
+ * @since 4.9.0
+ * @param {object} codeEditorSettings - Code editor settings.
+ * @returns {void}
+ */
+ initSyntaxHighlightingEditor: function( codeEditorSettings ) {
+ var control = this, $textarea = control.container.find( 'textarea' ), settings, suspendEditorUpdate = false;
+
+ settings = _.extend( {}, codeEditorSettings, {
+ onTabNext: _.bind( control.onTabNext, control ),
+ onTabPrevious: _.bind( control.onTabPrevious, control ),
+ onUpdateErrorNotice: _.bind( control.onUpdateErrorNotice, control )
+ });
+
+ 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();
+ }
+ });
+ },
+
+ /**
+ * Handle tabbing to the field after the editor.
+ *
+ * @since 4.9.0
+ * @returns {void}
+ */
+ onTabNext: function onTabNext() {
+ var control = this, controls, controlIndex, section;
+ section = api.section( control.section() );
+ 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.
+ *
+ * @since 4.9.0
+ * @returns {void}
+ */
+ onTabPrevious: function onTabPrevious() {
+ var control = this, controls, controlIndex, section;
+ section = api.section( control.section() );
+ 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.
+ *
+ * @since 4.9.0
+ * @param {Array} errorAnnotations - Error annotations.
+ * @returns {void}
+ */
+ onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
+ var control = this, 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'
+ } ) );
+ }
+ },
+
+ /**
+ * Initialize plain-textarea editor when syntax highlighting is disabled.
+ *
+ * @since 4.9.0
+ * @returns {void}
+ */
+ initPlainTextareaEditor: function() {
+ var control = this, $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();
+ });
+ }
+ });
+
</ins><span class="cx" style="display: block; padding: 0 10px"> // Change objects contained within the main customize object to Settings.
</span><span class="cx" style="display: block; padding: 0 10px"> api.defaultConstructor = api.Setting;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4372,7 +4616,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> header: api.HeaderControl,
</span><span class="cx" style="display: block; padding: 0 10px"> background: api.BackgroundControl,
</span><span class="cx" style="display: block; padding: 0 10px"> background_position: api.BackgroundPositionControl,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- theme: api.ThemeControl
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ theme: api.ThemeControl,
+ code_editor: api.CodeEditorControl
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px"> api.panelConstructor = {};
</span><span class="cx" style="display: block; padding: 0 10px"> api.sectionConstructor = {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5712,7 +5957,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Add code editor for Custom CSS.
</span><span class="cx" style="display: block; padding: 0 10px"> (function() {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- var ready, sectionReady = $.Deferred(), controlReady = $.Deferred();
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ var sectionReady = $.Deferred();
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> api.section( 'custom_css', function( section ) {
</span><span class="cx" style="display: block; padding: 0 10px"> section.deferred.embedded.done( function() {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5727,16 +5972,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- api.control( 'custom_css', function( control ) {
- control.deferred.embedded.done( function() {
- controlReady.resolve( control );
- });
- });
</del><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ready = $.when( sectionReady, controlReady );
-
</del><span class="cx" style="display: block; padding: 0 10px"> // Set up the section desription behaviors.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- ready.done( function setupSectionDescription( section, control ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ sectionReady.done( function setupSectionDescription( section ) {
+ var control = api.control( 'custom_css' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Close the section description when clicking the close button.
</span><span class="cx" style="display: block; padding: 0 10px"> section.container.find( '.section-description-buttons .section-description-close' ).on( 'click', function() {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5747,174 +5986,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Reveal help text if setting is empty.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( ! control.setting.get() ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( control && ! control.setting.get() ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> section.container.find( '.section-meta .customize-section-description:first' )
</span><span class="cx" style="display: block; padding: 0 10px"> .addClass( 'open' )
</span><span class="cx" style="display: block; padding: 0 10px"> .show()
</span><span class="cx" style="display: block; padding: 0 10px"> .attr( 'aria-expanded', 'true' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- // 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'
- } ) );
- }
- }
- });
-
- 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();
- });
- });
- }
</del><span class="cx" style="display: block; padding: 0 10px"> })();
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Toggle visibility of Header Video notice when active state change.
</span></span></pre></div>
<a id="trunksrcwpincludesclasswpcustomizemanagerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/class-wp-customize-manager.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/class-wp-customize-manager.php 2017-09-21 22:44:38 UTC (rev 41557)
+++ trunk/src/wp-includes/class-wp-customize-manager.php 2017-09-21 23:03:06 UTC (rev 41558)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -213,21 +213,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> private $_changeset_data;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * 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;
-
- /**
</del><span class="cx" style="display: block; padding: 0 10px"> * Constructor.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 3.4.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -291,6 +276,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-icon-control.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-control.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-theme-control.php' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ require_once( ABSPATH . WPINC . '/customize/class-wp-customize-code-editor-control.php' );
</ins><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-widget-area-customize-control.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-widget-form-customize-control.php' );
</span><span class="cx" style="display: block; padding: 0 10px"> require_once( ABSPATH . WPINC . '/customize/class-wp-customize-nav-menu-control.php' );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3337,12 +3323,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> foreach ( $this->controls as $control ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $control->enqueue();
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-
- 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',
- ) );
- }
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3600,9 +3580,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'stylesheet' => $this->get_stylesheet(),
</span><span class="cx" style="display: block; padding: 0 10px"> 'active' => $this->is_theme_active(),
</span><span class="cx" style="display: block; padding: 0 10px"> ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'customCss' => array(
- 'codeEditor' => $this->_custom_css_code_editor_settings,
- ),
</del><span class="cx" style="display: block; padding: 0 10px"> 'url' => array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'preview' => esc_url_raw( $this->get_preview_url() ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'parent' => esc_url_raw( admin_url() ),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3736,6 +3713,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Cropped_Image_Control' );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->register_control_type( 'WP_Customize_Theme_Control' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->register_control_type( 'WP_Customize_Code_Editor_Control' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Themes */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4239,14 +4217,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->add_setting( $custom_css_setting );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $this->add_control( 'custom_css', array(
- 'type' => 'textarea',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->add_control( new WP_Customize_Code_Editor_Control( $this, 'custom_css', array(
</ins><span class="cx" style="display: block; padding: 0 10px"> 'section' => 'custom_css',
</span><span class="cx" style="display: block; padding: 0 10px"> 'settings' => array( 'default' => $custom_css_setting->id ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'input_attrs' => array(
- 'class' => 'code', // Ensures contents displayed as LTR instead of RTL.
- ),
- ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'code_type' => 'text/css',
+ ) ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span></span></pre></div>
<a id="trunksrcwpincludescustomizeclasswpcustomizecodeeditorcontrolphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-includes/customize/class-wp-customize-code-editor-control.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/customize/class-wp-customize-code-editor-control.php (rev 0)
+++ trunk/src/wp-includes/customize/class-wp-customize-code-editor-control.php 2017-09-21 23:03:06 UTC (rev 41558)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,104 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Customize API: WP_Customize_Code_Editor_Control class
+ *
+ * @package WordPress
+ * @subpackage Customize
+ * @since 4.9.0
+ */
+
+/**
+ * Customize Code Editor Control class.
+ *
+ * @since 4.9.0
+ *
+ * @see WP_Customize_Control
+ */
+class WP_Customize_Code_Editor_Control extends WP_Customize_Control {
+
+ /**
+ * Customize control type.
+ *
+ * @since 4.9.0
+ * @var string
+ */
+ public $type = 'code_editor';
+
+ /**
+ * Type of code that is being edited.
+ *
+ * @since 4.9.0
+ * @var string
+ */
+ public $code_type = '';
+
+ /**
+ * Code editor settings.
+ *
+ * @see wp_enqueue_code_editor()
+ * @since 4.9.0
+ * @var array|false
+ */
+ public $editor_settings = array();
+
+ /**
+ * Enqueue control related scripts/styles.
+ *
+ * @since 4.9.0
+ */
+ public function enqueue() {
+ $this->editor_settings = wp_enqueue_code_editor( array_merge(
+ array(
+ 'type' => $this->code_type,
+ 'codemirror' => array(
+ 'indentUnit' => 2,
+ 'tabSize' => 2,
+ ),
+ ),
+ $this->editor_settings
+ ) );
+ }
+
+ /**
+ * Refresh the parameters passed to the JavaScript via JSON.
+ *
+ * @since 4.9.0
+ * @see WP_Customize_Control::json()
+ *
+ * @return array Array of parameters passed to the JavaScript.
+ */
+ public function json() {
+ $json = parent::json();
+ $json['code_type'] = $this->code_type;
+ $json['editor_settings'] = $this->editor_settings;
+ return $json;
+ }
+
+ /**
+ * Don't render the control content from PHP, as it's rendered via JS on load.
+ *
+ * @since 4.9.0
+ */
+ public function render_content() {}
+
+ /**
+ * Render a JS template for control display.
+ *
+ * @since 4.9.0
+ */
+ public function content_template() {
+ ?>
+ <# var elementIdPrefix = 'el' + String( Math.random() ); #>
+ <# if ( data.label ) { #>
+ <label for="{{ elementIdPrefix }}_editor">
+ <span class="customize-control-title">{{ data.label }}</span>
+ </label>
+ <# } #>
+ <# if ( data.description ) { #>
+ <span class="description customize-control-description">{{{ data.description }}}</span>
+ <# } #>
+ <div class="customize-control-notifications-container"></div>
+ <textarea id="{{ elementIdPrefix }}_editor" class="code"></textarea>
+ <?php
+ }
+}
</ins></span></pre></div>
<a id="trunksrcwpincludesgeneraltemplatephp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/general-template.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/general-template.php 2017-09-21 22:44:38 UTC (rev 41557)
+++ trunk/src/wp-includes/general-template.php 2017-09-21 23:03:06 UTC (rev 41558)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3125,11 +3125,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $args {
</span><span class="cx" style="display: block; padding: 0 10px"> * Args.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @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.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @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 WP_Theme $theme Theme being edited when on theme editor.
+ * @type string $plugin Plugin being edited when on plugin editor.
+ * @type array $codemirror Additional CodeMirror setting overrides.
+ * @type array $csslint CSSLint rule overrides.
+ * @type array $jshint JSHint rule overrides.
+ * @type array $htmlhint JSHint rule overrides.
</ins><span class="cx" style="display: block; padding: 0 10px"> * }
</span><span class="cx" style="display: block; padding: 0 10px"> * @returns array|false Settings for the enqueued code editor, or false if the editor was not enqueued .
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3408,13 +3411,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Let settings supplied via args override any defaults.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( isset( $args['settings'] ) ) {
- foreach ( $args['settings'] as $key => $value ) {
- $settings[ $key ] = array_merge(
- $settings[ $key ],
- $value
- );
- }
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ foreach ( wp_array_slice_assoc( $args, array( 'codemirror', 'csslint', 'jshint', 'htmlhint' ) ) as $key => $value ) {
+ $settings[ $key ] = array_merge(
+ $settings[ $key ],
+ $value
+ );
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3428,11 +3429,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @param array $args {
</span><span class="cx" style="display: block; padding: 0 10px"> * Args passed when calling `wp_enqueue_code_editor()`.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * @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.
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * @type string $type The MIME type of the file to be edited.
+ * @type string $file Filename being edited.
+ * @type WP_Theme $theme Theme being edited when on theme editor.
+ * @type string $plugin Plugin being edited when on plugin editor.
+ * @type array $codemirror Additional CodeMirror setting overrides.
+ * @type array $csslint CSSLint rule overrides.
+ * @type array $jshint JSHint rule overrides.
+ * @type array $htmlhint JSHint rule overrides.
</ins><span class="cx" style="display: block; padding: 0 10px"> * }
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> $settings = apply_filters( 'wp_code_editor_settings', $settings, $args );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3444,9 +3448,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> wp_enqueue_script( 'code-editor' );
</span><span class="cx" style="display: block; padding: 0 10px"> wp_enqueue_style( 'code-editor' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wp_enqueue_script( 'codemirror' );
- wp_enqueue_style( 'codemirror' );
-
</del><span class="cx" style="display: block; padding: 0 10px"> if ( isset( $settings['codemirror']['mode'] ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> $mode = $settings['codemirror']['mode'];
</span><span class="cx" style="display: block; padding: 0 10px"> if ( is_string( $mode ) ) {
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php 2017-09-21 22:44:38 UTC (rev 41557)
+++ trunk/src/wp-includes/script-loader.php 2017-09-21 23:03:06 UTC (rev 41558)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -463,13 +463,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> apply_filters( 'mejs_settings', $mejs_settings )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $scripts->add( 'codemirror', '/wp-includes/js/codemirror/codemirror.min.js', array(), '5.29.1-alpha-ee20357' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $scripts->add( 'wp-codemirror', '/wp-includes/js/codemirror/codemirror.min.js', array(), '5.29.1-alpha-ee20357' );
</ins><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'csslint', '/wp-includes/js/codemirror/csslint.js', array(), '1.0.5' );
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'jshint', '/wp-includes/js/codemirror/jshint.js', array(), '2.9.5' );
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'jsonlint', '/wp-includes/js/codemirror/jsonlint.js', array(), '1.6.2' );
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'htmlhint', '/wp-includes/js/codemirror/htmlhint.js', array(), '0.9.14-xwp' );
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'htmlhint-kses', '/wp-includes/js/codemirror/htmlhint-kses.js', array( 'htmlhint' ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $scripts->add( 'code-editor', "/wp-admin/js/code-editor$suffix.js", array( 'jquery', 'codemirror' ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $scripts->add( 'code-editor', "/wp-admin/js/code-editor$suffix.js", array( 'jquery', 'wp-codemirror' ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'wp-theme-plugin-editor', "/wp-admin/js/theme-plugin-editor$suffix.js", array( 'code-editor', 'jquery', 'jquery-ui-core', 'wp-a11y', 'underscore' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> did_action( 'init' ) && $scripts->add_inline_script( 'wp-theme-plugin-editor', sprintf( 'wp.themePluginEditor.l10n = %s;', wp_json_encode( wp_array_slice_assoc(
</span><span class="cx" style="display: block; padding: 0 10px"> /* translators: placeholder is error count */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -952,7 +952,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $styles->add( 'widgets', "/wp-admin/css/widgets$suffix.css", array( 'wp-pointer' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $styles->add( 'site-icon', "/wp-admin/css/site-icon$suffix.css" );
</span><span class="cx" style="display: block; padding: 0 10px"> $styles->add( 'l10n', "/wp-admin/css/l10n$suffix.css" );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $styles->add( 'code-editor', "/wp-admin/css/code-editor$suffix.css", array( 'codemirror' ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $styles->add( 'code-editor', "/wp-admin/css/code-editor$suffix.css", array( 'wp-codemirror' ) );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $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' ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -987,7 +987,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $styles->add( 'mediaelement', "/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css", array(), '4.2.5-74e01a40' );
</span><span class="cx" style="display: block; padding: 0 10px"> $styles->add( 'wp-mediaelement', "/wp-includes/js/mediaelement/wp-mediaelement$suffix.css", array( 'mediaelement' ) );
</span><span class="cx" style="display: block; padding: 0 10px"> $styles->add( 'thickbox', '/wp-includes/js/thickbox/thickbox.css', array( 'dashicons' ) );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $styles->add( 'codemirror', '/wp-includes/js/codemirror/codemirror.min.css', array(), '5.29.1-alpha-ee20357' );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $styles->add( 'wp-codemirror', '/wp-includes/js/codemirror/codemirror.min.css', array(), '5.29.1-alpha-ee20357' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Deprecated CSS
</span><span class="cx" style="display: block; padding: 0 10px"> $styles->add( 'deprecated-media', "/wp-admin/css/deprecated-media$suffix.css" );
</span></span></pre></div>
<a id="trunksrcwpincludeswidgetsclasswpwidgetcustomhtmlphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/widgets/class-wp-widget-custom-html.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/widgets/class-wp-widget-custom-html.php 2017-09-21 22:44:38 UTC (rev 41557)
+++ trunk/src/wp-includes/widgets/class-wp-widget-custom-html.php 2017-09-21 23:03:06 UTC (rev 41558)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -160,6 +160,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> public function enqueue_admin_scripts() {
</span><span class="cx" style="display: block; padding: 0 10px"> $settings = wp_enqueue_code_editor( array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'type' => 'text/html',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'codemirror' => array(
+ 'indentUnit' => 2,
+ 'tabSize' => 2,
+ ),
</ins><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> wp_enqueue_script( 'custom-html-widgets' );
</span></span></pre></div>
<a id="trunktestsphpunittestscustomizemanagerphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/phpunit/tests/customize/manager.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/phpunit/tests/customize/manager.php 2017-09-21 22:44:38 UTC (rev 41557)
+++ trunk/tests/phpunit/tests/customize/manager.php 2017-09-21 23:03:06 UTC (rev 41558)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2351,7 +2351,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $data = json_decode( $json, true );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertNotEmpty( $data );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'customCss', 'changeset', 'timeouts' ), array_keys( $data ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts' ), array_keys( $data ) );
</ins><span class="cx" style="display: block; padding: 0 10px"> $this->assertEquals( $autofocus, $data['autofocus'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'save', $data['nonce'] );
</span><span class="cx" style="display: block; padding: 0 10px"> $this->assertArrayHasKey( 'preview', $data['nonce'] );
</span></span></pre>
</div>
</div>
</body>
</html>