WordPress.org
Get WordPress

Make WordPress Core

Changeset 41558


Ignore:
Timestamp:
09/21/2017 11:03:06 PM (9 years ago)
Author:
westonruter
Message:

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 #12423, #38707, #35395.
Fixes #41897.

Location:
trunk
Files:
1 added
7 edited

Legend:

Unmodified
Added
Removed

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

    r41390 r41558  
    11651165
    11661166/**
    1167  * Custom CSS Section
     1167 * Code Editor Control and Custom CSS Section
    11681168 *
    11691169 * Modifications to the Section Container to make the textarea full-width and
    … …  
    11711171 */
    11721172
    1173 #customize-controls .customize-section-description-container.section-meta.customize-info {
    1174         border-bottom: none;
    1175 }
    1176 
    1177 #sub-accordion-section-custom_css .customize-control-notifications-container {
    1178         margin-bottom: 15px;
    1179 }
    1180 
    1181 #customize-control-custom_css textarea {
    1182         display: block;
     1173.customize-control-code_editor textarea {
     1174        width: 100%;
    11831175        font-family: Consolas, Monaco, monospace;
    11841176        font-size: 12px;
    11851177        padding: 6px 8px;
     1178        -moz-tab-size: 2;
     1179        -o-tab-size: 2;
     1180        tab-size: 2;
     1181}
     1182.customize-control-code_editor textarea,
     1183.customize-control-code_editor .CodeMirror {
     1184        height: 14em;
     1185}
     1186
     1187#customize-controls .customize-section-description-container.section-meta.customize-info {
     1188        border-bottom: none;
     1189}
     1190
     1191#sub-accordion-section-custom_css .customize-control-notifications-container {
     1192        margin-bottom: 15px;
     1193}
     1194
     1195#customize-control-custom_css textarea {
     1196        display: block;
    11861197        height: 500px;
    1187         -moz-tab-size: 4;
    1188         -o-tab-size: 4;
    1189         tab-size: 4;
    11901198}
    11911199

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

    r41390 r41558  
    36783678        });
    36793679
     3680        /**
     3681         * Class wp.customize.CodeEditorControl
     3682         *
     3683         * @since 4.9.0
     3684         *
     3685         * @constructor
     3686         * @augments wp.customize.Control
     3687         * @augments wp.customize.Class
     3688         */
     3689        api.CodeEditorControl = api.Control.extend({
     3690
     3691                /**
     3692                 * Initialize the editor when the containing section is ready and expanded.
     3693                 *
     3694                 * @since 4.9.0
     3695                 * @returns {void}
     3696                 */
     3697                ready: function() {
     3698                        var control = this;
     3699                        if ( ! control.section() ) {
     3700                                control.initEditor();
     3701                                return;
     3702                        }
     3703
     3704                        // Wait to initialize editor until section is embedded and expanded.
     3705                        api.section( control.section(), function( section ) {
     3706                                section.deferred.embedded.done( function() {
     3707                                        var onceExpanded;
     3708                                        if ( section.expanded() ) {
     3709                                                control.initEditor();
     3710                                        } else {
     3711                                                onceExpanded = function( isExpanded ) {
     3712                                                        if ( isExpanded ) {
     3713                                                                control.initEditor();
     3714                                                                section.expanded.unbind( onceExpanded );
     3715                                                        }
     3716                                                };
     3717                                                section.expanded.bind( onceExpanded );
     3718                                        }
     3719                                } );
     3720                        } );
     3721                },
     3722
     3723                /**
     3724                 * Initialize editor.
     3725                 *
     3726                 * @since 4.9.0
     3727                 * @returns {void}
     3728                 */
     3729                initEditor: function() {
     3730                        var control = this, element;
     3731
     3732                        element = new api.Element( control.container.find( 'textarea' ) );
     3733                        control.elements.push( element );
     3734                        element.sync( control.setting );
     3735                        element.set( control.setting() );
     3736
     3737                        if ( control.params.editor_settings ) {
     3738                                control.initSyntaxHighlightingEditor( control.params.editor_settings );
     3739                        } else {
     3740                                control.initPlainTextareaEditor();
     3741                        }
     3742                },
     3743
     3744                /**
     3745                 * Make sure editor gets focused when control is focused.
     3746                 *
     3747                 * @since 4.9.0
     3748                 * @param {Object}   [params] - Focus params.
     3749                 * @param {Function} [params.completeCallback] - Function to call when expansion is complete.
     3750                 * @returns {void}
     3751                 */
     3752                focus: function( params ) {
     3753                        var control = this, extendedParams = _.extend( {}, params ), originalCompleteCallback;
     3754                        originalCompleteCallback = extendedParams.completeCallback;
     3755                        extendedParams.completeCallback = function() {
     3756                                if ( originalCompleteCallback ) {
     3757                                        originalCompleteCallback();
     3758                                }
     3759                                if ( control.editor ) {
     3760                                        control.editor.codemirror.focus();
     3761                                }
     3762                        };
     3763                        api.Control.prototype.focus.call( control, extendedParams );
     3764                },
     3765
     3766                /**
     3767                 * Initialize syntax-highlighting editor.
     3768                 *
     3769                 * @since 4.9.0
     3770                 * @param {object} codeEditorSettings - Code editor settings.
     3771                 * @returns {void}
     3772                 */
     3773                initSyntaxHighlightingEditor: function( codeEditorSettings ) {
     3774                        var control = this, $textarea = control.container.find( 'textarea' ), settings, suspendEditorUpdate = false;
     3775
     3776                        settings = _.extend( {}, codeEditorSettings, {
     3777                                onTabNext: _.bind( control.onTabNext, control ),
     3778                                onTabPrevious: _.bind( control.onTabPrevious, control ),
     3779                                onUpdateErrorNotice: _.bind( control.onUpdateErrorNotice, control )
     3780                        });
     3781
     3782                        control.editor = wp.codeEditor.initialize( $textarea, settings );
     3783
     3784                        // Refresh when receiving focus.
     3785                        control.editor.codemirror.on( 'focus', function( codemirror ) {
     3786                                codemirror.refresh();
     3787                        });
     3788
     3789                        /*
     3790                         * When the CodeMirror instance changes, mirror to the textarea,
     3791                         * where we have our "true" change event handler bound.
     3792                         */
     3793                        control.editor.codemirror.on( 'change', function( codemirror ) {
     3794                                suspendEditorUpdate = true;
     3795                                $textarea.val( codemirror.getValue() ).trigger( 'change' );
     3796                                suspendEditorUpdate = false;
     3797                        });
     3798
     3799                        // Update CodeMirror when the setting is changed by another plugin.
     3800                        control.setting.bind( function( value ) {
     3801                                if ( ! suspendEditorUpdate ) {
     3802                                        control.editor.codemirror.setValue( value );
     3803                                }
     3804                        });
     3805
     3806                        // Prevent collapsing section when hitting Esc to tab out of editor.
     3807                        control.editor.codemirror.on( 'keydown', function onKeydown( codemirror, event ) {
     3808                                var escKeyCode = 27;
     3809                                if ( escKeyCode === event.keyCode ) {
     3810                                        event.stopPropagation();
     3811                                }
     3812                        });
     3813                },
     3814
     3815                /**
     3816                 * Handle tabbing to the field after the editor.
     3817                 *
     3818                 * @since 4.9.0
     3819                 * @returns {void}
     3820                 */
     3821                onTabNext: function onTabNext() {
     3822                        var control = this, controls, controlIndex, section;
     3823                        section = api.section( control.section() );
     3824                        controls = section.controls();
     3825                        controlIndex = controls.indexOf( control );
     3826                        if ( controls.length === controlIndex + 1 ) {
     3827                                $( '#customize-footer-actions .collapse-sidebar' ).focus();
     3828                        } else {
     3829                                controls[ controlIndex + 1 ].container.find( ':focusable:first' ).focus();
     3830                        }
     3831                },
     3832
     3833                /**
     3834                 * Handle tabbing to the field before the editor.
     3835                 *
     3836                 * @since 4.9.0
     3837                 * @returns {void}
     3838                 */
     3839                onTabPrevious: function onTabPrevious() {
     3840                        var control = this, controls, controlIndex, section;
     3841                        section = api.section( control.section() );
     3842                        controls = section.controls();
     3843                        controlIndex = controls.indexOf( control );
     3844                        if ( 0 === controlIndex ) {
     3845                                section.contentContainer.find( '.customize-section-title .customize-help-toggle, .customize-section-title .customize-section-description.open .section-description-close' ).last().focus();
     3846                        } else {
     3847                                controls[ controlIndex - 1 ].contentContainer.find( ':focusable:first' ).focus();
     3848                        }
     3849                },
     3850
     3851                /**
     3852                 * Update error notice.
     3853                 *
     3854                 * @since 4.9.0
     3855                 * @param {Array} errorAnnotations - Error annotations.
     3856                 * @returns {void}
     3857                 */
     3858                onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
     3859                        var control = this, message;
     3860                        control.setting.notifications.remove( 'csslint_error' );
     3861
     3862                        if ( 0 !== errorAnnotations.length ) {
     3863                                if ( 1 === errorAnnotations.length ) {
     3864                                        message = api.l10n.customCssError.singular.replace( '%d', '1' );
     3865                                } else {
     3866                                        message = api.l10n.customCssError.plural.replace( '%d', String( errorAnnotations.length ) );
     3867                                }
     3868                                control.setting.notifications.add( 'csslint_error', new api.Notification( 'csslint_error', {
     3869                                        message: message,
     3870                                        type: 'error'
     3871                                } ) );
     3872                        }
     3873                },
     3874
     3875                /**
     3876                 * Initialize plain-textarea editor when syntax highlighting is disabled.
     3877                 *
     3878                 * @since 4.9.0
     3879                 * @returns {void}
     3880                 */
     3881                initPlainTextareaEditor: function() {
     3882                        var control = this, $textarea = control.container.find( 'textarea' ), textarea = $textarea[0];
     3883
     3884                        $textarea.on( 'blur', function onBlur() {
     3885                                $textarea.data( 'next-tab-blurs', false );
     3886                        } );
     3887
     3888                        $textarea.on( 'keydown', function onKeydown( event ) {
     3889                                var selectionStart, selectionEnd, value, tabKeyCode = 9, escKeyCode = 27;
     3890
     3891                                if ( escKeyCode === event.keyCode ) {
     3892                                        if ( ! $textarea.data( 'next-tab-blurs' ) ) {
     3893                                                $textarea.data( 'next-tab-blurs', true );
     3894                                                event.stopPropagation(); // Prevent collapsing the section.
     3895                                        }
     3896                                        return;
     3897                                }
     3898
     3899                                // Short-circuit if tab key is not being pressed or if a modifier key *is* being pressed.
     3900                                if ( tabKeyCode !== event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ) {
     3901                                        return;
     3902                                }
     3903
     3904                                // Prevent capturing Tab characters if Esc was pressed.
     3905                                if ( $textarea.data( 'next-tab-blurs' ) ) {
     3906                                        return;
     3907                                }
     3908
     3909                                selectionStart = textarea.selectionStart;
     3910                                selectionEnd = textarea.selectionEnd;
     3911                                value = textarea.value;
     3912
     3913                                if ( selectionStart >= 0 ) {
     3914                                        textarea.value = value.substring( 0, selectionStart ).concat( '\t', value.substring( selectionEnd ) );
     3915                                        $textarea.selectionStart = textarea.selectionEnd = selectionStart + 1;
     3916                                }
     3917
     3918                                event.stopPropagation();
     3919                                event.preventDefault();
     3920                        });
     3921                }
     3922        });
     3923
    36803924        // Change objects contained within the main customize object to Settings.
    36813925        api.defaultConstructor = api.Setting;
    … …  
    43734617                background:          api.BackgroundControl,
    43744618                background_position: api.BackgroundPositionControl,
    4375                 theme:               api.ThemeControl
     4619                theme:               api.ThemeControl,
     4620                code_editor:         api.CodeEditorControl
    43764621        };
    43774622        api.panelConstructor = {};
    … …  
    57135958                // Add code editor for Custom CSS.
    57145959                (function() {
    5715                         var ready, sectionReady = $.Deferred(), controlReady = $.Deferred();
     5960                        var sectionReady = $.Deferred();
    57165961
    57175962                        api.section( 'custom_css', function( section ) {
    … …  
    57285973                                });
    57295974                        });
    5730                         api.control( 'custom_css', function( control ) {
    5731                                 control.deferred.embedded.done( function() {
    5732                                         controlReady.resolve( control );
    5733                                 });
    5734                         });
    5735 
    5736                         ready = $.when( sectionReady, controlReady );
    57375975
    57385976                        // Set up the section desription behaviors.
    5739                         ready.done( function setupSectionDescription( section, control ) {
     5977                        sectionReady.done( function setupSectionDescription( section ) {
     5978                                var control = api.control( 'custom_css' );
    57405979
    57415980                                // Close the section description when clicking the close button.
    … …  
    57485987
    57495988                                // Reveal help text if setting is empty.
    5750                                 if ( ! control.setting.get() ) {
     5989                                if ( control && ! control.setting.get() ) {
    57515990                                        section.container.find( '.section-meta .customize-section-description:first' )
    57525991                                                .addClass( 'open' )
    … …  
    57555994                                }
    57565995                        });
    5757 
    5758                         // Set up the code editor itself.
    5759                         if ( api.settings.customCss && api.settings.customCss.codeEditor ) {
    5760 
    5761                                 // Set up the syntax highlighting editor.
    5762                                 ready.done( function setupSyntaxHighlightingEditor( section, control ) {
    5763                                         var $textarea = control.container.find( 'textarea' ), settings, suspendEditorUpdate = false;
    5764 
    5765                                         // Make sure editor gets focused when control is focused.
    5766                                         control.focus = (function( originalFocus ) { // eslint-disable-line max-nested-callbacks
    5767                                                 return function( params ) { // eslint-disable-line max-nested-callbacks
    5768                                                         var extendedParams = _.extend( {}, params ), originalCompleteCallback;
    5769                                                         originalCompleteCallback = extendedParams.completeCallback;
    5770                                                         extendedParams.completeCallback = function() {
    5771                                                                 if ( originalCompleteCallback ) {
    5772                                                                         originalCompleteCallback();
    5773                                                                 }
    5774                                                                 if ( control.editor ) {
    5775                                                                         control.editor.codemirror.focus();
    5776                                                                 }
    5777                                                         };
    5778                                                         originalFocus.call( this, extendedParams );
    5779                                                 };
    5780                                         })( control.focus );
    5781 
    5782                                         settings = _.extend( {}, api.settings.customCss.codeEditor, {
    5783 
    5784                                                 /**
    5785                                                  * Handle tabbing to the field after the editor.
    5786                                                  *
    5787                                                  * @returns {void}
    5788                                                  */
    5789                                                 onTabNext: function onTabNext() {
    5790                                                         var controls, controlIndex;
    5791                                                         controls = section.controls();
    5792                                                         controlIndex = controls.indexOf( control );
    5793                                                         if ( controls.length === controlIndex + 1 ) {
    5794                                                                 $( '#customize-footer-actions .collapse-sidebar' ).focus();
    5795                                                         } else {
    5796                                                                 controls[ controlIndex + 1 ].container.find( ':focusable:first' ).focus();
    5797                                                         }
    5798                                                 },
    5799 
    5800                                                 /**
    5801                                                  * Handle tabbing to the field before the editor.
    5802                                                  *
    5803                                                  * @returns {void}
    5804                                                  */
    5805                                                 onTabPrevious: function onTabPrevious() {
    5806                                                         var controls, controlIndex;
    5807                                                         controls = section.controls();
    5808                                                         controlIndex = controls.indexOf( control );
    5809                                                         if ( 0 === controlIndex ) {
    5810                                                                 section.contentContainer.find( '.customize-section-title .customize-help-toggle, .customize-section-title .customize-section-description.open .section-description-close' ).last().focus();
    5811                                                         } else {
    5812                                                                 controls[ controlIndex - 1 ].contentContainer.find( ':focusable:first' ).focus();
    5813                                                         }
    5814                                                 },
    5815 
    5816                                                 /**
    5817                                                  * Update error notice.
    5818                                                  *
    5819                                                  * @param {Array} errorAnnotations - Error annotations.
    5820                                                  * @returns {void}
    5821                                                  */
    5822                                                 onUpdateErrorNotice: function onUpdateErrorNotice( errorAnnotations ) {
    5823                                                         var message;
    5824                                                         control.setting.notifications.remove( 'csslint_error' );
    5825 
    5826                                                         if ( 0 !== errorAnnotations.length ) {
    5827                                                                 if ( 1 === errorAnnotations.length ) {
    5828                                                                         message = api.l10n.customCssError.singular.replace( '%d', '1' );
    5829                                                                 } else {
    5830                                                                         message = api.l10n.customCssError.plural.replace( '%d', String( errorAnnotations.length ) );
    5831                                                                 }
    5832                                                                 control.setting.notifications.add( 'csslint_error', new api.Notification( 'csslint_error', {
    5833                                                                         message: message,
    5834                                                                         type: 'error'
    5835                                                                 } ) );
    5836                                                         }
    5837                                                 }
    5838                                         });
    5839 
    5840                                         control.editor = wp.codeEditor.initialize( $textarea, settings );
    5841 
    5842                                         // Refresh when receiving focus.
    5843                                         control.editor.codemirror.on( 'focus', function( codemirror ) {
    5844                                                 codemirror.refresh();
    5845                                         });
    5846 
    5847                                         /*
    5848                                          * When the CodeMirror instance changes, mirror to the textarea,
    5849                                          * where we have our "true" change event handler bound.
    5850                                          */
    5851                                         control.editor.codemirror.on( 'change', function( codemirror ) {
    5852                                                 suspendEditorUpdate = true;
    5853                                                 $textarea.val( codemirror.getValue() ).trigger( 'change' );
    5854                                                 suspendEditorUpdate = false;
    5855                                         });
    5856 
    5857                                         // Update CodeMirror when the setting is changed by another plugin.
    5858                                         control.setting.bind( function( value ) {
    5859                                                 if ( ! suspendEditorUpdate ) {
    5860                                                         control.editor.codemirror.setValue( value );
    5861                                                 }
    5862                                         });
    5863 
    5864                                         // Prevent collapsing section when hitting Esc to tab out of editor.
    5865                                         control.editor.codemirror.on( 'keydown', function onKeydown( codemirror, event ) {
    5866                                                 var escKeyCode = 27;
    5867                                                 if ( escKeyCode === event.keyCode ) {
    5868                                                         event.stopPropagation();
    5869                                                 }
    5870                                         });
    5871                                 });
    5872                         } else {
    5873 
    5874                                 // Allow tabs to be entered in Custom CSS textarea.
    5875                                 ready.done( function allowTabs( section, control ) {
    5876 
    5877                                         var $textarea = control.container.find( 'textarea' ), textarea = $textarea[0];
    5878 
    5879                                         $textarea.on( 'blur', function onBlur() {
    5880                                                 $textarea.data( 'next-tab-blurs', false );
    5881                                         } );
    5882 
    5883                                         $textarea.on( 'keydown', function onKeydown( event ) {
    5884                                                 var selectionStart, selectionEnd, value, tabKeyCode = 9, escKeyCode = 27;
    5885 
    5886                                                 if ( escKeyCode === event.keyCode ) {
    5887                                                         if ( ! $textarea.data( 'next-tab-blurs' ) ) {
    5888                                                                 $textarea.data( 'next-tab-blurs', true );
    5889                                                                 event.stopPropagation(); // Prevent collapsing the section.
    5890                                                         }
    5891                                                         return;
    5892                                                 }
    5893 
    5894                                                 // Short-circuit if tab key is not being pressed or if a modifier key *is* being pressed.
    5895                                                 if ( tabKeyCode !== event.keyCode || event.ctrlKey || event.altKey || event.shiftKey ) {
    5896                                                         return;
    5897                                                 }
    5898 
    5899                                                 // Prevent capturing Tab characters if Esc was pressed.
    5900                                                 if ( $textarea.data( 'next-tab-blurs' ) ) {
    5901                                                         return;
    5902                                                 }
    5903 
    5904                                                 selectionStart = textarea.selectionStart;
    5905                                                 selectionEnd = textarea.selectionEnd;
    5906                                                 value = textarea.value;
    5907 
    5908                                                 if ( selectionStart >= 0 ) {
    5909                                                         textarea.value = value.substring( 0, selectionStart ).concat( '\t', value.substring( selectionEnd ) );
    5910                                                         $textarea.selectionStart = textarea.selectionEnd = selectionStart + 1;
    5911                                                 }
    5912 
    5913                                                 event.stopPropagation();
    5914                                                 event.preventDefault();
    5915                                         });
    5916                                 });
    5917                         }
    59185996                })();
    59195997

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

    r41550 r41558  
    214214
    215215        /**
    216          * Code Editor Settings for Custom CSS.
    217          *
    218          * This variable contains the settings returned by `wp_enqueue_code_editor()` which are then later output
    219          * to the client in `WP_Customize_Manager::customize_pane_settings()`. A value of false means that the
    220          * Custom CSS section or control was removed, or that the Syntax Highlighting user pref was turned off.
    221          *
    222          * @see wp_enqueue_code_editor()
    223          * @see WP_Customize_Manager::enqueue_control_scripts()
    224          * @see WP_Customize_Manager::customize_pane_settings()
    225          * @since 4.9.0
    226          * @var array|false
    227          */
    228         private $_custom_css_code_editor_settings = false;
    229 
    230         /**
    231216         * Constructor.
    232217         *
    … …  
    292277                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-control.php' );
    293278                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-theme-control.php' );
     279                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-code-editor-control.php' );
    294280                require_once( ABSPATH . WPINC . '/customize/class-wp-widget-area-customize-control.php' );
    295281                require_once( ABSPATH . WPINC . '/customize/class-wp-widget-form-customize-control.php' );
    … …  
    33383324                        $control->enqueue();
    33393325                }
    3340 
    3341                 if ( $this->get_section( 'custom_css' ) && $this->get_control( 'custom_css' ) ) {
    3342                         $this->_custom_css_code_editor_settings = wp_enqueue_code_editor( array(
    3343                                 'type' => 'text/css',
    3344                         ) );
    3345                 }
    33463326        }
    33473327
    … …  
    36003580                                'stylesheet' => $this->get_stylesheet(),
    36013581                                'active'     => $this->is_theme_active(),
    3602                         ),
    3603                         'customCss' => array(
    3604                                 'codeEditor' => $this->_custom_css_code_editor_settings,
    36053582                        ),
    36063583                        'url'      => array(
    … …  
    37373714                $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
    37383715                $this->register_control_type( 'WP_Customize_Theme_Control' );
     3716                $this->register_control_type( 'WP_Customize_Code_Editor_Control' );
    37393717
    37403718                /* Themes */
    … …  
    42404218                $this->add_setting( $custom_css_setting );
    42414219
    4242                 $this->add_control( 'custom_css', array(
    4243                         'type'     => 'textarea',
     4220                $this->add_control( new WP_Customize_Code_Editor_Control( $this, 'custom_css', array(
    42444221                        'section'  => 'custom_css',
    42454222                        'settings' => array( 'default' => $custom_css_setting->id ),
    4246                         'input_attrs' => array(
    4247                                 'class' => 'code', // Ensures contents displayed as LTR instead of RTL.
    4248                         ),
    4249                 ) );
     4223                        'code_type' => 'text/css',
     4224                ) ) );
    42504225        }
    42514226

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

    r41376 r41558  
    31263126 *     Args.
    31273127 *
    3128  *     @type string   $type     The MIME type of the file to be edited.
    3129  *     @type string   $file     Filename to be edited. Extension is used to sniff the type. Can be supplied as alternative to `$type` param.
    3130  *     @type array    $settings Settings to merge on top of defaults which derive from `$type` or `$file` args.
    3131  *     @type WP_Theme $theme    Theme being edited when on theme editor.
    3132  *     @type string   $plugin   Plugin being edited when on plugin editor.
     3128 *     @type string   $type       The MIME type of the file to be edited.
     3129 *     @type string   $file       Filename to be edited. Extension is used to sniff the type. Can be supplied as alternative to `$type` param.
     3130 *     @type WP_Theme $theme      Theme being edited when on theme editor.
     3131 *     @type string   $plugin     Plugin being edited when on plugin editor.
     3132 *     @type array    $codemirror Additional CodeMirror setting overrides.
     3133 *     @type array    $csslint    CSSLint rule overrides.
     3134 *     @type array    $jshint     JSHint rule overrides.
     3135 *     @type array    $htmlhint   JSHint rule overrides.
    31333136 * }
    31343137 * @returns array|false Settings for the enqueued code editor, or false if the editor was not enqueued .
    … …  
    34093412
    34103413        // Let settings supplied via args override any defaults.
    3411         if ( isset( $args['settings'] ) ) {
    3412                 foreach ( $args['settings'] as $key => $value ) {
    3413                         $settings[ $key ] = array_merge(
    3414                                 $settings[ $key ],
    3415                                 $value
    3416                         );
    3417                 }
     3414        foreach ( wp_array_slice_assoc( $args, array( 'codemirror', 'csslint', 'jshint', 'htmlhint' ) ) as $key => $value ) {
     3415                $settings[ $key ] = array_merge(
     3416                        $settings[ $key ],
     3417                        $value
     3418                );
    34183419        }
    34193420
    … …  
    34293430         *     Args passed when calling `wp_enqueue_code_editor()`.
    34303431         *
    3431          *     @type string   $type     The MIME type of the file to be edited.
    3432          *     @type string   $file     Filename being edited.
    3433          *     @type array    $settings Settings to merge on top of defaults which derive from `$type` or `$file` args.
    3434          *     @type WP_Theme $theme    Theme being edited when on theme editor.
    3435          *     @type string   $plugin   Plugin being edited when on plugin editor.
     3432         *     @type string   $type       The MIME type of the file to be edited.
     3433         *     @type string   $file       Filename being edited.
     3434         *     @type WP_Theme $theme      Theme being edited when on theme editor.
     3435         *     @type string   $plugin     Plugin being edited when on plugin editor.
     3436         *     @type array    $codemirror Additional CodeMirror setting overrides.
     3437         *     @type array    $csslint    CSSLint rule overrides.
     3438         *     @type array    $jshint     JSHint rule overrides.
     3439         *     @type array    $htmlhint   JSHint rule overrides.
    34363440         * }
    34373441         */
    … …  
    34443448        wp_enqueue_script( 'code-editor' );
    34453449        wp_enqueue_style( 'code-editor' );
    3446 
    3447         wp_enqueue_script( 'codemirror' );
    3448         wp_enqueue_style( 'codemirror' );
    34493450
    34503451        if ( isset( $settings['codemirror']['mode'] ) ) {

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

    r41554 r41558  
    464464        );
    465465
    466         $scripts->add( 'codemirror', '/wp-includes/js/codemirror/codemirror.min.js', array(), '5.29.1-alpha-ee20357' );
     466        $scripts->add( 'wp-codemirror', '/wp-includes/js/codemirror/codemirror.min.js', array(), '5.29.1-alpha-ee20357' );
    467467        $scripts->add( 'csslint', '/wp-includes/js/codemirror/csslint.js', array(), '1.0.5' );
    468468        $scripts->add( 'jshint', '/wp-includes/js/codemirror/jshint.js', array(), '2.9.5' );
    … …  
    470470        $scripts->add( 'htmlhint', '/wp-includes/js/codemirror/htmlhint.js', array(), '0.9.14-xwp' );
    471471        $scripts->add( 'htmlhint-kses', '/wp-includes/js/codemirror/htmlhint-kses.js', array( 'htmlhint' ) );
    472         $scripts->add( 'code-editor', "/wp-admin/js/code-editor$suffix.js", array( 'jquery', 'codemirror' ) );
     472        $scripts->add( 'code-editor', "/wp-admin/js/code-editor$suffix.js", array( 'jquery', 'wp-codemirror' ) );
    473473        $scripts->add( 'wp-theme-plugin-editor', "/wp-admin/js/theme-plugin-editor$suffix.js", array( 'code-editor', 'jquery', 'jquery-ui-core', 'wp-a11y', 'underscore' ) );
    474474        did_action( 'init' ) && $scripts->add_inline_script( 'wp-theme-plugin-editor', sprintf( 'wp.themePluginEditor.l10n = %s;', wp_json_encode( wp_array_slice_assoc(
    … …  
    953953        $styles->add( 'site-icon',           "/wp-admin/css/site-icon$suffix.css" );
    954954        $styles->add( 'l10n',                "/wp-admin/css/l10n$suffix.css" );
    955         $styles->add( 'code-editor',         "/wp-admin/css/code-editor$suffix.css", array( 'codemirror' ) );
     955        $styles->add( 'code-editor',         "/wp-admin/css/code-editor$suffix.css", array( 'wp-codemirror' ) );
    956956
    957957        $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' ) );
    … …  
    988988        $styles->add( 'wp-mediaelement',     "/wp-includes/js/mediaelement/wp-mediaelement$suffix.css", array( 'mediaelement' ) );
    989989        $styles->add( 'thickbox',            '/wp-includes/js/thickbox/thickbox.css', array( 'dashicons' ) );
    990         $styles->add( 'codemirror',          '/wp-includes/js/codemirror/codemirror.min.css', array(), '5.29.1-alpha-ee20357' );
     990        $styles->add( 'wp-codemirror',       '/wp-includes/js/codemirror/codemirror.min.css', array(), '5.29.1-alpha-ee20357' );
    991991
    992992        // Deprecated CSS

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

    r41376 r41558  
    161161                $settings = wp_enqueue_code_editor( array(
    162162                        'type' => 'text/html',
     163                        'codemirror' => array(
     164                                'indentUnit' => 2,
     165                                'tabSize' => 2,
     166                        ),
    163167                ) );
    164168

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

    r41376 r41558  
    23522352                $this->assertNotEmpty( $data );
    23532353
    2354                 $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'customCss', 'changeset', 'timeouts' ), array_keys( $data ) );
     2354                $this->assertEqualSets( array( 'theme', 'url', 'browser', 'panels', 'sections', 'nonce', 'autofocus', 'documentTitleTmpl', 'previewableDevices', 'changeset', 'timeouts' ), array_keys( $data ) );
    23552355                $this->assertEquals( $autofocus, $data['autofocus'] );
    23562356                $this->assertArrayHasKey( 'save', $data['nonce'] );
Note: See TracChangeset for help on using the changeset viewer.