fix: tweak inline gate styles for block theme (#4445)

Author: laurelfulford

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.
 	 *
@@ -205,11 +215,17 @@ public static function get_inline_gate_content_for_post( $gate_layout_id ) {
 
 		// Apply inline fade.
 		if ( $visible_paragraphs > 0 && $inline_fade ) {
-			$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%);"></div>' . $gate_content;
+			$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">' . $gate_content . '</div>';
+		$gate_content = '<div class="' . esc_attr( implode( ' ', $gate_content_classes ) ) . '">' . $gate_content . '</div>';
 		return $gate_content;
 	}
 

src/content-gate/gate.scss

@@ -86,6 +86,9 @@
 		width: 100%;
 		overflow: clip;
 	}
+	&__inline-gate {
+		max-width: 100%;
+	}
 	&__inline-fade {
 		position: absolute;
 		bottom: 0;