Videomaker: Add block patterns (#4701)

* Videomaker: Add block patterns

* Remove autoplay, loop and muted

* Match post meta to the comps

* Add more translations to the patterns

* Set the site title CSS in the theme.json

* Reset the header

* Update patterns - add video controls and update the source video

blockbase/assets/ponyfill.css

@@ -159,10 +159,6 @@ pre {
 	padding-top: var(--wp--custom--gap--vertical);
 }
 
-.wp-site-blocks .site-header .wp-block-site-title a {
-	text-decoration: none;
-}
-
 .wp-site-blocks .site-header .wp-block-navigation {
 	flex-grow: 1;
 }

blockbase/sass/base/_header.scss

@@ -3,9 +3,6 @@
 	overflow: inherit;
 	padding-top: var(--wp--custom--gap--vertical);
 
-	.wp-block-site-title a {
-		text-decoration: none;
-	}
 	.wp-block-navigation {
 		flex-grow: 1;
 	}

blockbase/theme.json

@@ -460,6 +460,13 @@
 					"width": "0 0 1px 0"
 				}
 			},
+			"core/site-title": {
+				"typography": {
+					"fontSize": "var(--wp--preset--font-size--normal)",
+					"fontWeight": 700,
+					"textDecoration": "none"
+				}
+			},
 			"core/quote": {
 				"border": {
 					"color": "var(--wp--custom--color--primary)",

videomaker/assets/theme.css

@@ -47,6 +47,19 @@ a:active {
 	color: var(--wp--custom--color--background);
 }
 
+div.post-meta {
+	gap: 1ch;
+}
+
+div.post-meta a {
+	text-decoration: none;
+}
+
+.wp-block-post-date::before,
+.wp-block-post-terms::before {
+	display: none !important;
+}
+
 .is-vertical.items-justified-right ul.wp-block-navigation__container {
 	align-items: flex-end;
 }

videomaker/block-template-parts/post-meta.html

@@ -1,7 +1,9 @@
 <!-- wp:group {"className":"post-meta","layout":{"type":"flex"}} -->
 <div class="wp-block-group post-meta">
-    <!-- wp:post-author {"showAvatar":false,"showBio":false,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
     <!-- wp:post-date {"isLink":true,"style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
+    <!-- wp:paragraph -->
+	<p>/</p>
+	<!-- /wp:paragraph -->
     <!-- wp:post-terms {"term":"category","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
     <!-- wp:post-terms {"term": "post_tag","style":{"typography":{"fontSize":"var(--wp--custom--font-sizes--tiny)"}}} /-->
 </div>

videomaker/block-templates/header-footer-only.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"area":"header","slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
@@ -7,4 +7,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->
+<!-- wp:template-part {"area":"footer","slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

videomaker/block-templates/index.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"area":"header","slug":"header","tagName":"header"} /-->
 
 <!-- wp:query {"tagName":"main"} -->
 <main class="wp-block-query">
@@ -34,4 +34,4 @@
 </main>
 <!-- /wp:query -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->
+<!-- wp:template-part {"area":"footer","slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

videomaker/block-templates/search.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"area":"header","slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"layout":{"inherit":true},"tagName":"main"} -->
 <main class="wp-block-group">
@@ -17,4 +17,4 @@
 </main>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->
+<!-- wp:template-part {"area":"footer","slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

videomaker/block-templates/singular.html

@@ -1,4 +1,4 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"area":"header","slug":"header","tagName":"header"} /-->
 
 <!-- wp:group {"layout":{"inherit":true}} -->
 <div class="wp-block-group">
@@ -6,13 +6,13 @@
 </div>
 <!-- /wp:group -->
 
+<!-- wp:template-part {"layout":{"inherit":true},"slug":"post-meta"} /-->
+
 <!-- wp:group {"tagName":"main"} -->
 <main class="wp-block-group">
 <!-- wp:post-featured-image {"align":"full"} /-->
 
 <!-- wp:post-content {"layout":{"inherit":true}} /-->
-
-<!-- wp:template-part {"slug":"post-meta","layout":{"inherit":true}} /-->
 </main>
 <!-- /wp:group -->
 
@@ -25,4 +25,4 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->
+<!-- wp:template-part {"area":"footer","slug":"footer","tagName":"footer","layout":{"inherit":true},"className":"site-footer-container"} /-->

videomaker/child-theme.json

@@ -187,32 +187,38 @@
 		"elements": {
 			"h1": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--inter)"
+					"fontFamily": "var(--wp--preset--font-family--inter)",
+					"fontWeight": 600
 				}
 			},
 			"h2": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--inter)"
+					"fontFamily": "var(--wp--preset--font-family--inter)",
+					"fontWeight": 600
 				}
 			},
 			"h3": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--inter)"
