Make WordPress Core

Changeset 30014


Ignore:
Timestamp:
10/24/2014 04:31:54 PM (9 years ago)
Author:
johnbillion
Message:

Add the ability for a customizer control to render its controls via a JavaScript template. Switches the default color picker control to a JavaScript template. See #29572. Props celloexpressions

Location:
trunk/src
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/customize.php

    r29903 r30014  
    181181    <?php
    182182
     183    // Render control templates.
     184    $wp_customize->render_control_templates();
     185
    183186    /**
    184187     * Print Customizer control scripts in the footer.
  • trunk/src/wp-admin/js/customize-controls.js

    r29905 r30014  
    6161
    6262                control.setting = control.settings['default'] || null;
    63                 control.ready();
     63                control.renderContent( function() {
     64                    // Don't call ready() until the content has rendered.
     65                    control.ready();
     66                } );
    6467            }) );
    6568
     
    150153            this.setting.bind( update );
    151154            update( this.setting() );
     155        },
     156
     157        /**
     158         * Render the control from its JS template, if it exists.
     159         *
     160         * The control's container must alreasy exist in the DOM.
     161         */
     162        renderContent: function( callback ) {
     163            var template,
     164                selector = 'customize-control-' + this.params.type + '-content',
     165                callback = callback || function(){};
     166            if ( 0 !== $( '#tmpl-' + selector ).length ) {
     167                template = wp.template( selector );
     168                if ( template && this.container ) {
     169                    this.container.append( template( this.params ) );
     170                }
     171            }
     172            callback();
    152173        }
    153174    });
  • trunk/src/wp-includes/class-wp-customize-control.php

    r29903 r30014  
    218218        }
    219219
    220         $this->json['type'] = $this->type;
    221         $this->json['active'] = $this->active();
     220        $this->json['type']        = $this->type;
     221        $this->json['label']       = $this->label;
     222        $this->json['description'] = $this->description;
     223        $this->json['active']      = $this->active();
    222224    }
    223225
     
    336338     * Supports basic input types `text`, `checkbox`, `textarea`, `radio`, `select` and `dropdown-pages`.
    337339     * Additional input types such as `email`, `url`, `number`, `hidden` and `date` are supported implicitly.
     340     *
     341     * Control content can alternately be rendered in JS. See {@see WP_Customize_Control::print_template()}.
    338342     *
    339343     * @since 3.4.0
     
    444448        }
    445449    }
     450
     451    /**
     452     * Render the control's JS template.
     453     *
     454     * This function is only run for control types that have been registered with {@see WP_Customize_Manager::register_control_type()}.
     455     *
     456     * In the future, this will also print the template for the control's container element and be overridable.
     457     *
     458     * @since 4.1.0
     459     */
     460    final public function print_template() {
     461            ?>
     462            <script type="text/html" id="tmpl-customize-control-<?php echo $this->type; ?>-content">
     463                    <?php $this->content_template(); ?>
     464            </script>
     465            <?php
     466    }
     467
     468    /**
     469     * An Underscore (JS) template for this control's content (but not its container).
     470     *
     471     * Class variables for this control class are available in the `data` JS object;
     472     * export custom variables by overriding {@see WP_Customize_Control::to_json()}.
     473     *
     474     * @see WP_Customize_Control::print_template()
     475     *
     476     * @since 4.1.0
     477     */
     478    protected function content_template() {}
     479
    446480}
    447481
     
    500534        parent::to_json();
    501535        $this->json['statuses'] = $this->statuses;
    502     }
    503 
    504     /**
    505      * Render the control's content.
    506      *
    507      * @since 3.4.0
    508      */
    509     public function render_content() {
    510         $this_default = $this->setting->default;
    511         $default_attr = '';
    512         if ( $this_default ) {
    513             if ( false === strpos( $this_default, '#' ) )
    514                 $this_default = '#' . $this_default;
    515             $default_attr = ' data-default-color="' . esc_attr( $this_default ) . '"';
    516         }
    517         // The input's value gets set by JS. Don't fill it.
     536        $this->json['defaultValue'] = $this->setting->default;
     537    }
     538
     539    /**
     540     * Don't render the control content from PHP, as it's rendered via JS on load.
     541     *
     542     * @since 3.4.0
     543     */
     544    public function render_content() {}
     545
     546    /**
     547     * Render a JS template for the content of the color picker control.
     548     *
     549     * @since 4.1.0
     550     */
     551    public function content_template() {
    518552        ?>
     553        <# var defaultValue = '';
     554        if ( data.defaultValue ) {
     555            if ( '#' !== data.defaultValue.substring( 0, 1 ) ) {
     556                defaultValue = '#' + data.defaultValue;
     557            }
     558            defaultValue = ' data-default-color=' + defaultValue; // Quotes added automatically.
     559        } #>
    519560        <label>
    520             <?php if ( ! empty( $this->label ) ) : ?>
    521                 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    522             <?php endif;
    523             if ( ! empty( $this->description ) ) : ?>
    524                 <span class="description customize-control-description"><?php echo $this->description; ?></span>
    525             <?php endif; ?>
    526 
     561            <# if ( data.label ) { #>
     562                <span class="customize-control-title">{{ data.label }}</span>
     563            <# } #>
     564            <# if ( data.description ) { #>
     565                <span class="description customize-control-description">{{ data.description }}</span>
     566            <# } #>
    527567            <div class="customize-control-content">
    528                 <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>"<?php echo $default_attr; ?> />
     568                <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
    529569            </div>
    530570        </label>
  • trunk/src/wp-includes/class-wp-customize-manager.php

    r29903 r30014  
    5555
    5656    /**
     57     * Controls that may be rendered from JS templates.
     58     *
     59     * @since 4.1.0
     60     */
     61    protected $registered_control_types = array();
     62
     63    /**
    5764     * $_POST values for Customize Settings.
    5865     *
     
    823830
    824831    /**
     832     * Register a customize control type.
     833     *
     834     * Registered types are eligible to be rendered
     835     * via JS and created dynamically.
     836     *
     837     * @since 4.1.0
     838     *
     839     * @param string $control Name of a custom control which is a subclass of {@see WP_Customize_Control}.
     840     */
     841    public function register_control_type( $control ) {
     842        $this->registered_control_types[] = $control;
     843    }
     844
     845    /**
     846     * Render JS templates for all registered control types.
     847     *
     848     * @since 4.1.0
     849     */
     850    public function render_control_templates() {
     851        foreach( $this->registered_control_types as $control_type ) {
     852            $control = new $control_type( $this, 'temp', array() );
     853            $control->print_template();
     854        }
     855    }
     856
     857    /**
    825858     * Helper function to compare two objects by priority.
    826859     *
     
    927960     */
    928961    public function register_controls() {
     962
     963        /* Control Types (custom control classes) */
     964        $this->register_control_type( 'WP_Customize_Color_Control' );
    929965
    930966        /* Site Title & Tagline */
Note: See TracChangeset for help on using the changeset viewer.