About: Fix jumping behavior for titles and columns when scrolling.

Props ryelle.
See #42087.
Fixes #42514, #42526 for 4.9.

Built from https://develop.svn.wordpress.org/branches/4.9@42174


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

wp-admin/about.php

@@ -53,7 +53,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 		</div>
 
 		<div class="floating-header-section">
-			<h2><?php _e( 'Customizer Workflow Improved' ); ?></h2>
+			<div class="section-header">
+				<h2><?php _e( 'Customizer Workflow Improved' ); ?></h2>
+			</div>
 
 			<div class="section-content">
 				<div class="section-item">
@@ -88,7 +90,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 		</div>
 
 		<div class="floating-header-section">
-			<h2><?php _e( 'Coding Enhancements' ); ?></h2>
+			<div class="section-header">
+				<h2><?php _e( 'Coding Enhancements' ); ?></h2>
+			</div>
 
 			<div class="section-content">
 				<div class="section-item">
@@ -116,7 +120,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 		</div>
 
 		<div class="floating-header-section">
-			<h2><?php _e( 'Even More Widget Updates' ); ?></h2>
+			<div class="section-header">
+				<h2><?php _e( 'Even More Widget Updates' ); ?></h2>
+			</div>
 
 			<div class="section-content">
 				<div class="section-item">
@@ -137,7 +143,9 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 		</div>
 
 		<div class="floating-header-section">
-			<h2><?php _e( 'Site Building Improvements' ); ?></h2>
+			<div class="section-header">
+				<h2><?php _e( 'Site Building Improvements' ); ?></h2>
+			</div>
 
 			<div class="section-content">
 				<div class="section-item">
@@ -242,34 +250,84 @@ include( ABSPATH . 'wp-admin/admin-header.php' );
 					offset += $adminbar.height();
 				}
 
