WordPress.org
Get WordPress

Make WordPress Core

Ticket #29572: 29572.diff

File 29572.diff, 7.0 KB (added by celloexpressions, 11 years ago)

First-pass, POC, implements the framework in WP_Customize_Color_Control (as it's mostly JS anyway).

  • src/wp-admin/customize.php

     
    180180        <div id="customize-preview" class="wp-full-overlay-main"></div>
    181181        <?php
    182182
     183        // Render control templates.
     184        $wp_customize->render_control_templates();
     185
    183186        /**
    184187         * Print Customizer control scripts in the footer.
    185188         *

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

     
    6060                                }
    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
    6669                        control.elements = [];
    … …  
    149152
    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        });
    154175

  • src/wp-includes/class-wp-customize-control.php

     
    217217                        $this->json['settings'][ $key ] = $setting->id;
    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
    224226        /**
    … …  
    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.
    338340         *
     341         * Control content can alternately be rendered in JS. See WP_Customize_Control::print_template().
     342         *
    339343         * @since 3.4.0
    340344         */
    341345        protected function render_content() {
    … …  
    443447                                break;
    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 $wp_customize->register_control_type.
     455         *
     456         * In the future, this will also print the template for the control's container element.
     457         *
     458         * @since 4.1.0
     459         */
     460        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         * A JavaScript template for this control's content (but not its container).
     470         *
     471         * All class variables for this control class are available in the `data` JS object.
     472         *
     473         * @see WP_Customize_Control::print_template()
     474         *
     475         * @todo link to docs on what formatting to use.
     476         *
     477         * @since 4.1.0
     478         */
     479        protected function content_template() {}
    446480}
    447481
    448482/**
    … …  
    499533        public function to_json() {
    500534                parent::to_json();
    501535                $this->json['statuses'] = $this->statuses;
     536                $this->json['defaultValue'] = $this->setting->default;
    502537        }
    503538
    504539        /**
    505          * Render the control's content.
     540         * Don't render the control content from PHP, as it's rendered via JS on load.
    506541         *
    507          * @since 3.4.0
     542         * @since 4.1.0
    508543         */
    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.
     544        public function render_content() {}
     545
     546        /**
     547         * Render a JS template for the control's content.
     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; ?>
     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                        <# } #>
    526567
    527568                        <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; ?> />
     569                                <input class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value' ); ?>" {{ defaultValue }} />
    529570                        </div>
    530571                </label>
    531572                <?php

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

     
    5454        protected $customized;
    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         *
    5966         * @var array
    … …  
    822829        }
    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 Custom control class.
     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         *
    827860         * @since 3.4.0
    … …  
    927960         */
    928961        public function register_controls() {
    929962
     963                /* Control Types (custom control classes) */
     964                $this->register_control_type( 'WP_Customize_Color_Control' );
     965
    930966                /* Site Title & Tagline */
    931967
    932968                $this->add_section( 'title_tagline', array(