WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
10/26/2016 06:51:11 AM (10 years ago)
Author:
westonruter
Message:

Customize: Improve custom background properties UI.

Introduces new control for managing the background position. Adds control for setting the background-size.

Props cdog, celloexpressions, grapplerulrich, MikeHansenMe, FolioVision, afercia, helen, melchoyce, karmatosed, westonruter, Kelderic, sebastian.pisula.
Fixes #22058.

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r38933 r38948  
    280280                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-image-control.php' );
    281281                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' );
     282                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-position-control.php' );
    282283                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' );
    283284                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-icon-control.php' );
    … …  
    30273028                $this->register_control_type( 'WP_Customize_Image_Control' );
    30283029                $this->register_control_type( 'WP_Customize_Background_Image_Control' );
     3030                $this->register_control_type( 'WP_Customize_Background_Position_Control' );
    30293031                $this->register_control_type( 'WP_Customize_Cropped_Image_Control' );
    30303032                $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
    … …  
    32773279                        'default'        => get_theme_support( 'custom-background', 'default-image' ),
    32783280                        'theme_supports' => 'custom-background',
     3281                        'sanitize_callback' => array( $this, '_sanitize_background_setting' ),
    32793282                ) );
    32803283
    32813284                $this->add_setting( new WP_Customize_Background_Image_Setting( $this, 'background_image_thumb', array(
    32823285                        'theme_supports' => 'custom-background',
     3286                        'sanitize_callback' => array( $this, '_sanitize_background_setting' ),
    32833287                ) ) );
    32843288
    32853289                $this->add_control( new WP_Customize_Background_Image_Control( $this ) );
    32863290
    3287                 $this->add_setting( 'background_repeat', array(
    3288                         'default'        => get_theme_support( 'custom-background', 'default-repeat' ),
     3291                $this->add_setting( 'background_preset', array(
     3292                        'default'        => get_theme_support( 'custom-background', 'default-preset' ),
    32893293                        'theme_supports' => 'custom-background',
    3290                 ) );
    3291 
    3292                 $this->add_control( 'background_repeat', array(
    3293                         'label'      => __( 'Background Repeat' ),
     3294                        'sanitize_callback' => array( $this, '_sanitize_background_setting' ),
     3295                ) );
     3296
     3297                $this->add_control( 'background_preset', array(
     3298                        'label'      => _x( 'Preset', 'Background Preset' ),
    32943299                        'section'    => 'background_image',
    3295                         'type'       => 'radio',
     3300                        'type'       => 'select',
    32963301                        'choices'    => array(
    3297                                 'no-repeat'  => __('No Repeat'),
    3298                                 'repeat'     => __('Tile'),
    3299                                 'repeat-x'   => __('Tile Horizontally'),
    3300                                 'repeat-y'   => __('Tile Vertically'),
     3302                                'default' => _x( 'Default', 'Default Preset' ),
     3303                                'fill'    => __( 'Fill Screen' ),
     3304                                'fit'     => __( 'Fit to Screen' ),
     3305                                'repeat'  => _x( 'Repeat', 'Repeat Image' ),
     3306                                'custom'  => _x( 'Custom', 'Custom Preset' ),
    33013307                        ),
    33023308                ) );
    … …  
    33053311                        'default'        => get_theme_support( 'custom-background', 'default-position-x' ),
    33063312                        'theme_supports' => 'custom-background',
    3307                 ) );
    3308 
    3309                 $this->add_control( 'background_position_x', array(
    3310                         'label'      => __( 'Background Position' ),
     3313                        'sanitize_callback' => array( $this, '_sanitize_background_setting' ),
     3314                ) );
     3315
     3316                $this->add_setting( 'background_position_y', array(
     3317                        'default'        => get_theme_support( 'custom-background', 'default-position-y' ),
     3318                        'theme_supports' => 'custom-background',
     3319                        'sanitize_callback' => array( $this, '_sanitize_background_setting' ),
     3320                ) );
     3321
     3322                $this->add_control( new WP_Customize_Background_Position_Control( $this, 'background_position', array(
     3323                        'label'    => __( 'Image Position' ),
     3324                        'section'  => 'background_image',
     3325                        'settings' => array(
     3326                                'x' => 'background_position_x',
     3327                                'y' => 'background_position_y',
     3328                        ),
     3329                ) ) );
     3330
     3331                $this->add_setting( 'background_size', array(
     3332                        'default'        => get_theme_support( 'custom-background', 'default-size' ),
     3333                        'theme_supports' => 'custom-background',
     3334                        'sanitize_callback' => array( $this, '_sanitize_background_setting' ),
     3335                ) );
     3336
     3337                $this->add_control( 'background_size', array(
     3338                        'label'      => __( 'Image Size' ),
    33113339                        'section'    => 'background_image',
    3312                         'type'       => 'radio',
     3340                        'type'       => 'select',
    33133341                        'choices'    => array(
    3314                                 'left'       => __('Left'),
    3315                                 'center'     => __('Center'),
    3316                                 'right'      => __('Right'),
     3342                                'auto'    => __( 'Original' ),
     3343                                'contain' => __( 'Fit to Screen' ),
     3344                                'cover'   => __( 'Fill Screen' ),
    33173345                        ),
    33183346                ) );
    33193347
     3348                $this->add_setting( 'background_repeat', array(
     3349                        'default'           => get_theme_support( 'custom-background', 'default-repeat' ),
     3350                        'sanitize_callback' => array( $this, '_sanitize_background_setting' ),
     3351                        'theme_supports'    => 'custom-background',
     3352                ) );
     3353
     3354                $this->add_control( 'background_repeat', array(
     3355                        'label'    => __( 'Repeat Background Image' ),
     3356                        'section'  => 'background_image',
     3357                        'type'     => 'checkbox',
     3358                ) );
     3359
    33203360                $this->add_setting( 'background_attachment', array(
    3321                         'default'        => get_theme_support( 'custom-background', 'default-attachment' ),
    3322                         'theme_supports' => 'custom-background',
     3361                        'default'           => get_theme_support( 'custom-background', 'default-attachment' ),
     3362                        'sanitize_callback' => array( $this, '_sanitize_background_setting' ),
     3363                        'theme_supports'    => 'custom-background',
    33233364                ) );
    33243365
    33253366                $this->add_control( 'background_attachment', array(
    3326                         'label'      => __( 'Background Attachment' ),
    3327                         'section'    => 'background_image',
    3328                         'type'       => 'radio',
    3329                         'choices'    => array(
    3330                                 'scroll'     => __('Scroll'),
    3331                                 'fixed'      => __('Fixed'),
    3332                         ),
    3333                 ) );
     3367                        'label'    => __( 'Scroll with Page' ),
     3368                        'section'  => 'background_image',
     3369                        'type'     => 'checkbox',
     3370                ) );
     3371
    33343372
    33353373                // If the theme is using the default background callback, we can update
    33363374                // the background CSS using postMessage.
    33373375                if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) {
    3338                         foreach ( array( 'color', 'image', 'position_x', 'repeat', 'attachment' ) as $prop ) {
     3376                        foreach ( array( 'color', 'image', 'preset', 'position_x', 'position_y', 'size', 'repeat', 'attachment' ) as $prop ) {
    33393377                                $this->get_setting( 'background_' . $prop )->transport = 'postMessage';
    33403378                        }
    … …  
    36253663
    36263664        /**
     3665         * Callback for validating a background setting value.
     3666         *
     3667         * @since 4.7.0
     3668         * @access private
     3669         *
     3670         * @param string $value Repeat value.
     3671         * @param WP_Customize_Setting $setting Setting.
     3672         * @return string|WP_Error Background value or validation error.
     3673         */
     3674        public function _sanitize_background_setting( $value, $setting ) {
     3675                if ( 'background_repeat' === $setting->id ) {
     3676                        if ( ! in_array( $value, array( 'repeat-x', 'repeat-y', 'repeat', 'no-repeat' ) ) ) {
     3677                                return new WP_Error( 'invalid_value', __( 'Invalid value for background repeat.' ) );
     3678                        }
     3679                } else if ( 'background_attachment' === $setting->id ) {
     3680                        if ( ! in_array( $value, array( 'fixed', 'scroll' ) ) ) {
     3681                                return new WP_Error( 'invalid_value', __( 'Invalid value for background attachment.' ) );
     3682                        }
     3683                } else if ( 'background_position_x' === $setting->id ) {
     3684                        if ( ! in_array( $value, array( 'left', 'center', 'right' ), true ) ) {
     3685                                return new WP_Error( 'invalid_value', __( 'Invalid value for background position X.' ) );
     3686                        }
     3687                } else if ( 'background_position_y' === $setting->id ) {
     3688                        if ( ! in_array( $value, array( 'top', 'center', 'bottom' ), true ) ) {
     3689                                return new WP_Error( 'invalid_value', __( 'Invalid value for background position Y.' ) );
     3690                        }
     3691                } else if ( 'background_size' === $setting->id ) {
     3692                        if ( ! in_array( $value, array( 'auto', 'contain', 'cover' ), true ) ) {
     3693                                return new WP_Error( 'invalid_value', __( 'Invalid value for background size.' ) );
     3694                        }
     3695                } else if ( 'background_preset' === $setting->id ) {
     3696                        if ( ! in_array( $value, array( 'default', 'fill', 'fit', 'repeat', 'custom' ), true ) ) {
     3697                                return new WP_Error( 'invalid_value', __( 'Invalid value for background size.' ) );
     3698                        }
     3699                } else if ( 'background_image' === $setting->id || 'background_image_thumb' === $setting->id ) {
     3700                        $value = empty( $value ) ? '' : esc_url_raw( $value );
     3701                } else {
     3702                        return new WP_Error( 'unrecognized_setting', __( 'Unrecognized background setting.' ) );
     3703                }
     3704                return $value;
     3705        }
     3706
     3707        /**
    36273708         * Callback for rendering the custom logo, used in the custom_logo partial.
    36283709         *
Note: See TracChangeset for help on using the changeset viewer.