Fix premium content button CSS in editor and display (#40638)

* Fix Premium Content button CSS * changelog * Use CSS variables * Use CSS variables * Import base styles --------- Co-authored-by: MILLER/F <[email protected]>
Automattic · Dec 17, 2024 · be37dc6 · be37dc6
1 parent 3815cf5
commit be37dc6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 0 deletions.
diff --git a/projects/plugins/jetpack/changelog/fix-premium-content-button-css b/projects/plugins/jetpack/changelog/fix-premium-content-button-css
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Fixes editor and display CSS for Premium Content buttons.
diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss b/projects/plugins/jetpack/extensions/blocks/premium-content/editor.scss
@@ -61,6 +61,20 @@
 	margin: 0;
 }
 
+%button-outline-style {
+	background-color: unset;
+	color: $gray-800;
+}
+
+.wp-block-premium-content-login-button,
+.wp-block-jetpack-button {
+	&.is-style-outline {
+		.wp-block-button__link {
+			@extend %button-outline-style;
+		}
+	}
+}
+
 /* Hide Stripe nudge from Jetpack payments block */
 /* https://github.com/Automattic/wp-calypso/issues/44332 */
 .wp-block-premium-content-container .premium-content-wrapper .jetpack-block-nudge {

diff --git a/projects/plugins/jetpack/extensions/blocks/premium-content/view.scss b/projects/plugins/jetpack/extensions/blocks/premium-content/view.scss
@@ -1,3 +1,5 @@
+@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+
 /**
  * The following styles get applied both on the front of your site
  * and in the editor.
@@ -26,6 +28,20 @@
 	float: right;
 }
 
+%button-outline-style {
+	background-color: unset;
+	color: $gray-800;
+}
+
+.wp-block-premium-content-login-button,
+.wp-block-jetpack-button {
+	&.is-style-outline {
+		.wp-block-button__link {
+			@extend %button-outline-style;
+		}
+	}
+}
+
 /* Legacy Subscribe/Login buttons */
 
 .wp-block-premium-content-logged-out-view__buttons {