Merge pull request #249 from ucsc/tribe/sprint/hydra

Contains all work completed in the Hydra sprint branch: - Cards: with and without CTAs. plus a yellow version. - 2 and 3 columns patterns. - 2 and 3 column card grid patterns. - Query card and blog/archive loop template parts and patterns. - Callout pattern. - Featured Media+Text pattern - Interstitial Pattern - Fixes include: - Homepage hero now has a wrapping single heading. - Space below the main nav was removed so content does not show whitespace. - skip link a11y issue addressed.
ucsc · Aug 2, 2023 · 5a2ce37 · 5a2ce37
2 parents 6690abd + 4b68f06
commit 5a2ce37
Show file tree

Hide file tree

Showing 26 changed files with 794 additions and 39 deletions.
diff --git a/.deploy/composer.json b/.deploy/composer.json
@@ -5,8 +5,8 @@
 		},
 		"allow-plugins": {
 			"composer/installers": true,
-		  	"ffraenz/private-composer-installer": true,
-			"johnpbloch/wordpress-core-installer": true
+			"johnpbloch/wordpress-core-installer": true,
+		  	"ffraenz/private-composer-installer": true
 		}
 	},
 	"require": {

diff --git a/functions.php b/functions.php
@@ -8,6 +8,8 @@
  * @since UCSC 1.0.0
  */
 
+use Image_Sizes;
+
 if ( ! function_exists( 'ucsc_setup' ) ) :
 
 	/**
@@ -324,6 +326,27 @@ function( $settings, $context ) {
 	include get_theme_file_path( 'lib/blocks.php' );
 }
 
+/**
+ * Register Block Pattern Customizations
+ */
+if ( file_exists( get_theme_file_path( 'lib/blocks.php' ) ) ) {
+	include get_theme_file_path( 'lib/blocks.php' );
+}
+
+/**
+ * Register Image Sizes
+ */
+if ( file_exists( get_theme_file_path( 'lib/image_sizes.php' ) ) ) {
+	include get_theme_file_path( 'lib/image_sizes.php' );
+
+	add_action( 'after_setup_theme', function () {
+		$images = new Image_Sizes();
+		$images->register_sizes();
+		$images->register_size_names();
+		$images->get_sizes();
+	});
+}
+
 /**
  * Enqueue theme block editor style script to modify the "styles" available for blocks in the editor.
  */
@@ -377,3 +400,104 @@ function ucsc_truss_assets() { ?>
 
 <?php
 }
+
+/**
+ * Add Excerpts to Pages
+ */
+add_post_type_support( 'page', 'excerpt' );
+
+/**
+ * Remove default skip link and add a custom one.
+ */
+remove_action( 'wp_footer', 'the_block_template_skip_link' );
+
+/**
+ * Override the default skip link to pass a11y for landmarks.
+ * @return void
+ */
+function ucsc_skip_link() {
+	/**
+	* Print the skip-link styles.
+	*/
+	?>
+	<style id="skip-link-styles">
+		.skip-link.screen-reader-text {
+			border: 0;
+			clip: rect(1px,1px,1px,1px);
+			clip-path: inset(50%);
+			height: 1px;
+			margin: -1px;
+			overflow: hidden;
+			padding: 0;
+			position: absolute !important;
+			width: 1px;
+			word-wrap: normal !important;
+		}
+
+		.skip-link.screen-reader-text:focus {
+			background-color: #eee;
+			clip: auto !important;
+			clip-path: none;
+			color: #444;
+			display: block;
+			font-size: 1em;
+			height: auto;
+			left: 5px;
+			line-height: normal;
+			padding: 15px 23px 14px;
+			text-decoration: none;
+			top: 5px;
+			width: auto;
+			z-index: 100000;
+		}
+	</style>
+
+	<?php
+	/**
+	 * Print the skip-link script.
+	 */
+	?>
+	<script>
+		( function() {
+			var skipLinkTarget = document.querySelector( 'main' ),
+				sibling,
+				skipLinkTargetID,
+				skipLink;
+
+			// Early exit if a skip-link target can't be located.
+			if ( ! skipLinkTarget ) {
+				return;
+			}
+
+			// Get the site wrapper.
+			// The skip-link will be injected in the beginning of it.
+			sibling = document.querySelector( '.wp-site-blocks' );
+
+			// Early exit if the root element was not found.
+			if ( ! sibling ) {
+				return;
+			}
+
+			// Get the skip-link target's ID, and generate one if it doesn't exist.
+			skipLinkTargetID = skipLinkTarget.id;
+			if ( ! skipLinkTargetID ) {
+				skipLinkTargetID = 'wp--skip-link--target';
+				skipLinkTarget.id = skipLinkTargetID;
+			}
+
+			// Create the skip link.
+			skipLink = document.createElement( 'a' );
+			skipLink.setAttribute( 'role', 'navigation' );
+			skipLink.setAttribute( 'aria-label', 'skip to content' );
+			skipLink.classList.add( 'skip-link', 'screen-reader-text' );
+			skipLink.href = '#' + skipLinkTargetID;
+			skipLink.innerHTML = '<?php /* translators: Hidden accessibility text. */ esc_html_e( 'Skip to content' ); ?>';
+
+			// Inject the skip link.
+			sibling.parentElement.insertBefore( skipLink, sibling );
+		}() );
+	</script>
+	<?php
+}
+
+add_action('wp_footer', 'ucsc_skip_link');
diff --git a/lib/blocks.php b/lib/blocks.php
@@ -14,4 +14,9 @@
 		'hero',
 		array( 'label' => __( 'Hero', 'ucsc' ) )
 	);
