From 2db9b4be185713eb6b992bfe537c0f1425874d85 Mon Sep 17 00:00:00 2001
From: Helen Hou-Sandi <helen@git.wordpress.org>
Date: Wed, 27 Aug 2014 04:39:14 +0000
Subject: [PATCH] About page, at last.

All strings are available for translation. We anticipate few, if any, changes before release. Images and video will be moved to w.org soon.

props ryelle, melchoyce, nacin, MarkJaquith, helen, DrewAPicture, kpdesign.
fixes #29243.


git-svn-id: https://develop.svn.wordpress.org/trunk@29643 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/about.php     | 204 +++++++++----------------------------
 src/wp-admin/css/about.css |  14 ++-
 2 files changed, 55 insertions(+), 163 deletions(-)

diff --git a/src/wp-admin/about.php b/src/wp-admin/about.php
index 2175d54c79..2571a110c7 100644
--- a/src/wp-admin/about.php
+++ b/src/wp-admin/about.php
@@ -10,7 +10,7 @@
 require_once( dirname( __FILE__ ) . '/admin.php' );
 
 wp_enqueue_style( 'wp-mediaelement' );
-wp_enqueue_script( 'wp-playlist' );
+wp_enqueue_script( 'wp-mediaelement' );
 add_action( 'admin_footer', 'wp_underscore_playlist_templates', 0 );
 
 $title = __( 'About' );
@@ -24,7 +24,7 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 
 <h1><?php printf( __( 'Welcome to WordPress&nbsp;%s' ), $display_version ); ?></h1>
 
-<div class="about-text"><?php printf( __( 'Thank you for updating! WordPress %s has lots of refinements we think you&#8217;ll love.' ), $display_version ); ?></div>
+<div class="about-text"><?php printf( __( 'Thank you for updating! WordPress %s brings you a smoother writing and management experience.' ), $display_version ); ?></div>
 
 <div class="wp-badge"><?php printf( __( 'Version %s' ), $display_version ); ?></div>
 
@@ -40,30 +40,32 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 
 <div class="changelog">
 	<div class="about-overview">
-	<?php
-	if ( ( $locale = get_locale() ) && 'en_' === substr( $locale, 0, 3 ) ) : ?>
-		<embed src="//v0.wordpress.com/player.swf?v=1.03" type="application/x-shockwave-flash" width="640" height="360" wmode="direct" seamlesstabbing="true" allowfullscreen="true" allowscriptaccess="always" overstretch="true" flashvars="guid=sAiXhCfV&amp;isDynamicSeeking=true" title=""></embed>
-	<?php else : ?>
-		<img class="about-overview-img" src="//s.w.org/images/core/3.9/overview.png?0" />
-	<?php endif; ?>
+		<h2 class="about-headline-callout"><?php _e( 'Manage your media with style' ); ?></h2>
+		<!-- media-grid-cropped.png -->
+		<img class="about-overview-img" src="https://i.cloudup.com/gFjdHZjkbI.png" />
+		<p><?php _e( 'Explore your uploads in a beautiful, endless grid. A new details preview makes viewing and editing any amount of media in sequence a snap.' ); ?></p>
 	</div>
-	<h2 class="about-headline-callout"><?php _e( 'A smoother media editing&nbsp;experience' ); ?></h2>
-	<div class="feature-section col three-col">
+
+	<hr />
+
+	<div class="feature-section col two-col">
 		<div class="col-1">
-			<img src="//s.w.org/images/core/3.9/editor.jpg?0" />
-			<h4><?php _e( 'Improved visual editing' ); ?></h4>
-			<p><?php _e( 'The updated visual editor has improved speed, accessibility, and mobile support.' );
-				echo ' ' . __( 'You can paste into the visual editor from your word processor without wasting time to clean up messy styling. (Yeah, we&#8217;re talking about you, Microsoft Word.)' ); ?></p>
+			<!-- oembed.mp4 -->
+			<?php
+				echo wp_video_shortcode( array(
+					'mp4'      => 'https://i.cloudup.com/IdZ7t3ixES.mp4',
+					// 'ogv'      => '//s.w.org/images/core/3.9/widgets.ogv',
+					// 'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
+					'loop'     => true,
+					'autoplay' => true,
+					'width'    => 499
+				) );
+			?>
 		</div>
