WordPress.org
Get WordPress

Make WordPress Core

Ticket #22058: 22058.8.diff

File 22058.8.diff, 39.2 KB (added by cdog, 8 years ago)

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

     
    10901090        float: right;
    10911091}
    10921092
     1093/* Background position control */
     1094.customize-control-background_position .background-position-control .button-group {
     1095        display: block;
     1096}
     1097
    10931098/**
    10941099 * Custom CSS Section
    10951100 *

  • wp-admin/css/themes.css

     
    11761176        max-height: 300px;
    11771177}
    11781178
     1179.background-position-control input[type="radio"]:checked ~ .button {
     1180        background: #eee;
     1181        border-color: #999;
     1182        -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
     1183        box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 );
     1184        z-index: 1;
     1185}
     1186
     1187.background-position-control input[type="radio"]:focus ~ .button {
     1188        border-color: #5b9dd9;
     1189        -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
     1190        box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, .5 ), 0 0 3px rgba( 0, 115, 170, .8 );
     1191        color: #23282d;
     1192}
     1193
     1194.background-position-control .background-position-center-icon,
     1195.background-position-control .background-position-center-icon:before {
     1196        display: inline-block;
     1197        line-height: 1;
     1198        text-align: center;
     1199        -webkit-transition: background-color .1s ease-in 0;
     1200        transition: background-color .1s ease-in 0;
     1201}
     1202
     1203.background-position-control .background-position-center-icon {
     1204        height: 20px;
     1205        margin-top: 13px;
     1206        vertical-align: top;
     1207        width: 20px;
     1208}
     1209
     1210.background-position-control .background-position-center-icon:before {
     1211        background-color: #555;
     1212        -webkit-border-radius: 50%;
     1213        border-radius: 50%;
     1214        content: "";
     1215        height: 12px;
     1216        width: 12px;
     1217}
     1218
     1219.background-position-control .button:hover .background-position-center-icon:before,
     1220.background-position-control input[type="radio"]:focus ~ .button .background-position-center-icon:before {
     1221        background-color: #23282d;
     1222}
     1223
     1224.background-position-control .button-group {
     1225        display: block;
     1226}
     1227
     1228.background-position-control .button-group .button {
     1229        -webkit-border-radius: 0;
     1230        border-radius: 0;
     1231        -webkit-box-shadow: none;
     1232        box-shadow: none;
     1233        height: 40px !important;
     1234        line-height: 37px !important;
     1235        margin: 0 -1px 0 0 !important;
     1236        padding: 0 10px 1px !important;
     1237        position: relative;
     1238}
     1239
     1240.background-position-control .button-group .button:active,
     1241.background-position-control .button-group .button:hover,
     1242.background-position-control .button-group .button:focus {
     1243        z-index: 1;
     1244}
     1245
     1246.background-position-control .button-group:last-child .button {
     1247        -webkit-box-shadow: 0 1px 0 #ccc;
     1248        box-shadow: 0 1px 0 #ccc;
     1249}
     1250
     1251.background-position-control .button-group > label {
     1252        margin: 0 !important;
     1253}
     1254
     1255.background-position-control .button-group:first-child > label:first-child .button {
     1256        -webkit-border-radius: 3px 0 0;
     1257        border-radius: 3px 0 0;
     1258}
     1259
     1260.background-position-control .button-group:first-child > label:first-child .dashicons {
     1261        -webkit-transform: rotate( 45deg );
     1262        -ms-transform: rotate( 45deg );
     1263        transform: rotate( 45deg );
     1264}
     1265
     1266.background-position-control .button-group:first-child > label:last-child .button {
     1267        -webkit-border-radius: 0 3px 0 0;
     1268        border-radius: 0 3px 0 0;
     1269}
     1270
     1271.background-position-control .button-group:first-child > label:last-child .dashicons {
     1272        -webkit-transform: rotate( -45deg );
     1273        -ms-transform: rotate( -45deg );
     1274        transform: rotate( -45deg );
     1275}
     1276
     1277.background-position-control .button-group:last-child > label:first-child .button {
     1278        -webkit-border-radius: 0 0 0 3px;
     1279        border-radius: 0 0 0 3px;
     1280}
     1281
     1282.background-position-control .button-group:last-child > label:first-child .dashicons {
     1283        -webkit-transform: rotate( -45deg );
     1284        -ms-transform: rotate( -45deg );
     1285        transform: rotate( -45deg );
     1286}
     1287
     1288.background-position-control .button-group:last-child > label:last-child .button {
     1289        -webkit-border-radius: 0 0 3px 0;
     1290        border-radius: 0 0 3px 0;
     1291}
     1292
     1293.background-position-control .button-group:last-child > label:last-child .dashicons {
     1294        -webkit-transform: rotate( 45deg );
     1295        -ms-transform: rotate( 45deg );
     1296        transform: rotate( 45deg );
     1297}
     1298
     1299.background-position-control .button-group .dashicons {
     1300        margin-top: 9px;
     1301}
     1302
     1303.background-position-control .button-group + .button-group {
     1304        margin-top: -1px;
     1305}
     1306
    11791307/*------------------------------------------------------------------------------
    11801308  23.0 - Full Overlay w/ Sidebar
    11811309------------------------------------------------------------------------------*/

  • 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-preset'] ) ) {
     137                        check_admin_referer( 'custom-background' );
     138
     139                        if ( in_array( $_POST['background-preset'], array( 'default', 'fill', 'fit', 'repeat', 'custom' ) ) ) {
     140                                $preset = $_POST['background-preset'];
     141                        } else {
     142                                $preset = 'default';
     143                        }
     144
     145                        set_theme_mod( 'background_preset', $preset );
    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-size'] ) ) {
     170                        check_admin_referer( 'custom-background' );
     171
     172                        if ( in_array( $_POST['background-size'], array( 'auto', 'contain', 'cover' ) ) ) {
     173                                $size = $_POST['background-size'];
     174                        } else {
     175                                $size = 'auto';
     176                        }
     177
     178                        set_theme_mod( 'background_size', $size );
    161179                }
    162180
     181                if ( isset( $_POST['background-repeat'] ) ) {
     182                        check_admin_referer( 'custom-background' );
     183
     184                        $repeat = $_POST['background-repeat'];
     185
     186                        if ( 'no-repeat' !== $repeat ) {
     187                                $repeat = 'repeat';
     188                        }
     189
     190                        set_theme_mod( 'background_repeat', $repeat );
     191                }
     192
     193                if ( isset( $_POST['background-attachment'] ) ) {
     194                        check_admin_referer( 'custom-background' );
     195
     196                        $attachment = $_POST['background-attachment'];
     197
     198                        if ( 'fixed' !== $attachment ) {
     199                                $attachment = 'scroll';
     200                        }
     201
     202                        set_theme_mod( 'background_attachment', $attachment );
     203                }
     204
    163205                if ( isset($_POST['background-color']) ) {
    164206                        check_admin_referer('custom-background');
    165207                        $color = preg_replace('/[^0-9a-fA-F]/', '', $_POST['background-color']);
    … …  
    219261                $background_image_thumb = get_background_image();
    220262                if ( $background_image_thumb ) {
    221263                        $background_image_thumb = esc_url( set_url_scheme( get_theme_mod( 'background_image_thumb', str_replace( '%', '%%', $background_image_thumb ) ) ) );
     264                        $background_position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
     265                        $background_position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) );
     266                        $background_size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) );
     267                        $background_repeat = get_theme_mod( 'background_repeat', get_theme_support( 'custom-background', 'default-repeat' ) );
     268                        $background_attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
    222269
    223270                        // 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' ) );
     271                        $background_styles .= " background-image: url('$background_image_thumb');"
     272                                . " background-size: $background_size;"
     273                                . " background-position: $background_position_x $background_position_y;"
     274                                . " background-repeat: $background_repeat;"
     275                                . " background-attachment: $background_attachment;";
    227276                }
    228277        ?>
    229278        <div id="custom-background-image" style="<?php echo $background_styles; ?>"><?php // must be double quote, see above ?>
    … …  
    287336</tbody>
    288337</table>
    289338
    290 <h3><?php _e('Display Options') ?></h3>
     339<h3><?php _e( 'Display Options' ); ?></h3>
    291340<form method="post">
    292341<table class="form-table">
    293342<tbody>
    294343<?php if ( get_background_image() ) : ?>
     344<input name="background-preset" type="hidden" value="custom">
     345
     346<?php
     347$background_position = sprintf(
     348        '%s %s',
     349        get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) ),
     350        get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) )
     351);
     352
     353$background_position_options = array(
     354        array(
     355                'left top'   => array( 'label' => __( 'Top Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     356                'center top' => array( 'label' => __( 'Top' ), 'icon' => 'dashicons dashicons-arrow-up-alt' ),
     357                'right top'  => array( 'label' => __( 'Top Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     358        ),
     359        array(
     360                'left center'   => array( 'label' => __( 'Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     361                'center center' => array( 'label' => __( 'Center' ), 'icon' => 'background-position-center-icon' ),
     362                'right center'  => array( 'label' => __( 'Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     363        ),
     364        array(
     365                'left bottom'   => array( 'label' => __( 'Bottom Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     366                'center bottom' => array( 'label' => __( 'Bottom' ), 'icon' => 'dashicons dashicons-arrow-down-alt' ),
     367                'right bottom'  => array( 'label' => __( 'Bottom Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     368        ),
     369);
     370?>
    295371<tr>
    296 <th scope="row"><?php _e( 'Position' ); ?></th>
    297 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
    298 <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') ?>
    301 </label>
    302 <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') ?>
    305 </label>
    306 <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') ?>
    309 </label>
     372<th scope="row"><?php _e( 'Image Position' ); ?></th>
     373<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Position' ); ?></span></legend>
     374<div class="background-position-control">
     375<?php foreach ( $background_position_options as $group ) : ?>
     376        <div class="button-group">
     377        <?php foreach ( $group as $value => $input ) : ?>
     378                <label>
     379                        <input class="ui-helper-hidden-accessible" name="background-position" type="radio" value="<?php echo $value; ?>"<?php checked( $value, $background_position ); ?>>
     380                        <span class="button display-options position"><span class="<?php echo $input['icon']; ?>" aria-hidden="true"></span></span>
     381                        <span class="screen-reader-text"><?php echo $input['label']; ?></span>
     382                </label>
     383        <?php endforeach; ?>
     384        </div>
     385<?php endforeach; ?>
     386</div>
    310387</fieldset></td>
    311388</tr>
    312389
    313390<tr>
    314 <th scope="row"><?php _e( 'Repeat' ); ?></th>
    315 <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>
     391<th scope="row"><label for="background-size"><?php _e( 'Image Size' ); ?></label></th>
     392<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Image Size' ); ?></span></legend>
     393<select id="background-size" name="background-size">
     394<option value="auto"<?php selected( 'auto', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _ex( 'Original', 'Original Size' ); ?></option>
     395<option value="contain"<?php selected( 'contain', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fit to Screen' ); ?></option>
     396<option value="cover"<?php selected( 'cover', get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) ) ); ?>><?php _e( 'Fill Screen' ); ?></option>
     397</select>
    320398</fieldset></td>
    321399</tr>
    322400
    323401<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>
     402<th scope="row"><?php _ex( 'Repeat', 'Background Repeat' ); ?></th>
     403<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Repeat', 'Background Repeat' ); ?></span></legend>
     404<input name="background-repeat" type="hidden" value="no-repeat">
     405<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>
    334406</fieldset></td>
    335407</tr>
     408
     409<tr>
     410<th scope="row"><?php _ex( 'Scroll', 'Background Scroll' ); ?></th>
     411<td><fieldset><legend class="screen-reader-text"><span><?php _ex( 'Scroll', 'Background Scroll' ); ?></span></legend>
     412<input name="background-attachment" type="hidden" value="fixed">
     413<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>
     414</fieldset></td>
     415</tr>
    336416<?php endif; // get_background_image() ?>
    337417<tr>
    338418<th scope="row"><?php _e( 'Background Color' ); ?></th>
    … …  
    342422if ( current_theme_supports( 'custom-background', 'default-color' ) )
    343423        $default_color = ' data-default-color="#' . esc_attr( get_theme_support( 'custom-background', 'default-color' ) ) . '"';
    344424?>
    345 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?> />
     425<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr( get_background_color() ); ?>"<?php echo $default_color ?>>
    346426</fieldset></td>
    347427</tr>
    348428</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

     
    31363136        });
    31373137
    31383138        /**
     3139         * A control for positioning a background image.
     3140         *
     3141         * @class
     3142         * @augments wp.customize.Control
     3143         * @augments wp.customize.Class
     3144         */
     3145        api.BackgroundPositionControl = api.Control.extend( {
     3146                ready: function() {
     3147                        var control = this,
     3148                                value,
     3149                                position;
     3150
     3151                        control.container.on( 'change', 'input[name="background-position"]', function() {
     3152                                value = $( this ).val();
     3153                                position = value.split( ' ' );
     3154
     3155                                control.settings[0]( position[0] );
     3156                                control.settings[1]( position[1] );
     3157                        } );
     3158                }
     3159        } );
     3160
     3161        /**
    31393162         * A control for selecting and cropping an image.
    31403163         *
    31413164         * @class
    … …  
    44854508
    44864509        api.settingConstructor = {};
    44874510        api.controlConstructor = {
    4488                 color:         api.ColorControl,
    4489                 media:         api.MediaControl,
    4490                 upload:        api.UploadControl,
    4491                 image:         api.ImageControl,
    4492                 cropped_image: api.CroppedImageControl,
    4493                 site_icon:     api.SiteIconControl,
    4494                 header:        api.HeaderControl,
    4495                 background:    api.BackgroundControl,
    4496                 theme:         api.ThemeControl
     4511                color:               api.ColorControl,
     4512                media:               api.MediaControl,
     4513                upload:              api.UploadControl,
     4514                image:               api.ImageControl,
     4515                cropped_image:       api.CroppedImageControl,
     4516                site_icon:           api.SiteIconControl,
     4517                header:              api.HeaderControl,
     4518                background:          api.BackgroundControl,
     4519                background_position: api.BackgroundPositionControl,
     4520                theme:               api.ThemeControl
    44974521        };
    44984522        api.panelConstructor = {
    44994523                themes: api.ThemesPanel
    … …  
    46184642                        if ( 'themes' === panel.id ) {
    46194643                                return; // Don't reflow theme sections, as doing so moves them after the themes container.
    46204644                        }
    4621                        
     4645
    46224646                        var sections = panel.sections(),
    46234647                                sectionHeadContainers = _.pluck( sections, 'headContainer' );
    46244648                        rootNodes.push( panel );
    … …  
    55095533                // Control visibility for default controls
    55105534                $.each({
    55115535                        'background_image': {
    5512                                 controls: [ 'background_repeat', 'background_position_x', 'background_attachment' ],
     5536                                controls: [ 'background_preset', 'background_position', 'background_size', 'background_repeat', 'background_attachment' ],
    55135537                                callback: function( to ) { return !! to; }
    55145538                        },
    55155539                        'show_on_front': {
    … …  
    55355559                        });
    55365560                });
    55375561
     5562                api.control( 'background_preset', function( control ) {
     5563                        var visibility = { // position, size, repeat, attachment
     5564                                'default': [ false, false, false, false ],
     5565                                'fill': [ true, false, false, false ],
     5566                                'fit': [ true, false, true, false ],
     5567                                'repeat': [ true, false, false, true ],
     5568                                'custom': [ true, true, true, true ],
     5569                        };
     5570
     5571                        var defaultValues = [
     5572                                _wpCustomizeBackground.defaults['default-position-x'],
     5573                                _wpCustomizeBackground.defaults['default-position-y'],
     5574                                _wpCustomizeBackground.defaults['default-size'],
     5575                                _wpCustomizeBackground.defaults['default-repeat'],
     5576                                _wpCustomizeBackground.defaults['default-attachment'],
     5577                        ];
     5578
     5579                        var values = { // position_x, position_y, size, repeat, attachment
     5580                                'default': defaultValues,
     5581                                'fill': [ 'left', 'top', 'cover', 'no-repeat', 'fixed' ],
     5582                                'fit': [ 'left', 'top', 'contain', 'no-repeat', 'fixed' ],
     5583                                'repeat': [ 'left', 'top', 'auto', 'repeat', 'scroll' ],
     5584                        };
     5585
     5586                        var toggleVisibility = function( preset ) {
     5587                                api.control( 'background_position' ).container.toggle( visibility[ preset ][0] );
     5588                                api.control( 'background_size' ).container.toggle( visibility[ preset ][1] );
     5589                                api.control( 'background_repeat' ).container.toggle( visibility[ preset ][2] );
     5590                                api.control( 'background_attachment' ).container.toggle( visibility[ preset ][3] );
     5591                        };
     5592
     5593                        var updateSettings = function( preset ) {
     5594                                api( 'background_position_x' ).set( values[ preset ][0] );
     5595                                api( 'background_position_y' ).set( values[ preset ][1] );
     5596
     5597                                api.control( 'background_position' ).container.find( 'input[name="background-position"]' ).val( [ values[ preset ][0] + ' ' + values[ preset ][1] ] );
     5598
     5599                                api( 'background_size' ).set( values[ preset ][2] );
     5600                                api( 'background_repeat' ).set( values[ preset ][3] );
     5601                                api( 'background_attachment' ).set( values[ preset ][4] );
     5602                        };
     5603
     5604                        var preset = control.setting.get();
     5605
     5606                        toggleVisibility( preset );
     5607
     5608                        control.setting.bind( 'change', function( preset ) {
     5609                                toggleVisibility( preset );
     5610
     5611                                if ( 'custom' === preset ) {
     5612                                        return;
     5613                                }
     5614
     5615                                updateSettings( preset );
     5616                        } );
     5617                } );
     5618
     5619                api.control( 'background_repeat', function( control ) {
     5620                        control.elements[0].unsync( api( 'background_repeat' ) );
     5621
     5622                        control.element = new api.Element( control.container.find( 'input' ) );
     5623                        control.element.set( 'no-repeat' !== control.setting() );
     5624
     5625                        control.element.bind( function( to ) {
     5626                                control.setting.set( to ? 'repeat' : 'no-repeat' );
     5627                        } );
     5628
     5629                        control.setting.bind( function( to ) {
     5630                                control.element.set( 'no-repeat' !== to );
     5631                        } );
     5632                } );
     5633
     5634                api.control( 'background_attachment', function( control ) {
     5635                        control.elements[0].unsync( api( 'background_attachment' ) );
     5636
     5637                        control.element = new api.Element( control.container.find( 'input' ) );
     5638                        control.element.set( 'fixed' !== control.setting() );
     5639
     5640                        control.element.bind( function( to ) {
     5641                                control.setting.set( to ? 'scroll' : 'fixed' );
     5642                        } );
     5643
     5644                        control.setting.bind( function( to ) {
     5645                                control.element.set( 'fixed' !== to );
     5646                        } );
     5647                } );
     5648
    55385649                // Juggle the two controls that use header_textcolor
    55395650                api.control( 'display_header_text', function( control ) {
    55405651                        var last = '';

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

     
    660660/** WP_Customize_Background_Image_Control class */
    661661require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-image-control.php' );
    662662
     663/** WP_Customize_Background_Position_Control class */
     664require_once( ABSPATH . WPINC . '/customize/class-wp-customize-background-position-control.php' );
     665
    663666/** WP_Customize_Cropped_Image_Control class */
    664667require_once( ABSPATH . WPINC . '/customize/class-wp-customize-cropped-image-control.php' );
    665668

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

     
    279279                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-upload-control.php' );
    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' );
    284285                require_once( ABSPATH . WPINC . '/customize/class-wp-customize-header-image-control.php' );
    … …  
    30043005                $this->register_control_type( 'WP_Customize_Upload_Control' );
    30053006                $this->register_control_type( 'WP_Customize_Image_Control' );
    30063007                $this->register_control_type( 'WP_Customize_Background_Image_Control' );
     3008                $this->register_control_type( 'WP_Customize_Background_Position_Control' );
    30073009                $this->register_control_type( 'WP_Customize_Cropped_Image_Control' );
    30083010                $this->register_control_type( 'WP_Customize_Site_Icon_Control' );
    30093011                $this->register_control_type( 'WP_Customize_Theme_Control' );
    … …  
    32623264
    32633265                $this->add_control( new WP_Customize_Background_Image_Control( $this ) );
    32643266
    3265                 $this->add_setting( 'background_repeat', array(
    3266                         'default'        => get_theme_support( 'custom-background', 'default-repeat' ),
     3267                $this->add_setting( 'background_preset', array(
     3268                        'default'        => get_theme_support( 'custom-background', 'default-preset' ),
    32673269                        'theme_supports' => 'custom-background',
    32683270                ) );
    32693271
    3270                 $this->add_control( 'background_repeat', array(
    3271                         'label'      => __( 'Background Repeat' ),
     3272                $this->add_control( 'background_preset', array(
     3273                        'label'      => _x( 'Preset', 'Background Preset' ),
    32723274                        'section'    => 'background_image',
    3273                         'type'       => 'radio',
     3275                        'type'       => 'select',
    32743276                        'choices'    => array(
    3275                                 'no-repeat'  => __('No Repeat'),
    3276                                 'repeat'     => __('Tile'),
    3277                                 'repeat-x'   => __('Tile Horizontally'),
    3278                                 'repeat-y'   => __('Tile Vertically'),
     3277                                'default' => _x( 'Default', 'Default Preset' ),
     3278                                'fill'    => __( 'Fill Screen' ),
     3279                                'fit'     => __( 'Fit to Screen' ),
     3280                                'repeat'  => _x( 'Repeat', 'Repeat Image' ),
     3281                                'custom'  => _x( 'Custom', 'Custom Preset' ),
    32793282                        ),
    32803283                ) );
    32813284
    … …  
    32843287                        'theme_supports' => 'custom-background',
    32853288                ) );
    32863289
    3287                 $this->add_control( 'background_position_x', array(
    3288                         'label'      => __( 'Background Position' ),
     3290                $this->add_setting( 'background_position_y', array(
     3291                        'default'        => get_theme_support( 'custom-background', 'default-position-y' ),
     3292                        'theme_supports' => 'custom-background',
     3293                ) );
     3294
     3295                $this->add_control( new WP_Customize_Background_Position_Control( $this, 'background_position', array(
     3296                        'label'    => __( 'Image Position' ),
     3297                        'section'  => 'background_image',
     3298                        'settings' => array( 'background_position_x', 'background_position_y' ),
     3299                ) ) );
     3300
     3301                $this->add_setting( 'background_size', array(
     3302                        'default'        => get_theme_support( 'custom-background', 'default-size' ),
     3303                        'theme_supports' => 'custom-background',
     3304                ) );
     3305
     3306                $this->add_control( 'background_size', array(
     3307                        'label'      => __( 'Image Size' ),
    32893308                        'section'    => 'background_image',
    3290                         'type'       => 'radio',
     3309                        'type'       => 'select',
    32913310                        'choices'    => array(
    3292                                 'left'       => __('Left'),
    3293                                 'center'     => __('Center'),
    3294                                 'right'      => __('Right'),
     3311                                'auto'    => __( 'Original' ),
     3312                                'contain' => __( 'Fit to Screen' ),
     3313                                'cover'   => __( 'Fill Screen' ),
    32953314                        ),
    32963315                ) );
    32973316
     3317                $this->add_setting( 'background_repeat', array(
     3318                        'default'           => get_theme_support( 'custom-background', 'default-repeat' ),
     3319                        'sanitize_callback' => array( $this, '_sanitize_background_repeat' ),
     3320                        'theme_supports'    => 'custom-background',
     3321                ) );
     3322
     3323                $this->add_control( 'background_repeat', array(
     3324                        'label'    => __( 'Repeat Background Image' ),
     3325                        'section'  => 'background_image',
     3326                        'type'     => 'checkbox',
     3327                ) );
     3328
    32983329                $this->add_setting( 'background_attachment', array(
    3299                         'default'        => get_theme_support( 'custom-background', 'default-attachment' ),
    3300                         'theme_supports' => 'custom-background',
     3330                        'default'           => get_theme_support( 'custom-background', 'default-attachment' ),
     3331                        'sanitize_callback' => array( $this, '_sanitize_background_attachment' ),
     3332                        'theme_supports'    => 'custom-background',
    33013333                ) );
    33023334
    33033335                $this->add_control( 'background_attachment', array(
    3304                         'label'      => __( 'Background Attachment' ),
    3305                         'section'    => 'background_image',
    3306                         'type'       => 'radio',
    3307                         'choices'    => array(
    3308                                 'scroll'     => __('Scroll'),
    3309                                 'fixed'      => __('Fixed'),
    3310                         ),
     3336                        'label'    => __( 'Scroll with Page' ),
     3337                        'section'  => 'background_image',
     3338                        'type'     => 'checkbox',
    33113339                ) );
    33123340
     3341
    33133342                // If the theme is using the default background callback, we can update
    33143343                // the background CSS using postMessage.
    33153344                if ( get_theme_support( 'custom-background', 'wp-head-callback' ) === '_custom_background_cb' ) {
    3316                         foreach ( array( 'color', 'image', 'position_x', 'repeat', 'attachment' ) as $prop ) {
     3345                        foreach ( array( 'color', 'image', 'preset', 'position_x', 'position_y', 'size', 'repeat', 'attachment' ) as $prop ) {
    33173346                                $this->get_setting( 'background_' . $prop )->transport = 'postMessage';
    33183347                        }
    33193348                }
    … …  
    35993628        }
    36003629
    36013630        /**
     3631         * Callback for validating the background_repeat value.
     3632         *
     3633         * @since 4.7.0
     3634         *
     3635         * @param string $repeat
     3636         * @return string Background repeat.
     3637         */
     3638        public function _sanitize_background_repeat( $repeat ) {
     3639                if ( 'no-repeat' !== $repeat ) {
     3640                        $repeat = 'repeat';
     3641                }
     3642
     3643                return $repeat;
     3644        }
     3645
     3646        /**
     3647         * Callback for validating the background_attachment value.
     3648         *
     3649         * @since 4.7.0
     3650         *
     3651         * @param string $attachment
     3652         * @return string Background attachment.
     3653         */
     3654        public function _sanitize_background_attachment( $attachment ) {
     3655                if ( 'fixed' !== $attachment ) {
     3656                        $attachment = 'scroll';
     3657                }
     3658
     3659                return $attachment;
     3660        }
     3661
     3662        /**
    36023663         * Callback for rendering the custom logo, used in the custom_logo partial.
    36033664         *
    36043665         * This method exists because the partial object and context data are passed

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

     
    4141                parent::enqueue();
    4242
    4343                wp_localize_script( 'customize-controls', '_wpCustomizeBackground', array(
     44                        'defaults' => get_theme_support( 'custom-background' )[0],
    4445                        'nonces' => array(
    4546                                'add' => wp_create_nonce( 'background-add' ),
    4647                        ),

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

     
     1<?php
     2/**
     3 * Customize API: WP_Customize_Background_Position_Control class
     4 *
     5 * @package WordPress
     6 * @subpackage Customize
     7 * @since 4.7.0
     8 */
     9
     10/**
     11 * Customize Background Position Control class.
     12 *
     13 * @since 4.7.0
     14 *
     15 * @see WP_Customize_Control
     16 */
     17class WP_Customize_Background_Position_Control extends WP_Customize_Control {
     18        /**
     19         * @access public
     20         * @var string
     21         */
     22        public $type = 'background_position';
     23
     24        /**
     25         * Refresh the parameters passed to the JavaScript via JSON.
     26         *
     27         * @since 4.7.0
     28         * @uses WP_Customize_Control::to_json()
     29         */
     30        public function to_json() {
     31                parent::to_json();
     32
     33                $this->json['value'] = $this->settings[0]->value() . ' ' . $this->settings[1]->value();
     34                $this->json['defaultValue'] = $this->settings[0]->default . ' ' . $this->settings[1]->default;
     35        }
     36
     37        /**
     38         * Don't render the control content from PHP, as it's rendered via JS on load.
     39         *
     40         * @since 4.7.0
     41         */
     42        public function render_content() {}
     43
     44        /**
     45         * Render a JS template for the content of the position control.
     46         *
     47         * @since 4.7.0
     48         */
     49        public function content_template() {
     50                $options = array(
     51                        array(
     52                                'left top'   => array( 'label' => __( 'Top Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     53                                'center top' => array( 'label' => __( 'Top' ), 'icon' => 'dashicons dashicons-arrow-up-alt' ),
     54                                'right top'  => array( 'label' => __( 'Top Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     55                        ),
     56                        array(
     57                                'left center'   => array( 'label' => __( 'Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     58                                'center center' => array( 'label' => __( 'Center' ), 'icon' => 'background-position-center-icon' ),
     59                                'right center'  => array( 'label' => __( 'Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     60                        ),
     61                        array(
     62                                'left bottom'   => array( 'label' => __( 'Bottom Left' ), 'icon' => 'dashicons dashicons-arrow-left-alt' ),
     63                                'center bottom' => array( 'label' => __( 'Bottom' ), 'icon' => 'dashicons dashicons-arrow-down-alt' ),
     64                                'right bottom'  => array( 'label' => __( 'Bottom Right' ), 'icon' => 'dashicons dashicons-arrow-right-alt' ),
     65                        ),
     66                );
     67                ?>
     68                <# var value = data.defaultValue;
     69
     70                if ( data.value ) {
     71                        value = data.value;
     72                } #>
     73                <# if ( data.label ) { #>
     74                        <span class="customize-control-title">{{{ data.label }}}</span>
     75                <# } #>
     76                <# if ( data.description ) { #>
     77                        <span class="description customize-control-description">{{{ data.description }}}</span>
     78                <# } #>
     79                <div class="customize-control-content">
     80                <fieldset>
     81                <legend class="screen-reader-text"><span><?php _e( 'Image Position' ); ?></span></legend>
     82                <div class="background-position-control">
     83                <?php foreach ( $options as $group ) : ?>
     84                        <div class="button-group">
     85                        <?php foreach ( $group as $value => $input ) : ?>
     86                                <label>
     87                                        <input class="ui-helper-hidden-accessible" name="background-position" type="radio" value="<?php echo $value; ?>"<# if ( '<?php echo $value; ?>' === value ) { #>checked<# } #>>
     88                                        <span class="button display-options position"><span class="<?php echo $input['icon']; ?>" aria-hidden="true"></span></span>
     89                                        <span class="screen-reader-text"><?php echo $input['label']; ?></span>
     90                                </label>
     91                        <?php endforeach; ?>
     92                        </div>
     93                <?php endforeach; ?>
     94                </div>
     95                </fieldset>
     96                </div>
     97                <?php
     98        }
     99}

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

     
    735735                });
    736736
    737737                /* Custom Backgrounds */
    738                 bg = $.map(['color', 'image', 'position_x', 'repeat', 'attachment'], function( prop ) {
     738                bg = $.map( ['color', 'image', 'preset', 'position_x', 'position_y', 'size', 'repeat', 'attachment'], function( prop ) {
    739739                        return 'background_' + prop;
    740                 });
     740                } );
    741741
    742                 api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
     742                api.when.apply( api, bg ).done( function( color, image, preset, position_x, position_y, size, repeat, attachment ) {
    743743                        var body = $(document.body),
    744744                                head = $('head'),
    745745                                style = $('#custom-background-css'),
    … …  
    759759
    760760                                if ( image() ) {
    761761                                        css += 'background-image: url("' + image() + '");';
    762                                         css += 'background-position: top ' + position_x() + ';';
     762                                        css += 'background-size: ' + size() + ';';
     763                                        css += 'background-position: ' + position_x() + ' ' + position_y() + ';';
    763764                                        css += 'background-repeat: ' + repeat() + ';';
    764765                                        css += 'background-attachment: ' + attachment() + ';';
    765766                                }

  • wp-includes/theme.php

     
    13761376        if ( $background ) {
    13771377                $image = " background-image: url('$background');";
    13781378
     1379                // Background Position
     1380                $position_x = get_theme_mod( 'background_position_x', get_theme_support( 'custom-background', 'default-position-x' ) );
     1381                $position_y = get_theme_mod( 'background_position_y', get_theme_support( 'custom-background', 'default-position-y' ) );
     1382
     1383                if ( ! in_array( $position_x, array( 'left', 'center', 'right' ) ) ) {
     1384                        $position = 'left';
     1385                }
     1386
     1387                if ( ! in_array( $position_y, array( 'top', 'center', 'bottom' ) ) ) {
     1388                        $position = 'top';
     1389                }
     1390
     1391                $position = " background-position: $position_x $position_y;";
     1392
     1393                // Background Size
     1394                $size = get_theme_mod( 'background_size', get_theme_support( 'custom-background', 'default-size' ) );
     1395
     1396                if ( ! in_array( $size, array( 'auto', 'contain', 'cover' ) ) ) {
     1397                        $size = 'auto';
     1398                }
     1399
     1400                $size = " background-size: $size;";
     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 . $position . $size . $repeat . $attachment;
    13951421        }
    13961422?>
    13971423<style type="text/css" id="custom-background-css">
    … …  
    17721798
    17731799                        $defaults = array(
    17741800                                'default-image'          => '',
     1801                                'default-preset'         => 'default',
     1802                                'default-position-x'     => 'left',
     1803                                'default-position-y'     => 'top',
     1804                                'default-size'           => 'auto',
    17751805                                'default-repeat'         => 'repeat',
    1776                                 'default-position-x'     => 'left',
    17771806                                'default-attachment'     => 'scroll',
    17781807                                'default-color'          => '',
    17791808                                'wp-head-callback'       => '_custom_background_cb',