From dcf038189fa81f021ebc5fdc6f0f46b70bdace94 Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Mon, 2 Feb 2026 12:37:45 -0800
Subject: [PATCH 1/2] fix: tweak inline gate styles for block theme

---
 includes/content-gate/trait-content-gate-layout.php | 4 ++--
 src/content-gate/gate.scss                          | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/includes/content-gate/trait-content-gate-layout.php b/includes/content-gate/trait-content-gate-layout.php
index 40a4c6c25e..c9f5bb2d28 100644
--- a/includes/content-gate/trait-content-gate-layout.php
+++ b/includes/content-gate/trait-content-gate-layout.php
@@ -169,11 +169,11 @@ public static function get_inline_gate_content_for_post( $gate_post_id ) {
 		// Apply inline fade.
 		$visible_paragraphs = self::get_visible_paragraphs( $gate_post_id );
 		if ( $visible_paragraphs > 0 && \get_post_meta( $gate_post_id, 'inline_fade', true ) ) {
-			$gate = '<div style="pointer-events: none; height: 10em; margin-top: -10em; width: 100%; position: absolute; background: linear-gradient(180deg, rgba(255,255,255,0) 14%, rgba(255,255,255,1) 76%);"></div>' . $gate;
+			$gate = '<div style="pointer-events: none; height: 10em; margin-top: -10em; width: 100%; position: absolute; background: linear-gradient(180deg, rgba(255,255,255,0) 14%, rgba(255,255,255,1) 76%); max-width: 100%;"></div>' . $gate;
 		}
 
 		// Wrap gate in a div for styling.
-		$gate = '<div class="newspack-content-gate__gate newspack-content-gate__inline-gate">' . $gate . '</div>';
+		$gate = '<div class="newspack-content-gate__gate newspack-content-gate__inline-gate is-layout-constrained">' . $gate . '</div>';
 		return $gate;
 	}
 
diff --git a/src/content-gate/gate.scss b/src/content-gate/gate.scss
index eb459af1b5..d1811a450f 100644
--- a/src/content-gate/gate.scss
+++ b/src/content-gate/gate.scss
@@ -86,6 +86,9 @@
 		width: 100%;
 		overflow: clip;
 	}
+	&__inline-gate {
+		max-width: 100%;
+	}
 	&__inline-fade {
 		position: absolute;
 		bottom: 0;

From f822223ba05ef4740181843e9d23d43b535775d3 Mon Sep 17 00:00:00 2001
From: Laurel Fulford <laurel.fulford@automattic.com>
Date: Wed, 4 Feb 2026 10:47:09 -0800
Subject: [PATCH 2/2] fix: only apply is-layout-intrinsic CSS class to block
 themes

---
 .../content-gate/trait-content-gate-layout.php | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/includes/content-gate/trait-content-gate-layout.php b/includes/content-gate/trait-content-gate-layout.php
index 7eec38a3b2..12334cbe8e 100644
--- a/includes/content-gate/trait-content-gate-layout.php
+++ b/includes/content-gate/trait-content-gate-layout.php
@@ -149,6 +149,16 @@ protected static function enqueue_block_editor_layout_assets( $post_type ) {
 		wp_enqueue_style( 'newspack-content-gate', Newspack::plugin_url() . '/dist/content-gate-editor.css', [], $asset['version'] );
 	}
 
+	/**
+	 * Check if the current theme is a block theme.
+	 *
+	 * @return boolean True if the current theme is a block theme.
+	 */
+	private static function is_block_theme() {
+		return function_exists( 'wp_is_block_theme' ) && wp_is_block_theme();
+	}
+
+
 	/**
 	 * Get the number of visible paragraphs for the gate.
 	 *
@@ -208,8 +218,14 @@ public static function get_inline_gate_content_for_post( $gate_layout_id ) {
 			$gate_content = '<div style="pointer-events: none; height: 10em; margin-top: -10em; width: 100%; position: absolute; background: linear-gradient(180deg, rgba(255,255,255,0) 14%, rgba(255,255,255,1) 76%); max-width: 100%;"></div>' . $gate_content;
 		}
 
+		$gate_content_classes = [ 'newspack-content-gate__gate', 'newspack-content-gate__inline-gate' ];
+		// Add a class if the current theme is a block theme.
+		if ( self::is_block_theme() ) {
+			$gate_content_classes[] = 'is-layout-constrained';
+		}
+
 		// Wrap gate in a div for styling.
-		$gate_content = '<div class="newspack-content-gate__gate newspack-content-gate__inline-gate is-layout-constrained">' . $gate_content . '</div>';
+		$gate_content = '<div class="' . esc_attr( implode( ' ', $gate_content_classes ) ) . '">' . $gate_content . '</div>';
 		return $gate_content;
 	}