-		<div class="col-2">
-			<img src="//s.w.org/images/core/3.9/image.gif?0" />
-			<h4><?php _e( 'Edit images easily' ); ?></h4>
-			<p><?php _e( 'With quicker access to crop and rotation tools, it&#8217;s now much easier to edit your images while editing posts. You can also scale images directly in the editor to find just the right fit.' ); ?></p>
-		</div>
-		<div class="col-3 last-feature">
-			<img src="//s.w.org/images/core/3.9/drop.jpg?0" />
-			<h4><?php _e( 'Drag and drop your images' ); ?></h4>
-			<p><?php _e( 'Uploading your images is easier than ever. Just grab them from your desktop and drop them onto the editor.' ); ?></p>
+		<div class="col-2 last-feature">
+			<h3><?php _e( 'Working with embeds has never been easier' ); ?></h3>
+			<p><?php _e( 'Paste in a YouTube URL on a new line, and watch it magically become an embedded video. Now try it with a tweet. Oh yeah &#8212; embedding has become a visual experience. The editor shows a true preview of your embedded content, saving you time and giving you confidence.' ); ?></p>
+			<p><?php _e( 'We&#8217;ve expanded the services supported by default, too &#8212; you can embed videos from CollegeHumor, playlists from YouTube, and talks from TED. <a href="http://codex.wordpress.org/Embeds">Check out all of the embeds</a> that WordPress supports.' ); ?></p>
 		</div>
 	</div>
 
@@ -71,133 +73,29 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 
 	<div class="feature-section col two-col">
 		<div class="col-1">
-			<img src="//s.w.org/images/core/3.9/gallery.jpg?0" />
-			<h4><?php _e( 'Gallery previews' ); ?></h4>
-			<p><?php _e( 'Galleries display a beautiful grid of images right in the editor, just like they do in your published post.' ); ?></p>
+			<h3><?php _e( 'Focus on your content' ); ?></h3>
+			<p><?php _e( 'Writing and editing is smoother and more immersive with an editor that expands to fit your content as you write, and keeps the formatting tools available at all times.' ); ?></p>
 		</div>
 		<div class="col-2 last-feature">