+					"fontFamily": "var(--wp--preset--font-family--inter)",
+					"fontWeight": 600
 				}
 			},
 			"h4": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--inter)"
+					"fontFamily": "var(--wp--preset--font-family--inter)",
+					"fontWeight": 600
 				}
 			},
 			"h5": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--inter)"
+					"fontFamily": "var(--wp--preset--font-family--inter)",
+					"fontWeight": 600
 				}
 			},
 			"h6": {
 				"typography": {
-					"fontFamily": "var(--wp--preset--font-family--inter)"
+					"fontFamily": "var(--wp--preset--font-family--inter)",
+					"fontWeight": 600
 				}
 			}
 		},

videomaker/functions.php

@@ -30,3 +30,8 @@ function newtheme_scripts() {
 	wp_enqueue_style( 'newtheme-styles', get_stylesheet_directory_uri() . '/assets/theme.css', array('blockbase-ponyfill'), wp_get_theme()->get( 'Version' ) );
 }
 add_action( 'wp_enqueue_scripts', 'newtheme_scripts' );
+
+/**
+ * Block Patterns.
+ */
+require get_stylesheet_directory() . '/inc/block-patterns.php';

videomaker/inc/block-patterns.php

@@ -0,0 +1,43 @@
+<?php
+/**
+ * Videomaker Theme: Block Patterns
+ *
+ * @package Videomaker
+ * @since   1.0.0
+ */
+if ( ! function_exists( 'videomaker_register_block_patterns' ) ) :
+
+	function videomaker_register_block_patterns() {
+
+		if ( function_exists( 'register_block_pattern_category' ) ) {
+			register_block_pattern_category(
+				'videomaker',
+				array( 'label' => __( 'Videomaker', 'videomaker' ) )
+			);
+		}
+
+		if ( function_exists( 'register_block_pattern' ) ) {
+			$block_patterns = array(
+				'background-video',
+				'full-width-homepage',
+				'footer',
+				'description',
+				'header-description-and-grid-of-projects',
+				'header-names-list-and-grid',
+				'pattern-grid',
+				'pattern-offset-project-grid',
+				'pattern-two-posts-with-excerpt',
+				'post-i-love-you',
+			);
+
+			foreach ( $block_patterns as $block_pattern ) {
+				register_block_pattern(
+					'videomaker/' . $block_pattern,
+					require __DIR__ . '/patterns/' . $block_pattern . '.php'
+				);
+			}
+		}
+	}
+endif;
+
+add_action( 'init', 'videomaker_register_block_patterns', 9 );

videomaker/inc/patterns/background-video.php

