Ticket #12186: background.patch

wp-admin/custom-background.php

@@ -107 +107 @@
                                 $repeat = 'repeat';
                         set_theme_mod('background_repeat', $repeat);
                 }
-                if ( isset($_POST['background-position']) ) {
+                if ( isset($_POST['background-position-x']) ) {
                         check_admin_referer('custom-background');
-                        if ( in_array($_POST['background-position'], array('center', 'right', 'left')) )
-                                $position = $_POST['background-position'];
+                        if ( in_array($_POST['background-position-x'], array('center', 'right', 'left')) )
+                                $position = $_POST['background-position-x'];
                         else
                                 $position = 'left';
-                        set_theme_mod('background_position', $position);
+                        set_theme_mod('background_position_x', $position);
                 }
                 if ( isset($_POST['background-attachment']) ) {
                         check_admin_referer('custom-background');
@@ -155 +155 @@
                 call_user_func($this->admin_image_div_callback);
         } else {
 ?>
-<h3><?php _e('Background Preview'); ?></h3>
 <table class="form-table">
 <tbody>
 <tr valign="top">
-<th scope="row"><?php _e('Current Background'); ?></th>
+<th scope="row"><?php _e('Background Preview'); ?></th>
 <td>
 <?php
 $background_styles = '';
@@ -171 +170 @@
         $background_styles .= "
         background-image: url(" . get_theme_mod('background_image_thumb', '') . ");
         background-repeat: ". get_theme_mod('background_repeat', 'repeat') . ";
-        background-position: ". get_theme_mod('background_position', 'left') . " top;
-        background-attachment: " . get_theme_mod('background_attachment', 'fixed') . ";
+        background-position: ". get_theme_mod('background_position_x', 'left') . " top;
         ";
 }
 ?>
@@ -181 +179 @@
 <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" /><br />
 <img class="custom-background-image" src="<?php echo get_theme_mod('background_image_thumb', ''); ?>" style="visibility:hidden;" alt="" />
 <?php } ?>
-<br class="clear" />
 </div>
 <?php } ?>
 </td>
 </tr>
+</tbody>
+</table>
+
+<form method="post" action="">
+<table class="form-table">
+<tbody>
+<tr valign="top">
+<th scope="row"><?php _e( 'Background Color' ); ?></th>
+<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
+<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
+<input type="button" class="button" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" />
+
+<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
+</fieldset></td>
+</tr>
+</tbody>
+</table>
+</form>
+
+<h3><?php _e('Background Image'); ?></h3>
+<table class="form-table">
+<tbody>
 <?php if ( get_background_image() ) : ?>
 <tr valign="top">
 <th scope="row"><?php _e('Remove Image'); ?></th>
-<td><p><?php _e('This will remove the background image. You will not be able to restore any customizations.') ?></p>
+<td>
 <form method="post" action="">
+<p><?php _e('This will remove the background image. You will not be able to restore any customizations.') ?></p>
 <?php wp_nonce_field('custom-background-remove', '_wpnonce-custom-background-remove'); ?>
-<input type="submit" class="button" name="remove-background" value="<?php esc_attr_e('Remove Background'); ?>" />
+<input type="submit" class="button" name="remove-background" value="<?php esc_attr_e('Remove Background Image'); ?>" />
 </form>
 </td>
 </tr>
@@ -201 +221 @@
 <?php if ( defined( 'BACKGROUND_IMAGE' ) ) : // Show only if a default background image exists ?>
 <tr valign="top">
 <th scope="row"><?php _e('Restore Original Image'); ?></th>
-<td><p><?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?></p>
+<td>
 <form method="post" action="">
+<p><?php _e('This will restore the original background image. You will not be able to restore any customizations.') ?></p>
 <?php wp_nonce_field('custom-background-reset', '_wpnonce-custom-background-reset'); ?>
 <input type="submit" class="button" name="reset-background" value="<?php esc_attr_e('Restore Original Image'); ?>" />
 </form>
@@ -212 +233 @@
 <?php endif; ?>
 <tr valign="top">
 <th scope="row"><?php _e('Upload Image'); ?></th>
-<td><form enctype="multipart/form-data" id="upload-form" method="post" action="">
-<label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br /><input type="file" id="upload" name="import" />
+<td>
+<form enctype="multipart/form-data" id="upload-form" method="post" action="">
+<p><label for="upload"><?php _e('Choose an image from your computer:'); ?></label><br />
+<input type="file" id="upload" name="import" />
 <input type="hidden" name="action" value="save" />
 <?php wp_nonce_field('custom-background-upload', '_wpnonce-custom-background-upload') ?>
