WordPress.org
Get WordPress

Make WordPress Core

Changeset 38948


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

Customize: Improve custom background properties UI.

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

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

Location:
trunk/src
Files:
1 added
10 edited

Legend:

Unmodified
Added
Removed

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

    r38906 r38948  
    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

  • trunk/src/wp-admin/css/themes.css

    r38813 r38948  
    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        /* Following properties are overridden by buttons responsive styles (see: wp-includes/css/buttons.css). */
     1234        height: 40px !important;
     1235        line-height: 37px !important;
     1236        margin: 0 -1px 0 0 !important;
     1237        padding: 0 10px 1px !important;
     1238        position: relative;
     1239}
     1240
     1241.background-position-control .button-group .button:active,
     1242.background-position-control .button-group .button:hover,
     1243.background-position-control .button-group .button:focus {
     1244        z-index: 1;
     1245}
     1246
     1247.background-position-control .button-group:last-child .button {
     1248        -webkit-box-shadow: 0 1px 0 #ccc;
     1249        box-shadow: 0 1px 0 #ccc;
     1250}
     1251
     1252.background-position-control .button-group > label {
     1253        margin: 0 !important;
     1254}
     1255
     1256.background-position-control .button-group:first-child > label:first-child .button {
     1257        -webkit-border-radius: 3px 0 0;
     1258        border-radius: 3px 0 0;
     1259}
     1260
     1261.background-position-control .button-group:first-child > label:first-child .dashicons {
     1262        -webkit-transform: rotate( 45deg );
     1263        -ms-transform: rotate( 45deg );
     1264        transform: rotate( 45deg );
     1265}
     1266
     1267.background-position-control .button-group:first-child > label:last-child .button {
     1268        -webkit-border-radius: 0 3px 0 0;
     1269        border-radius: 0 3px 0 0;
     1270}
     1271
     1272.background-position-control .button-group:first-child > label:last-child .dashicons {
     1273        -webkit-transform: rotate( -45deg );
     1274        -ms-transform: rotate( -45deg );
     1275        transform: rotate( -45deg );
     1276}
     1277
     1278.background-position-control .button-group:last-child > label:first-child .button {
     1279        -webkit-border-radius: 0 0 0 3px;
     1280        border-radius: 0 0 0 3px;
     1281}
     1282
     1283.background-position-control .button-group:last-child > label:first-child .dashicons {
     1284        -webkit-transform: rotate( -45deg );
     1285        -ms-transform: rotate( -45deg );
     1286        transform: rotate( -45deg );
     1287}
     1288
     1289.background-position-control .button-group:last-child > label:last-child .button {
     1290        -webkit-border-radius: 0 0 3px 0;
     1291        border-radius: 0 0 3px 0;
     1292}
     1293
     1294.background-position-control .button-group:last-child > label:last-child .dashicons {
     1295        -webkit-transform: rotate( 45deg );
     1296        -ms-transform: rotate( 45deg );
     1297        transform: rotate( 45deg );
     1298}
     1299
     1300.background-position-control .button-group .dashicons {
     1301        margin-top: 9px;
     1302}
     1303
     1304.background-position-control .button-group + .button-group {
     1305        margin-top: -1px;
     1306}
     1307
    11791308/*------------------------------------------------------------------------------
    11801309  23.0 - Full Overlay w/ Sidebar

  • trunk/src/wp-admin/custom-background.php

    r38719 r38948  
    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
     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' ), true ) ) {
     140                                $preset = $_POST['background-preset'];
     141                        } else {
     142                                $preset = 'default';
     143                        }
     144
     145                        set_theme_mod( 'background_preset', $preset );
     146                }
     147
     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' ), true ) ) {
     154                                $position_x = $position[0];
     155                        } else {
     156                                $position_x = 'left';
     157                        }
     158
     159                        if ( in_array( $position[1], array( 'top', 'center', 'bottom' ), true ) ) {
     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 );
     167                }
     168
     169                if ( isset( $_POST['background-size'] ) ) {
     170                        check_admin_referer( 'custom-background' );
     171
     172                        if ( in_array( $_POST['background-size'], array( 'auto', 'contain', 'cover' ), true ) ) {
     173                                $size = $_POST['background-size'];
     174                        } else {
     175                                $size = 'auto';
     176                        }
     177
     178                        set_theme_mod( 'background_size', $size );
     179                }
     180
     181                if ( isset( $_POST['background-repeat'] ) ) {
     182                        check_admin_referer( 'custom-background' );
     183
     184                        $repeat = $_POST['background-repeat'];
     185
     186                        if ( 'no-repeat' !== $repeat ) {
    141187                                $repeat = 'repeat';
    142                         set_theme_mod('background_repeat', $repeat);
    143                 }
    144 
    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);
    152                 }
    153 
    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);
     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 );
    161203                }
    162204
    … …  
    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        ?>
    … …  
    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() ) : ?>
    295 <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>
     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?>
     371<tr>
     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="screen-reader-text" name="background-position" type="radio" value="<?php echo esc_attr( $value ); ?>"<?php checked( $value, $background_position ); ?>>
     380                        <span class="button display-options position"><span class="<?php echo esc_attr( $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>
     406</fieldset></td>
     407</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>
    334414</fieldset></td>
    335415</tr>
    … …  
    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>

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

    r26158 r38948  
    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() );
     22                });
     23
     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' );
    2230                });
    2331

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

    r38931 r38948  
    31593159
    31603160        /**
     3161         * A control for positioning a background image.
     3162         *
     3163         * @since 4.7.0
     3164         *
     3165         * @class
     3166         * @augments wp.customize.Control
     3167         * @augments wp.customize.Class
     3168         */
     3169        api.BackgroundPositionControl = api.Control.extend( {
     3170
     3171                /**
     3172                 * Set up control UI once embedded in DOM and settings are created.
     3173                 *
     3174                 * @since 4.7.0
     3175                 */
     3176                ready: function() {
     3177                        var control = this, updateRadios;
     3178
     3179                        control.container.on( 'change', 'input[name="background-position"]', function() {
     3180                                var position = $( this ).val().split( ' ' );
     3181                                control.settings.x( position[0] );
     3182                                control.settings.y( position[1] );
     3183                        } );
     3184
     3185                        updateRadios = _.debounce( function() {
     3186                                var x, y, radioInput, inputValue;
     3187                                x = control.settings.x.get();
     3188                                y = control.settings.y.get();
     3189                                inputValue = String( x ) + ' ' + String( y );
     3190                                radioInput = control.container.find( 'input[name="background-position"][value="' + inputValue + '"]' );
     3191                                radioInput.click();
     3192                        } );
     3193                        control.settings.x.bind( updateRadios );
     3194                        control.settings.y.bind( updateRadios );
     3195
     3196                        updateRadios(); // Set initial UI.
     3197                }
     3198        } );
     3199
     3200        /**
    31613201         * A control for selecting and cropping an image.
    31623202         *
    … …  
    45084548        api.settingConstructor = {};
    45094549        api.controlConstructor = {
    4510                 color:         api.ColorControl,
    4511                 media:         api.MediaControl,
    4512                 upload:        api.UploadControl,
    4513                 image:         api.ImageControl,
    4514                 cropped_image: api.CroppedImageControl,
    4515                 site_icon:     api.SiteIconControl,
    4516                 header:        api.HeaderControl,
    4517                 background:    api.BackgroundControl,
    4518                 theme:         api.ThemeControl
     4550                color:               api.ColorControl,
     4551                media:               api.MediaControl,
     4552                upload:              api.UploadControl,
     4553                image:               api.ImageControl,
     4554                cropped_image:       api.CroppedImageControl,
     4555                site_icon:           api.SiteIconControl,
     4556                header:              api.HeaderControl,
     4557                background:          api.BackgroundControl,
     4558                background_position: api.BackgroundPositionControl,
     4559                theme:               api.ThemeControl
    45194560        };
    45204561        api.panelConstructor = {
    … …  
    55325573                $.each({
    55335574                        'background_image': {
    5534                                 controls: [ 'background_repeat', 'background_position_x', 'background_attachment' ],
     5575                                controls: [ 'background_preset', 'background_position', 'background_size', 'background_repeat', 'background_attachment' ],
    55355576                                callback: function( to ) { return !! to; }
    55365577                        },
    … …  
    55575598                        });
    55585599                });
     5600
     5601                api.control( 'background_preset', function( control ) {
     5602                        var visibility, defaultValues, values, toggleVisibility, updateSettings, preset;
     5603
     5604                        visibility = { // position, size, repeat, attachment
     5605                                'default': [ false, false, false, false ],
     5606                                'fill': [ true, false, false, false ],
     5607                                'fit': [ true, false, true, false ],
     5608                                'repeat': [ true, false, false, true ],
     5609                                'custom': [ true, true, true, true ]
     5610                        };
     5611
     5612                        defaultValues = [
     5613                                _wpCustomizeBackground.defaults['default-position-x'],
     5614                                _wpCustomizeBackground.defaults['default-position-y'],
     5615                                _wpCustomizeBackground.defaults['default-size'],
     5616                                _wpCustomizeBackground.defaults['default-repeat'],
     5617                                _wpCustomizeBackground.defaults['default-attachment']
     5618                        ];
     5619
     5620                        values = { // position_x, position_y, size, repeat, attachment
     5621                                'default': defaultValues,
     5622                                'fill': [ 'left', 'top', 'cover', 'no-repeat', 'fixed' ],
     5623                                'fit': [ 'left', 'top', 'contain', 'no-repeat', 'fixed' ],
     5624                                'repeat': [ 'left', 'top', 'auto', 'repeat', 'scroll' ]
     5625                        };
     5626
     5627                        // @todo These should actually toggle the active state, but without the preview overriding the state in data.activeControls.
     5628                        toggleVisibility = function( preset ) {
     5629                                api.control( 'background_position' ).container.toggle( visibility[ preset ][0] );
     5630                                api.control( 'background_size' ).container.toggle( visibility[ preset ][1] );
     5631                                api.control( 'background_repeat' ).container.toggle( visibility[ preset ][2] );
     5632                                api.control( 'background_attachment' ).container.toggle( visibility[ preset ][3] );
     5633                        };
     5634
     5635                        updateSettings = function( preset ) {
     5636                                api( 'background_position_x' ).set( values[ preset ][0] );
     5637                                api( 'background_position_y' ).set( values[ preset ][1] );
     5638                                api( 'background_size' ).set( values[ preset ][2] );
     5639                                api( 'background_repeat' ).set( values[ preset ][3] );
     5640                                api( 'background_attachment' ).set( values[ preset ][4] );
     5641                        };
     5642
     5643                        preset = control.setting.get();
     5644                        toggleVisibility( preset );
     5645
     5646                        control.setting.bind( 'change', function( preset ) {
     5647                                toggleVisibility( preset );
     5648                                if ( 'custom' !== preset ) {
     5649                                        updateSettings( preset );
     5650                                }
     5651                        } );
     5652                } );
     5653
     5654                api.control( 'background_repeat', function( control ) {
     5655                        control.elements[0].unsync( api( 'background_repeat' ) );
     5656
     5657                        control.element = new api.Element( control.container.find( 'input' ) );
     5658                        control.element.set( 'no-repeat' !== control.setting() );
     5659
     5660                        control.element.bind( function( to ) {
     5661                                control.setting.set( to ? 'repeat' : 'no-repeat' );
     5662                        } );
     5663
     5664                        control.setting.bind( function( to ) {
     5665                                control.element.set( 'no-repeat' !== to );
     5666                        } );
     5667                } );
     5668
     5669                api.control( 'background_attachment', function( control ) {
     5670                        control.elements[0].unsync( api( 'background_attachment' ) );
     5671
     5672                        control.element = new api.Element( control.container.find( 'input' ) );
     5673                        control.element.set( 'fixed' !== control.setting() );
     5674
     5675                        control.element.bind( function( to ) {
     5676                                control.setting.set( to ? 'scroll' : 'fixed' );
     5677                        } );
     5678
     5679                        control.setting.bind( function( to ) {
     5680                                control.element.set( 'fixed' !== to );
     5681                        } );
     5682                } );
    55595683
    55605684                // Juggle the two controls that use header_textcolor

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

    r38933 r38948  
    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' );

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

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

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

    r35389 r38948  
    4141                parent::enqueue();
    4242
     43                $custom_background = get_theme_support( 'custom-background' );
    4344                wp_localize_script( 'customize-controls', '_wpCustomizeBackground', array(
     45                        'defaults' => ! empty( $custom_background[0] ) ? $custom_background[0] : array(),
    4446                        'nonces' => array(
    4547                                'add' => wp_create_nonce( 'background-add' ),

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

    r38926 r38948  
    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                 });
    741 
    742                 api.when.apply( api, bg ).done( function( color, image, position_x, repeat, attachment ) {
     740                } );
     741
     742                api.when.apply( api, bg ).done( function( color, image, preset, positionX, positionY, size, repeat, attachment ) {
    743743                        var body = $(document.body),
    744744                                head = $('head'),
    … …  
    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: ' + positionX() + ' ' + positionY() + ';';
    763764                                        css += 'background-repeat: ' + repeat() + ';';
    764765                                        css += 'background-attachment: ' + attachment() + ';';

  • trunk/src/wp-includes/theme.php

    r38829 r38948  
    13751375
    13761376        if ( $background ) {
    1377                 $image = " background-image: url('$background');";
    1378 
     1377                $image = " background-image: url(" . wp_json_encode( $background ) . ");";
     1378
     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' ), true ) ) {
     1384                        $position_x = 'left';
     1385                }
     1386
     1387                if ( ! in_array( $position_y, array( 'top', 'center', 'bottom' ), true ) ) {
     1388                        $position_y = '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' ), true ) ) {
     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' ), true ) ) {
    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;";
    1388 
     1411                // Background Scroll.
    13891412                $attachment = get_theme_mod( 'background_attachment', get_theme_support( 'custom-background', 'default-attachment' ) );
    1390                 if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
     1413
     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?>
    … …  
    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'          => '',
Note: See TracChangeset for help on using the changeset viewer.