init

wp-content/plugins/jetpack/modules/subscriptions/subscribe-modal/class-jetpack-subscribe-modal.php

@@ -0,0 +1,265 @@
+<?php
+/**
+ * Adds support for Jetpack Subscribe Modal feature
+ *
+ * @package automattic/jetpack-mu-wpcom
+ * @since 12.4
+ */
+
+use Automattic\Jetpack\Extensions\Premium_Content\Subscription_Service\Abstract_Token_Subscription_Service;
+use const Automattic\Jetpack\Extensions\Subscriptions\META_NAME_FOR_POST_LEVEL_ACCESS_SETTINGS;
+
+/**
+ * Jetpack_Subscribe_Modal class.
+ */
+class Jetpack_Subscribe_Modal {
+	/**
+	 * Jetpack_Subscribe_Modal singleton instance.
+	 *
+	 * @var Jetpack_Subscribe_Modal|null
+	 */
+	private static $instance;
+
+	/**
+	 * Jetpack_Subscribe_Modal instance init.
+	 */
+	public static function init() {
+		if ( self::$instance === null ) {
+			self::$instance = new Jetpack_Subscribe_Modal();
+		}
+
+		return self::$instance;
+	}
+
+	const BLOCK_TEMPLATE_PART_SLUG = 'jetpack-subscribe-modal';
+
+	/**
+	 * Returns the block template part ID.
+	 *
+	 * @return string
+	 */
+	public static function get_block_template_part_id() {
+		return get_stylesheet() . '//' . self::BLOCK_TEMPLATE_PART_SLUG;
+	}
+
+	/**
+	 * Jetpack_Subscribe_Modal class constructor.
+	 */
+	public function __construct() {
+		if ( get_option( 'sm_enabled', false ) ) {
+			add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_assets' ) );
+			add_action( 'wp_footer', array( $this, 'add_subscribe_modal_to_frontend' ) );
+		}
+		add_filter( 'get_block_template', array( $this, 'get_block_template_filter' ), 10, 3 );
+	}
+
+	/**
+	 * Enqueues JS to load modal.
+	 *
+	 * @return void
+	 */
+	public function enqueue_assets() {
+		if ( $this->should_user_see_modal() ) {
+			wp_enqueue_style( 'subscribe-modal-css', plugins_url( 'subscribe-modal.css', __FILE__ ), array(), JETPACK__VERSION );
+			wp_enqueue_script( 'subscribe-modal-js', plugins_url( 'subscribe-modal.js', __FILE__ ), array( 'wp-dom-ready' ), JETPACK__VERSION, true );
+
+			/**
+			 * Filter how many milliseconds until the Subscribe Modal appears.
+			 *
+			 * @module subscriptions
+			 *
+			 * @since 13.4
+			 *
+			 * @param int 60000 Time in milliseconds for the Subscribe Modal to appear.
+			 */
+			$load_time = absint( apply_filters( 'jetpack_subscribe_modal_load_time', 60000 ) );
+
+			/**
+			 * Filter how many percentage of the page should be scrolled before the Subscribe Modal appears.
+			 *
+			 * @module subscriptions
+			 *
+			 * @since 13.6
+			 *
+			 * @param int Percentage of the page scrolled before the Subscribe Modal appears.
+			 */
+			$scroll_threshold = absint( apply_filters( 'jetpack_subscribe_modal_scroll_threshold', 50 ) );
+
+			/**
+			 * Filter to control the interval at which the subscribe modal is shown to the same user.  The default interval is 24 hours.
+			 *
+			 * @since 13.7
+			 *
+			 * @param int 24 Hours before we show the same user the Subscribe Modal to again.
+			 */
+			$modal_interval = absint( apply_filters( 'jetpack_subscribe_modal_interval', 24 ) );
+
+			wp_localize_script(
+				'subscribe-modal-js',
+				'Jetpack_Subscriptions',
+				array(
+					'modalLoadTime'        => $load_time,
+					'modalScrollThreshold' => $scroll_threshold,
+					'modalInterval'        => ( $modal_interval * HOUR_IN_SECONDS * 1000 ),
+				)
+			);
+		}
+	}
+
+	/**
+	 * Adds modal with Subscribe Modal content.
+	 *
+	 * @return void
+	 */
+	public function add_subscribe_modal_to_frontend() {
+		if ( $this->should_user_see_modal() ) { ?>
+					<div class="jetpack-subscribe-modal">
+						<div class="jetpack-subscribe-modal__modal-content">
+							<?php block_template_part( self::BLOCK_TEMPLATE_PART_SLUG ); ?>
+						</div>
+					</div>
+			<?php
+		}
+	}
+
+	/**
+	 * Makes get_block_template return the WP_Block_Template for the Subscribe Modal.
+	 *
+	 * @param WP_Block_Template $block_template The block template to be returned.
+	 * @param string            $id Template unique identifier (example: theme_slug//template_slug).
+	 * @param string            $template_type Template type: `'wp_template'` or '`wp_template_part'`.
+	 *
+	 * @return WP_Block_Template
+	 */
+	public function get_block_template_filter( $block_template, $id, $template_type ) {
+		if ( empty( $block_template ) && $template_type === 'wp_template_part' ) {
+			if ( $id === self::get_block_template_part_id() ) {
+				return $this->get_template();
+			}
+		}
+
+		return $block_template;
+	}
+
+	/**
+	 * Returns a custom template for the Subscribe Modal.
+	 *
+	 * @return WP_Block_Template
+	 */
+	public function get_template() {
+		$template                 = new WP_Block_Template();
+		$template->theme          = get_stylesheet();
+		$template->slug           = self::BLOCK_TEMPLATE_PART_SLUG;
+		$template->id             = self::get_block_template_part_id();
+		$template->area           = 'uncategorized';
+		$template->content        = $this->get_subscribe_template_content();
+		$template->source         = 'plugin';
+		$template->type           = 'wp_template_part';
+		$template->title          = __( 'Jetpack Subscribe modal', 'jetpack' );
+		$template->status         = 'publish';
+		$template->has_theme_file = false;
+		$template->is_custom      = true;
+		$template->description    = __( 'A subscribe form that pops up when someone visits your site.', 'jetpack' );
+
+		return $template;
+	}
+
+	/**
+	 * Returns the initial content of the Subscribe Modal template.
+	 * This can then be edited by the user.
+	 *
+	 * @return string
+	 */
+	public function get_subscribe_template_content() {
+		// translators: %s is the name of the site.
+		$discover_more_from = sprintf( __( 'Discover more from %s', 'jetpack' ), get_bloginfo( 'name' ) );
+		$continue_reading   = __( 'Continue reading', 'jetpack' );
+		$subscribe_text     = __( 'Subscribe now to keep reading and get access to the full archive.', 'jetpack' );
+		$group_block_name   = esc_attr__( 'Subscription pop-up container', 'jetpack' );
+
+		return <<<HTML
+	<!-- wp:group {"metadata":{"name":"$group_block_name"},"style":{"spacing":{"padding":{"top":"32px","bottom":"32px","left":"32px","right":"32px"},"margin":{"top":"0","bottom":"0"}},"border":{"color":"#dddddd","width":"1px"}},"layout":{"type":"constrained","contentSize":"450px"}} -->
+	<div class="wp-block-group has-border-color" style="border-color:#dddddd;border-width:1px;margin-top:0;margin-bottom:0;padding-top:32px;padding-right:32px;padding-bottom:32px;padding-left:32px">
+
+	<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontStyle":"normal","fontWeight":"600","fontSize":"26px"},"layout":{"selfStretch":"fit","flexSize":null},"spacing":{"margin":{"top":"4px","bottom":"10px"}}}} -->
+		<h2 class="wp-block-heading has-text-align-center" style="margin-top:4px;margin-bottom:10px;font-size:26px;font-style:normal;font-weight:600">$discover_more_from</h2>
+		<!-- /wp:heading -->
+
+		<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"15px"},"spacing":{"margin":{"top":"4px","bottom":"0px"}}}} -->
+		<p class='has-text-align-center' style='margin-top:4px;margin-bottom:1em;font-size:15px'>$subscribe_text</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:jetpack/subscriptions {"borderRadius":50,"className":"is-style-compact","appSource":"subscribe-modal"} /-->
+
+		<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"top":"20px"}},"typography":{"fontSize":"14px"}},"className":"jetpack-subscribe-modal__close"} -->
+		<p class="has-text-align-center jetpack-subscribe-modal__close" style="margin-top:20px;margin-bottom:0;font-size:14px"><a href="#">$continue_reading</a></p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:group -->
+HTML;
+	}
+
+	/**
+	 * Returns true if a site visitor should see
+	 * the Subscribe Modal.
+	 *
+	 * @return bool
+	 */
+	public function should_user_see_modal() {
+		// Only show when viewing frontend single post.
+		if ( is_admin() || ! is_singular( 'post' ) ) {
+			return false;
+		}
+
+		// Needed because Elementor editor makes is_admin() return false
+		// See https://coreysalzano.com/wordpress/why-elementor-disobeys-is_admin/
+		// Ignore nonce warning as just checking if is set
+		// phpcs:ignore WordPress.Security.NonceVerification.Recommended
+		if ( isset( $_GET['elementor-preview'] ) ) {
+			return false;
+		}
+
+		// Don't show when previewing blog posts or site's theme
+		// phpcs:ignore WordPress.Security.NonceVerification.Recommended
+		if ( isset( $_GET['preview'] ) || isset( $_GET['theme_preview'] ) || isset( $_GET['customize_preview'] ) || isset( $_GET['hide_banners'] ) ) {
+			return false;
+		}
+
+		// Don't show if one of subscribe query params is set.
+		// They are set when user submits the subscribe form.
+		// The nonce is checked elsewhere before redirect back to this page with query params.
+		// phpcs:ignore WordPress.Security.NonceVerification.Recommended
+		if ( isset( $_GET['subscribe'] ) || isset( $_GET['blogsub'] ) ) {
+			return false;
+		}
+
+		// Don't show if post is for subscribers only or has paywall block
+		global $post;
+		if ( defined( 'Automattic\\Jetpack\\Extensions\\Subscriptions\\META_NAME_FOR_POST_LEVEL_ACCESS_SETTINGS' ) ) {
+			$access_level = get_post_meta( $post->ID, META_NAME_FOR_POST_LEVEL_ACCESS_SETTINGS, true );
+		} else {
+			$access_level = get_post_meta( $post->ID, '_jetpack_newsletter_access', true );
+		}
+		require_once JETPACK__PLUGIN_DIR . 'extensions/blocks/premium-content/_inc/subscription-service/include.php';
+		$is_accessible_by_everyone = Abstract_Token_Subscription_Service::POST_ACCESS_LEVEL_EVERYBODY === $access_level || empty( $access_level );
+		if ( ! $is_accessible_by_everyone ) {
+			return false;
+		}
+
+		// Don't show if user is subscribed to blog.
+		require_once __DIR__ . '/../views.php';
+		if ( ! class_exists( 'Jetpack_Memberships' ) || Jetpack_Memberships::is_current_user_subscribed() ) {
+			return false;
+		}
+		return true;
+	}
+}
+
+Jetpack_Subscribe_Modal::init();
+
+add_action(
+	'rest_api_switched_to_blog',
+	function () {
+		Jetpack_Subscribe_Modal::init();
+	}
+);

