Update "What's New" content and layout. Re-add i18n. Props chexee. See #18742.

git-svn-id: http://svn.automattic.com/wordpress/trunk@19396 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/about.php

@@ -19,7 +19,7 @@ include( './admin-header.php' );
 
 <h1><?php printf( __( 'Welcome to WordPress %s!' ), $display_version ); ?></h1>
 
-<div class="about-text"><?php _e( 'WordPress is web software you can use to create a beautiful website or blog. We like to say that WordPress is both free and priceless at the same time.' ); ?></div>
+<div class="about-text"><?php _e( 'Thank you for updating to the latest version. Using WordPress 3.3 will improve your looks, personality, and web publishing experience. Okay, just the last one, but still :)' ); ?></div>
 
 <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
 
@@ -34,49 +34,135 @@ include( './admin-header.php' );
 </h2>
 
 <div class="changelog">
-	<h3><?php _e('For Users'); ?></h3>
+	<h3><?php _e( 'Easier Uploading' ); ?></h3>
 	
-	<div class="feature-section angled-left">
-		<div class="left-feature">
-			<h4><?php echo ( 'Drag-and-Drop Media Uploader' ); ?></h4>
-			<p><?php echo ( 'Add your media by simply dragging and dropping files from your computer into the new WordPress media uploader.' ); ?></p>
+	<div class="feature-section images-stagger-left">
+		<div class="feature-images">
+			<img src="images/screenshots/drag-and-drop.png" width="200" class="angled-left" />
+			<img src="images/screenshots/media-icon.png" width="200" class="angled-right" />
 		</div>
-		<img class="placeholder" />
 		<div class="right-feature">
-			<h4><?php echo ( 'A Responsive Admin' ); ?></h4>
-			<p><?php echo ( 'The WordPress admin now responds and adjusts to more devices and screen resolutions for a better native experience.' ); ?></p>
-		</div>
-	</div>
-	<div class="feature-section angled-right">
-		<div class="left-feature">
-			<h4><?php echo ( 'New-user Experience' ); ?></h4>
-			<p><?php echo ( 'New users get a helping hand. Updates come with this handy summary of what&#8217;s new in this version of WordPress.' ); ?></p>
-		</div>
-		<img class="placeholder" />
-		<div class="right-feature">
-			<h4><?php echo ( 'A New and Improved Admin Bar' ); ?></h4>
-			<p><?php echo ( 'Get to the most useful areas of your dashboard from anywhere on your site quicker and easier than ever with a better organized admin bar.' ); ?></p>
+			<h4><?php _e( 'Drag-and-Drop Media Uploader' ); ?></h4>
+			<p><?php _e( 'Adding photos or other files to posts and pages just got easier. Drag files from your desktop and drop them into the uploader. Add one file at a time, or many at once.' ); ?></p>
+
+			<h4><?php _e( 'File Type Detection' ); ?></h4>
+			<p><?php _e( 'We&#039;ve streamlined things! Instead of needing to click on a specific upload icon based on your file type, now there&#039;s just one. Once your file is uploaded, the appropriate fields will be displayed for entering information based on the file type.' ); ?></p>
+
+			<h4><?php _e( 'More File Formats' ); ?></h4>
+			<p><?php _e( 'We&#039;ve added the rar and 7z file formats to the list of allowed file types in the uploader.' ); ?></p>
 		</div>
 	</div>
 </div>
 
 <div class="changelog">
-	<h3><?php _e('Under the Hood'); ?></h3>
+	<h3><?php _e( 'Dashboard Design' ); ?></h3>
 	
-	<div class="feature-section">
+	<div class="feature-section angled-left">
 		<div class="left-feature">
-			<h4><?php echo ( 'Flexible Permalinks' ); ?></h4>
-			<p><?php echo ( 'You have more freedom when choosing a post permalink structure. Skip the date information or add a category slug with no performance penalty!' ); ?></p>
+			<h4><?php _e( 'Flyout Menus' ); ?></h4>
+			<p><?php _e( 'Speed up navigating the dashboard and reduce repetitive clicking with our new flyout submenus. As you hover over each main menu item in your dashboard navigation, the submenus will magically appear, providing single-click access to any dashboard screen from any other.' ); ?></p>
 		</div>
+		<span class="image-mask"><img src="images/screenshots/admin-flyouts.png" /></span>
 		<div class="right-feature">