@@ -0,0 +1,46 @@
+<?php
+/**
+ * Background Video
+ *
+ * @package Videomaker
+ */
+
+return array(
+	'title'      => __( 'Background video', 'videomaker' ),
+	'categories' => array( 'videomaker' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:cover {"url":"' . get_stylesheet_directory_uri() . '/assets/videos/fish.mp4","dimRatio":40,"backgroundType":"video","minHeight":100,"minHeightUnit":"vh","align":"full","style":{"spacing":{"padding":{"top":"60px","right":"60px","bottom":"60px","left":"60px"}}}} -->
+	<div class="wp-block-cover alignfull has-background-dim-40 has-background-dim" style="padding-top:60px;padding-right:60px;padding-bottom:60px;padding-left:60px;min-height:100vh"><video class="wp-block-cover__video-background intrinsic-ignore" autoplay muted loop playsinline src="' . get_stylesheet_directory_uri() . '/assets/videos/fish.mp4" data-object-fit="cover"></video><div class="wp-block-cover__inner-container"><!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
+	<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
+	<div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title /--></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"verticalAlignment":"center"} -->
+	<div class="wp-block-column is-vertically-aligned-center">
+	<!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary"} /-->
+	</div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->
+
+	<!-- wp:spacer -->
+	<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column {"width":"90%"} -->
+	<div class="wp-block-column" style="flex-basis:90%">
+	<!-- wp:post-title /-->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	</div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
+	<div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%"><!-- wp:spacer -->
+	<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns --></div></div>
+	<!-- /wp:cover -->',
+);

videomaker/inc/patterns/description.php

@@ -0,0 +1,15 @@
+<?php
+/**
+ * Description.
+ *
+ * @package Videomaker
+ */
+
+return array(
+	'title'      => __( 'Description', 'videomaker' ),
+	'categories' => array( 'videomaker' ),
+	'content'    => '<!-- wp:heading {"align":"wide","style":{"typography":{"fontWeight":"300"}}} -->
+	<h2 class="alignwide" style="font-weight:300">' . esc_html__( 'Gary Han is a award-winning creative director, designer, photographer and visual artist based in Singapore.', 'videomaker' ) . '</h2>
+	<!-- /wp:heading -->',
+
+);

videomaker/inc/patterns/footer.php

@@ -0,0 +1,24 @@
+<?php
+/**
+ * Footer
+ *
+ * @package Videomaker
+ */
+
+return array(
+	'title'      => __( 'Footer', 'videomaker' ),
+	'categories' => array( 'videomaker' ),
+	'content'    => '<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column -->
+	<div class="wp-block-column">
+	<!-- wp:navigation {"orientation":"vertical","__unstableLocation":"footer","style":{"typography":{"lineHeight":"1"}}} /-->
+	</div>
+	<!-- /wp:column -->
+
+	<!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:paragraph {"align":"right","style":{"typography":{"lineHeight":1.4}},"fontSize":"extra-small"} -->
+	<p class="has-text-align-right has-extra-small-font-size" style="line-height:1.4">'. esc_html__( '© Gary Han 2021', 'videomaker' ) . '<br>' . esc_html__( 'Creative Director', 'videomaker' ) . '</p>
+	<!-- /wp:paragraph --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->',
+);

videomaker/inc/patterns/full-width-homepage.php

