diff -r 3d4e9c994f10 -r a86126ab1dd4 wp/wp-admin/credits.php
--- a/wp/wp-admin/credits.php	Tue Oct 22 16:11:46 2019 +0200
+++ b/wp/wp-admin/credits.php	Tue Dec 15 13:49:49 2020 +0100
@@ -7,141 +7,132 @@
  */
 
 /** WordPress Administration Bootstrap */
-require_once( dirname( __FILE__ ) . '/admin.php' );
-require_once( dirname( __FILE__ ) . '/includes/credits.php' );
+require_once __DIR__ . '/admin.php';
+require_once __DIR__ . '/includes/credits.php';
 
 $title = __( 'Credits' );
 
 list( $display_version ) = explode( '-', get_bloginfo( 'version' ) );
 
-include( ABSPATH . 'wp-admin/admin-header.php' );
-?>
-<div class="wrap about-wrap full-width-layout">
-
-<h1>
-	<?php
-	/* translators: %s: The current WordPress version number */
-	printf( __( 'Welcome to WordPress&nbsp;%s' ), $display_version );
-	?>
-</h1>
-
-<p class="about-text">
-	<?php
-	printf(
-		/* translators: %s: The current WordPress version number */
-		__( 'Congratulations on updating to WordPress %s! This update makes it easier than ever to fix your site if something goes wrong.' ),
-		$display_version
-	);
-	?>
-</p>
-
-<div class="wp-badge">
-	<?php
-	/* translators: %s: The current WordPress version number */
-	printf( __( 'Version %s' ), $display_version );
-	?>
-</div>
-
-<nav class="nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
-	<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
-	<a href="credits.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Credits' ); ?></a>
-	<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
-	<a href="freedoms.php?privacy-notice" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
-</nav>
-
-<div class="about-wrap-content">
-<?php
+require_once ABSPATH . 'wp-admin/admin-header.php';
 
 $credits = wp_credits();
+?>
+<div class="wrap about__container">
 
