WordPress.org
Get WordPress

Make WordPress Core

Ticket #22058: 22058.3.diff

File 22058.3.diff, 30.7 KB (added by cdog, 8 years ago)

  • wp-admin/css/customize-controls.css

     
    955955        float: right;
    956956}
    957957
     958/* Position control */
     959.customize-control-position .position-control .button-group {
     960        display: block;
     961}
     962
    958963/**
    959964 * Themes
    960965 */

  • wp-admin/css/themes.css

     
    11761176        max-height: 300px;
    11771177}
    11781178
     1179.position-control input[type="radio"] {
     1180        display: none;
     1181}
     1182
     1183.position-control input[type="radio"]:checked ~ .button {
     1184        background: #eee;
     1185        border-color: #999;
     1186        -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
     1187        box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
     1188        z-index: 1;
     1189}
     1190
     1191.position-control .circle:before {
     1192        content: "\25cf";
     1193        display: inline-block;
     1194        height: 20px;
     1195        text-align: center;
     1196        width: 20px;
     1197        font-size: 25px;
     1198}
     1199
     1200.position-control .button-group {
     1201        display: block;
     1202}
     1203
     1204.position-control .button-group .button {
     1205        -webkit-border-radius: 0;
     1206        border-radius: 0;
     1207        -webkit-box-shadow: none;
     1208        box-shadow: none;
     1209        height: 40px;
     1210        line-height: 37px;
     1211        margin: 0 -1px 0 0 !important;
     1212        position: relative;
     1213}
     1214
     1215.position-control .button-group .button:active,
     1216.position-control .button-group .button:hover,
     1217.position-control .button-group .button:focus {
     1218        z-index: 1;
     1219}
     1220
     1221.position-control .button-group:last-child .button {
     1222        -webkit-box-shadow: 0 1px 0 #ccc;
     1223        box-shadow: 0 1px 0 #ccc;
     1224}
     1225
     1226.position-control .button-group:first-child > label:first-child .button {
     1227        -webkit-border-radius: 3px 0 0;
     1228        border-radius: 3px 0 0;
     1229}
     1230
     1231.position-control .button-group:first-child > label:first-child .dashicons {
     1232        -webkit-transform: rotate( 45deg );
     1233        -ms-transform: rotate( 45deg );
     1234        transform: rotate( 45deg );
     1235}
     1236
     1237.position-control .button-group:first-child > label:last-child .button {
     1238        -webkit-border-radius: 0 3px 0 0;
     1239        border-radius: 0 3px 0 0;
     1240}
     1241
     1242.position-control .button-group:first-child > label:last-child .dashicons {
     1243        -webkit-transform: rotate( -45deg );
     1244        -ms-transform: rotate( -45deg );
     1245        transform: rotate( -45deg );
     1246}
     1247
     1248.position-control .button-group:last-child > label:first-child .button {
     1249        -webkit-border-radius: 0 0 0 3px;
     1250        border-radius: 0 0 0 3px;
     1251}
     1252
     1253.position-control .button-group:last-child > label:first-child .dashicons {
     1254        -webkit-transform: rotate( -45deg );
     1255        -ms-transform: rotate( -45deg );
     1256        transform: rotate( -45deg );
     1257}
     1258
     1259.position-control .button-group:last-child > label:last-child .button {
     1260        -webkit-border-radius: 0 0 3px 0;
     1261        border-radius: 0 0 3px 0;
     1262}
     1263
     1264.position-control .button-group:last-child > label:last-child .dashicons {
     1265        -webkit-transform: rotate( 45deg );
     1266        -ms-transform: rotate( 45deg );
     1267        transform: rotate( 45deg );
     1268}
     1269
     1270.position-control .button-group .dashicons {
     1271        margin-top: 9px;
     1272}
     1273
     1274.position-control .button-group + .button-group {
     1275        margin-top: -1px;
     1276}
     1277
    11791278/*------------------------------------------------------------------------------
    11801279  23.0 - Full Overlay w/ Sidebar
    11811280------------------------------------------------------------------------------*/

  • wp-admin/custom-background.php

     
    133133                        return;
    134134                }
    135135
    136                 if ( isset($_POST['background-repeat']) ) {
    137                         check_admin_referer('custom-background');
    138                         if ( in_array($_POST['background-repeat'], array('repeat', 'no-repeat', 'repeat-x', 'repeat-y')) )
    139                                 $repeat = $_POST['background-repeat'];
    140                         else
    141                                 $repeat = 'repeat';
    142                         set_theme_mod('background_repeat', $repeat);
     136                if ( isset( $_POST['background-size'] ) ) {
     137                        check_admin_referer( 'custom-background' );
     138
     139                        if ( in_array( $_POST['background-size'], array( 'auto', 'contain', 'cover' ) ) ) {
     140                                $size = $_POST['background-size'];
     141                        } else {
     142                                $size = 'auto';
     143                        }
     144
     145                        set_theme_mod( 'background_size', $size );
    143146                }
    144147
    145                 if ( isset($_POST['background-position-x']) ) {
    146                         check_admin_referer('custom-background');
    147                         if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) )
    148                                 $position = $_POST['background-position-x'];
    149                         else
    150                                 $position = 'left';
    151                         set_theme_mod('background_position_x', $position);
     148                if ( isset( $_POST['background-position'] ) ) {
     149                        check_admin_referer( 'custom-background' );
     150
     151                        $position = explode( ' ', $_POST['background-position'] );
     152
     153                        if ( in_array( $position[0], array( 'left', 'center', 'right' ) ) ) {
     154                                $position_x = $position[0];
     155                        } else {
     156                                $position_x = 'left';
     157                        }
     158
     159                        if ( in_array( $position[1], array( 'top', 'center', 'bottom' ) ) ) {
     160                                $position_y = $position[1];
     161                        } else {
     162                                $position_y = 'top';
     163                        }
     164
     165                        set_theme_mod( 'background_position_x', $position_x );
     166                        set_theme_mod( 'background_position_y', $position_y );
    152167                }
    153168
    154                 if ( isset($_POST['background-attachment']) ) {
    155                         check_admin_referer('custom-background');
    156                         if ( in_array($_POST['background-attachment'], array('fixed', 'scroll')) )
    157                                 $attachment = $_POST['background-attachment'];
    158                         else
    159                                 $attachment = 'fixed';
    160                         set_theme_mod('background_attachment', $attachment);
     169                if ( isset( $_POST['background-repeat'] ) ) {
     170                        check_admin_referer( 'custom-background' );
     171
     172                        $repeat = $_POST['background-repeat'];
     173
     174                        if ( 'no-repeat' !== $repeat ) {
     175                                $repeat = 'repeat';
     176                        }
     177
     178                        set_theme_mod( 'background_repeat', $repeat );
    161179                }
    162180
     181                if ( isset( $_POST['background-attachment'] ) ) {
     182                        check_admin_referer( 'custom-background' );
     183
     184                        $attachment = $_POST['background-attachment'];
     185
     186                        if ( 'fixed' !== $attachment ) {
     187                                $attachment = 'scroll';
     188                        }
     189
     190                        set_theme_mod( 'background_attachment', $attachment );
     191                }
     192
    163193                if ( isset($_POST['background-color']) ) {
    164194                        check_admin_referer('custom-background');
    165195                        $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']);
    … …  
    219249                $background_image_thumb = get_background_image();
    220250                if ( $background_image_thumb ) {
    221251                        $background_image_thumb = esc_url( set_url_scheme( get_theme_mod( 'background_image_thumb', str_replace( '%', '%%', $background_image_thumb ) ) ) );
     252                        $background_size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) );
     253                        $background_position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
     254                        $background_position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) );
     255                        $background_repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
     256                        $background_attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
    222257
    223258                        // Background-image URL must be single quote, see below.
    224                         $background_styles .= ' background-image: url(\'' . $background_image_thumb . '\');'
    225                                 . ' background-repeat: ' . get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) . ';'
    226                                 . ' background-position: top ' . get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
     259                        $background_styles .= " background-image: url('$background_image_thumb');"
     260                                . " background-size: $background_size;"
     261                                . " background-position: $background_position_x $background_position_y;"
     262                                . " background-repeat: $background_repeat;"
     263                                . " background-attachment: $background_attachment;";
    227264                }
    228265        ?>
    229266        <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
    … …  
    287324</tbody>
    288325</table>
    289326
    290 <h3><?php _e('Display Options') ?></h3>
     327<h3><?php _e( 'Display Options' ); ?></h3>
    291328<form method="post">
    292329<table class="form-table">
    293330<tbody>
    294331<?php if ( get_background_image() ) : ?>
    295332<tr>
    296 <th scope="row"><?php _e( 'Position' ); ?></th>
     333<th scope="row"><label for="background-size"><?php _e( 'Image Size' ); ?></label></th>
    297334<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
     335<select id="background-size" name="background-size">
     336<option value="auto"<?php selected( 'auto', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _ex( 'Original', 'Original Size' ); ?></option>
     337<option value="contain"<?php selected( 'contain', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fit to Screen' ); ?></option>
     338<option value="cover"<?php selected( 'cover', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fill Screen' ); ?></option>
     339</select>
     340</fieldset></td>
     341</tr>
     342
     343<?php
     344$background_position = sprintf(
     345        '%s %s',
     346        get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ),
     347        get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) )
     348);
     349?>
     350<tr>
     351<th scope="row"><?php _ex( 'Position', 'Background Position' ); ?></th>
     352<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
     353<div class="position-control">
     354<div class="button-group">
    298355<label>
    299 <input name="background-position-x" type="radio" value="left"<?php checked( 'left', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
    300 <?php _e('Left') ?>
     356        <input name="background-position" type="radio" value="left top"<?php checked( 'left top', $background_position ); ?>>
     357        <span class="button display-options position"><span class="dashicons dashicons-arrow-left-alt"></span></span>
     358        <span class="screen-reader-text"><?php _e( 'Top Left' ); ?></span>
    301359</label>
    302360<label>
    303 <input name="background-position-x" type="radio" value="center"<?php checked( 'center', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
    304 <?php _e('Center') ?>
     361        <input name="background-position" type="radio" value="center top"<?php checked( 'center top', $background_position ); ?>>
     362        <span class="button display-options position"><span class="dashicons dashicons-arrow-up-alt"></span></span>
     363        <span class="screen-reader-text"><?php _e( 'Top' ); ?></span>
    305364</label>
    306365<label>
    307 <input name="background-position-x" type="radio" value="right"<?php checked( 'right', get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ) ); ?> />
    308 <?php _e('Right') ?>
     366        <input name="background-position" type="radio" value="right top"<?php checked( 'right top', $background_position ); ?>>
     367        <span class="button display-options position"><span class="dashicons dashicons-arrow-right-alt"></span></span>
     368        <span class="screen-reader-text"><?php _e( 'Top Right' ); ?></span>
    309369</label>
     370</div>
     371<div class="button-group">
     372<label>
     373        <input name="background-position" type="radio" value="left center"<?php checked( 'left center', $background_position ); ?>>
     374        <span class="button display-options position"><span class="dashicons dashicons-arrow-left-alt"></span></span>
     375        <span class="screen-reader-text"><?php _e( 'Left' ); ?></span>
     376</label>
     377<label>
     378        <input name="background-position" type="radio" value="center center"<?php checked( 'center center', $background_position ); ?>>
     379        <span class="button display-options position"><span class="circle"></span></span>
     380        <span class="screen-reader-text"><?php _e( 'Center' ); ?></span>
     381</label>
     382<label>
     383        <input name="background-position" type="radio" value="right center"<?php checked( 'right center', $background_position ); ?>>
     384        <span class="button display-options position"><span class="dashicons dashicons-arrow-right-alt"></span></span>
     385        <span class="screen-reader-text"><?php _e( 'Right' ); ?></span>
     386</label>
     387</div>
     388<div class="button-group">
     389<label>
     390        <input name="background-position" type="radio" value="left bottom"<?php checked( 'left bottom', $background_position ); ?>>
     391        <span class="button display-options position"><span class="dashicons dashicons-arrow-left-alt"></span></span>
     392        <span class="screen-reader-text"><?php _e( 'Bottom Left' ); ?></span>
     393</label>
     394<label>
     395        <input name="background-position" type="radio" value="center bottom"<?php checked( 'center bottom', $background_position ); ?>>
     396        <span class="button display-options position"><span class="dashicons dashicons-arrow-down-alt"></span></span>
     397        <span class="screen-reader-text"><?php _e( 'Bottom' ); ?></span>
     398</label>
     399<label>
     400        <input name="background-position" type="radio" value="right bottom"<?php checked( 'right bottom', $background_position ); ?>>
     401        <span class="button display-options position"><span class="dashicons dashicons-arrow-right-alt"></span></span>
     402        <span class="screen-reader-text"><?php _e( 'Bottom Right' ); ?></span>
     403</label>
     404</div>
     405</div>
    310406</fieldset></td>
    311407</tr>
    312408
    313409<tr>
    314 <th scope="row"><?php _e( 'Repeat' ); ?></th>
     410<th scope="row"><?php _ex( 'Repeat', 'Background Repeat' ); ?></th>
    315411<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Repeat' ); ?></span></legend>
    316 <label><input type="radio" name="background-repeat" value="no-repeat"<?php checked( 'no-repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('No Repeat'); ?></label>
    317         <label><input type="radio" name="background-repeat" value="repeat"<?php checked( 'repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile'); ?></label>
    318         <label><input type="radio" name="background-repeat" value="repeat-x"<?php checked( 'repeat-x', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile Horizontally'); ?></label>
    319         <label><input type="radio" name="background-repeat" value="repeat-y"<?php checked( 'repeat-y', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?> /> <?php _e('Tile Vertically'); ?></label>
     412<input name="background-repeat" type="hidden" value="no-repeat">
     413<label><input type="checkbox" name="background-repeat" value="repeat"<?php checked( 'repeat', get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) ) ); ?>> <?php _e( 'Repeat Background Image' ); ?></label>
    320414</fieldset></td>
    321415</tr>
    322416
    323417<tr>
    324 <th scope="row"><?php _ex( 'Attachment', 'Background Attachment' ); ?></th>
    325 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Attachment' ); ?></span></legend>
    326 <label>
    327 <input name="background-attachment" type="radio" value="scroll" <?php checked( 'scroll', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?> />
    328 <?php _e( 'Scroll' ); ?>
    329 </label>
    330 <label>
    331 <input name="background-attachment" type="radio" value="fixed" <?php checked( 'fixed', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?> />
    332 <?php _e( 'Fixed' ); ?>
    333 </label>
     418<th scope="row"><?php _ex( 'Scroll', 'Background Scroll' ); ?></th>
     419<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Scroll' ); ?></span></legend>
     420<input name="background-attachment" type="hidden" value="fixed">
     421<label><input name="background-attachment" type="checkbox" value="scroll" <?php checked( 'scroll', get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) ) ); ?>> <?php _e( 'Scroll with Page' ); ?></label>
    334422</fieldset></td>
    335423</tr>
    336424<?php endif; // get_background_image() ?>
    … …  
    342430if ( current_theme_supports( 'custom-background', 'default-color' ) )
    343431        $default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"';
    344432?>
    345 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?> />
     433<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?>>
    346434</fieldset></td>
    347435</tr>
    348436</tbody>

  • wp-admin/js/custom-background.js

     
    1313                        }
    1414                });
    1515
    16                 $('input[name="background-position-x"]').change(function() {
    17                         bgImage.css('background-position', $(this).val() + ' top');
     16                $( 'select[name="background-size"]' ).change( function() {
     17                        bgImage.css( 'background-size', $( this ).val() );
    1818                });
    1919
    20                 $('input[name="background-repeat"]').change(function() {
    21                         bgImage.css('background-repeat', $(this).val());
     20                $( 'input[name="background-position"]' ).change( function() {
     21                        bgImage.css( 'background-position', $( this ).val() );
    2222                });
    2323
     24                $( 'input[name="background-repeat"]' ).change( function() {
     25                        bgImage.css( 'background-repeat', $( this ).is( ':checked' ) ? 'repeat' : 'no-repeat' );
     26                });
     27
     28                $( 'input[name="background-attachment"]' ).change( function() {
     29                        bgImage.css( 'background-attachment', $( this ).is( ':checked' ) ? 'scroll' : 'fixed' );
     30                });
     31
    2432                $('#choose-from-library-link').click( function( event ) {
    2533                        var $el = $(this);
    2634

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

     
    23782378        });
    23792379
    23802380        /**
     2381         * A position control.
     2382         *
     2383         * @class
     2384         * @augments wp.customize.Control
     2385         * @augments wp.customize.Class
     2386         */
     2387        api.PositionControl = api.Control.extend({
     2388                ready: function() {
     2389                        var control = this,
     2390                                value,
     2391                                position;
     2392
     2393                        control.container.on( 'change', 'input[name="background-position"]', function() {
     2394                                value = $( this ).val();
     2395                                position = value.split( ' ' );
     2396
     2397                                control.settings[0]( position[0] );
     2398                                control.settings[1]( position[1] );
     2399                        } );
     2400                }
     2401        });
     2402
     2403        /**
    23812404         * A control for selecting and cropping Site Icons.
    23822405         *
    23832406         * @class
    … …  
    34303453                site_icon:     api.SiteIconControl,
    34313454                header:        api.HeaderControl,
    34323455                background:    api.BackgroundControl,
     3456                position:      api.PositionControl,
    34333457                theme:         api.ThemeControl
    34343458        };
    34353459        api.panelConstructor = {};
    … …  
    41374161                // Control visibility for default controls
    41384162                $.each({
    41394163                        'background_image': {
    4140                                 controls: [ 'background_repeat', 'background_position_x', 'background_attachment' ],
     4164                                controls: [ 'background_size', 'background_position', 'background_repeat', 'background_attachment' ],
    41414165                                callback: function( to ) { return !! to; }
    41424166                        },
    41434167                        'show_on_front': {
    … …  
    41634187                        });
    41644188                });
    41654189
     4190                api.control( 'background_repeat', function( control ) {
     4191                        control.elements[0].unsync( api( 'background_repeat' ) );
     4192
     4193                        control.element = new api.Element( control.container.find( 'input' ) );
     4194                        control.element.set( 'no-repeat' !== control.setting() );
     4195
     4196                        control.element.bind( function( to ) {
     4197                                control.setting.set( to ? 'repeat' : 'no-repeat' );
     4198                        });
     4199
     4200                        control.setting.bind( function( to ) {
     4201                                control.element.set( 'no-repeat' !== to );
     4202                        });
     4203                });
     4204
     4205                api.control( 'background_attachment', function( control ) {
     4206                        control.elements[0].unsync( api( 'background_attachment' ) );
     4207
     4208                        control.element = new api.Element( control.container.find( 'input' ) );
     4209                        control.element.set( 'fixed' !== control.setting() );
     4210
     4211                        control.element.bind( function( to ) {
     4212                                control.setting.set( to ? 'scroll' : 'fixed' );
     4213                        });
     4214
     4215                        control.setting.bind( function( to ) {
     4216                                control.element.set( 'fixed' !== to );
     4217                        });
     4218                });
     4219
    41664220                // Juggle the two controls that use header_textcolor
    41674221                api.control( 'display_header_text', function( control ) {
    41684222                        var last = '';

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

     
    617617/** WP_Customize_Cropped_Image_Control class */
    618618require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' );
    619619
     620/** WP_Customize_Position_Control class */
     621require_once( ABSPATH . WPINC . '/customize/class-wp-customize-position-control.php' );
     622
    620623/** WP_Customize_Site_Icon_Control class */
    621624require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-icon-control.php' );
    622625

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

     
    216216                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-image-control.php' );
    217217                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' );
    218218                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' );
     219                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-position-control.php' );
    219220                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-site-icon-control.php' );
    220221                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-control.php' );
    221222                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-theme-control.php' );
    … …  
    19701971                $this->register_control_type( 'WP_Customize_Image_Control' );
    19711972                $this->register_control_type( 'WP_Customize_Background_Image_Control' );
    19721973                $this->register_control_type( 'WP_Customize_Cropped_Image_Control' );
     1974                $this->register_control_type( 'WP_Customize_Position_Control' );
    19731975                $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
    19741976                $this->register_control_type( 'WP_Customize_Theme_Control' );
    19751977
    … …  
    21982200
    21992201                $this->add_control( new WP_Customize_Background_Image_Control( $this ) );
    22002202
    2201                 $this->add_setting( 'background_repeat', array(
    2202                         'default'        => get_theme_support( 'custom-background', 'default-repeat' ),
     2203                $this->add_setting( 'background_size', array(
     2204                        'default'        => get_theme_support( 'custom-background', 'default-size' ),
    22032205                        'theme_supports' => 'custom-background',
    22042206                ) );
    22052207
    2206                 $this->add_control( 'background_repeat', array(
    2207                         'label'      => __( 'Background Repeat' ),
     2208                $this->add_control( 'background_size', array(
     2209                        'label'      => __( 'Image Size' ),
    22082210                        'section'    => 'background_image',
    2209                         'type'       => 'radio',
     2211                        'type'       => 'select',
    22102212                        'choices'    => array(
    2211                                 'no-repeat'  => __('No Repeat'),
    2212                                 'repeat'     => __('Tile'),
    2213                                 'repeat-x'   => __('Tile Horizontally'),
    2214                                 'repeat-y'   => __('Tile Vertically'),
     2213                                'auto'    => __( 'Original' ),
     2214                                'contain' => __( 'Fit to Screen' ),
     2215                                'cover'   => __( 'Fill Screen' ),
    22152216                        ),
    22162217                ) );
    22172218
    … …  
    22202221                        'theme_supports' => 'custom-background',
    22212222                ) );
    22222223
    2223                 $this->add_control( 'background_position_x', array(
    2224                         'label'      => __( 'Background Position' ),
    2225                         'section'    => 'background_image',
    2226                         'type'       => 'radio',
    2227                         'choices'    => array(
    2228                                 'left'       => __('Left'),
    2229                                 'center'     => __('Center'),
    2230                                 'right'      => __('Right'),
    2231                         ),
     2224                $this->add_setting( 'background_position_y', array(
     2225                        'default'        => get_theme_support( 'custom-background', 'default-position-y' ),
     2226                        'theme_supports' => 'custom-background',
    22322227                ) );
    22332228
     2229                $this->add_control( new WP_Customize_Position_Control( $this, 'background_position', array(
     2230                        'label'    => _x( 'Position', 'Background Position' ),
     2231                        'section'  => 'background_image',
     2232                        'settings' => array( 'background_position_x', 'background_position_y' ),
     2233                ) ) );
     2234
     2235
     2236                $this->add_setting( 'background_repeat', array(
     2237                        'default'           => get_theme_support( 'custom-background', 'default-repeat' ),
     2238                        'sanitize_callback' => array( $this, '_sanitize_background_repeat' ),
     2239                        'theme_supports'    => 'custom-background',
     2240                ) );
     2241
     2242                $this->add_control( 'background_repeat', array(
     2243                        'label'    => __( 'Repeat Background Image' ),
     2244                        'section'  => 'background_image',
     2245                        'settings' => 'background_repeat',
     2246                        'type'     => 'checkbox',
     2247                ) );
     2248
    22342249                $this->add_setting( 'background_attachment', array(
    2235                         'default'        => get_theme_support( 'custom-background', 'default-attachment' ),
    2236                         'theme_supports' => 'custom-background',
     2250                        'default'           => get_theme_support( 'custom-background', 'default-attachment' ),
     2251                        'sanitize_callback' => array( $this, '_sanitize_background_attachment' ),
     2252                        'theme_supports'    => 'custom-background',
    22372253                ) );
    22382254
    22392255                $this->add_control( 'background_attachment', array(
    2240                         'label'      => __( 'Background Attachment' ),
    2241                         'section'    => 'background_image',
    2242                         'type'       => 'radio',
    2243                         'choices'    => array(
    2244                                 'scroll'     => __('Scroll'),
    2245                                 'fixed'      => __('Fixed'),
    2246                         ),
     2256                        'label'    => __( 'Scroll with Page' ),
     2257                        'section'  => 'background_image',
     2258                        'settings' => 'background_attachment',
     2259                        'type'     => 'checkbox',
    22472260                ) );
    22482261
     2262
    22492263                // If the theme is using the default background callback, we can update
    22502264                // the background CSS using postMessage.
    22512265                if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) {
    2252                         foreach ( array( 'color', 'image', 'position_x', 'repeat', 'attachment' ) as $prop ) {
     2266                        foreach ( array( 'color', 'image', 'size', 'position_x', 'position_y', 'repeat', 'attachment' ) as $prop ) {
    22532267                                $this->get_setting( 'background_' . $prop )->transport = 'postMessage';
    22542268                        }
    22552269                }
    … …  
    23442358        }
    23452359
    23462360        /**
     2361         * Callback for validating the background_repeat value.
     2362         *
     2363         * @since 4.7.0
     2364         *
     2365         * @param string $repeat
     2366         * @return string Background repeat.
     2367         */
     2368        public function _sanitize_background_repeat( $repeat ) {
     2369                if ( 'no-repeat' !== $repeat ) {
     2370                        $repeat = 'repeat';
     2371                }
     2372
     2373                return $repeat;
     2374        }
     2375
     2376        /**
     2377         * Callback for validating the background_attachment value.
     2378         *
     2379         * @since 4.7.0
     2380         *
     2381         * @param string $attachment
     2382         * @return string Background attachment.
     2383         */
     2384        public function _sanitize_background_attachment( $attachment ) {
     2385                if ( 'fixed' !== $attachment ) {
     2386                        $attachment = 'scroll';
     2387                }
     2388
     2389                return $attachment;
     2390        }
     2391
     2392        /**
    23472393         * Callback for rendering the custom logo, used in the custom_logo partial.
    23482394         *
    23492395         * This method exists because the partial object and context data are passed

  • wp-includes/js/customize-preview.js

     
    207207                });
    208208
    209209                /* Custom Backgrounds */
    210                 bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
     210                bg = $.map( ['color', 'image', 'size', 'position_x', 'position_y', 'repeat', 'attachment'], function( prop ) {
    211211                        return 'background_' + prop;
    212                 });
     212                } );
    213213
    214                 api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
     214                api.when.apply( api, bg ).done( function( color, image, size, position_x, position_y, repeat, attachment ) {
    215215                        var body = $(document.body),
    216216                                head = $('head'),
    217217                                style = $('#custom-background-css'),
    … …  
    231231
    232232                                if ( image() ) {
    233233                                        css += 'background-image: url("' + image() + '");';
    234                                         css += 'background-position: top ' + position_x() + ';';
     234                                        css += 'background-size: ' + size() + ';';
     235                                        css += 'background-position: ' + position_x() + ' ' + position_y() + ';';
    235236                                        css += 'background-repeat: ' + repeat() + ';';
    236237                                        css += 'background-attachment: ' + attachment() + ';';
    237238                                }

  • wp-includes/theme.php

     
    13761376        if ( $background ) {
    13771377                $image = " background-image: url('$background');";
    13781378
     1379                // Background Size
     1380                $size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) );
     1381
     1382                if ( ! in_array( $size, array( 'auto', 'contain', 'cover' ) ) ) {
     1383                        $size = 'auto';
     1384                }
     1385
     1386                $size = " background-size: $size;";
     1387
     1388                // Background Position
     1389                $position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
     1390                $position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) );
     1391
     1392                if ( ! in_array( $position_x, array( 'left', 'center', 'right' ) ) ) {
     1393                        $position = 'left';
     1394                }
     1395
     1396                if ( ! in_array( $position_y, array( 'top', 'center', 'bottom' ) ) ) {
     1397                        $position = 'top';
     1398                }
     1399
     1400                $position = " background-position: $position_x $position_y;";
     1401
     1402                // Background Repeat
    13791403                $repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
    1380                 if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
     1404
     1405                if ( ! in_array( $repeat, array( 'repeat-x', 'repeat-y', 'repeat', 'no-repeat' ) ) ) {
    13811406                        $repeat = 'repeat';
     1407                }
     1408
    13821409                $repeat = " background-repeat: $repeat;";
    13831410
    1384                 $position = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
    1385                 if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
    1386                         $position = 'left';
    1387                 $position = " background-position: top $position;";
     1411                // Background Scroll
     1412                $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
    13881413
    1389                 $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
    1390                 if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
     1414                if ( 'fixed' !== $attachment ) {
    13911415                        $attachment = 'scroll';
     1416                }
     1417
    13921418                $attachment = " background-attachment: $attachment;";
    13931419
    1394                 $style .= $image . $repeat . $position . $attachment;
     1420                $style .= $image . $size . $position . $repeat . $attachment;
    13951421        }
    13961422?>
    13971423<style type="text/css" id="custom-background-css">
    … …  
    16891715
    16901716                        $defaults = array(
    16911717                                'default-image'          => '',
     1718                                'default-size'           => 'auto',
     1719                                'default-position-x'     => 'left',
     1720                                'default-position-y'     => 'top',
    16921721                                'default-repeat'         => 'repeat',
    1693                                 'default-position-x'     => 'left',
    16941722                                'default-attachment'     => 'scroll',
    16951723                                'default-color'          => '',
    16961724                                'wp-head-callback'       => '_custom_background_cb',
    … …  
    20822110                return;
    20832111        }
    20842112
    2085         require_once ABSPATH . WPINC . '/class-wp-customize-manager.php'; 
     2113        require_once ABSPATH . WPINC . '/class-wp-customize-manager.php';
    20862114        $GLOBALS['wp_customize'] = new WP_Customize_Manager();
    20872115}
    20882116