fix: improve donate block appearance for WP 5.8 (#1398)

Automattic · Jul 5, 2021 · 51fc4f7 · 51fc4f7
1 parent 878b6a1
commit 51fc4f7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 2 deletions.
diff --git a/newspack-theme/inc/color-patterns.php b/newspack-theme/inc/color-patterns.php
@@ -55,7 +55,7 @@ function newspack_custom_colors_css() {
 			*[class^="wp-block-"].is-style-solid-color.has-primary-background-color,
 			.is-style-outline .wp-block-button__link.has-primary-background-color:not( :hover ),
 			.wp-block-file .wp-block-file__button,
-			.site-content .wp-block-newspack-blocks-donate.tiered .wp-block-newspack-blocks-donate__tiers input[type="radio"]:checked + .tier-select-label,
+			div.wpbnbd.tiered .wp-block-newspack-blocks-donate__tiers input[type="radio"]:checked + .tier-select-label,
 			.comment .comment-author .post-author-badge,
 			.woocommerce .onsale,
 			.woocommerce-store-notice {
@@ -105,7 +105,7 @@ function newspack_custom_colors_css() {
 			/* Header default background; default height */
 			body.h-db.h-dh .site-header .nav3 .menu-highlight a,
 			.comment .comment-author .post-author-badge,
-			.site-content .wp-block-newspack-blocks-donate.tiered .wp-block-newspack-blocks-donate__tiers input[type="radio"]:checked + .tier-select-label,
+			div.wpbnbd.tiered .wp-block-newspack-blocks-donate__tiers input[type="radio"]:checked + .tier-select-label,
 			.woocommerce .onsale,
 			.woocommerce-store-notice {
 				color: ' . esc_html( $primary_color_contrast ) . ';

diff --git a/newspack-theme/sass/blocks/_blocks.scss b/newspack-theme/sass/blocks/_blocks.scss
@@ -232,6 +232,27 @@ p.has-background {
 	}
 }
 
+//! Newspack Donate Block
+#secondary,
+.desktop-sidebar,
+.mobile-sidebar {
+	.wpbnbd.tiered .tiers {
+		margin-left: #{0.62 * $size__spacing-unit};
+		margin-right: #{0.62 * $size__spacing-unit};
+	}
+	.wpbnbd .thanks,
+	.wpbnbd button {
+		margin-left: $size__spacing-unit;
+		margin-right: $size__spacing-unit;
+	}
+}
+
+.site-info .widget .wpbnbd {
+	.thanks {
+		margin: 0.5rem 1.5rem;
+	}
+}
+
 //! Columns
 .wp-block-columns {
 	.wp-block-cover,