-			<h4><?php echo ( 'WP_Screen API' ); ?></h4>
-			<p><?php echo ( 'WordPress admin screens have a nice new API that gives you the ability to create screens with help documentation, settings, and more.' ); ?></p>
+			<h4><?php _e( 'Header + Admin Bar = Toolbar' ); ?></h4>
+			<p><?php _e( 'To save space and increase efficiency, we&#039;ve combined the admin bar and the old Dashboard header into one persistent toolbar. Hovering over the toolbar items will reveal submenus when available for quick access. ' ); ?></p>
+		</div>
+
+	</div>
+	<div class="feature-section angled-right">
+
+		<div class="left-feature">
+			<h4><?php _e( 'Responsive Design' ); ?></h4>
+			<p><?php _e( 'Certain dashboard screens have been updated to look better at various sizes, including improved iPad/tablet support.' ); ?></p>
+		</div>
+		<span class="image-mask"><img src="images/screenshots/help-screen.png" width="250" height="170" /></span>
+		<div class="right-feature">
+			<h4><?php _e( 'Help Tabs' ); ?></h4>
+			<p><?php _e( 'The Help tabs located in the upper corner of the dashboard screens below your name have gotten a facelift. Help content is broken in smaller sections for easier access, with links to relevant documentation and the support forums always visible.' ); ?></p>
 		</div>
 	</div>
+
+</div>
+
+<div class="changelog">
+	<h3><?php _e( 'Feels Like the First Time' ); ?></h3>
+
+	<div class="feature-section images-stagger-right">
+		<div class="feature-images">
+			<img src="images/screenshots/welcome-screen.png" class="angled-right" />
+			<img src="images/screenshots/new-feature-pointer.png" class="angled-left" />
+		</div>
+		<div class="left-feature">
+			<h4><?php _e( 'New Feature Pointers' ); ?></h4>
+			<p><?php _e( 'When we add new features, move navigation, or do anything else with the dashboard that might throw you for a loop when you update your WordPress site, we&#039;ll let you know about it with new feature pointers explaining the change.' ); ?></p>
+
+			<h4><?php _e( 'Post-update Changelog' ); ?></h4>
+			<p><?php _e( 'This screen! From now on when you update WordPress, you&#039;ll be brought to this screen &mdash; also accessible any time from the W logo in the corner of the toolbar &mdash; to get an overview of what&#039;s changed.' ); ?></p>
+
+			<h4><?php _e( 'Dashboard Welcome' ); ?></h4>			
+			<p><?php _e( 'The dashboard home screen will have a Welcome area that displays when a new WordPress installation is accessed for the first time, prompting the site owner to complete various setup tasks. Once dismissed, this welcome can be accessed via the dashboard home screen options tab.' ); ?></p>
+		</div>
+	</div>
+	
+</div>
+
+<div class="changelog">
+	<h3><?php _e( 'Content Tools' ); ?></h3>
+
+	<div class="feature-section three-col">
+		<div>
+			<h4><?php _e( 'Widget Improvements' ); ?></h4>
+			<p><?php _e( 'Changing themes often requires widget re-configuration based on the number and position of sidebars. Now if you change back to a previous theme within a week, the widgets will automatically go back to how you had them arranged in that theme. <em>Note: if you&#039;ve added new widgets since the switch, you&#039;ll need to rescue them from the Inactive Widgets area.</em>' ); ?></p>
+		</div>
+		<div>
+			<h4><?php _e( 'Tumblr Importer' ); ?></h4>
+			<p><?php _e( 'Want to import content from Tumblr to WordPress? No problem! Go to Tools &rarr; Import to get the new Tumblr Importer.' ); ?></p>
+		</div>
+		<div class="last-feature">
+			<h4><?php _e( 'Better Co-Editing' ); ?></h4>
+			<p><?php _e( 'Have you ever gone to edit a post after someone else has finished with it, only to get an alert that tells you the other person is still editing the post? From now on, you&#039;ll only get that alert if another person is still on the editing screen &mdash; no more time lag.' ); ?></p>
+		</div>
+	</div>
+	
+</div>
+
+<div class="changelog">
+	<h3><?php _e( 'Under the Hood' ); ?></h3>
+
+	<div class="feature-section three-col">
+		<div>
+			<h4><?php _e( 'Flexible Permalinks' ); ?></h4>
+			<p><?php _e( 'You have more freedom when choosing a post permalink structure. Skip the date information or add a category slug without a performance penalty.' ); ?></p>
+		</div>
+		<div>
+			<h4><?php _e( 'WP_Screen API' ); ?></h4>
+			<p><?php _e( 'WordPress admin screens have a nice new API. Create rich screens with help documentation, settings, and more.' ); ?></p>
+		</div>
+		<div class="last-feature">
+			<h4><?php _e( 'jQuery and jQuery UI' ); ?></h4>
+			<p><?php _e( 'WordPress now includes the entire jQuery UI stack and the latest version of jQuery: 1.7.' ); ?></p>
+		</div>
+	</div>
+
+	<div class="feature-section three-col">
+		<div>
+			<h4><?php echo 'is_main_query()'; ?></h4>
+			<p><?php _e( 'This handy method will tell you if a <code>WP_Query</code> object is the main WordPress query or a secondary query.' ); ?></p>
+		</div>
+		<div>
+			<h4><?php _e( 'Post Slugs: Less Funky' ); ?></h4>
+			<p><?php _e( 'Funky characters in post titles (e.g. curly quotes from a word processor) will no longer result in garbled post slugs.' ); ?></p>
+		</div>
+		<div class="last-feature">
+			<h4><?php _e( 'Editor API Overhaul' ); ?></h4>
+			<p><?php _e( 'The new editor API automatically pulls in all the JS and CSS goodness for the editor. It even supports multiple editors on the same page.' ); ?></p>
+		</div>
+	</div>
+	
 </div>
 
 <div class="return-to-dashboard">
