WordPress.org

Make WordPress Core


Ignore:
Timestamp:
03/28/2012 04:14:09 AM (8 years ago)
Author:
koopersmith
Message:

Create WP_Customize_Control to separate the process of rendering a control from fetching, previewing, and saving its values. see #19910.

Many-to-many mapping between settings and controls.

  • Settings and controls have been separated in both the PHP (WP_Customize_Setting, WP_Customize_Control) and the JS (wp.customize.Setting, wp.customize.Control).
  • While most settings are tied to a single control, some require multiple controls. The 'header_textcolor' control is a good example: to hide the header text, header_textcolor is set to 'blank'.

Add 'Display Header Text' control.

A handful of miscellaneous bugfixes along the way.

Notes:

  • Controls should be separated out a bit more; juggling type-specific arguments in the switch statement is rather inelegant.
  • Page dropdowns are currently inactive and need to be re-linked.
File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/wp-includes/class-wp-customize-setting.php

    r20290 r20295  
    1111    public $manager;
    1212    public $id;
    13     public $priority          = 10;
    14     public $section           = '';
    15     public $label             = '';
    16     public $control           = 'text';
    17     public $control_params    = array();
     13
    1814    public $type              = 'theme_mod';
    19     public $choices           = array();
    2015    public $capability        = 'edit_theme_options';
    2116    public $theme_supports    = '';
    2217    public $default           = '';
    2318    public $sanitize_callback = '';
    24     public $visibility;
    2519
    2620    protected $id_data = array();
     
    6559
    6660    /**
    67      * Enqueue setting related scripts/styles.
    68      *
    69      * @since 3.4.0
    70      */
    71     public function enqueue() {
    72         switch( $this->control ) {
    73             case 'color':
    74                 wp_enqueue_script( 'farbtastic' );
    75                 wp_enqueue_style( 'farbtastic' );
    76                 break;
    77             case 'upload':
    78                 wp_enqueue_script( 'wp-plupload' );
    79                 break;
    80         }
    81     }
    82 
    83     /**
    8461     * Handle previewing the setting.
    8562     *
     
    276253            return false;
    277254
    278         $section = $this->manager->get_section( $this->section );
    279         if ( isset( $section ) && ! $section->check_capabilities() )
    280             return false;
    281 
    282255        return true;
    283     }
    284 
    285     /**
    286      * Check capabiliites and render the control.
    287      *
    288      * @since 3.4.0
    289      */
    290     public final function maybe_render() {
    291         if ( ! $this->check_capabilities() )
    292             return;
    293 
    294         do_action( 'customize_render_setting', $this );
    295         do_action( 'customize_render_setting_' . $this->id, $this );
    296 
    297         $this->render();
    298     }
    299 
    300     /**
    301      * Render the control. Renders the control wrapper, then calls $this->render_content().
    302      *
    303      * @since 3.4.0
    304      */
    305     protected function render() {
    306 
    307         $id    = 'customize-control-' . $this->id;
    308         $class = 'customize-control customize-control-' . $this->control;
    309 
    310         $style = '';
    311         if ( $this->visibility ) {
    312             if ( is_string( $this->visibility ) ) {
    313                 $visibility_id    = $this->visibility;
    314                 $visibility_value = true;
    315             } else {
    316                 $visibility_id    = $this->visibility[0];
    317                 $visibility_value = $this->visibility[1];
    318             }
    319             $visibility_setting = $this->manager->get_setting( $visibility_id );
    320 
    321             if ( $visibility_setting && $visibility_value != $visibility_setting->value() )
    322                 $style = 'style="display:none;"';
    323         }
    324 
    325         ?><li id="<?php echo esc_attr( $id ); ?>" class="<?php echo esc_attr( $class ); ?>" <?php echo $style; ?>>
    326             <?php $this->render_content(); ?>
    327         </li><?php
    328     }
    329 
    330     /**
    331      * Render the control's content.
    332      *
    333      * Allows the content to be overriden without having to rewrite the wrapper.
    334      *
    335      * @since 3.4.0
    336      */
    337     protected function render_content() {
    338         switch( $this->control ) {
    339             case 'text':
    340                 ?>
    341                 <label>
    342                     <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    343                     <input type="text" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
    344                 </label>
    345                 <?php
    346                 break;
    347             case 'color':
    348                 ?>
    349                 <label>
    350                     <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    351                     <div class="color-picker">
    352                         <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
    353                         <a href="#"></a>
    354                         <div class="color-picker-controls">
    355                             <div class="farbtastic-placeholder"></div>
    356                             <div class="color-picker-details">
    357                                 <div class="color-picker-hex">
    358                                     <span>#</span>
    359                                     <input type="text" />
    360                                 </div>
    361                             </div>
    362                         </div>
    363                     </div>
    364                 </label>
    365                 <?php
    366                 break;
    367             case 'checkbox':
    368                 ?>
    369                 <label>
    370                     <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    371                     <input type="checkbox" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); checked( $this->value() ); ?> class="customize-control-content" />
    372                 </label>
    373                 <?php
    374                 break;
    375             case 'radio':
    376                 if ( empty( $this->choices ) )
    377                     return;
    378 
    379                 ?>
    380                 <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    381                 <?php
    382                 foreach ( $this->choices as $value => $label ) :
    383                     ?>
    384                     <label>
    385                         <input type="radio" value="<?php echo esc_attr( $value ); ?>" <?php $this->name(); checked( $this->value(), $value ); ?> />
    386                         <?php echo esc_html( $label ); ?><br/>
    387                     </label>
    388                     <?php
    389                 endforeach;
    390                 break;
    391             case 'select':
    392                 if ( empty( $this->choices ) )
    393                     return;
    394 
    395                 ?>
    396                 <label>
    397                     <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    398                     <select <?php $this->name(); ?> class="customize-control-content">
    399                         <?php
    400                         foreach ( $this->choices as $value => $label )
    401                             echo '<option value="' . esc_attr( $value ) . '"' . selected( $this->value(), $value, false ) . '>' . $label . '</option>';
    402                         ?>
    403                     </select>
    404                 </label>
    405                 <?php
    406                 break;
    407             case 'upload':
    408                 ?>
    409                 <label>
    410                     <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    411                     <div>
    412                         <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
    413                         <a href="#" class="button-secondary upload"><?php _e( 'Upload' ); ?></a>
    414                         <a href="#" class="remove"><?php _e( 'Remove' ); ?></a>
    415                     </div>
    416                 </label>
    417                 <?php
    418                 break;
    419             case 'image':
    420                 $value = $this->value();
    421 
    422                 $image = $value;
    423                 if ( isset( $this->control_params['get_url'] ) )
    424                     $image = call_user_func( $this->control_params['get_url'], $image );
    425 
    426                 ?>
    427                 <label>
    428                     <span class="customize-control-title"><?php echo esc_html( $this->label ); ?></span>
    429                     <input type="hidden" value="<?php echo esc_attr( $this->value() ); ?>" <?php $this->name(); ?> />
    430                     <div class="customize-image-picker">
    431                         <div class="thumbnail">
    432                             <?php if ( empty( $image ) ): ?>
    433                                 <img style="display:none;" />
    434                             <?php else: ?>
    435                                 <img src="<?php echo esc_url( $image ); ?>" />
    436                             <?php endif; ?>
    437                         </div>
    438                         <div class="actions">
    439                             <a href="#" class="upload"><?php _e( 'Upload New' ); ?></a>
    440                             <a href="#" class="change"><?php _e( 'Change Image' ); ?></a>
    441                             <a href="#" class="remove"><?php _e( 'Remove Image' ); ?></a>
    442                         </div>
    443                         <div class="library">
    444                             <ul>
    445                                 <?php foreach ( $this->control_params['tabs'] as $tab ): ?>
    446                                     <li data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
    447                                         <?php echo esc_html( $tab[1] ); ?>
    448                                     </li>
    449                                 <?php endforeach; ?>
    450                             </ul>
    451                             <?php foreach ( $this->control_params['tabs'] as $tab ): ?>
    452                                 <div class="library-content" data-customize-tab='<?php echo esc_attr( $tab[0] ); ?>'>
    453                                     <?php call_user_func( $tab[2] ); ?>
    454                                 </div>
    455                             <?php endforeach; ?>
    456                         </div>
    457                     </div>
    458                 </label>
    459                 <?php
    460                 break;
    461             case 'dropdown-pages':
    462                 printf(
    463                     '<label class="customize-control-select"><span class="customize-control-title">%s</span> %s</label>',
    464                     $this->label,
    465                     wp_dropdown_pages(
    466                         array(
    467                             'name'              => $this->get_name(),
    468                             'echo'              => 0,
    469                             'show_option_none'  => __( '&mdash; Select &mdash;' ),
    470                             'option_none_value' => '0',
    471                             'selected'          => get_option( $this->id )
    472                         )
    473                     )
    474                 );
    475                 break;
    476         }
    477     }
    478 
    479     /**
    480      * Retrieve the name attribute for an input.
    481      *
    482      * @since 3.4.0
    483      *
    484      * @return string The name.
    485      */
    486     public final function get_name() {
    487         return self::name_prefix . esc_attr( $this->id );
    488     }
    489 
    490     /**
    491      * Echo the HTML name attribute for an input.
    492      *
    493      * @since 3.4.0
    494      *
    495      * @return string The HTML name attribute.
    496      */
    497     public final function name() {
    498         echo 'name="' . $this->get_name() . '"';
    499256    }
    500257
Note: See TracChangeset for help on using the changeset viewer.