Paywall Block: Use theme font color. (#38837)

Automattic · Aug 12, 2024 · 310bff2 · 310bff2
1 parent 53dc65e
commit 310bff2
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 31 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-paywall-block-styles-3 b/projects/plugins/jetpack/changelog/update-paywall-block-styles-3
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Paywall Block: improve styles
diff --git a/projects/plugins/jetpack/extensions/blocks/paywall/edit.js b/projects/plugins/jetpack/extensions/blocks/paywall/edit.js
@@ -12,7 +12,7 @@ import { accessOptions } from '../../shared/memberships/constants';
 import { useAccessLevel } from '../../shared/memberships/edit';
 import { NewsletterAccessRadioButtons, useSetAccess } from '../../shared/memberships/settings';
 
-function PaywallEdit( { className } ) {
+function PaywallEdit() {
 	const blockProps = useBlockProps();
 	const postType = useSelect( select => select( editorStore ).getCurrentPostType(), [] );
 	const accessLevel = useAccessLevel( postType );
@@ -65,20 +65,15 @@ function PaywallEdit( { className } ) {
 
 	const text = getText( accessLevel );
 
-	const style = {
-		width: `${ text.length + 1.2 }em`,
-		userSelect: 'none',
-	};
-
 	let _accessLevel = accessLevel ?? accessOptions.subscribers.key;
 	if ( _accessLevel === accessOptions.everybody.key ) {
 		_accessLevel = accessOptions.subscribers.key;
 	}
 
 	return (
 		<div { ...blockProps }>
-			<div className={ className }>
-				<span style={ style }>
+			<div className="wp-block-jetpack-paywall-block">
+				<span>
 					{ text }
 					<Icon icon={ arrowDown } size={ 16 } />
 				</span>

diff --git a/projects/plugins/jetpack/extensions/blocks/paywall/editor.scss b/projects/plugins/jetpack/extensions/blocks/paywall/editor.scss
@@ -3,47 +3,40 @@
  */
 @import '@automattic/jetpack-base-styles/gutenberg-base-styles';
 
-.wp-block-jetpack-paywall {
-	display: block;
-	text-align: center;
-	white-space: nowrap;
+.wp-block-jetpack-paywall-block {
+	display: flex;
+	align-items: center;
+	color: currentColor;
+	opacity: 0.8;
 
 	// Label
 	span {
-		position: relative;
 		font-size: $default-font-size;
 		text-transform: uppercase;
 		font-family: $default-font;
-		color: $gray-700;
-		border: none;
-		box-shadow: none;
+		padding: 0 8px;
 		white-space: nowrap;
 		text-align: center;
-		margin: 0;
-		border-radius: 4px;
-		background: $white;
-		padding-left: 8px;
-		padding-right: 4px;
-		height: $button-size-small;
-		max-width: 100%;
+		user-select: 'none';
+
 		svg {
 			vertical-align: text-top;
 			fill: currentColor;
 		}
 	}
 
-	// Line
-	&::before {
+	// Lines
+	&::before,
+	&::after {
 		content: "";
-		position: absolute;
-		top: calc(50% + 1px);
-		left: 0;
-		right: 0;
+		flex: 1;
+		margin: auto;
 		height: 1px;
-		background-color: $gray-700;
+		background: currentColor;
+		opacity: 0.5;
 	}
 }
 
 .block-editor-block-inspector .jetpack-subscribe-newsletters-panel .components-base-control {
 	margin-bottom: 0px;
-}
+}