-				var adjustScrollClass = _.throttle( function adjustScrollClass() {
+				function setup() {
+					$sections.each( function( i, section ) {
+						var $section = $( section );
+						// Set width on header to prevent column jump
+						var $header = $section.find('.section-header');
+						$header.css( {
+							width: $header.innerWidth() + 'px'
+						} );
+
+						// If the title is long, switch the layout
+						var $title = $section.find( 'h2' );
+						if ( $title.innerWidth() > 300 ) {
+							$section.addClass( 'has-long-title' );
+						}
+					} );
+				}
+
+				var adjustScrollPosition = _.throttle( function adjustScrollPosition() {
 					$sections.each( function( i, section ) {
 						var $section = $( section );
 						var $header = $section.find( 'h2' );
 						var width = $header.innerWidth();
+						var height = $header.innerHeight();
+
+						if ( $section.hasClass( 'has-long-title' ) ) {
+							return;
+						}
 
 						var sectionStart = $section.offset().top - offset;
-						var sectionEnd = sectionStart + $section.innerHeight() - 60;
+						var sectionEnd = sectionStart + $section.innerHeight();
+						var scrollPos = $window.scrollTop();
 
 						// If we're scrolled into a section, stick the header
-						if ( $window.scrollTop() >= sectionStart && $window.scrollTop() < sectionEnd ) {
+						if ( scrollPos >= sectionStart && scrollPos < sectionEnd - height ) {
-							$header.addClass( 'header-fixed' );
+							$header.css( {
-							$header.css( { top: offset + 'px', width: width + 'px' } );
+								position: 'fixed',
+								top: offset + 'px',
+								bottom: 'auto',
+								width: width + 'px'
+							} );
+						// If we're at the end of the section, stick the header to the bottom
+						} else if ( scrollPos >= sectionEnd - height && scrollPos < sectionEnd ) {
+							$header.css( {
+								position: 'absolute',
+								top: 'auto',
+								bottom: 0,
+								width: width + 'px'
+							} );
+						// Unstick the header
 						} else {
-							$header.removeClass( 'header-fixed' );
+							$header.css( {
-							$header.css( { top: 0, width: 'auto' } );
+								position: 'static',
+								top: 'auto',
+								bottom: 'auto',
+								width: 'auto'
+							} );
 						}
 					} );
 				}, 100 );
+
 				function enableFixedHeaders() {
 					if ( $window.width() > 782 ) {
-						adjustScrollClass();
+						setup();
-						$window.on( 'scroll', adjustScrollClass );
+						adjustScrollPosition();
+						$window.on( 'scroll', adjustScrollPosition );
 					} else {
-						$window.off( 'scroll', adjustScrollClass );
+						$window.off( 'scroll', adjustScrollPosition );
+						$sections.find( '.section-header' )
+							.css( {
+								width: 'auto'
+							} );
 						$sections.find( 'h2' )
-							.removeClass( 'header-fixed' )
+							.css( {
-							.css( { top: 0, width: 'auto' } );
+								position: 'static',
+								top: 'auto',
+								bottom: 'auto',
+								width: 'auto'
+							} );
 					}
 				}
 				$( window ).resize( enableFixedHeaders );

wp-admin/css/about-rtl.css

@@ -364,16 +364,15 @@
 	margin: 0 auto 120px;
 }
 
-.about-wrap .floating-header-section h2 {
+.about-wrap .floating-header-section .section-header {
 	-ms-grid-column: 1;
 	grid-column: 1;
-	text-align: right;
+	position: relative;
-	margin: 0;
 }
 
-.about-wrap .floating-header-section .header-fixed {
+.about-wrap .floating-header-section h2 {
-	position: fixed;
+	margin: 0;
-	width: 300px;
+	text-align: right;
 }
 
 .about-wrap .floating-header-section .section-content {
@@ -396,6 +395,27 @@
 	grid-column: 2;
 }
 
+.about-wrap .floating-header-section.has-long-title {
+	-ms-grid-columns: 1fr;
+	grid-template-columns: 1fr;
+	grid-gap: 60px 0;
+}
+
+.about-wrap .floating-header-section.has-long-title .section-content {
+	-ms-grid-columns: minmax(max-content, 300px) minmax(max-content, 300px);
+	grid-template-columns: minmax(max-content, 300px) minmax(max-content, 300px);
+}
+
+.about-wrap .floating-header-section.has-long-title .section-item {
+	max-width: 300px;
+}
+
+.about-wrap .floating-header-section.has-long-title .section-header,
+.about-wrap .floating-header-section.has-long-title .section-content {
+	-ms-grid-column: 1;
+	grid-column: 1;
+}
+
 /*------------------------------------------------------------------------------
   3.0 - Credits & Freedoms Pages
 ------------------------------------------------------------------------------*/
@@ -415,7 +435,7 @@
 }
 
 .about-wrap .compact {
-	margin-bottom: 0
+	margin-bottom: 0;
 }
 
 .about-wrap .wp-person {
@@ -509,7 +529,7 @@
 		grid-gap: 60px 0;
 	}
 
-	.about-wrap .floating-header-section h2,
+	.about-wrap .floating-header-section .section-header,
 	.about-wrap .floating-header-section .section-content {
 		-ms-grid-column: 1;
 		grid-column: 1;
@@ -568,6 +588,13 @@
 		margin-bottom: 60px;
 	}
 
+	.about-wrap .floating-header-section h2 {
+		word-break: break-all;
+		-webkit-hyphens: auto;
+		-ms-hyphens: auto;
+		hyphens: auto;
+	}
+
 	.about-wrap .floating-header-section .section-content {
 		-ms-grid-columns: 1fr;
 		grid-template-columns: 1fr;
@@ -577,5 +604,6 @@
 	.about-wrap .floating-header-section .section-content .section-item {
 		-ms-grid-column: 1;
 		grid-column: 1;
+		max-width: 100%;
 	}
 }

wp-admin/css/about.css

@@ -364,16 +364,15 @@
 	margin: 0 auto 120px;
 }
 
-.about-wrap .floating-header-section h2 {
+.about-wrap .floating-header-section .section-header {
 	-ms-grid-column: 1;
 	grid-column: 1;
-	text-align: left;
+	position: relative;
-	margin: 0;
 }
 
-.about-wrap .floating-header-section .header-fixed {
+.about-wrap .floating-header-section h2 {
-	position: fixed;
+	margin: 0;
-	width: 300px;
+	text-align: left;
 }
 
 .about-wrap .floating-header-section .section-content {
@@ -396,6 +395,27 @@
 	grid-column: 2;
 }
 
+.about-wrap .floating-header-section.has-long-title {
+	-ms-grid-columns: 1fr;
+	grid-template-columns: 1fr;
+	grid-gap: 60px 0;
+}
+
+.about-wrap .floating-header-section.has-long-title .section-content {
+	-ms-grid-columns: minmax(max-content, 300px) minmax(max-content, 300px);
+	grid-template-columns: minmax(max-content, 300px) minmax(max-content, 300px);
+}
+
+.about-wrap .floating-header-section.has-long-title .section-item {
+	max-width: 300px;
+}
+
+.about-wrap .floating-header-section.has-long-title .section-header,
+.about-wrap .floating-header-section.has-long-title .section-content {
+	-ms-grid-column: 1;
+	grid-column: 1;
+}
+
 /*------------------------------------------------------------------------------
   3.0 - Credits & Freedoms Pages
 ------------------------------------------------------------------------------*/
@@ -415,7 +435,7 @@
 }
 
 .about-wrap .compact {
-	margin-bottom: 0
+	margin-bottom: 0;
 }
 
 .about-wrap .wp-person {
@@ -509,7 +529,7 @@
 		grid-gap: 60px 0;
 	}
 
-	.about-wrap .floating-header-section h2,
+	.about-wrap .floating-header-section .section-header,
 	.about-wrap .floating-header-section .section-content {
 		-ms-grid-column: 1;
 		grid-column: 1;
@@ -568,6 +588,13 @@
 		margin-bottom: 60px;
 	}
 
+	.about-wrap .floating-header-section h2 {
+		word-break: break-all;
+		-webkit-hyphens: auto;
+		-ms-hyphens: auto;
+		hyphens: auto;
+	}
+
 	.about-wrap .floating-header-section .section-content {
 		-ms-grid-columns: 1fr;
 		grid-template-columns: 1fr;
@@ -577,5 +604,6 @@
 	.about-wrap .floating-header-section .section-content .section-item {
 		-ms-grid-column: 1;
 		grid-column: 1;
+		max-width: 100%;
 	}
 }

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.9-RC2-42172';
+$wp_version = '4.9-RC2-42174';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.