Site screenshot: Add a background color, and overlap the desktop/mobi…

…le screenshots on page headers Fixes #153
WordPress · Sep 19, 2023 · 3a7ca52 · 3a7ca52
1 parent 120dec3
commit 3a7ca52
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/index.php b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/index.php
@@ -149,6 +149,7 @@ function inject_background_color( $block_content, $block, $instance ) {
 	// Remove existing background if there is one.
 	$style = preg_replace( '/background-color:[^;]+;/', '', $style );
 	$style .= ';background-color:' . esc_attr( $color );
+	$style .= ';--wporg-site-screenshot--background-color:' . esc_attr( $color );
 	$html->set_attribute( 'style', $style );
 
 	return $html->get_updated_html();

diff --git a/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/style.scss b/source/wp-content/themes/wporg-showcase-2022/src/site-screenshot/style.scss
@@ -30,6 +30,8 @@
 
 	.has-feature-color-background & {
 		flex: 1;
+		// This value is set if the current page has a custom feature color. Otherwise, use the fallback.
+		background-color: var(--wporg-site-screenshot--background-color, #f6f6f6);
 
 		&:first-child {
 			flex: 4;
@@ -63,3 +65,16 @@
 		aspect-ratio: 375 / 600;
 	}
 }
+
+.wp-block-group.has-feature-color-background > .wp-block-group {
+	// Scale 20px at 800 wide to 80px at 1200 wide.
+	gap: clamp(20px, calc(15vw + -100px), 80px);
+
+	@media (max-width: 781px) {
+		gap: 0;
+
+		.is-size-mobile {
+			margin-left: -20%;
+		}
+	}
+}