-<p class="submit">
-<input type="submit" value="<?php esc_attr_e('Upload'); ?>" />
+<input type="submit" class="button" value="<?php esc_attr_e('Upload'); ?>" />
 </p>
 </form>
 </td>
@@ -225 +247 @@
 </tbody>
 </table>
 
-<h3><?php _e('Display Options') ?></h3>
 <form method="post" action="">
 <table class="form-table">
 <tbody>
 <tr valign="top">
-<th scope="row"><?php _e( 'Background Color' ); ?></th>
-<td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Color' ); ?></span></legend>
-<input type="text" name="background-color" id="background-color" value="#<?php echo esc_attr(get_background_color()) ?>" />
-<input type="button" class="button" value="<?php esc_attr_e('Select a Color'); ?>" id="pickcolor" />
-
-<div id="colorPickerDiv" style="z-index: 100; background:#eee; border:1px solid #ccc; position:absolute; display:none;"></div>
-</fieldset></td>
-</tr>
-
-<tr valign="top">
 <th scope="row"><?php _e( 'Background Position' ); ?></th>
 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Background Position' ); ?></span></legend>
 <label>
-<input name="background-position" type="radio" value="left" <?php checked('left', get_theme_mod('background_position', 'left')); ?> />
+<input name="background-position-x" type="radio" value="left" <?php checked('left', get_theme_mod('background_position_x', 'left')); ?> />
 <?php _e('Left') ?>
 </label>
 <label>
-<input name="background-position" type="radio" value="center" <?php checked('center', get_theme_mod('background_position', 'left')); ?> />
+<input name="background-position-x" type="radio" value="center" <?php checked('center', get_theme_mod('background_position_x', 'left')); ?> />
 <?php _e('Center') ?>
 </label>
 <label>
-<input name="background-position" type="radio" value="right" <?php checked('right', get_theme_mod('background_position', 'left')); ?> />
+<input name="background-position-x" type="radio" value="right" <?php checked('right', get_theme_mod('background_position_x', 'left')); ?> />
 <?php _e('Right') ?>
 </label>
 </fieldset></td>
 </tr>
 
 <tr valign="top">
-<th scope="row"><?php _e( 'Repeat' ); ?></th>
+<th scope="row"><?php _e( 'Background Repeat' ); ?></th>
 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Repeat' ); ?></span></legend>
 <label>
 <select name="background-repeat">
@@ -272 +283 @@
 </tr>
 
 <tr valign="top">
-<th scope="row"><?php _e( 'Attachment' ); ?></th>
+<th scope="row"><?php _e( 'Background Attachment' ); ?></th>
 <td><fieldset><legend class="screen-reader-text"><span><?php _e( 'Attachment' ); ?></span></legend>
 <label>
 <input name="background-attachment" type="radio" value="scroll" <?php checked('scroll', get_theme_mod('background_attachment', 'fixed')); ?> />

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

@@ -23 +23 @@
                         pickColor( hex );
         });
 
-        jQuery('input[name="background-position"]').change(function() {
-                jQuery('#custom-background-image').css('background-position', 'top ' + jQuery(this).val());
+        jQuery('input[name="background-position-x"]').change(function() {
+                jQuery('#custom-background-image').css('background-position', jQuery(this).val() + ' top');
         });
 
         jQuery('select[name="background-repeat"]').change(function() {
                 jQuery('#custom-background-image').css('background-repeat', jQuery(this).val());
         });
-        
-        jQuery('input[name="background-attachment"]').change(function() {
-                jQuery('#custom-background-image').css('background-attachment', jQuery(this).val());
-        });
 
         farbtastic = jQuery.farbtastic('#colorPickerDiv', function(color) {
                 pickColor(color);

wp-includes/theme.php

@@ -1553 +1553 @@
                         $repeat = 'background-repeat: repeat;';
         }
 
-        switch ( get_theme_mod('background_position', 'left') ) {
+        switch ( get_theme_mod('background_position_x', 'left') ) {
                 case 'center':
-                        $position = 'background-position: top center;';
+                        $position = 'background-position: center top;';
                         break;
                 case 'right':
-                        $position = 'background-position: top right;';
+                        $position = 'background-position: right top;';
                         break;
                 default:
-                        $position = 'background-position: top left;';
+                        $position = 'background-position: left top;';
         }
 
         if ( 'scroll' == get_theme_mod('background_attachment', 'fixed') )