Core updates for the new color schemes.

* Update about page, there's now 8.
 * Display them four wide, not three, and ensure adequate spacing.
 * Use a dedicated nonce.
 * Push Light to the front in addition to Default.
 * Use user-profile.js on about.php. A few extra things are initialized but they are harmless.

see #26468, #26387.


git-svn-id: https://develop.svn.wordpress.org/trunk@26776 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/about.php

@@ -79,18 +79,17 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 	<div class="feature-section col one-col">
 		<div>
 			<h3><?php echo ( 'Pick a color' ); ?></h3>
-			<p><?php echo ( 'We&#8217;ve included four color schemes so that you can pick your favorite. Choose from any of the schemes below to change it in an instant.' ); ?></p>
+			<p><?php echo ( 'We&#8217;ve included eight color schemes so you can pick your favorite. Choose from any of them below to change it in an instant.' ); ?></p>
 			<?php $user_id = get_current_user_id(); ?>
 			<?php if ( count($_wp_admin_css_colors) > 1 && has_action('admin_color_scheme_picker') ) :?>
 				<?php
-				wp_nonce_field('update-user_' . $user_id);
 				/** This action is documented in wp-admin/user-edit.php */
 				do_action( 'admin_color_scheme_picker' );
 				?>
 			<?php else : ?>
 				<img src="<?php echo admin_url( 'images/about-color-schemes.png' ); ?>" />
 			<?php endif; ?>
-			<p><?php printf( ( 'To change your color scheme later, just <a href="%1$s">visit your profile settings</a>.' ), get_edit_profile_url( $user_id ) ); ?></p>
+			<p><?php printf( ( 'To change your color scheme later, just <a href="%1$s">visit your profile</a>.' ), get_edit_profile_url( $user_id ) ); ?></p>
 		</div>
 	</div>
 </div>

src/wp-admin/css/wp-admin.css

@@ -7638,10 +7638,11 @@ div#custom-background-image img {
 
 .color-option {
 	display: inline-block;
-	width: 32%;
+	width: 24%;
 	padding: 5px 15px 15px;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
+	margin-bottom: 3px;
 }
 
 .color-option:hover,
@@ -8029,7 +8030,6 @@ body.press-this {
 }
 
 .about-wrap .about-colors .color-option {
-	width: 24%;
 	padding-top: 10px;
 }
 .about-wrap .about-colors .color-option label {

src/wp-admin/includes/ajax-actions.php

@@ -2250,7 +2250,8 @@ function wp_ajax_save_user_color_scheme() {
 	global $_wp_admin_css_colors;
 
 	$user_id = get_current_user_id();
-	check_ajax_referer( 'update-user_' . $user_id, 'nonce' );
+
+	check_ajax_referer( 'save-color-scheme_' . $user_id, 'nonce' );
 
 	$color_scheme = sanitize_key( $_POST['color_scheme'] );
 

src/wp-admin/includes/misc.php

@@ -567,8 +567,8 @@ function admin_color_scheme_picker() {
 	ksort( $_wp_admin_css_colors );
 
 	if ( isset( $_wp_admin_css_colors['fresh'] ) ) {
-		// Set 'fresh' (the default option) to be the first array element
-		$_wp_admin_css_colors = array_merge( array( 'fresh' => '' ), $_wp_admin_css_colors );
+		// Set Default ('fresh') and Light should go first.
+		$_wp_admin_css_colors = array_merge( array( 'fresh' => '', 'light' => '' ), $_wp_admin_css_colors );
 	}
 
 	$current_color = get_user_option( 'admin_color', $user_id );
@@ -581,7 +581,7 @@ function admin_color_scheme_picker() {
 	<fieldset id="color-picker" class="scheme-list">
 		<legend class="screen-reader-text"><span><?php _e( 'Admin Color Scheme' ); ?></span></legend>
 		<?php
-
+		wp_nonce_field( 'save-color-scheme_' . $user_id, 'color-nonce', false );
 		foreach ( $_wp_admin_css_colors as $color => $color_info ) :
 
 			?>
@@ -596,7 +596,7 @@ function admin_color_scheme_picker() {
 
 					foreach ( $color_info->colors as $html_color ) {
 						?>
-						<td style="background-color: <?php echo esc_attr( $html_color ); ?>" title="<?php echo esc_attr( $color ); ?>">&nbsp;</td>
+						<td style="background-color: <?php echo esc_attr( $html_color ); ?>">&nbsp;</td>
 						<?php
 					}
 

src/wp-admin/js/about.js

@@ -1,51 +0,0 @@
-/* global ajaxurl */
-(function($){
-
-	$(document).ready( function() {
-		var $colorpicker, $stylesheet;
-	
-		$('.color-palette').click( function() {
-			$(this).siblings('input[name="admin_color"]').prop('checked', true);
-		});
-	
-		$colorpicker = $( '#color-picker' );
-		$stylesheet = $( '#colors-css' );
-	
-		$colorpicker.on( 'click.colorpicker', '.color-option', function() {
-			var colors, css_url,
-				$this = $(this);
-	
-			if ( $this.hasClass( 'selected' ) ) {
-				return;
-			}
-	
-			$this.siblings( '.selected' ).removeClass( 'selected' );
-			$this.addClass( 'selected' ).find( 'input[type="radio"]' ).prop( 'checked', true );
-	
-			// Set color scheme
-			// Load the colors stylesheet
-			css_url = $this.children( '.css_url' ).val();
-			$stylesheet.attr( 'href', css_url );
-
-			// repaint icons
-			if ( typeof wp !== 'undefined' && wp.svgPainter ) {
-				try {
-					colors = $.parseJSON( $this.children( '.icon_colors' ).val() );
-				} catch ( error ) {}
-
-				if ( colors ) {
-					wp.svgPainter.setColors( colors );
-					wp.svgPainter.paint();
-				}
-			}
-			
-			// update user option
-			$.post( ajaxurl, {
-				action:       'save-user-color-scheme',
-				color_scheme: $this.children( 'input[name="admin_color"]' ).val(),
-				nonce:        $('#_wpnonce').val()
-			});
-		});
-	});
-
-})(jQuery);

src/wp-admin/js/user-profile.js

@@ -114,7 +114,7 @@
 				$.post( ajaxurl, {
 					action:       'save-user-color-scheme',
 					color_scheme: $this.children( 'input[name="admin_color"]' ).val(),
-					nonce:        $('#_wpnonce').val()
+					nonce:        $('#color-nonce').val()
 				});
 			}
 		});

src/wp-includes/script-loader.php

@@ -331,7 +331,7 @@ function wp_default_scripts( &$scripts ) {
 
 	$scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 );
 
-	$scripts->add( 'about', "/wp-admin/js/about$suffix.js", array( 'jquery', 'password-strength-meter' ), false, 1 );
+	$scripts->add( 'about', false, array( 'user-profile' ), false );
 
 	$scripts->add( 'admin-bar', "/wp-includes/js/admin-bar$suffix.js", array(), false, 1 );