@@ -0,0 +1,25 @@
+<?php
+/**
+ * Full-width Homepage
+ *
+ * @package Videomaker
+ */
+
+return array(
+	'title'      => __( 'Full-width Homepage', 'videomaker' ),
+	'categories' => array( 'videomaker' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:columns {"verticalAlignment":"center","align":"wide"} -->
+	<div class="wp-block-columns alignwide are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
+	<div class="wp-block-column is-vertically-aligned-center"><!-- wp:site-title /--></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"verticalAlignment":"center"} -->
+	<div class="wp-block-column is-vertically-aligned-center"><!-- wp:navigation {"itemsJustification":"right","isResponsive":true,"__unstableLocation":"primary"} /--></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->
+
+	<!-- wp:video {"align":"wide","className":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video alignwide wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/digging.mp4"></video></figure>
+	<!-- /wp:video -->',
+);

videomaker/inc/patterns/header-description-and-grid-of-projects.php

@@ -0,0 +1,93 @@
+<?php
+/**
+ * Header, Description and Grid of Projects
+ *
+ * @package Videomaker
+ */
+
+return array(
+	'title'      => __( 'Header, Description and Grid of Projects', 'videomaker' ),
+	'categories' => array( 'videomaker' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:columns {"verticalAlignment":"top","align":"wide"} -->
+		<div class="wp-block-columns alignwide are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"35%"} -->
+		<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:35%">
+
+		<!-- wp:site-title /-->
+
+		<!-- wp:heading {"level":3,"style":{"typography":{"fontWeight":"300"}}} -->
+		<h3 style="font-weight:300">' . esc_html__( 'Jonah is Creative Director of Hano, a production studio that specializes in combining storytelling with visual design.', 'videomaker' ) . '</h3>
+		<!-- /wp:heading -->
+
+		<!-- wp:navigation {"orientation":"vertical","__unstableLocation":"primary"} /-->
+
+		</div>
+		<!-- /wp:column -->
+
+		<!-- wp:column {"width":"10%"} -->
+		<div class="wp-block-column" style="flex-basis:10%"><!-- wp:spacer -->
+		<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+		<!-- /wp:spacer --></div>
+		<!-- /wp:column -->
+
+		<!-- wp:column {"width":"30%"} -->
+		<div class="wp-block-column" style="flex-basis:30%">
+
+		<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/digging.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+		<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/digging.mp4"></video></figure>
+		<!-- /wp:video -->
+
+		<!-- wp:heading {"level":4} -->
+		<h4>' . esc_html__( 'Man Working at Dawn', 'videomaker' ) . '</h4>
+		<!-- /wp:heading -->
+
+		<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/cocktails.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+		<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/cocktails.mp4"></video></figure>
+		<!-- /wp:video -->
+
+		<!-- wp:heading {"level":4} -->
+		<h4>' . esc_html__( 'The Tale of The Three Cocktails', 'videomaker' ) . '</h4>
+		<!-- /wp:heading -->
+
+		<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/cocktails.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+		<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/pacific.mp4"></video></figure>
+		<!-- /wp:video -->
+
+		<!-- wp:heading {"level":4} -->
+		<h4>' . esc_html__( 'Is This The Pacific?', 'videomaker' ) . '</h4>
+		<!-- /wp:heading -->
+
+		</div>
+		<!-- /wp:column -->
+
+		<!-- wp:column {"width":"30%"} -->
+		<div class="wp-block-column" style="flex-basis:30%">
+
+		<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/boats.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+		<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/boats.mp4"></video></figure>
+		<!-- /wp:video -->
+
+		<!-- wp:heading {"level":4} -->
+		<h4>' . esc_html__( 'Boats', 'videomaker' ) . '</h4>
+		<!-- /wp:heading -->
+
+		<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/fish.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+		<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/fish.mp4"></video></figure>
+		<!-- /wp:video -->
+
+		<!-- wp:heading {"level":4} -->
+		<h4>' . esc_html__( 'Plenty of Fish In The Sea', 'videomaker' ) . '</h4>
+		<!-- /wp:heading -->
+
+		<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/i-love-you.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+		<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/i-love-you.mp4"></video></figure>
+		<!-- /wp:video -->
+
+		<!-- wp:heading {"level":4} -->
+		<h4>' . esc_html__( 'I Love You', 'videomaker' ) . '</h4>
+		<!-- /wp:heading -->
+
+		</div>
+		<!-- /wp:column --></div>
+		<!-- /wp:columns -->',
+);

videomaker/inc/patterns/header-names-list-and-grid.php

@@ -0,0 +1,47 @@
+<?php
+/**
+ * Header, Names List and Grid
+ *
+ * @package Videomaker
+ */
+
+return array(
+	'title'      => __( 'Header, Names List and Grid', 'videomaker' ),
+	'categories' => array( 'videomaker' ),
+	'blockTypes' => array( 'core/template-part/header' ),
+	'content'    => '<!-- wp:spacer -->
+	<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:columns {"verticalAlignment":"top","align":"wide"} -->
+	<div class="wp-block-columns alignwide are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"46.67%"} -->
+	<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:46.67%"><!-- wp:site-title /-->
+
+	<!-- wp:heading {"level":3,"style":{"typography":{"fontWeight":"300"}}} -->
+	<h3 style="font-weight:300">' . esc_html__( 'Augusta Smith', 'videomaker' ) . '<br>' . esc_html__( 'Dan Andrews', 'videomaker' ) . '<br>' . esc_html__( 'Syd Wyatt', 'videomaker' ) . '<br>' . esc_html__( 'Philip Mizrahi', 'videomaker' ) . '<br>' . esc_html__( 'Tony Sánchez', 'videomaker' ) . '<br>' . esc_html__( 'Romana Arak', 'videomaker' ) . '</h3>
+	<!-- /wp:heading --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"width":"13.33%"} -->
+	<div class="wp-block-column" style="flex-basis:13.33%"><!-- wp:spacer -->
+	<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"width":"60%"} -->
+	<div class="wp-block-column" style="flex-basis:60%">
+
+	<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/boats.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/boats.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:heading {"level":3,"style":{"typography":{"fontWeight":"700"}},"fontSize":"normal"} -->
+	<h3 class="has-normal-font-size" style="font-weight:700">' . esc_html__( 'Boats', 'videomaker' ) . '</h3>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	</div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->',
+);

