feat(pattern): Banner pattern that includes text above the page title (…

…#322)

Fixes #308

patterns/page-header-color-bar.php → patterns/page-banner-color-bar.php

@@ -1,7 +1,7 @@
 <?php
 /**
- * Title: Page Header with bottom text bar
- * Slug: ucsc-2022/page-header-color-bar
+ * Title: Banner with bottom color bar
+ * Slug: ucsc-2022/page-banner-color-bar
  * Block Types: core/cover, core/heading
  * Categories: banner
  */
@@ -17,7 +17,7 @@
 <!-- wp:columns {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"margin":{"top":"0"}},"border":{"width":"0px","style":"none","radius":"0px"}}} -->
 <div class="wp-block-columns alignfull" style="border-style:none;border-width:0px;border-radius:0px;margin-top:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"verticalAlignment":"center","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"},"blockGap":"0"}}} -->
 <div class="wp-block-column is-vertically-aligned-center" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:paragraph {"align":"center","backgroundColor":"ucsc-primary-blue","textColor":"white","className":"is-style-ucsc-intro-text"} -->
-<p class="has-text-align-center is-style-ucsc-intro-text has-white-color has-ucsc-primary-blue-background-color has-text-color has-background">The Office of Research (OR) is your bridge to researchers developing bold solutions for the challenges of our time.&nbsp;<br>We are your partner and advocate in realizing your research goals.</p>
+<p class="has-text-align-center is-style-ucsc-intro-text has-white-color has-ucsc-primary-blue-background-color has-text-color has-background">Add your position statement, tagline, or cover block image description here.</p>
 <!-- /wp:paragraph --></div>
 <!-- /wp:column --></div>
 <!-- /wp:columns --></div>

patterns/page-banner-title-pre-text.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ * Title: Banner with title and pre-text
+ * Slug: ucsc-2022/page-banner-title-pre-text
+ * Block Types: core/cover, core/heading
+ * Categories: banner
+ */
+?>
+
+<!-- wp:group {"align":"full","style":{"spacing":{"margin":{"top":"0","bottom":"0"}}},"className":"ucsc-page-header","layout":{"type":"default"},"fontSize":"base"} -->
+<div class="wp-block-group alignfull ucsc-page-header has-base-font-size" style="margin-top:0;margin-bottom:0"><!-- wp:cover {"url":"https://unsplash.com/photos/ySIhrENsguE/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MTR8fGxhbmRzY2FwZSUyMG5hdHVyZXxlbnwwfHx8fDE3MTQwNjg3OTJ8MA\u0026force=true\u0026w=1920","dimRatio":10,"focalPoint":{"x":0.5,"y":0.9},"contentPosition":"center center","isDark":false,"style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}},"className":"ucsc-page-header__content"} -->
+<div class="wp-block-cover is-light ucsc-page-header__content" style="padding-top:var(--wp--preset--spacing--50)"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-10 has-background-dim"></span><img class="wp-block-cover__image-background" alt="" src="https://unsplash.com/photos/ySIhrENsguE/download?ixid=M3wxMjA3fDB8MXxzZWFyY2h8MTR8fGxhbmRzY2FwZSUyMG5hdHVyZXxlbnwwfHx8fDE3MTQwNjg3OTJ8MA&amp;force=true&amp;w=1920" style="object-position:50% 90%" data-object-fit="cover" data-object-position="50% 90%"/><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|30","right":"var:preset|spacing|30"},"blockGap":"0"},"elements":{"link":{"color":{"text":"var:preset|color|ucsc-primary-blue"}}}},"backgroundColor":"ucsc-primary-yellow","textColor":"ucsc-primary-blue","className":"ucsc-marquee","layout":{"type":"constrained"}} -->
+<div class="wp-block-group ucsc-marquee has-ucsc-primary-blue-color has-ucsc-primary-yellow-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"margin":{"top":"0","bottom":"0","left":"0","right":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|ucsc-rubine-blue"}}}},"textColor":"ucsc-rubine-blue"} -->
+<p class="has-ucsc-rubine-blue-color has-text-color has-link-color" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">Affiliation or relationship text</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:post-title {"level":1,"style":{"elements":{"link":{"color":{"text":"var:preset|color|ucsc-primary-blue"}}},"spacing":{"padding":{"top":"0","bottom":"0","left":"0","right":"0"},"margin":{"top":"0","bottom":"0","left":"0","right":"0"}}},"textColor":"ucsc-primary-blue","fontSize":"six"} /--></div>
+<!-- /wp:group --></div></div>
+<!-- /wp:cover --></div>
+<!-- /wp:group -->

patterns/page-header-breadcrumbs.php → patterns/page-banner-title.php

@@ -1,7 +1,7 @@
 <?php
 /**
- * Title: Page Header
- * Slug: ucsc-2022/page-header
+ * Title: Banner with page title
+ * Slug: ucsc-2022/page-banner-title
  * Block Types: core/cover, core/heading
  * Categories: banner
  */

src/scss/block-patterns/_page-header-breadcrumbs.scss → src/scss/block-patterns/_page-header.scss

@@ -1,4 +1,9 @@
-/* BLOCK PATTERN: Homepage Hero */
+/*
+BLOCK PATTERNS:
+	Page header,
+	Page header with color bar below,
+	Page header with marquee
+*/
 
 .ucsc-page-header {
 	margin: 0;
@@ -26,3 +31,17 @@
 .ucsc-page-header__title {
 	display: inline-block;
 }
+
+.ucsc-marquee {
+	display: inline-block;
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		display: inline-block;
+		text-wrap: pretty;
+	}
+}

src/scss/style.scss

@@ -46,7 +46,7 @@
 @import "block-patterns/link-list";
 @import "block-patterns/media-with-text-featured";
 @import "block-patterns/statistics";
-@import "block-patterns/page-header-breadcrumbs";
+@import "block-patterns/page-header";
 @import "block-patterns/cards";
 @import "block-patterns/three-columns-text";
 @import "block-patterns/grid-with-background-image";