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.

Built from https://develop.svn.wordpress.org/trunk@26776


git-svn-id: http://core.svn.wordpress.org/trunk@26663 1a063a9b-81f0-0310-95a4-ce76da25c4cd

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>

wp-admin/css/wp-admin-rtl.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 {

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 {

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'] );
 

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
+		// Set Default ('fresh') and Light should go first.
-		$_wp_admin_css_colors = array_merge( array( 'fresh' => '' ), $_wp_admin_css_colors );
+		$_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
 					}
 

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);

wp-admin/js/about.min.js

@@ -1 +0,0 @@
-!function(a){a(document).ready(function(){var b,c;a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),b=a("#color-picker"),c=a("#colors-css"),b.on("click.colorpicker",".color-option",function(){var b,d,e=a(this);if(!e.hasClass("selected")){if(e.siblings(".selected").removeClass("selected"),e.addClass("selected").find('input[type="radio"]').prop("checked",!0),d=e.children(".css_url").val(),c.attr("href",d),"undefined"!=typeof wp&&wp.svgPainter){try{b=a.parseJSON(e.children(".icon_colors").val())}catch(f){}b&&(wp.svgPainter.setColors(b),wp.svgPainter.paint())}a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:e.children('input[name="admin_color"]').val(),nonce:a("#_wpnonce").val()})}})})}(jQuery);

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()
 				});
 			}
 		});

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

@@ -1 +1 @@
-!function(a){function b(){var b,c=a("#pass1").val(),d=a("#pass2").val();if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return a("#pass-strength-result").html(pwsL10n.empty),void 0;switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(document).ready(function(){var c,d,e,f,g=a("#display_name");a("#pass1").val("").keyup(b),a("#pass2").val("").keyup(b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),g.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],c={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};c.display_firstname&&c.display_lastname&&(c.display_firstlast=c.display_firstname+" "+c.display_lastname,c.display_lastfirst=c.display_lastname+" "+c.display_firstname),a.each(a("option",g),function(a,c){b.push(c.value)}),a.each(c,function(d,e){if(e){var f=e.replace(/<\/?[a-z][^>]*>/gi,"");c[d].length&&-1===a.inArray(f,b)&&(b.push(f),a("<option />",{text:f}).appendTo(g))}})}),c=a("#color-picker"),d=a("#colors-css"),e=a("input#user_id").val(),f=a('input[name="checkuser_id"]').val(),c.on("click.colorpicker",".color-option",function(){var b,c=a(this);if(!c.hasClass("selected")&&(c.siblings(".selected").removeClass("selected"),c.addClass("selected").find('input[type="radio"]').prop("checked",!0),e===f)){if(d.attr("href",c.children(".css_url").val()),"undefined"!=typeof wp&&wp.svgPainter){try{b=a.parseJSON(c.children(".icon_colors").val())}catch(g){}b&&(wp.svgPainter.setColors(b),wp.svgPainter.paint())}a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:c.children('input[name="admin_color"]').val(),nonce:a("#_wpnonce").val()})}})})}(jQuery);
+!function(a){function b(){var b,c=a("#pass1").val(),d=a("#pass2").val();if(a("#pass-strength-result").removeClass("short bad good strong"),!c)return a("#pass-strength-result").html(pwsL10n.empty),void 0;switch(b=wp.passwordStrength.meter(c,wp.passwordStrength.userInputBlacklist(),d)){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;case 5:a("#pass-strength-result").addClass("short").html(pwsL10n.mismatch);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}a(document).ready(function(){var c,d,e,f,g=a("#display_name");a("#pass1").val("").keyup(b),a("#pass2").val("").keyup(b),a("#pass-strength-result").show(),a(".color-palette").click(function(){a(this).siblings('input[name="admin_color"]').prop("checked",!0)}),g.length&&a("#first_name, #last_name, #nickname").bind("blur.user_profile",function(){var b=[],c={display_nickname:a("#nickname").val()||"",display_username:a("#user_login").val()||"",display_firstname:a("#first_name").val()||"",display_lastname:a("#last_name").val()||""};c.display_firstname&&c.display_lastname&&(c.display_firstlast=c.display_firstname+" "+c.display_lastname,c.display_lastfirst=c.display_lastname+" "+c.display_firstname),a.each(a("option",g),function(a,c){b.push(c.value)}),a.each(c,function(d,e){if(e){var f=e.replace(/<\/?[a-z][^>]*>/gi,"");c[d].length&&-1===a.inArray(f,b)&&(b.push(f),a("<option />",{text:f}).appendTo(g))}})}),c=a("#color-picker"),d=a("#colors-css"),e=a("input#user_id").val(),f=a('input[name="checkuser_id"]').val(),c.on("click.colorpicker",".color-option",function(){var b,c=a(this);if(!c.hasClass("selected")&&(c.siblings(".selected").removeClass("selected"),c.addClass("selected").find('input[type="radio"]').prop("checked",!0),e===f)){if(d.attr("href",c.children(".css_url").val()),"undefined"!=typeof wp&&wp.svgPainter){try{b=a.parseJSON(c.children(".icon_colors").val())}catch(g){}b&&(wp.svgPainter.setColors(b),wp.svgPainter.paint())}a.post(ajaxurl,{action:"save-user-color-scheme",color_scheme:c.children('input[name="admin_color"]').val(),nonce:a("#color-nonce").val()})}})})}(jQuery);

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 );