-	<a href="<?php echo admin_url(); ?>"><?php _e('Go to the Dashboard'); ?></a>
+	<a href="<?php echo admin_url(); ?>"><?php _e( 'Go to the Dashboard' ); ?></a>
 </div>
 
 </div>

wp-admin/css/colors-classic.dev.css

@@ -2168,8 +2168,9 @@ div.widgets-sortables,
 	color: #464646;
 }
 
-.about-wrap .feature-section img {
-	background: #f9f9f9;
+.about-wrap .feature-section img,
+.about-wrap .feature-section .image-mask {
+	background: #fff;
 	border-color: #dfdfdf;
 
 	-moz-box-shadow: 0 0 6px rgba( 0, 0, 0, 0.3 );

wp-admin/css/colors-fresh.dev.css

@@ -1795,8 +1795,9 @@ div.widgets-sortables,
 	color: #464646;
 }
 
-.about-wrap .feature-section img {
-	background: #f9f9f9;
+.about-wrap .feature-section img,
+.about-wrap .feature-section .image-mask {
+	background: #fff;
 	border-color: #dfdfdf;
 
 	-moz-box-shadow: 0 0 6px rgba( 0, 0, 0, 0.3 );

wp-admin/css/wp-admin.dev.css

@@ -4817,7 +4817,7 @@ input.button-highlighted,
 .about-wrap {
 	position: relative;
 	margin: 44px 40px 0 20px;
-	font-size: 14px;
+	font-size: 16px;
 }
 .about-wrap div.updated,
 .about-wrap div.error {
@@ -4829,7 +4829,7 @@ input.button-highlighted,
 .about-wrap h1 {
 	margin: 0.6em 200px 0 0;
 	line-height: 1.2em;
-	font-size: 3.6em;
+	font-size: 2.8em;
 	font-weight: 200;
 }
 .about-text,
@@ -4838,7 +4838,7 @@ input.button-highlighted,
 	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
 	font-weight: normal;
 	line-height: 1.6em;
-	font-size: 18px;
+	font-size: 20px;
 }
 .about-description {
 	margin-top: 1.4em;
@@ -4882,12 +4882,12 @@ input.button-highlighted,
 
 .about-wrap h3 {
 	font-size: 24px;
-	margin-bottom: 0.4em;
+	margin-bottom: 1em;
 	padding-top: 20px;
 }
 
 .about-wrap .changelog {
-	font-size: 14px;
+	font-size: 15px;
 	padding-bottom: 10px;
 	overflow: hidden;
 }
@@ -4905,6 +4905,10 @@ input.button-highlighted,
 .about-wrap .feature-section {
 	min-height: 100px;
 	overflow: hidden;
+	clear: both;
+}
+.about-wrap .feature-section.angled-left img {
+	margin-top: 1em;
 }
 
 .about-wrap .feature-section.angled-right {
@@ -4912,46 +4916,75 @@ input.button-highlighted,
 	padding-top: 15px;
 }
 .about-wrap .feature-section.angled-right img {
-	margin-top: 0;
+	margin-top: 0.5em;
 }
+
 .about-wrap .feature-section.angled-right .left-feature {
 	margin-top: 15px;
 }
 
+.about-wrap .feature-section .image-mask {
+	overflow: hidden;
+	display: block;
+	text-align: center;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+.about-wrap .feature-section .image-mask img {
+	width: auto;
+	height: auto;
+	margin: 0 auto;
+	float: none;
+	
+	border: none;
+	
+	box-shadow: none;
+	-webkit-box-shadow: none;
+}
+
 .about-wrap .feature-section h4 {
 	margin-bottom: 0.6em;
 }
 .about-wrap .feature-section p {
 	margin-top: 0.6em;
 }
+.about-wrap .feature-section code {
+	font-size: 14px;
+}
 
-.about-wrap .feature-section .left-feature,
-.about-wrap .feature-section .right-feature {
+.about-wrap .feature-section img {
+	margin-top: 15px;
+
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+}
+
+
+.about-wrap .feature-section.angled-left .left-feature,
+.about-wrap .feature-section.angled-right .left-feature {
+	margin-right: 5%;
 	width: 40%;
 }
+.about-wrap .feature-section.angled-left .right-feature,
+.about-wrap .feature-section.angled-right .right-feature {
+	margin-left: 5%;
+}
+.about-wrap .feature-section.angled-left .image-mask,
+.about-wrap .feature-section.angled-right .image-mask {
+	width: 20%;
+	height: 150px;
+	
+	margin-top: 5px;
+	margin-bottom: 5px;
+	
+	float: left;
+}
 .about-wrap .feature-section .left-feature {
 	margin-right: 10%;
 }
 .about-wrap .feature-section .right-feature {
 	margin-left: 9%;
-}
-.about-wrap .feature-section.angled-left .left-feature,
-.about-wrap .feature-section.angled-right .left-feature {
-	margin-right: 5%;
-}
-.about-wrap .feature-section.angled-left .right-feature,
-.about-wrap .feature-section.angled-right .right-feature {
-	margin-left: 5%;
-}
-.about-wrap .feature-section img {
-	width: 19%;
-	height: 130px;
-	margin-top: 15px;
-
-	border-width: 1px;
-	border-style: solid;
-	-webkit-border-radius: 3px;
-	border-radius: 3px;
+	float: right;
 }
 .about-wrap .feature-section.angled-left .left-feature,
 .about-wrap .feature-section.angled-right .right-feature {
@@ -4962,8 +4995,68 @@ input.button-highlighted,
 	width: 40%;
 }
 
+.about-wrap .feature-section.three-col {
+	padding-top: 15px;
+	margin-bottom: 0;
+}
+.about-wrap .feature-section.three-col div {
+	width: 30%;
+	margin-right: 4.999999999%;
+	float: left;
+}
+.about-wrap .feature-section.three-col h4 {
+	margin:  0 0 0.6em 0;
+}
+.about-wrap .feature-section.three-col div p {
+	margin: 0;
+}
+.about-wrap .feature-section.three-col .last-feature {
+	margin-right: 0;
+}
+
+.about-wrap .feature-section .feature-images {
+	width: 300px;
+	position: absolute;
+}
+.about-wrap .feature-section.images-stagger-left,
+.about-wrap .feature-section.images-stagger-right {
+	min-height: 330px;
+}
+.about-wrap .feature-section.images-stagger-right .angled-right,
+.about-wrap .feature-section.images-stagger-left .angled-left {
+	margin-bottom: -50px;
+}
+.about-wrap .feature-section.images-stagger-right .left-feature,
+.about-wrap .feature-section.images-stagger-left .right-feature {
+	width: auto;	
+}
+.about-wrap .feature-section .feature-images img {
+	width: 250px;
+	height: 150px;
+	margin-right: 5px;
+}
+.about-wrap .feature-section .angled-right {
+	float: right;
+}
+.about-wrap .feature-section.images-stagger-right .feature-images {
+	right: 0;
+} 
+.about-wrap .feature-section.images-stagger-right .left-feature {
+	margin-right: 350px;	
+}
+.about-wrap .feature-section.images-stagger-left .feature-images {
+	float: left;
+}
+.about-wrap .feature-section.images-stagger-left .right-feature {
+	margin-left: 350px;
+	float: left;
+}
+.about-wrap .feature-section.images-stagger-left .angled-left {
+	margin-left: 5px;
+}
+
 .about-wrap .return-to-dashboard {
-	margin: 16px 0 0;
+	margin: 16px 0;
 	font-size: 14px;
 	font-weight: bold;
 }