WordPress.org

Make WordPress Core

Ticket #12186: background.patch

File background.patch, 9.4 KB (added by ocean90, 4 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') )