Theme: Add WIP styles for About page.

themes/wporg-5ftf/css/base/_base.scss

@@ -5,3 +5,4 @@
 @import "../../../pub/wporg/css/base/lists";
 @import "../../../pub/wporg/css/base/tables";
 @import "../../../pub/wporg/css/base/typography";
+@import "elements";

themes/wporg-5ftf/css/base/_elements.scss

@@ -0,0 +1,32 @@
+$size__spacing-unit: ms( 4 );	// todo is this globally scoped? if so should move to vars file
+
+.wp-block-image {
+	// this shouldn't apply to all images, just .alignfull ?
+		// but then the design calls for the images to be allignful on mobile, but not on desktop, so.... wtf?
+		// need a new alignment setting that says "alignfull-on-mobile-but-constrain-on-desktop" ?
+		// maybe this impacts how you do the has-background pullquote and other paragraphs, too, since they're also aligned fully on mobile.
+
+	/* Make it fill 100% of the screen */
+	position: relative;
+	left: -#{ $size__spacing-unit };
+	width: calc( 100% + ( 2 * #{ $size__spacing-unit } ) );
+	max-width: calc( 100% + ( 2 * #{ $size__spacing-unit} ) );
+	clear: both;
+
+	@include breakpoint( $breakpoint-desktop ) {
+		position: inherit;
+		left: inherit;
+		width: inherit;
+		max-width: inherit;
+		clear: inherit;
+	}
+}
+
+p.is-style-wporg-tldr {
+	color: $color__text-heading;
+	font-style: italic;
+
+	@include breakpoint( $breakpoint-tablet ) {
+		text-align: center;
+	}
+}

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

@@ -1,150 +1,49 @@
-body.page-about {
+body.page-about .entry-content {
-	overflow-x: hidden;
+	.wp-block-pullquote.is-style-solid-color  {
+		@extend .has-wporg-blue-background-color;
 
-	.entry-header {
+		blockquote {
-		padding: ms( 4 ) ms( 1 );
+			@extend .has-wporg-white-color;
-		text-align: center;
 
-		.entry-title {
+			max-width: 100%;
-			font-size: ms( 12 );
+			border: none;
-			line-height: 1;
-			margin: 2rem auto 1rem;
-
-			@include breakpoint( 0, 480px ) {
-				font-size: ms( 10 );
 		}
 	}
 
-		.entry-description {
+	@include breakpoint( $breakpoint-tablet ) {
-			color: rgba( 255, 255, 255, 0.8 );
+		> p,
-			font-size: ms( 2 );
+		> h1,
-			font-weight: 300;
+		> h2,
-			margin: -.4rem auto 2rem;
+		> h3,
-		}
+		> h4,
+		> h5,
+		> h6,
+		> .wp-block-quote,
+		> .wp-block-media-text,
+		> .wp-block-button {
+			margin-left: 40%;
 		}
 
-	.shapes {
+		p.is-style-wporg-tldr {
-		height: 480px;
+			margin-left: auto;
-		margin: 4rem 0;
-		position: relative;
-
-		.parallelogram {
-			height: 260px;
-			width: 310px;
-
-			&:hover,
-			&:focus,
-			&:active {
-				text-decoration: none;
 		}
 
-			&.technology {
+		.wp-block-pullquote.is-style-solid-color {
-				background-color: darken( #0073aa, 2% );
+			@extend .is-style-default !optional;
-				top: 0;
+			//@extend .has-wporg-white-background-color;	// todo compile error
+			background-color: white !important;	// todo why does this need !important? it shouldn't
+
+			position: absolute;
+			top: 800px;
 			left: 0;
-				z-index: 1;
+			width: 40%;
 
-				&:hover,
+			blockquote {
-				&:focus,
+				color: $color__text-heading !important;	// todo why does this need !important?
-				&:active {
+				border-left: none;
-					background-color: darken( #0073aa, 12% );;
-				}
 			}
 
-			&.community {
+			// todo works in front end, but need it in editor-styles too. maybe b/c targeting body.page-about?
-				background-color: #67598e;
-				right: 0;
-				bottom: 0;
-
-				&:hover,
-				&:focus,
-				&:active {
-					background-color: darken( #67598e, 10% );
-				}
-			}
-
-			h3, p {
-				margin: 0;
-				transform: skew( 15deg );
-			}
-		}
-
-		@include breakpoint( 480px ) {
-			height: 610px;
-
-			.parallelogram {
-				height: 336px;
-				padding: 7rem 0;
-				width: 400px;
-			}
-		}
-
-		@include breakpoint( 640px ) {
-			height: 580px;
-
-			.parallelogram {
-				height: 315px;
-				padding: 5rem 0;
-				width: 480px;
-
-				&:before {
-					font-size: ms( 14 );
-					height: 84px;
-					width: 84px;
-				}
-			}
-		}
-
-		@include breakpoint( 768px ) {
-			height: 323px;
-			margin: 4rem 0;
-
-			.parallelogram {
-				height: 282px;
-				padding: 4rem 0;
-				width: 430px;
-
-				&.technology {
-					left: auto;
-					right: 45%;
-					top: 40px;
-				}
-
-				&.community {
-					bottom: auto;
-					left: 45%;
-				}
-			}
-		}
-
-		@include breakpoint( 1024px ) {
-			height: 420px;
-
-			.parallelogram {
-				height: 380px;
-				padding: 6rem 0;
-				width: 580px;
-
-				&.technology {
-					right: 43%;
-				}
-
-				&.community {
-					left: 43%;
-				}
-
-				&:before {
-					font-size: ms( 16 );
-					height: 108px;
-					width: 108px;
-				}
-			}
-		}
-	}
-
-	.areas {
-		h3 {
-			@extend h4;
 		}
 	}
 }

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

@@ -1,3 +1,49 @@
 .entry-content {
+	position: relative;
+	color: $color__text-main;
 	hyphens: none;
+
+	h1, h2, h3, h4, h5, h6 {
+		color: $color__text-heading-darker;
+	}
+
+	.wp-block-pullquote {
+		color: $color__text-heading;
+	}
+}
+
+// todo move better location?
+.has-wporg-blue-color {
+	color: $color__wporg-blue;
+}
+
+.has-wporg-blue-background-color {
+	background-color: $color__wporg-blue;
+}
+
+.has-wporg-purple-color {
+	color: $color__wporg-purple;
+}
+
+.has-wporg-purple-background-color {
+	background-color: $color__wporg-purple;
+}
+
+.has-wporg-white-color {
+	color: $color__text-over-background;
+}
+
+.has-wporg-white-background-color {
+	background-color: $color__text-over-background;
+}
+
+
+p.has-background,
+.wp-block-group.has-background,
+.wp-block-pullquote.has-wporg-blue-background-color {
+	/*
+	 * Remove the gaps between consecutive paragraphs that have the same background color, and make it fill 100%
+	 * of the screen on the mobile view.
+	 */
+	//margin: 0 - ms( 4 );	this is buggy, affects surrounding elements, see notes in parallelogram file
 }

themes/wporg-5ftf/css/components/_wporg-header.scss

@@ -1,5 +1,5 @@
 #wporg-header {
-	@include breakpoint( $sm ) {
+	@include breakpoint( $breakpoint-tablet ) {
 		ul li.current-menu-item:after,
 		ul li.current_page_parent:after,
 		ul li a.current ~ .uparrow {

themes/wporg-5ftf/css/objects/_buttons.scss

@@ -1,3 +1,17 @@
 input[type="submit"] {
 	@extend .button;
 }
+
+.wp-block-button {
+	@extend .button;
+
+	display: inline-block;
+	height: auto;
+	margin-bottom: 1rem;
+}
+
+.wp-block-button__link {
+	background: none;
+	color: $color__link-button;
+	text-decoration: none;
+}

themes/wporg-5ftf/css/objects/_parallelogram.scss

@@ -1,13 +1,52 @@
-.parallelogram {
+.parallelogram-container {
+	width: 80%;
+	margin-left: 10%;
+	margin-right: 10%;
+
+	> .wp-block-group__inner-container {
+		@include breakpoint($breakpoint-tablet) {
+			display: flex;
+		}
+	}
+
+	.wp-block-group__inner-container .is-style-wporg-parallelogram:last-child .wp-block-group__inner-container {
+		/*
+		 * Adjust for the overlapping parralelograms, so that the text in this one appears to be more aligned to
+		 * its container.
+		 */
+		position: relative;
+		left: 10px;
+	}
+}
+
+/*
+ * Not just doing `@extend .parallelogram` b/c want to split between breakpoints, which that doesn't do.
+ */
+.is-style-wporg-parallelogram {
 	color: #fff;
-	display: block;
 	margin: 0 auto;
 	opacity: 0.9;
 	padding: 4.7rem 0;
-	position: absolute;
 	text-align: center;
+
+	// probably need to remove that negative margin from the has-background block? it's shouldn't apply here really, so need to rethink why have it and best way to address that
+	// or maybe just refine how it's implemented, like making sure that have padding to replace margin, and no position:relative crap
+
+	@include breakpoint( $breakpoint-tablet ) {
 		transform: skew(-15deg);
 
+		&:first-child {
+			position: relative;
+			top: 40px;
+			z-index: 2;
+		}
+
+		&:last-child {
+			z-index: 1;
+			padding-left: 40px;
+			// todo the first and second child aren't overlapping as much as they used to, what changed?
+		}
+
 		&:before {
 			font-size: ms(12);
 			height: 64px;
@@ -20,4 +59,10 @@
 		> * {
 			transform: skew(15deg);
 		}
+
+		> .wp-block-group__inner-container {
+			width: 60%;
+			margin: 0 auto;
+		}
+	}
 }

themes/wporg-5ftf/css/objects/_site-header.scss

@@ -22,7 +22,7 @@
 
 		.site-description {
 			color: #fff;
-			max-width: ms( 32 );
+			max-width: 100%;
 			padding: 11px 0;
 		}
 	}

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

@@ -0,0 +1,31 @@
+$color__background-body: #fff;
+$color__background-screen: #f1f1f1;
+$color__background-hr: #eee;
+$color__background-button: #eee;
+$color__background-pre: #eee;
+$color__background-ins: #fff9c0;
+
+$color__text-screen: #21759b;
+$color__text-input: #32373c;
+$color__text-input-focus: #111;
+$color__link: #0073aa;
+$color__link-visited: #4ca6cf;
+$color__link-hover: #d54e21;
+$color__link-button: #555555;
+$color__text-main: #555D66;
+$color__text-over-background: #FFFFFF;
+$color__text-heading: #606A73;
+$color__text-heading-darker: #23282D;
+
+$color__border: #eee;
+$color__border-button: #ccc #ccc #bbb;
+$color__border-button-hover: #ccc #bbb #aaa;
+$color__border-button-focus: #aaa #bbb #bbb;
+$color__border-input: #ddd;
+$color__border-abbr: #666;
+
+$color__wp-blue: #0073aa;
+$color__base-gray: $color__text-main;
+$color__green: #C7E8CA;
+$color__wporg-blue: #1E8CBE;
+$color__wporg-purple: #826EB4;

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

@@ -2,3 +2,5 @@
 @import "../../../pub/wporg/css/settings/modular-scale";
 @import "../../../pub/wporg/css/settings/structure";
 @import "../../../pub/wporg/css/settings/typography";
+@import "colors";
+@import "structure";

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

@@ -0,0 +1,3 @@
+$breakpoint-tablet: 768px !default;
+$breakpoint-desktop: 960px !default;
+$breakpoint-desktop-large: 1200px !default;

themes/wporg-5ftf/functions.php

@@ -11,7 +11,6 @@ namespace WordPressdotorg\Five_for_the_Future\Theme;
  * as indicating support for post thumbnails.
  */
 function setup() {
-
 	// Add default posts and comments RSS feed links to head.
 	add_theme_support( 'automatic-feed-links' );
 
@@ -30,11 +29,56 @@ function setup() {
 		'caption',
 	) );
 
-	add_theme_support( 'wp4-styles' );
-
 	register_nav_menus( array(
 		'primary' => esc_html__( 'Primary', 'wporg-5ftf' ),
 	) );
+
+	add_theme_support( 'wp4-styles' );
+
+	add_theme_support( 'wp-block-styles' );
+
+	add_theme_support(
+		'editor-color-palette',
+		array(
+			array(
+				'name'  => 'W.org Blue',
+				'slug'  => 'wporg-blue',
+				'color' => '#1E8CBE',
+			),
+			array(
+				'name'  => 'W.org Purple',
+				'slug'  => 'wporg-purple',
+				'color' => '#826EB4',
+			),
+			array(
+				'name'  => 'W.org White',
+				'slug'  => 'wporg-white',
+				'color' => '#FFFFFF',
+			),
+		)
+	);
+
+	register_block_style(
+		'core/group',
+		array(
+			'name'         => 'wporg-parallelogram',
+			'label'        => __( 'Parallelogram' ),
+			'style_handle' => 'wporg-style',
+		)
+	);
+
+	register_block_style(
+		'core/paragraph',
+		array(
+			'name'         => 'wporg-tldr',
+			'label'        => __( 'TL;DR summary paragraph' ),
+			'style_handle' => 'wporg-style',
+		)
+	);
+
+
+	// todo also setup block styles for other things, like the quote symbol, etc
+
 }
 add_action( 'after_setup_theme', __NAMESPACE__ . '\setup' );
 
@@ -55,7 +99,6 @@ add_action( 'after_setup_theme', __NAMESPACE__ . '\content_width', 0 );
  */
 function scripts() {
 	wp_enqueue_style( 'wporg-style', get_theme_file_uri( '/css/style.css' ), [ 'dashicons', 'open-sans' ], '20190703' );
-//	wp_enqueue_style( 'wporg-style2', get_stylesheet_uri(), [ 'dashicons', 'open-sans' ], '20190703' ); // todo this one or the one above?
 	wp_style_add_data( 'wporg-style', 'rtl', 'replace' );
 
 	wp_enqueue_script( 'wporg-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20181209', true );
@@ -88,6 +131,18 @@ function body_class( $classes ) {
 }
 add_filter( 'body_class', __NAMESPACE__ . '\body_class' );
 
+/**
+ * Filters the list of CSS body classes for the current post or page.
+ *
+ * @param array $classes An array of body classes.
+ * @return array
+ */
+function custom_body_class( $classes ) {
+	$classes[] = 'no-js';
+	return $classes;
+}
+add_filter( 'body_class', __NAMESPACE__ . '\custom_body_class' );
+
 /**
  * Filters an enqueued script & style's fully-qualified URL.
  *
@@ -129,15 +184,3 @@ function loader_src( $src, $handle ) {
 }
 add_filter( 'style_loader_src', __NAMESPACE__ . '\loader_src', 10, 2 );
 add_filter( 'script_loader_src', __NAMESPACE__ . '\loader_src', 10, 2 );
-
-/**
- * Filters the list of CSS body classes for the current post or page.
- *
- * @param array $classes An array of body classes.
- * @return array
- */
-function custom_body_class( $classes ) {
-	$classes[] = 'no-js';
-	return $classes;
-}
-add_filter( 'body_class', __NAMESPACE__ . '\custom_body_class' );