+
+	register_block_pattern_category(
+		'cards',
+		array( 'label' => __( 'Cards', 'ucsc' ) )
+	);
 } );
diff --git a/lib/image_sizes.php b/lib/image_sizes.php
@@ -0,0 +1,83 @@
+<?php declare(strict_types=1);
+
+class Image_Sizes {
+
+	public const SQUARE_SMALL = 'square-small';
+	public const SQUARE_MEDIUM = 'square-medium';
+	public const SQUARE_LARGE = 'square-large';
+	public const SIXTEEN_NINE = 'sixteen-nine';
+	public const SIXTEEN_NINE_SMALL = 'sixteen-nine-small';
+	public const SIXTEEN_NINE_LARGE = 'sixteen-nine-large';
+
+	/**
+	 * @var array<string, array<string, int|bool>>
+	 */
+	private array $sizes = [
+		self::SQUARE_SMALL => [
+			'width' => 240,
+			'height' => 240,
+			'crop' => true,
+		],
+		self::SQUARE_MEDIUM => [
+			'width' => 400,
+			'height' => 400,
+			'crop' => true,
+		],
+		self::SQUARE_LARGE => [
+			'width' => 800,
+			'height' => 800,
+			'crop' => true,
+		],
+		self::SIXTEEN_NINE_SMALL => [
+			'width' => 400,
+			'height' => 248,
+			'crop' => true,
+		],
+		self::SIXTEEN_NINE => [
+			'width' => 800,
+			'height' => 496,
+			'crop' => true,
+		],
+		self::SIXTEEN_NINE_LARGE => [
+			'width' => 1200,
+			'height' => 744,
+			'crop' => true,
+		],
+	];
+
+	/**
+	 * @return array
+	 */
+	public function get_sizes(): array {
+		return apply_filters('ucsc/image/sizes', $this->sizes);
+	}
+
+	/**
+	 * @action after_setup_theme
+	 */
+	public function register_sizes(): void {
+		foreach ( $this->sizes as $key => $attributes ) {
+			add_image_size( $key, $attributes['width'], $attributes['height'], $attributes['crop'] );
+		}
+	}
+
+	public function register_size_names(): void {
+		add_filter( 'image_size_names_choose', function ( array $sizes ) {
+			$ucsc_sizes = [
+				self::SQUARE_SMALL => __('Square Small', 'ucsc'),
+				self::SQUARE_MEDIUM => __('Square Medium', 'ucsc'),
+				self::SQUARE_LARGE => __('Square Large', 'ucsc'),
+				self::SIXTEEN_NINE_SMALL => __('16:9 Small', 'ucsc'),
+				self::SIXTEEN_NINE => __('16:9 Medium', 'ucsc'),
+				self::SIXTEEN_NINE_LARGE => __('16:9 Large', 'ucsc'),
+			];
+
+			foreach ( $ucsc_sizes as $key => $value) {
+				$sizes[ $key ] = $value;
+			}
+
+			return $sizes;
+		} );
+	}
+
+}
diff --git a/parts/post-query.html b/parts/post-query.html
@@ -1,27 +1,23 @@
-<!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"tagName":"main","displayLayout":{"type":"list","columns":3},"layout":{"type":"constrained"}} -->
-<main class="wp-block-query"><!-- wp:post-template -->
-	<!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
-	<div class="wp-block-group"><!-- wp:post-title {"isLink":true,"align":"wide"} /-->
+<!-- wp:query {"queryId":0,"query":{"perPage":12,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"tagName":"main","displayLayout":{"type":"flex","columns":3},"className":"ucsc__post-query-loop","layout":{"type":"constrained"}} -->
+<main class="wp-block-query ucsc__post-query-loop"><!-- wp:post-template -->
+	<!-- wp:group {"style":{"spacing":{"padding":{"top":"0px","right":"0px","bottom":"0px","left":"0px"},"blockGap":"var:preset|spacing|20"}},"className":"ucsc__card\u002d\u002dquery-loop","layout":{"type":"default"}} -->
+	<div class="wp-block-group ucsc__card--query-loop" style="padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px"><!-- wp:post-featured-image {"isLink":true,"width":"","height":"","sizeSlug":"sixteen-nine","className":"ucsc-query-loop__image"} /-->
 
-		<!-- wp:post-date {"format":"F j, Y","isLink":true} /-->
+		<!-- wp:post-terms {"term":"category","style":{"spacing":{"margin":{"top":"var:preset|spacing|20","right":"0","bottom":"8px","left":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|black"}}}},"textColor":"black","className":"ucsc-query-loop__category","fontSize":"small"} /-->
 
-		<!-- wp:post-featured-image {"isLink":true,"align":"wide"} /-->
+		<!-- wp:post-title {"isLink":true,"style":{"spacing":{"margin":{"top":"0","right":"0","left":"0","bottom":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|black"}}}}} /-->
 
-		<!-- wp:post-excerpt /-->
+		<!-- wp:post-date {"style":{"spacing":{"margin":{"bottom":"0"}}},"textColor":"black","className":"ucsc-query-loop__post-date","fontSize":"base"} /-->
 
-		<!-- wp:spacer {"height":"112px"} -->
-		<div style="height:112px" aria-hidden="true" class="wp-block-spacer"></div>
-		<!-- /wp:spacer -->
-	</div>
+		<!-- wp:post-excerpt {"className":"ucsc-query-loop__excerpt"} /--></div>
 	<!-- /wp:group -->
 	<!-- /wp:post-template -->
 
-	<!-- wp:query-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between"}} -->
-	<!-- wp:query-pagination-previous {"fontSize":"small"} /-->
+	<!-- wp:query-pagination {"layout":{"type":"flex","justifyContent":"center"}} -->
+	<!-- wp:query-pagination-previous /-->
 
 	<!-- wp:query-pagination-numbers /-->
 
-	<!-- wp:query-pagination-next {"fontSize":"small"} /-->
-	<!-- /wp:query-pagination -->
-</main>
-<!-- /wp:query -->
+	<!-- wp:query-pagination-next /-->
+	<!-- /wp:query-pagination --></main>
+<!-- /wp:query -->
diff --git a/patterns/card-grid-2-columns.php b/patterns/card-grid-2-columns.php
@@ -0,0 +1,60 @@
+<?php
+
+/**
+ * Title: Card Grid 2 Columns
+ * Slug: ucsc-2022/card-grid-2-columns
+ * Categories: ucsc, cards
+ */
+?>
+
+<!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"var:preset|spacing|30","padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|50","right":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"className":"ucsc__2-col-card-grid","layout":{"type":"constrained","contentSize":"1280px"}} -->
+<div class="wp-block-group alignfull ucsc__2-col-card-grid" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--50);padding-left:var(--wp--preset--spacing--20)"><!-- wp:heading -->
+	<h2 class="wp-block-heading">2-Column Card Grid</h2>
+	<!-- /wp:heading -->
+
+	<!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|20"}}},"className":"ucsc__card-grid"} -->
+	<div class="wp-block-columns ucsc__card-grid"><!-- wp:column -->
+		<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"className":"ucsc__card ucsc__card-plain","layout":{"type":"default"}} -->
+			<div class="wp-block-group ucsc__card ucsc__card-plain"><!-- wp:image -->
+				<figure class="wp-block-image"><img alt=""/></figure>
+				<!-- /wp:image -->
+
+				<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
+				<h3 class="wp-block-heading" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">Card Title</h3>
+				<!-- /wp:heading -->
+
+				<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"fontSize":"base"} -->
+				<p class="has-base-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ante nec diam placerat vulputate. Fusce ut dui sagittis lacus rutrum tristique ut vitae leo. Phasellus ultrices nunc nec tempus condimentum. Sed facilisis scelerisque lobortis. Suspendisse potenti. Duis iaculis at mi eget porttitor. Donec elementum lacus ut fermentum aliquet.</p>
+				<!-- /wp:paragraph -->
+
+				<!-- wp:buttons {"className":"ucsc__card-cta","style":{"spacing":{"blockGap":"0"}}} -->
+				<div class="wp-block-buttons ucsc__card-cta"><!-- wp:button {"className":"is-style-ucsc-blue"} -->
+					<div class="wp-block-button is-style-ucsc-blue"><a class="wp-block-button__link wp-element-button" href="#">Call To Action</a></div>
+					<!-- /wp:button --></div>
+				<!-- /wp:buttons --></div>
+			<!-- /wp:group --></div>
+		<!-- /wp:column -->
+
+		<!-- wp:column -->
+		<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"className":"ucsc__card ucsc__card-plain","layout":{"type":"default"}} -->
+			<div class="wp-block-group ucsc__card ucsc__card-plain"><!-- wp:image -->
+				<figure class="wp-block-image"><img alt=""/></figure>
+				<!-- /wp:image -->
+
+				<!-- wp:heading {"level":3,"style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
+				<h3 class="wp-block-heading" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">Card Title</h3>
+				<!-- /wp:heading -->
+
+				<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"fontSize":"base"} -->
+				<p class="has-base-font-size" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ante nec diam placerat vulputate. Fusce ut dui sagittis lacus rutrum tristique ut vitae leo. Phasellus ultrices nunc nec tempus condimentum. Sed facilisis scelerisque lobortis. Suspendisse potenti. Duis iaculis at mi eget porttitor. Donec elementum lacus ut fermentum aliquet.</p>
+				<!-- /wp:paragraph -->
+
+				<!-- wp:buttons {"className":"ucsc__card-cta","style":{"spacing":{"blockGap":"0"}}} -->
+				<div class="wp-block-buttons ucsc__card-cta"><!-- wp:button {"className":"is-style-ucsc-blue"} -->
+					<div class="wp-block-button is-style-ucsc-blue"><a class="wp-block-button__link wp-element-button" href="#">Call To Action</a></div>
+					<!-- /wp:button --></div>
+				<!-- /wp:buttons --></div>
+			<!-- /wp:group --></div>
+		<!-- /wp:column --></div>
+	<!-- /wp:columns --></div>
+<!-- /wp:group -->