Single Pledge: Add intro message to pledges for clarity.

README.md

@@ -0,0 +1,22 @@
+# Five for the Future (WordPress.org/five-for-the-future)
+
+[Five for the Future](https://wordpress.org/five-for-the-future) is an initiative promoting the WordPress community’s contribution to the platform’s growth. As an open source project, WordPress is created by a diverse collection of people from around the world.
+
+The program encourages organizations to contribute five percent of their resources to WordPress development, to maintain a "golden ratio" of contributors to users.
+
+
+## Scripts
+
+* `composer run phpcs` - Lint the entire codebase
+* `composer run phpcs -- -a themes/wporg-5ftf/` - Lint a specific folder, interactively
+* `composer run phpcbf` - Fix linter warnings (when possible)
+* `composer run test` - Run unit tests
+
+See [the theme README](./themes/wporg-5ftf/README.md) for scripts specific to the theme.
+
+
+## Syncing to production
+
+The canonical source for this project is [github.com/WordPress/five-for-the-future](https://github.com/WordPress/five-for-the-future). The contents are synced to the dotorg SVN repo to run on production, because we don't deploy directly from GitHub, for reliability reasons.
+
+The plugin and theme lives in the private SVN repo instead of `meta.svn.wordpress.org`, because the code is already open-sourced, and we don't want to clutter the Meta logs and Slack channels with noise from "Syncing w/ Git repository..." commits.

themes/wporg-5ftf/README.md

@@ -7,11 +7,12 @@ WordPress theme for [the Five for the Future subsite](https://wordpress.org/five
 
 ```
 npm install
-grunt watch
+npm start
 ```
 
 Make CSS changes in the `css/` folder, and `css/style.css` will be rebuilt automatically.
 
+See `./css/README.md` for docs on how SASS files are structured.
 
 ## Committing
 
@@ -20,6 +21,4 @@ Before committing changes to `css/`, please run `grunt build` to keep the file s
 
 ## Miscellaneous
 
-The canonical source for this project is [github.com/WordPress/five-for-the-future](https://github.com/WordPress/five-for-the-future). The contents are synced to the dotorg SVN repo to run on production, because we don't deploy directly from GitHub, for reliability reasons. 
+See the root README for information on syncing changes from Git to SVN.
-
-The production copy lives in `themes/` instead of `themes/pub`, because it's already open in GitHub, and we don't want to clutter the Meta repo logs and Slack channels with noise from "Syncing w/ Git repository..." commits.

themes/wporg-5ftf/css/components/_my-pledges.scss

@@ -2,7 +2,6 @@ body.page.page-my-pledges {
 
 	// Expand archive content area to full-width of header.
 	.site-content .site-main {
-		padding: 0 10px;
 		max-width: $size__site-main;
 	}
 

themes/wporg-5ftf/css/components/_page.scss

@@ -14,10 +14,10 @@ body.page:not(.home) {
 	}
 
 	.entry-content {
-		padding: 0 0 ms( 10 );
+		padding-top: 0;
 	}
 
 	.entry-footer {
-		padding: ms( 10 ) 0;
+		padding: ms( 10 ) ms(2);
 	}
 }

themes/wporg-5ftf/css/components/_pledge-contributors.scss

@@ -1,4 +1,8 @@
 .pledge-contributors {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	margin-left: 0;
 
 	h3 {
 		margin-top: 0;
@@ -6,60 +10,20 @@
 		color: $color__text-lighter;
 	}
 
+	li {
+		width: 100px;
+		height: 100px;
+		margin: 0 1em 1em 0;
+	}
+
 	.pledge-contributor__avatar {
 		display: inline-block;
 		background: $color-gray-light-700;
-		margin-right: 4px;
+		border-radius: $avatar__border-radius;
-		margin-bottom: 4px;
 
 		img {
 			vertical-align: middle;
-		}
+			border-radius: $avatar__border-radius;
-	}
-
-	&.has-contrib-names {
-		margin: ms(2) 0;
-		list-style: none;
-
-		li {
-			display: inline-block;
-			margin: 0 20px 40px 0;
-			width: calc( 50% - 15px );
-
-			&:nth-of-type(2n) {
-				margin-right: 0;
-			}
-
-			@include breakpoint( $breakpoint-small ) {
-				margin-right: 48px;
-				width: calc( 33% - 33px );
-
-				&:nth-of-type(2n) {
-					margin-right: 48px;
-				}
-
-				&:nth-of-type(3n) {
-					margin-right: 0;
-				}
-			}
-		}
-
-		li:first-child:last-child {
-			width: 100%;
-			margin-right: 0;
-			
-			a {
-				max-width: 280px;
-			}
-		}
-
-		.pledge-contributor__avatar {
-			margin-bottom: 20px;
-		}
-
-		.pledge-contributor__name {
-			display: block;
-			text-align: center;
 		}
 	}
 }

themes/wporg-5ftf/css/components/_pledge-list.scss

@@ -3,7 +3,6 @@ body.search.search-results {
 
 	// Expand archive content area to full-width of header.
 	.site-content .site-main {
-		padding: 0 10px;
 		max-width: $size__site-main;
 	}
 
@@ -92,4 +91,20 @@ body.search.search-results {
 		font-size: ms(2);
 		font-weight: 400;
 	}
+
+	.pledge-contributors {
+		li {
+			width: 40px;
+			height: 40px;
+			margin: 0 5px 5px 0;
+		}
+
+		.pledge-contributor__avatar {
+			border-radius: calc( #{$avatar__border-radius} / 3.75 );
+
+			img {
+				border-radius: calc( #{$avatar__border-radius} / 3.75 );
+			}
+		}
+	}
 }

themes/wporg-5ftf/css/components/_pledge-single.scss

@@ -2,33 +2,38 @@ body.single.single-5ftf_pledge {
 
 	// Expand archive content area to full-width of header.
 	.site-content .site-main {
-		padding: 0 10px;
 		max-width: $size__site-main;
 	}
 
 	.entry-header {
-		margin: ms(12) 0;
+		margin: 0;
 		padding-bottom: ms(4);
-		border-bottom: 1px solid $color-gray-light-500;
+		text-align: center;
 
 		@include breakpoint( $breakpoint-mobile ) {
-			display: flex;
 			align-items: center;
-
-			> div {
-				flex: auto;
-			}
-
-			.entry-image {
-				max-width: 330px;
-			}
 		}
 
 		@include breakpoint( 0, $breakpoint-mobile ) {
 			text-align: center;
+		}
 
-			.entry-image {
+		.pledge-introduction {
-				margin-top: ms(2);
+			background-color: $color-gray-light-200;
+			padding: 1em;
+			font-size: 1.5em;
+
+			p {
+				max-width: 525px; /* Keep it on two lines, ala https://stackoverflow.com/q/61923996/450127 */
+				margin: 1em auto;
+
+				&:first-child {
+					margin-top: 0;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
 			}
 		}
 
@@ -46,12 +51,53 @@ body.single.single-5ftf_pledge {
 		margin-bottom: 0;
 	}
 
-	.entry-image__logo {
+	.has-post-thumbnail .pledge-introduction {
-		background: transparent;
+		padding-bottom: 2em;
 	}
 
+	.has-post-thumbnail .pledge-company-summary {
+		position: relative;
+		top: -30px;
+	}
+
+	.entry-image__logo {
+		background: transparent;
+		padding: 0;
+
+		img {
+			background-color: white;
+			max-width: 330px;
+			border-radius: 10px;
+			border: 5px solid white;
+		}
+	}
+
+	.entry-content {
+		h2 {
+			margin-top: 0;
+		}
+
+		@include breakpoint( $breakpoint-tablet ) {
+			display: grid;
+			grid-template-areas:
+				"about contributions"
+				"contributors contributors"
+			;
+			grid-template-columns: calc( 50% - 40px ) calc( 50% - 40px );
+			grid-gap: 80px;
+
 			.pledge-company-description {
-		max-width: $size__content-width;
+				grid-area: about;
+			}
+
+			.pledge-company-contributions {
+				grid-area: contributions;
+			}
+
+			.pledge-company-contributors {
+				grid-area: contributors;
+			}
+		}
 	}
 
 	.team-grid {

themes/wporg-5ftf/css/components/_site-content.scss

@@ -7,7 +7,7 @@
 
 		.site-main {
 			margin: 0 auto ms(8);
-			padding: 0 ms( 2 );
+			padding: 0 ms( 4 );
 			max-width: calc( #{ $size__content-width } + #{ ms( 2 ) * 2 } );
 		}
 	}

themes/wporg-5ftf/css/components/_team-badges.scss

@@ -11,9 +11,8 @@
 	li {
 		display: flex;
 		align-items: center;
-		margin: 0 0 1em;
+		margin: 0 1em .5em 0;
-		width: 25%;
+		width: 100%;
-		min-width: 10em;
 	}
 
 	div.dashicons {
@@ -26,9 +25,10 @@
 		}
 	}
 
-	@include breakpoint( 0, $breakpoint-small ) {
+	@include breakpoint( 30em ) {
 		li {
-			width: 100%;
+			width: calc( 50% - 1em);
+			min-width: 10em;
 		}
 	}
 }

themes/wporg-5ftf/css/settings/_images.scss

@@ -0,0 +1 @@
+$avatar__border-radius: 30px;

themes/wporg-5ftf/css/settings/_settings.scss

@@ -4,5 +4,6 @@
 @import "../../../pub/wporg/css/settings/typography";
 @import "colors";
 @import "icons";
+@import "images";
 @import "structure";
 @import "typography";

themes/wporg-5ftf/css/tools/_tools.scss

@@ -1,4 +1,3 @@
 @import "../../../pub/wporg/css/tools/breakpoint";
-@import "../../../pub/wporg/css/tools/functions";
 @import "../../../pub/wporg/css/tools/kube";
 @import "../../../pub/wporg/css/tools/modular-scale";

themes/wporg-5ftf/css/utilities/_alignfull.scss

@@ -0,0 +1,10 @@
+html {
+	overflow-x: hidden;
+}
+
+.alignfull {
+	margin-left: calc(50% - 50vw);
+	margin-right: calc(50% - 50vw);
+	max-width: 100vw;
+	width: 100vw;
+}

themes/wporg-5ftf/css/utilities/_utilities.scss

@@ -1,3 +1,4 @@
+@import "alignfull";
 @import "colors";
 @import "columns";
 @import "paragraph";

themes/wporg-5ftf/single-5ftf_pledge.php

@@ -30,7 +30,27 @@ get_header();
 
 		<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 			<header class="entry-header">
-				<div>
+				<div class="pledge-introduction alignfull">
+					<p>
+						<?php esc_html_e( 'This organization contributes 5% of their resources to the WordPress project.', 'wporg-5ftf' ); ?>
+					</p>
+
+					<p>
+						<a href="<?php echo esc_url( home_url() ); ?>">
+							<?php esc_html_e( 'More about Five for the Future', 'wporg-5ftf' ); ?>
+						</a>
+					</p>
+				</div>
+
+				<div class="pledge-company-summary">
+					<?php if ( has_post_thumbnail() ) : ?>
+						<div class="entry-image">
+							<div class="entry-image__logo">
+								<?php the_post_thumbnail( 'pledge-logo' ); ?>
+							</div>
+						</div>
+					<?php endif; ?>
+
 					<?php if ( DEACTIVE_STATUS === get_post_status() ) : ?>
 						<span class="pledge-status"><?php esc_html_e( 'deactivated', 'wporg-5ftf' ); ?></span>
 					<?php endif; ?>
@@ -44,21 +64,13 @@ get_header();
 						?>
 					</span>
 				</div>
-				<div class="entry-image">
+
-					<?php if ( has_post_thumbnail() ) : ?>
-						<div class="entry-image__logo">
-							<?php the_post_thumbnail( 'pledge-logo' ); ?>
-						</div>
-					<?php else : ?>
-						<div class="entry-image__placeholder"></div>
-					<?php endif; ?>
-				</div><!-- .entry-image -->
 			</header>
 
 			<div class="entry-content">
+				<div class="pledge-company-description">
 					<h2><?php esc_html_e( 'About', 'wporg-5ftf' ); ?></h2>
 
-				<div class="pledge-company-description">
 					<?php
 						// phpcs:ignore WordPress.Security.EscapeOutput -- wp_kses_data escapes the content.
 						echo wpautop( wp_kses_data( $post->{ META_PREFIX . 'org-description' } ) );
@@ -66,29 +78,24 @@ get_header();
 				</div>
 
 				<?php if ( ! empty( $contributors ) ) : ?>
+					<div class="pledge-company-contributions">
 						<h2><?php esc_html_e( 'Contributions', 'wporg-5ftf' ); ?></h2>
 
 						<p>
 							<?php
 							echo wp_kses_post( sprintf(
-							__( '%1$s sponsors %2$s for a total of <strong>%3$s</strong> hours per week.', 'wporg-5ftf' ),
+								__( '%1$s sponsors %2$s for a total of <strong>%3$s hours</strong> per week across <strong>%4$d teams</strong>.', 'wporg-5ftf' ),
 								get_the_title(),
 								sprintf(
-								_n( '<strong>%d</strong> contributor', '<strong>%d</strong> contributors', $contribution_data['contributors'], 'wporg-5ftf' ),
+									_n( '<strong>%d contributor</strong>', '<strong>%d contributors</strong>', $contribution_data['contributors'], 'wporg-5ftf' ),
 									number_format_i18n( absint( $contribution_data['contributors'] ) )
 								),
-							number_format_i18n( absint( $contribution_data['hours'] ) )
+								number_format_i18n( absint( $contribution_data['hours'] ) ),
-						) );
+								count( $contribution_data['teams'] )
-						?>
-					</p>
-					<p>
-						<?php
-						echo wp_kses_post( sprintf(
-							__( 'Contributors from %s work on the following teams:', 'wporg-5ftf' ),
-							get_the_title()
 							) );
 							?>
 						</p>
+
 						<ul class="team-grid">
 							<?php foreach ( $contribution_data['teams'] as $team ) :
 								$badge_classes = get_badge_classes( $team );
@@ -99,29 +106,21 @@ get_header();
 								</li>
 							<?php endforeach; ?>
 						</ul>
+					</div>
 				<?php endif; ?>
 
+				<div class="pledge-company-contributors">
 					<h2><?php esc_html_e( 'Contributors', 'wporg-5ftf' ); ?></h2>
 
 					<?php if ( ! empty( $contributors ) ) : ?>
-					<ul class="pledge-contributors has-contrib-names">
+						<ul class="pledge-contributors">
 							<?php foreach ( $contributors as $contributor ) : ?>
 								<li class="pledge-contributor">
 									<span class="pledge-contributor__avatar">
 										<a href="<?php echo esc_url( 'https://profiles.wordpress.org/' . $contributor->user_nicename ); ?> ">
-										<?php echo get_avatar( $contributor->user_email, 280 ); ?>
+											<?php echo get_avatar( $contributor->user_email, 280, 'mystery', $contributor->display_name ); ?>
 										</a>
 									</span>
-								<?php
-								printf(
-									'<a class="pledge-contributor__name" href="%1$s">%2$s</a>',
-									sprintf(
-										'https://profiles.wordpress.org/%s/',
-										sanitize_key( $contributor->user_nicename ) // phpcs:ignore WordPress.Security.EscapeOutput -- sanitize_key will catch any security issues.
-									),
-									esc_html( $contributor->display_name )
-								);
-								?>
 								</li>
 							<?php endforeach; ?>
 						</ul>
@@ -129,6 +128,7 @@ get_header();
 						<p><?php esc_html_e( 'No confirmed contributors yet.', 'wporg-5ftf' ); ?></p>
 					<?php endif; ?>
 				</div>
+			</div>
 
 			<footer class="entry-footer">
 				<div class="report-wrapper">

themes/wporg-5ftf/template-parts/content-5ftf_pledge.php

@@ -14,7 +14,9 @@ foreach ( PledgeMeta\get_pledge_meta_config() as $key => $config ) {
 	$data[ $key ] = get_post_meta( get_the_ID(), PledgeMeta\META_PREFIX . $key, $config['single'] );
 }
 
-$contributors = Contributor\get_pledge_contributors( get_the_ID() );
+$contributors = Contributor\get_contributor_user_objects(
+	Contributor\get_pledge_contributors( get_the_ID() )
+);
 
 $allowed_html = array_merge(
 	wp_kses_allowed_html( 'data' ),
@@ -74,22 +76,19 @@ $contributor_title = sprintf(
 			<?php echo wp_kses( $content, $allowed_html ); ?>
 		</p>
 
-		<div class="pledge-contributors">
 		<?php /* phpcs:ignore -- escaped above */ ?>
 		<h3><?php echo $contributor_title ?></h3>
 
+		<ul class="pledge-contributors">
 			<?php
-			foreach ( $contributors as $contrib_post ) {
+			foreach ( $contributors as $contrib_user ) {
-				$contrib = get_user_by( 'login', $contrib_post->post_title );
-				if ( $contrib ) {
 				printf(
-						'<span class="pledge-contributor__avatar">%s</span>',
+					'<li class="pledge-contributor__avatar">%s</li>',
-						get_avatar( $contrib->user_email, 30, 'blank' )
+					get_avatar( $contrib_user->user_email, 40, 'mystery', $contrib_user->display_name )
 				);
 			}
-			}
 			?>
-		</div><!-- .pledge-contributors -->
+		</ul><!-- .pledge-contributors -->
 
 	</div><!-- .entry-content -->
 </article><!-- #post-## -->