WordPress.org

Make WordPress Core

Ticket #12186: background.patch

File background.patch, 9.4 KB (added by ocean90, 8 years ago)

UI change after IRC discussion

  • wp-admin/custom-background.php

     
    107107                                $repeat = 'repeat';
    108108                        set_theme_mod('background_repeat', $repeat);
    109109                }
    110                 if ( isset($_POST['background-position']) ) {
     110                if ( isset($_POST['background-position-x']) ) {
    111111                        check_admin_referer('custom-background');
    112                         if ( in_array($_POST['background-position'], array('center', 'right', 'left')) )
    113                                 $position = $_POST['background-position'];
     112                        if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) )
     113                                $position = $_POST['background-position-x'];
    114114                        else
    115115                                $position = 'left';
    116                         set_theme_mod('background_position', $position);
     116                        set_theme_mod('background_position_x', $position);
    117117                }
    118118                if ( isset($_POST['background-attachment']) ) {
    119119                        check_admin_referer('custom-background');
    … …  
    155155                call_user_func($this->admin_image_div_callback);
    156156        } else {
    157157?>
    158 <h3><?php _e('Background Preview'); ?></h3>
    159158<table class="form-table">
    160159<tbody>
    161160<tr valign="top">
    162 <th scope="row"><?php _e('Current Background'); ?></th>
     161<th scope="row"><?php _e('Background Preview'); ?></th>
    163162<td>
    164163<?php
    165164$background_styles = '';
    … …  
    171170        $background_styles .= "
    172171        background-image: url(" . get_theme_mod('background_image_thumb', '') . ");
    173172        background-repeat: ". get_theme_mod('background_repeat', 'repeat') . ";
    174         background-position: ". get_theme_mod('background_position', 'left') . " top;
    175         background-attachment: " . get_theme_mod('background_attachment', 'fixed') . ";
     173        background-position: ". get_theme_mod('background_position_x', 'left') . " top;
    176174        ";
    177175}
    178176?>
    … …  
    181179<img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" /><br />
    182180<img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" />
    183181<?php } ?>
    184 <br class="clear" />
    185182</div>
    186183<?php } ?>
    187184</td>
    188185</tr>
     186</tbody>
     187</table>
     188
     189<form method="post" action="">
     190<table class="form-table">
     191<tbody>
     192<tr valign="top">
     193<th scope="row"><?php _e( 'Background Color' ); ?></th>
     194<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
     195<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
     196<input type="button" class="button" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" />
     197
     198<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
     199</fieldset></td>
     200</tr>
     201</tbody>
     202</table>
     203</form>
     204
     205<h3><?php _e('Background Image'); ?></h3>
     206<table class="form-table">
     207<tbody>
    189208<?php if ( get_background_image() ) : ?>
    190209<tr valign="top">
    191210<th scope="row"><?php _e('Remove Image'); ?></th>
    192 <td><p><?php _e('This will remove the background image. You will not be able to restore any customizations.') ?></p>
     211<td>
    193212<form method="post" action="">
     213<p><?php _e('This will remove the background image. You will not be able to restore any customizations.') ?></p>
    194214<?php wp_nonce_field('custom-background-remove', '_wpnonce-custom-background-remove'); ?>
    195 <input type="submit" class="button" name="remove-background" value="<?php esc_attr_e('Remove Background'); ?>" />
     215<input type="submit" class="button" name="remove-background" value="<?php esc_attr_e('Remove Background Image'); ?>" />
    196216</form>
    197217</td>
    198218</tr>
    … …  
    201221<?php if ( defined( 'BACKGROUND_IMAGE' ) ) : // Show only if a default background image exists ?>
    202222<tr valign="top">
    203223<th scope="row"><?php _e('Restore Original Image'); ?></th>
    204 <td><p><?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?></p>
     224<td>
    205225<form method="post" action="">
     226<p><?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?></p>
    206227<?php wp_nonce_field('custom-background-reset', '_wpnonce-custom-background-reset'); ?>
    207228<input type="submit" class="button" name="reset-background" value="<?php esc_attr_e('Restore Original Image'); ?>" />
    208229</form>
    … …  
    212233<?php endif; ?>
    213234<tr valign="top">
    214235<th scope="row"><?php _e('Upload Image'); ?></th>
    215 <td><form enctype="multipart/form-data" id="upload-form" method="post" action="">
    216 <label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br /><input type="file" id="upload" name="import" />
     236<td>
     237<form enctype="multipart/form-data" id="upload-form" method="post" action="">
     238<p><label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br />
     239<input type="file" id="upload" name="import" />
    217240<input type="hidden" name="action" value="save" />
    218241<?php wp_nonce_field('custom-background-upload', '_wpnonce-custom-background-upload') ?>
    219 <p class="submit">
    220 <input type="submit" value="<?php esc_attr_e('Upload'); ?>" />
     242<input type="submit" class="button" value="<?php esc_attr_e('Upload'); ?>" />
    221243</p>
    222244</form>
    223245</td>
    … …  
    225247</tbody>
    226248</table>
    227249
    228 <h3><?php _e('Display Options') ?></h3>
    229250<form method="post" action="">
    230251<table class="form-table">
    231252<tbody>
    232253<tr valign="top">
    233 <th scope="row"><?php _e( 'Background Color' ); ?></th>
    234 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
    235 <input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
    236 <input type="button" class="button" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" />
    237 
    238 <div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
    239 </fieldset></td>
    240 </tr>
    241 
    242 <tr valign="top">
    243254<th scope="row"><?php _e( 'Background Position' ); ?></th>
    244255<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
    245256<label>
    246 <input name="background-position" type="radio" value="left" <?php checked('left', get_theme_mod('background_position', 'left')); ?> />
     257<input name="background-position-x" type="radio" value="left" <?php checked('left', get_theme_mod('background_position_x', 'left')); ?> />
    247258<?php _e('Left') ?>
    248259</label>
    249260<label>
    250 <input name="background-position" type="radio" value="center" <?php checked('center', get_theme_mod('background_position', 'left')); ?> />
     261<input name="background-position-x" type="radio" value="center" <?php checked('center', get_theme_mod('background_position_x', 'left')); ?> />
    251262<?php _e('Center') ?>
    252263</label>
    253264<label>
    254 <input name="background-position" type="radio" value="right" <?php checked('right', get_theme_mod('background_position', 'left')); ?> />
     265<input name="background-position-x" type="radio" value="right" <?php checked('right', get_theme_mod('background_position_x', 'left')); ?> />
    255266<?php _e('Right') ?>
    256267</label>
    257268</fieldset></td>
    258269</tr>
    259270
    260271<tr valign="top">
    261 <th scope="row"><?php _e( 'Repeat' ); ?></th>
     272<th scope="row"><?php _e( 'Background Repeat' ); ?></th>
    262273<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Repeat' ); ?></span></legend>
    263274<label>
    264275<select name="background-repeat">
    … …  
    272283</tr>
    273284
    274285<tr valign="top">
    275 <th scope="row"><?php _e( 'Attachment' ); ?></th>
     286<th scope="row"><?php _e( 'Background Attachment' ); ?></th>
    276287<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Attachment' ); ?></span></legend>
    277288<label>
    278289<input name="background-attachment" type="radio" value="scroll" <?php checked('scroll', get_theme_mod('background_attachment', 'fixed')); ?> />

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

     
    2323                        pickColor( hex );
    2424        });
    2525
    26         jQuery('input[name="background-position"]').change(function() {
    27                 jQuery('#custom-background-image').css('background-position', 'top ' + jQuery(this).val());
     26        jQuery('input[name="background-position-x"]').change(function() {
     27                jQuery('#custom-background-image').css('background-position', jQuery(this).val() + ' top');
    2828        });
    2929
    3030        jQuery('select[name="background-repeat"]').change(function() {
    3131                jQuery('#custom-background-image').css('background-repeat', jQuery(this).val());
    3232        });
    33        
    34         jQuery('input[name="background-attachment"]').change(function() {
    35                 jQuery('#custom-background-image').css('background-attachment', jQuery(this).val());
    36         });
    3733
    3834        farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) {
    3935                pickColor(color);

  • wp-includes/theme.php

     
    15531553                        $repeat = 'background-repeat: repeat;';
    15541554        }
    15551555
    1556         switch ( get_theme_mod('background_position', 'left') ) {
     1556        switch ( get_theme_mod('background_position_x', 'left') ) {
    15571557                case 'center':
    1558                         $position = 'background-position: top center;';
     1558                        $position = 'background-position: center top;';
    15591559                        break;
    15601560                case 'right':
    1561                         $position = 'background-position: top right;';
     1561                        $position = 'background-position: right top;';
    15621562                        break;
    15631563                default:
    1564                         $position = 'background-position: top left;';
     1564                        $position = 'background-position: left top;';
    15651565        }
    15661566
    15671567        if ( 'scroll' == get_theme_mod('background_attachment', 'fixed') )