diff --git a/includes/content-gate/trait-content-gate-layout.php b/includes/content-gate/trait-content-gate-layout.php index cf2cb23530..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. * @@ -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 = '
' . $gate_content; + $gate_content = '
' . $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 = '
' . $gate_content . '
'; + $gate_content = '
' . $gate_content . '
'; return $gate_content; } 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;