videomaker/inc/patterns/pattern-grid.php

@@ -0,0 +1,60 @@
+<?php
+/**
+ * Pattern: Grid
+ *
+ * @package Videomaker
+ */
+
+return array(
+	'title'      => __( 'Pattern: Grid', 'videomaker' ),
+	'categories' => array( 'videomaker' ),
+	'content'    => '<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/digging.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/digging.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Man Working at Dawn', 'videomaker' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/cocktails.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/cocktails.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'The Tale of The Three Cocktails', 'videomaker' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	</div>
+	<!-- /wp:column -->
+
+	<!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/boats.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/boats.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Boats', 'videomaker' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/fish.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/fish.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Plenty of Fish In The Sea', 'videomaker' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	</div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->',
+);

videomaker/inc/patterns/pattern-offset-project-grid.php

@@ -0,0 +1,134 @@
+<?php
+/**
+ * Pattern: Offset Project Grid
+ *
+ * @package Videomaker
+ */
+
+return array(
+	'title'      => __( 'Pattern: Offset Project Grid', 'videomaker' ),
+	'categories' => array( 'videomaker' ),
+	'content'    => '<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column {"width":"60%"} -->
+	<div class="wp-block-column" style="flex-basis:60%">
+
+	<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/digging.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/digging.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:group -->
+	<div class="wp-block-group">
+	<!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Man Working at Dawn', 'videomaker' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	</div>
+	<!-- /wp:group --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"width":"40%"} -->
+	<div class="wp-block-column" style="flex-basis:40%"><!-- wp:spacer {"height":290} -->
+	<div style="height:290px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/boats.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/boats.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:group -->
+	<div class="wp-block-group">
+	<!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Boats', 'videomaker' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	</div>
+	<!-- /wp:group --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->
+
+	<!-- wp:spacer {"height":65} -->
+	<div style="height:65px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column {"width":"20%"} -->
+	<div class="wp-block-column" style="flex-basis:20%"><!-- wp:spacer -->
+	<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"width":"66.66%"} -->
+	<div class="wp-block-column" style="flex-basis:66.66%">
+
+	<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/cocktails.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/cocktails.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:group -->
+	<div class="wp-block-group">
+	<!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'The Tale Of Three Cocktails', 'videomaker' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	</div>
+	<!-- /wp:group --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"width":"33.33%"} -->
+	<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:spacer -->
+	<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->
+
+	<!-- wp:spacer -->
+	<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column {"width":"40%"} -->
+	<div class="wp-block-column" style="flex-basis:40%"><!-- wp:spacer {"height":385} -->
+	<div style="height:385px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/pacific.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/pacific.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:group --><div class="wp-block-group">
+	<!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Is This The Pacific?', 'videomaker' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	</div>
+	<!-- /wp:group --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"width":"60%"} -->
+	<div class="wp-block-column" style="flex-basis:60%">
+	<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/fish.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/fish.mp4"></video></figure>
+	<!-- /wp:video -->
+
+
+	<!-- wp:group -->
+	<div class="wp-block-group">
+	<!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Plenty of Fish In The Sea', 'videomaker' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	</div>
+	<!-- /wp:group --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->'
+);