+	<div class="about__header">
+		<div class="about__header-text">
+			<?php _e( 'Speed. Search. Security.' ); ?>
+		</div>
+
+		<div class="about__header-title">
+			<p>
+				<?php _e( 'WordPress' ); ?>
+				<span><?php echo $display_version; ?></span>
+			</p>
+		</div>
+
+		<nav class="about__header-navigation nav-tab-wrapper wp-clearfix" aria-label="<?php esc_attr_e( 'Secondary menu' ); ?>">
+			<a href="about.php" class="nav-tab"><?php _e( 'What&#8217;s New' ); ?></a>
+			<a href="credits.php" class="nav-tab nav-tab-active" aria-current="page"><?php _e( 'Credits' ); ?></a>
+			<a href="freedoms.php" class="nav-tab"><?php _e( 'Freedoms' ); ?></a>
+			<a href="privacy.php" class="nav-tab"><?php _e( 'Privacy' ); ?></a>
+		</nav>
+	</div>
+
+	<div class="about__section is-feature">
+		<div class="column">
+			<h1><?php _e( 'Credits' ); ?></h1>
+
+			<?php if ( ! $credits ) : ?>
+
+			<p>
+				<?php
+				printf(
+					/* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
+					__( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
+					__( 'https://wordpress.org/about/' ),
+					__( 'https://make.wordpress.org/' )
+				);
+				?>
+			</p>
+
+			<?php else : ?>
+
+			<p>
+				<?php _e( 'WordPress is created by a worldwide team of passionate individuals.' ); ?>
+			</p>
+			<p>
+				<?php
+				printf(
+					/* translators: %s: https://make.wordpress.org/ */
+					__( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
+					__( 'https://make.wordpress.org/' )
+				);
+				?>
+			</p>
+
+			<?php endif; ?>
+		</div>
+	</div>
+
+<?php
 if ( ! $credits ) {
-	echo '<p class="about-description">';
-	printf(
-		/* translators: 1: https://wordpress.org/about/, 2: https://make.wordpress.org/ */
-		__( 'WordPress is created by a <a href="%1$s">worldwide team</a> of passionate individuals. <a href="%2$s">Get involved in WordPress</a>.' ),
-		'https://wordpress.org/about/',
-		__( 'https://make.wordpress.org/' )
-	);
-	echo '</p>';
 	echo '</div>';
-	echo '</div>';
-	include( ABSPATH . 'wp-admin/admin-footer.php' );
+	require_once ABSPATH . 'wp-admin/admin-footer.php';
 	exit;
 }
-
-echo '<p class="about-description">' . __( 'WordPress is created by a worldwide team of passionate individuals.' ) . "</p>\n";
+?>
 
-echo '<p>' . sprintf(
-	/* translators: %s: https://make.wordpress.org/ */
-	__( 'Want to see your name in lights on this page? <a href="%s">Get involved in WordPress</a>.' ),
-	__( 'https://make.wordpress.org/' )
-) . '</p>';
+	<hr />
 
-foreach ( $credits['groups'] as $group_slug => $group_data ) {
-	if ( $group_data['name'] ) {
-		if ( 'Translators' == $group_data['name'] ) {
-			// Considered a special slug in the API response. (Also, will never be returned for en_US.)
-			$title = _x( 'Translators', 'Translate this to be the equivalent of English Translators in your language for the credits page Translators section' );
-		} elseif ( isset( $group_data['placeholders'] ) ) {
-			// phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
-			$title = vsprintf( translate( $group_data['name'] ), $group_data['placeholders'] );
-		} else {
-			// phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
-			$title = translate( $group_data['name'] );
-		}
+	<div class="about__section">
+		<div class="column has-subtle-background-color">
+			<?php wp_credits_section_title( $credits['groups']['core-developers'] ); ?>
+			<?php wp_credits_section_list( $credits, 'core-developers' ); ?>
+			<?php wp_credits_section_list( $credits, 'contributing-developers' ); ?>
+		</div>
+	</div>
 
-		echo '<h2 class="wp-people-group">' . esc_html( $title ) . "</h2>\n";
-	}
+	<hr />
 
-	if ( ! empty( $group_data['shuffle'] ) ) {
-		shuffle( $group_data['data'] ); // We were going to sort by ability to pronounce "hierarchical," but that wouldn't be fair to Matt.
-	}
+	<div class="about__section">
+		<div class="column">
+			<?php wp_credits_section_title( $credits['groups']['props'] ); ?>
+			<?php wp_credits_section_list( $credits, 'props' ); ?>
+		</div>
+	</div>
 
-	switch ( $group_data['type'] ) {
-		case 'list':
-			array_walk( $group_data['data'], '_wp_credits_add_profile_link', $credits['data']['profiles'] );
-			echo '<p class="wp-credits-list">' . wp_sprintf( '%l.', $group_data['data'] ) . "</p>\n\n";
-			break;
-		case 'libraries':
-			array_walk( $group_data['data'], '_wp_credits_build_object_link' );
-			echo '<p class="wp-credits-list">' . wp_sprintf( '%l.', $group_data['data'] ) . "</p>\n\n";
-			break;
-		default:
-			$compact = 'compact' == $group_data['type'];
-			$classes = 'wp-people-group ' . ( $compact ? 'compact' : '' );
-			echo '<ul class="' . $classes . '" id="wp-people-group-' . $group_slug . '">' . "\n";
-			foreach ( $group_data['data'] as $person_data ) {
-				echo '<li class="wp-person" id="wp-person-' . esc_attr( $person_data[2] ) . '">' . "\n\t";
-				echo '<a href="' . esc_url( sprintf( $credits['data']['profiles'], $person_data[2] ) ) . '" class="web">';
-				$size   = 'compact' == $group_data['type'] ? 30 : 60;
-				$data   = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
-				$size  *= 2;
-				$data2x = get_avatar_data( $person_data[1] . '@md5.gravatar.com', array( 'size' => $size ) );
-				echo '<img src="' . esc_url( $data['url'] ) . '" srcset="' . esc_url( $data2x['url'] ) . ' 2x" class="gravatar" alt="" />' . "\n";
-				echo esc_html( $person_data[0] ) . "</a>\n\t";
-				if ( ! $compact ) {
-					// phpcs:ignore WordPress.WP.I18n.LowLevelTranslationFunction,WordPress.WP.I18n.NonSingularStringLiteralText
-					echo '<span class="title">' . translate( $person_data[3] ) . "</span>\n";
-				}
-				echo "</li>\n";
-			}
-			echo "</ul>\n";
-			break;
-	}
-}
+	<hr />
 
-?>
-</div>
+	<?php if ( isset( $credits['groups']['translators'] ) || isset( $credits['groups']['validators'] ) ) : ?>
+	<div class="about__section">
+		<div class="column">
+			<?php wp_credits_section_title( $credits['groups']['validators'] ); ?>
+			<?php wp_credits_section_list( $credits, 'validators' ); ?>
+			<?php wp_credits_section_list( $credits, 'translators' ); ?>
+		</div>
+	</div>
+
+	<hr />
+	<?php endif; ?>
+
+	<div class="about__section">
+		<div class="column">
+			<?php wp_credits_section_title( $credits['groups']['libraries'] ); ?>
+			<?php wp_credits_section_list( $credits, 'libraries' ); ?>
+		</div>
+	</div>
 </div>
 <?php
 
-include( ABSPATH . 'wp-admin/admin-footer.php' );
+require_once ABSPATH . 'wp-admin/admin-footer.php';
 
 return;
 
-// These are strings returned by the API that we want to be translatable
+// These are strings returned by the API that we want to be translatable.
 __( 'Project Leaders' );
-/* translators: %s: The current WordPress version number */
+/* translators: %s: The current WordPress version number. */
 __( 'Core Contributors to WordPress %s' );
 __( 'Noteworthy Contributors' );
 __( 'Cofounder, Project Lead' );