-			<div class="wp-playlist wp-audio-playlist wp-playlist-light">
-				<div class="wp-playlist-current-item"></div>
-				<audio controls="controls" preload="metadata"></audio>
-				<div class="wp-playlist-next"></div>
-				<div class="wp-playlist-prev"></div>
-				<?php
-				$audio_icon_js = esc_js( includes_url( 'images/media/audio.png' ) );
-				$wp_host = '//s.w.org/images/core/3.9/';
-				?>
-
-				<script type="application/json">{
-					"type":"audio",
-					"tracklist":true,
-					"tracknumbers":true,
-					"images":true,
-					"artists":true,
-					"tracks":[{
-						"src":"<?php echo $wp_host ?>AintMisbehavin.mp3",
-						"type":"audio\/mpeg","title":"Ain't Misbehavin'","caption":"","description":"",
-						"meta":{
-							"artist":"Louis Armstrong & His Orchestra",
-							"album":"78 RPMs & Cylinder Recordings",
-							"genre":"Jazz",
-							"length_formatted":"3:21"
-						},
-						"image":{"src":"//s.w.org/images/core/3.9/louis.jpg","width":308,"height":240},
-						"thumb":{"src":"//s.w.org/images/core/3.9/louis.jpg","width":308,"height":240}
-					},
-					{
-						"src":"<?php echo $wp_host ?>JellyRollMorton-BuddyBoldensBlues.mp3",
-						"type":"audio\/mpeg","title":"Buddy Bolden's Blues","caption":"","description":"",
-						"meta":{
-							"artist":"Jelly Roll Morten",
-							"album":"78 RPMs & Cylinder Recordings",
-							"genre":"Jazz",
-							"length_formatted":"2:09"
-						},
-						"image":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64},
-						"thumb":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64}
-					},
-					{
-						"src":"<?php echo $wp_host ?>DavenportBlues.mp3",
-						"type":"audio\/mpeg","title":"Davenport Blues","caption":"","description":"",
-						"meta":{
-							"artist":"Bix Beiderbecke & His Rhythm Jugglers",
-							"album":"78 RPMs & Cylinder Recordings",
-							"genre":"Jazz",
-							"length_formatted":"2:48"
-						},
-						"image":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64},
-						"thumb":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64}
-					},
-					{
-						"src":"<?php echo $wp_host ?>WolverineBlues.mp3",
-						"type":"audio\/mpeg","title":"Wolverine Blues","caption":"","description":"",
-						"meta":{
-							"artist":"Benny Goodman's Boys",
-							"album":"78 RPMs & Cylinder Recordings",
-							"genre":"Jazz",
-							"length_formatted":"2:55"
-						},
-						"image":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64},
-						"thumb":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64}
-					},
-					{
-						"src":"<?php echo $wp_host ?>Louisiana_Five-Dixie_Blues-1919.mp3",
-						"type":"audio\/mpeg","title":"Dixie Blues","caption":"","description":"",
-						"meta":{
-							"artist":"Louisiana Five",
-							"album":"78 RPMs & Cylinder Recordings",
-							"genre":"Jazz",
-							"length_formatted":"3:01"
-						},
-						"image":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64},
-						"thumb":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64}
-					},
-					{
-						"src":"<?php echo $wp_host ?>Johnny_Hodges_Orchestra-Squaty_Roo-1941.mp3",
-						"type":"audio\/mpeg","title":"Squaty Roo","caption":"","description":"",
-						"meta":{
-							"artist":"Johnny Hodges Orchestra",
-							"album":"78 RPMs & Cylinder Recordings",
-							"genre":"Jazz",
-							"length_formatted":"2:24"
-						},
-						"image":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64},
-						"thumb":{"src":"<?php echo $audio_icon_js ?>","width":48,"height":64}
-					}]
-				}</script>
-			</div>
-			<h4><?php _e( 'Do more with audio and video' ); ?></h4>
-			<p><?php _e( 'Images have galleries; now we&#8217;ve added simple audio and video playlists, so you can showcase your music and clips.' ); ?></p>
+			<!-- focus.png -->
+			<img src="https://i.cloudup.com/DhokGXMLmR.png" />
 		</div>
 	</div>
-</div>
 
-<hr />
+	<hr />
 
-<div class="changelog customize">
 	<div class="feature-section col two-col">
-		<div>
-			<?php
-				echo wp_video_shortcode( array(
-					'mp4'      => '//s.w.org/images/core/3.9/widgets.mp4',
-					'ogv'      => '//s.w.org/images/core/3.9/widgets.ogv',
-					'webm'     => '//s.w.org/images/core/3.9/widgets.webm',
-					'loop'     => true,
-					'autoplay' => true,
-					'width'    => 499
-				) );
-			?>
-			<h4><?php _e( 'Live widget and header previews' ); ?></h4>
-			<p><?php _e( 'Add, edit, and rearrange your site&#8217;s widgets right in the theme customizer. No &#8220;save and surprise&#8221; &mdash; preview your changes live and only save them when you&#8217;re ready.' ); ?></p>
-			<p><?php _e( 'The improved header image tool also lets you upload, crop, and manage headers while customizing your theme.' ); ?></p>
+		<div class="col-1">
+			<!-- plugins.png -->
+			<img src="https://i.cloudup.com/6hlYGuLiTq.png" />
 		</div>
