WordPress.org
Get WordPress

Make WordPress Core

Changeset 38948


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

Customize: Improve custom background properties UI.

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

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

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.