WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
10/26/2016 06:51:11 AM (8 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.