From 3a7ca52b5ff129e34f1edb909a40b198e9e95c39 Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Tue, 19 Sep 2023 12:19:15 -0400 Subject: [PATCH] Site screenshot: Add a background color, and overlap the desktop/mobile screenshots on page headers Fixes #153 --- .../src/site-screenshot/index.php | 1 + .../src/site-screenshot/style.scss | 15 +++++++++++++++ 2 files changed, 16 insertions(+) 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 index 78c7ad52..8e926924 100644 --- 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 index 0c230933..b27c846c 100644 --- 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%; + } + } +}