videomaker/inc/patterns/pattern-two-posts-with-excerpt.php

@@ -0,0 +1,85 @@
+<?php
+/**
+ * Pattern: Two posts with excerpt
+ *
+ * @package Videomaker
+ */
+
+return array(
+	'title'      => __( 'Two posts with excerpt', 'videomaker' ),
+	'categories' => array( 'videomaker' ),
+	'content'    => '<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column {"width":"80%"} -->
+	<div class="wp-block-column" style="flex-basis:80%">
+	<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/digging.mp4"} -->
+	<figure class="wp-block-video"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/digging.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:columns -->
+	<div class="wp-block-columns"><!-- wp:column -->
+	<div class="wp-block-column">
+
+	<!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Man Working at Dawn', 'videomaker' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	</div>
+	<!-- /wp:column -->
+
+	<!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5"}},"fontSize":"small"} -->
+	<p class="has-small-font-size" style="line-height:1.5">' . esc_html__( 'As nations under the present system are driven to compete with one another for the markets of the world, so also have the workers to compete with each other—for livelihood.', 'videomaker' ) . '</p>
+	<!-- /wp:paragraph --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"width":"33.33%"} -->
+	<div class="wp-block-column" style="flex-basis:33.33%"><!-- wp:spacer -->
+	<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->
+
+	<!-- wp:spacer -->
+	<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer -->
+
+	<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column {"width":"20%"} -->
+	<div class="wp-block-column" style="flex-basis:20%"><!-- wp:spacer -->
+	<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
+	<!-- /wp:spacer --></div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"width":"80%"} -->
+	<div class="wp-block-column" style="flex-basis:80%">
+
+	<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/boats.mp4"} -->
+	<figure class="wp-block-video"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/boats.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:columns -->
+	<div class="wp-block-columns"><!-- wp:column -->
+	<div class="wp-block-column">
+
+	<!-- wp:heading {"level":4} -->
+	<h4>' . esc_html__( 'Boats', 'videomaker' ) . '</h4>
+	<!-- /wp:heading -->
+
+	<!-- wp:template-part {"slug":"post-meta","theme":"themes/videomaker"} /-->
+
+	</div>
+	<!-- /wp:column -->
+
+	<!-- wp:column -->
+	<div class="wp-block-column"><!-- wp:paragraph {"style":{"typography":{"lineHeight":"1.5"}},"fontSize":"small"} -->
+	<p class="has-small-font-size" style="line-height:1.5">' . esc_html__( 'As nations under the present system are driven to compete with one another for the markets of the world, so also have the workers to compete with each other—for livelihood.', 'videomaker' ) . '</p>
+	<!-- /wp:paragraph --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns --></div>
+	<!-- /wp:column --></div>
+	<!-- /wp:columns -->',
+);

videomaker/inc/patterns/post-i-love-you.php