wp-content/plugins/jetpack/modules/subscriptions/subscribe-modal/subscribe-modal.css

@@ -0,0 +1,57 @@
+body.jetpack-subscribe-modal-open {
+	overflow: hidden;
+}
+
+.jetpack-subscribe-modal {
+	visibility: hidden;
+	position: fixed;
+	z-index: 50000; /* Same as WP.com Action bar */
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	background-color: transparent;
+	transition: all 0.4s;
+}
+
+.jetpack-subscribe-modal.open {
+	background-color: rgba(0,0,0,0.3);
+	visibility: visible;
+}
+
+.jetpack-subscribe-modal__modal-content {
+	position: relative;
+	visibility: hidden;
+	overflow: hidden;
+	top: 100%;
+	background-color: #fefefe;
+	margin: 15% auto;
+	width: 100%;
+	max-width: 600px;
+	border-radius: 10px;
+	box-sizing: border-box;
+	transition: all 0.4s;
+	text-wrap: balance;
+}
+
+.jetpack-subscribe-modal.open .jetpack-subscribe-modal__modal-content {
+	top: 0;
+	visibility: visible;
+}
+
+/*
+ * These text-wrap properties still have limited browser
+ * support, but based on feedback still adding them for when
+ * they are supported.
+ */
+.jetpack-subscribe-modal__modal-content p {
+	text-wrap: balance;
+	text-wrap: pretty;
+}
+
+@media screen and (max-width: 640px) {
+	.jetpack-subscribe-modal__modal-content {
+		width: 94%;
+	}
+}

