design updates

themes/10up-block-theme/assets/css/base/layout.css

@@ -1,5 +1,9 @@
 html {
 	scroll-behavior: smooth;
+
+	@view-transition {
+		navigation: auto;
+	}
 }
 
 .has-global-padding :where(.has-global-padding.is-layout-constrained) {

themes/10up-block-theme/includes/blocks.php

@@ -7,6 +7,8 @@
 
 namespace TenupBlockTheme\Blocks;
 
+use WP_HTML_Tag_Processor;
+
 use function TenupBlockTheme\Utility\get_asset_info;
 
 /**
@@ -17,6 +19,8 @@
 function setup() {
 	add_action( 'init', 'TenupBlockTheme\Blocks\register_theme_blocks', 10, 0 );
 	add_action( 'init', 'TenupBlockTheme\Blocks\enqueue_theme_block_styles', 10, 0 );
+
+	add_filter( 'render_block_core/post-featured-image', 'TenupBlockTheme\Blocks\filter_featured_image_block', 10, 3 );
 }
 
 /**
@@ -83,3 +87,34 @@ function enqueue_theme_block_styles() {
 		}
 	}
 }
+
+/**
+ * Filter the post-featured-image block to add a view transition class based on the featured image ID.
+ *
+ * @param string   $block_content The block content.
+ * @param array    $block The block.
+ * @param WP_Block $parsed_block The parsed block.
+ * @return string
+ */
+function filter_featured_image_block( $block_content, $block, $parsed_block ) {
+
+	$featured_image_id = get_post_thumbnail_id( $parsed_block->context['postId'] );
+
+	$p = new WP_HTML_Tag_Processor( $block_content );
+	$p->next_tag();
+
+	if ( $p->has_class( 'is-style-single-movie-backdrop' ) ) {
+		return $block_content;
+	}
+
+	$style_attribute       = $p->get_attribute( 'style' );
+	$view_transition_style = "view-transition-name: post-featured-image-id-{$featured_image_id};";
+
+	if ( false === strpos( $style_attribute, $view_transition_style ) ) {
+		$style_attribute = $view_transition_style . $style_attribute;
+	}
+
+	$p->set_attribute( 'style', $style_attribute );
+
+	return $p->get_updated_html();
+}

themes/10up-block-theme/templates/archive-tenup-movie.html

@@ -0,0 +1,31 @@
+<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+
+<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"top":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d32-48)","bottom":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d32-48)"}}},"layout":{"type":"constrained"}} -->
+<main class="wp-block-group" style="margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--32-48);padding-bottom:var(--wp--preset--spacing--32-48)"><!-- wp:query {"queryId":0,"query":{"perPage":10,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true,"taxQuery":null,"parents":[]},"align":"wide","layout":{"type":"default"}} -->
+<div class="wp-block-query alignwide"><!-- wp:post-template {"layout":{"type":"grid","columnCount":null,"minimumColumnWidth":"13rem"}} -->
+<!-- wp:group {"align":"wide","style":{"spacing":{"blockGap":"var:preset|spacing|12","padding":{"top":"var:preset|spacing|12","bottom":"var:preset|spacing|12","left":"var:preset|spacing|12","right":"var:preset|spacing|12"}},"border":{"radius":"10px"}},"backgroundColor":"background-transparent-5","layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch","flexWrap":"nowrap"}} -->
+<div class="wp-block-group alignwide has-background-transparent-5-background-color has-background" style="border-radius:10px;padding-top:var(--wp--preset--spacing--12);padding-right:var(--wp--preset--spacing--12);padding-bottom:var(--wp--preset--spacing--12);padding-left:var(--wp--preset--spacing--12)"><!-- wp:post-featured-image {"aspectRatio":"2:3","width":"","height":"","style":{"border":{"radius":"5px"}}} /-->
+
+<!-- wp:group {"align":"wide","className":"is-style-default","style":{"spacing":{"blockGap":"var:preset|spacing|12"},"layout":{"selfStretch":"fit"},"border":{"width":"0px","style":"none","radius":{"topLeft":"0px","topRight":"0px","bottomLeft":"8px","bottomRight":"8px"}}},"fontSize":"small","layout":{"type":"flex","orientation":"vertical","verticalAlignment":"space-between","flexWrap":"nowrap","justifyContent":"stretch"}} -->
+<div class="wp-block-group alignwide is-style-default has-small-font-size" style="border-style:none;border-width:0px;border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-left-radius:8px;border-bottom-right-radius:8px"><!-- wp:post-title {"isLink":true,"align":"wide","style":{"spacing":{"margin":{"top":"0","right":"0","bottom":"0","left":"0"}}},"fontSize":"heading-4"} /-->
+
+<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"width":100,"className":"is-style-secondary"} -->
+<div class="wp-block-button has-custom-width wp-block-button__width-100 is-style-secondary"><a class="wp-block-button__link wp-element-button"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-yellow-color">▶</mark> Trailer</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons --></div>
+<!-- /wp:group --></div>
+<!-- /wp:group -->
+<!-- /wp:post-template -->
+
+<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"top":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dspacing\u002d\u002d60)"}}},"layout":{"type":"default"}} -->
+<div class="wp-block-group alignwide" style="margin-top:var(--wp--preset--spacing--60)"><!-- wp:query-pagination {"paginationArrow":"arrow","align":"wide","layout":{"type":"flex","justifyContent":"space-between"}} -->
+<!-- wp:query-pagination-previous /-->
+
+<!-- wp:query-pagination-next /-->
+<!-- /wp:query-pagination --></div>
+<!-- /wp:group --></div>
+<!-- /wp:query --></main>
+<!-- /wp:group -->
+
+<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