@@ -0,0 +1,20 @@
+<?php
+/**
+ * Post: I Love You
+ *
+ * @package Videomaker
+ */
+
+return array(
+	'title'      => __( 'Post: I Love You', 'videomaker' ),
+	'categories' => array( 'videomaker' ),
+	'content'    => '<!-- wp:video {"src":"' . get_stylesheet_directory_uri() . '/assets/videos/i-love-you.mp4","videoPressClassNames":"wp-block-embed is-type-video is-provider-videopress"} -->
+	<figure class="wp-block-video wp-block-embed is-type-video is-provider-videopress"><video controls src="' . get_stylesheet_directory_uri() . '/assets/videos/i-love-you.mp4"></video></figure>
+	<!-- /wp:video -->
+
+	<!-- wp:post-terms {"term":"post_tag"} /-->
+
+	<!-- wp:paragraph {"fontSize":"small"} -->
+	<p class="has-small-font-size">' . esc_html__( 'As nations under the present system are driven to compete with one another for the markets of the world, and as firms or the captains of industry have to scramble for their share of the profits of the markets, so also have the workers to compete with each other—for livelihood.', 'videomaker' ) . '<br><br>—<br><br><strong>' . esc_html__( 'Direction', 'videomaker' ) . '</strong><br>' . esc_html__( 'Dan Andrews', 'videomaker' ) . '<br><br><strong>' . esc_html__( 'Screenplay', 'videomaker' ) . '</strong><br>' . esc_html__( 'Augusta Smith', 'videomaker' ) . '<br><br><strong>' . esc_html__( 'Actors', 'videomaker' ) . '</strong><br>' . esc_html__( 'Akachukwu Elba', 'videomaker' ) . '<br><br><strong>' . esc_html__( 'Camera', 'videomaker' ) . '</strong><br>' . esc_html__( 'Diego Cruz, Helen Smith-Andrews and Dan Andrews', 'videomaker' ) . '<br><br><strong>' . esc_html__( 'Art', 'videomaker' ) . '</strong><br>' . esc_html__( 'Philip Mizrahi', 'videomaker' ) . '<br><br><strong>' . esc_html__( 'Production', 'videomaker' ) . '</strong><br>' . esc_html__( 'Romana Arakelyan', 'videomaker' ) . '<br><br><strong>' . esc_html__( 'Operators', 'videomaker' ) . '</strong><br>' . esc_html__( 'Syd Wyatt and Cameron Madeira', 'videomaker' ) . '<br>' . esc_html__( 'Behind the Camera: Diego Cruz', 'videomaker' ) . '<br><br><strong>' . esc_html__( 'Color Editing and Post-Production', 'videomaker' ) . '<br></strong>' . esc_html__( 'Philip Mizrahi and Tony Sánchez', 'videomaker' ) . '</p>
+	<!-- /wp:paragraph -->',
+);

videomaker/sass/_meta.scss

@@ -0,0 +1,15 @@
+div.post-meta {
+	gap: 1ch;
+
+	a {
+		text-decoration: none;
+	}
+}
+
+// TODO - this should be the default, and child themes should opt in to the icons.
+.wp-block-post-date,
+.wp-block-post-terms {
+	&::before {
+		display: none !important;
+	}
+}

videomaker/sass/theme.scss

@@ -1,4 +1,5 @@
 @import "../../blockbase/sass/blocks/_buttons-outline-style";
 @import "links";
+@import "meta";
 @import "navigation";
 @import "templates/footer";

videomaker/theme.json

@@ -490,6 +490,7 @@
 				"typography": {
 					"fontSize": "var(--wp--preset--font-size--normal)",
 					"fontWeight": 700,
+					"textDecoration": "none",
 					"textTransform": "uppercase"
 				}
 			},
@@ -512,7 +513,7 @@
 			"h1": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--inter)",
-					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
+					"fontWeight": 600,
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "48px"
 				},
@@ -526,7 +527,7 @@
 			"h2": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--inter)",
-					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
+					"fontWeight": 600,
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "32px"
 				},
@@ -540,7 +541,7 @@
 			"h3": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--inter)",
-					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
+					"fontWeight": 600,
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "var(--wp--preset--font-size--large)"
 				},
@@ -554,7 +555,7 @@
 			"h4": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--inter)",
-					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
+					"fontWeight": 600,
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "var(--wp--preset--font-size--medium)"
 				},
@@ -568,7 +569,7 @@
 			"h5": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--inter)",
-					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
+					"fontWeight": 600,
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "var(--wp--preset--font-size--normal)"
 				},
@@ -582,7 +583,7 @@
 			"h6": {
 				"typography": {
 					"fontFamily": "var(--wp--preset--font-family--inter)",
-					"fontWeight": "var(--wp--custom--heading--typography--font-weight)",
+					"fontWeight": 600,
 					"lineHeight": "var(--wp--custom--heading--typography--line-height)",
 					"fontSize": "var(--wp--preset--font-size--small)"
 				},