-		<div class="last-feature">
-			<img src="//s.w.org/images/core/3.9/theme.jpg?0" />
-			<h4><?php _e( 'Stunning new theme browser' ); ?></h4>
-			<p><?php _e( 'Looking for a new theme should be easy and fun. Lose yourself in the boundless supply of free WordPress.org themes with the beautiful new theme browser.' ); ?></p>
-		<?php if ( current_user_can( 'install_themes' ) ) { ?>
-			<p><a href="<?php echo network_admin_url( 'theme-install.php' ); ?>" class="button button-large button-primary"><?php _e( 'Browse Themes' ); ?></a></p>
-		<?php } ?>
+		<div class="col-2 last-feature">
+			<h3><?php _e( 'Finding the right plugin' ); ?></h3>
+			<p><?php _e( 'There are more than 30,000 free and open source plugins in the WordPress plugin directory. WordPress 4.0 makes it easier to find the right one for your needs, with new metrics, improved search, and a more visual browsing experience.' ); ?></p>
+			<?php if ( ( $locale = get_locale() ) && 'en_' !== substr( $locale, 0, 3 ) ) : ?>
+				<p><?php _e( 'Search results will return plugins translated into your language first.' ); ?></p>
+			<?php endif; ?>
+			<a href="<?php echo admin_url( 'plugin-install.php' ); ?>" class="button button-large button-primary"><?php _e( 'Browse plugins' ); ?></a>
 		</div>
 	</div>
 </div>
@@ -209,23 +107,19 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 
 	<div class="feature-section col three-col">
 		<div>
-			<h4><?php _e( 'Semantic Captions and Galleries' ); ?></h4>
-			<p><?php _e( 'Theme developers have new options for images and galleries that use intelligent HTML5 markup.' ); ?></p>
-
-			<h4><?php _e( 'Inline Code Documentation' ); ?></h4>
-			<p><?php _e( 'Every action and filter hook in WordPress is now documented, along with expanded documentation for the media manager and customizer APIs.' ); ?></p>
+		<h4><?php _e( 'Customizer API' ); ?></h4>
+			<p><?php _e( 'Contexts, panels, and a wider array of controls are now supported in the customizer.' ); ?></p>
 		</div>
 		<div>
-			<h4><?php _e( 'External Libraries' ); ?></h4>
-			<p><?php _e( 'Updated libraries: TinyMCE&nbsp;4, jQuery&nbsp;1.11, Backbone&nbsp;1.1, Underscore&nbsp;1.6, Plupload&nbsp;2, MediaElement&nbsp;2.14, Masonry&nbsp;3.' ); ?></p>
-
-			<h4><?php _e( 'Improved Database Layer' ); ?></h4>
-			<p><?php _e( 'Database connections are now more fault-resistant and have improved compatibility with PHP 5.5 and MySQL 5.6.' ); ?></p>
+			<h4><?php _e( 'Query Ordering' ); ?></h4>
+			<p><?php
+				/* translators: 1: "ORDER BY" (SQL), 2: "WP_Query" */
+				printf( __( 'Developers have more flexibility creating %1$s clauses through %2$s.' ), '<code>ORDER&nbsp;BY</code>', '<code>WP_Query</code>' );
+			?></p>
 		</div>
 		<div class="last-feature">
-			<h4><?php _e( 'New Utility Functions' ); ?></h4>
-			<p><?php _e( 'Identify a hook in progress with <code>doing_action()</code> and <code>doing_filter()</code>, and manipulate custom image sizes with <code>has_image_size()</code> and <code>remove_image_size()</code>.' ); ?></p>
-			<p><?php _e( 'Plugins and themes registering custom image sizes can now register suggested cropping points. For example, prevent heads from being cropped out of photos with a top-center crop.' ); ?></p>
+			<h4><?php _e( 'External Libraries' ); ?></h4>
+			<p><?php _e( 'Updated libraries: TinyMCE&nbsp;4.1.3, jQuery&nbsp;1.11.1, MediaElement&nbsp;2.15.' ); ?></p>
 		</div>
 	</div>
 
diff --git a/src/wp-admin/css/about.css b/src/wp-admin/css/about.css
index 44c85c8d29..0312a4912d 100644
--- a/src/wp-admin/css/about.css
+++ b/src/wp-admin/css/about.css
@@ -177,14 +177,12 @@
 	text-align: center;
 }
 
-.about-overview .wp-video {
-	margin: 0 auto;
-}
-
-.changelog .wp-playlist .wp-playlist-current-item img {
-	height: 64px;
-	width: auto;
-	max-width: 100%;
+.about-overview p {
+	margin: 1em auto 50px;
+	max-width: 770px;
+	font-size: 18px;
+	line-height: 1.5;
+	text-align: center;
 }
 
 .about-wrap .feature-section {