themes/10up-block-theme/templates/single-tenup-movie.html

@@ -35,10 +35,10 @@
 <!-- /wp:group -->
 
 <!-- wp:group {"align":"wide","layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"stretch","justifyContent":"space-between"}} -->
-<div class="wp-block-group alignwide"><!-- wp:post-featured-image {"aspectRatio":"2:3","style":{"layout":{"selfStretch":"fixed","flexSize":"336px"}}} /-->
+<div class="wp-block-group alignwide"><!-- wp:post-featured-image {"aspectRatio":"2:3","style":{"layout":{"selfStretch":"fixed","flexSize":"336px"},"border":{"radius":"3px"}}} /-->
 
 <!-- wp:image {"sizeSlug":"full","linkDestination":"none"} -->
-<figure class="wp-block-image size-full"><img src="http://block-based-theme-training.test/wp-content/uploads/2025/01/e6308eeb0458fdff145211051474a4c3.png" alt="" class=""/></figure>
+<figure class="wp-block-image size-full"><img src="http://block-based-theme-training.test/wp-content/uploads/2025/01/e6308eeb0458fdff145211051474a4c3.png" alt=""/></figure>
 <!-- /wp:image --></div>
 <!-- /wp:group -->
 

themes/10up-block-theme/theme.json

@@ -6,6 +6,11 @@
 			"defaultGradients": false,
 			"defaultPalette": false,
 			"palette": [
+				{
+					"slug": "yellow",
+					"color": "var(--wp--custom--color--yellow--primary)",
+					"name": "Yellow"
+				},
 				{
 					"slug": "text-primary",
 					"color": "var(--wp--custom--color--text--primary)",
@@ -25,6 +30,21 @@
 					"slug": "background-secondary",
 					"color": "var(--wp--custom--color--background--secondary)",
 					"name": "Background Secondary"
+				},
+				{
+					"slug": "background-transparent-5",
+					"color": "var(--wp--custom--color--background--light-transparent-5)",
+					"name": "Background Transparent 5%"
+				},
+				{
+					"slug": "background-transparent-10",
+					"color": "var(--wp--custom--color--background--light-transparent-10)",
+					"name": "Background Transparent 10%"
+				},
+				{
+					"slug": "background-transparent-20",
+					"color": "var(--wp--custom--color--background--light-transparent-20)",
+					"name": "Background Transparent 20%"
 				}
 			]
 		},
@@ -85,7 +105,9 @@
 					"primary": "#0E0E0E",
 					"secondary": "#1A1A1A",
 					"nav": "#080808aa",
-					"light-transparent-10": "#A3A3A326"
+					"light-transparent-5": "#A3A3A30D",
+					"light-transparent-10": "#A3A3A326",
+					"light-transparent-20": "#A3A3A326"
 				}
 			}
 		},