wp-content/plugins/jetpack/modules/subscriptions/subscribe-modal/subscribe-modal.js

@@ -0,0 +1,123 @@
+/* global Jetpack_Subscriptions */
+const { domReady } = wp;
+domReady( () => {
+	const modal = document.querySelector( '.jetpack-subscribe-modal' );
+	const modalDismissedCookie = 'jetpack_post_subscribe_modal_dismissed';
+	const skipUrlParam = 'jetpack_skip_subscription_popup';
+
+	function hasEnoughTimePassed() {
+		const lastDismissed = localStorage.getItem( modalDismissedCookie );
+		return lastDismissed ? Date.now() - lastDismissed > Jetpack_Subscriptions.modalInterval : true;
+	}
+
+	// Subscriber ended up here e.g. from emails:
+	// we won't show the modal to them in future since they most likely are already a subscriber.
+	function skipModal() {
+		const url = new URL( window.location.href );
+		if ( url.searchParams.has( skipUrlParam ) ) {
+			url.searchParams.delete( skipUrlParam );
+			window.history.replaceState( {}, '', url );
+			storeCloseTimestamp();
+			return true;
+		}
+
+		return false;
+	}
+
+	if ( ! modal || ! hasEnoughTimePassed() || skipModal() ) {
+		return;
+	}
+
+	const modalLoadTimeout = setTimeout( openModal, Jetpack_Subscriptions.modalLoadTime );
+
+	const targetElement = (
+		document.querySelector( '.entry-content' ) || document.documentElement
+	).getBoundingClientRect();
+
+	function hasPassedScrollThreshold() {
+		const scrollPosition = window.scrollY + window.innerHeight / 2;
+		const scrollPositionThreshold =
+			targetElement.top +
+			( targetElement.height * Jetpack_Subscriptions.modalScrollThreshold ) / 100;
+		return scrollPosition > scrollPositionThreshold;
+	}
+
+	function onScroll() {
+		requestAnimationFrame( () => {
+			if ( hasPassedScrollThreshold() ) {
+				openModal();
+			}
+		} );
+	}
+
+	window.addEventListener( 'scroll', onScroll, { passive: true } );
+
+	// This take care of the case where the user has multiple tabs open.
+	function onLocalStorage( event ) {
+		if ( event.key === modalDismissedCookie ) {
+			closeModal();
+			removeEventListeners();
+		}
+	}
+	window.addEventListener( 'storage', onLocalStorage );
+
+	// When the form is submitted, and next modal loads, it'll fire "subscription-modal-loaded" signalling that this form can be hidden.
+	const form = modal.querySelector( 'form' );
+	if ( form ) {
+		form.addEventListener( 'subscription-modal-loaded', closeModal );
+	}
+
+	// User can edit modal, and could remove close link.
+	function onCloseButtonClick( event ) {
+		event.preventDefault();
+		closeModal();
+	}
+	const close = document.getElementsByClassName( 'jetpack-subscribe-modal__close' )[ 0 ];
+	if ( close ) {
+		close.addEventListener( 'click', onCloseButtonClick );
+	}
+
+	function closeOnWindowClick( event ) {
+		if ( event.target === modal ) {
+			closeModal();
+		}
+	}
+
+	function closeModalOnEscapeKeydown( event ) {
+		if ( event.key === 'Escape' ) {
+			closeModal();
+		}
+	}
+
+	function openModal() {
+		// If the user is typing in a form, don't open the modal or has anything else focused.
+		if ( document.activeElement && document.activeElement.tagName !== 'BODY' ) {
+			return;
+		}
+
+		modal.classList.add( 'open' );
+		document.body.classList.add( 'jetpack-subscribe-modal-open' );
+		window.addEventListener( 'keydown', closeModalOnEscapeKeydown );
+		window.addEventListener( 'click', closeOnWindowClick );
+		removeEventListeners();
+	}
+
+	function closeModal() {
+		modal.classList.remove( 'open' );
+		document.body.classList.remove( 'jetpack-subscribe-modal-open' );
+		window.removeEventListener( 'keydown', closeModalOnEscapeKeydown );
+		window.removeEventListener( 'storage', onLocalStorage );
+		window.removeEventListener( 'click', closeOnWindowClick );
+		storeCloseTimestamp();
+	}
+
+	// Remove all event listeners. That would add the modal again.
+	function removeEventListeners() {
+		window.removeEventListener( 'scroll', onScroll );
+		clearTimeout( modalLoadTimeout );
+	}
+
+	function storeCloseTimestamp() {
+		localStorage.setItem( modalDismissedCookie, Date.now() );
+	}
+} );