Subscriptions: Add Welcome Overlay behind the feature flag #37372

pkuliga · 2024-05-14T10:13:32Z

Proposed changes:

This is the first iteration of the Welcome Overlay feature (p1HpG7-so7-p2).

It:

opens the Welcome Overlay when a user opens the site home page or front page
closes the overlay as soon as the subscription flow starts
sets the cookie to prevent the overlay from opening on every page view (expires in 7 days)
makes the overlay template editable

The feature is behind the feature flag and if you want to enable it you need to go into your sandbox mu-plugins, and add the following line to your 0-sandbox.php file:

add_filter( 'jetpack_subscribe_overlay_enabled', '__return_true' );

Known issues

There is no way of changing the overlay background color. I'll try to fix in in a follow-up PR.

Other information:

Have you written new tests for your changes, if applicable?
Have you checked the E2E test CI results, and verified that your changes do not break them?
Have you tested your changes on WordPress.com, if applicable (if so, you'll see a generated comment below with a script to run)?

Jetpack product discussion

Does this pull request change what data or activity we track or use?

Testing instructions:

Test it without the feature flag set and make sure the overlay does not open and there is no suspicious warnings/notices in logs.
Enable the feature flag, visit the site home or front page making sure the overlay works as expected.
Go to /wp-admin/site-editor.php?postType=wp_template_part&postId=visualblocks%2F%2Fjetpack-subscribe-overlay&canvas=edit, edit the overlay content and make sure the changes are visible on the frontend (you'll need to delete the jetpack_post_subscribe_overlay_dismissed cookie to render the overlay again)

…verlay

github-actions · 2024-05-14T10:14:18Z

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

To test on WoA, go to the Plugins menu on a WordPress.com Simple site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin, and enable the update/subscribe-welcome-overlay branch.

To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/subscribe-welcome-overlay

Interested in more tips and information?

In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
Read more about our development workflow here: PCYsg-eg0-p2
Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

github-actions · 2024-05-14T10:14:39Z

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

✅ Include a description of your PR changes.
✅ Add a "[Status]" label (In Progress, Needs Team Review, ...).
✅ Add testing instructions.
✅ Specify whether this PR includes any changes to data or privacy.
✅ Add changelog entries to affected projects

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

The e2e test report can be found here. Please note that it can take a few minutes after the e2e tests checks are complete for the report to be available.

Once your PR is ready for review, check one last time that all required checks appearing at the bottom of this PR are passing or skipped.
Then, add the "[Status] Needs Team Review" label and ask someone from your team review the code. Once reviewed, it can then be merged.
If you need an extra review from someone familiar with the codebase, you can update the labels from "[Status] Needs Team Review" to "[Status] Needs Review", and in that case Jetpack Approvers will do a final review of your PR.

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen daily.
WoA releases happen weekly.
Releases to self-hosted sites happen monthly. The next release is scheduled for June 4, 2024 (scheduled code freeze on June 3, 2024).

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

.../plugins/jetpack/modules/subscriptions/subscribe-overlay/class-jetpack-subscribe-overlay.php

projects/plugins/jetpack/modules/subscriptions/subscribe-overlay/subscribe-overlay.css

.../plugins/jetpack/modules/subscriptions/subscribe-overlay/class-jetpack-subscribe-overlay.php

simison · 2024-05-14T11:47:50Z

.../plugins/jetpack/modules/subscriptions/subscribe-overlay/class-jetpack-subscribe-overlay.php

+	public function enqueue_assets() {
+		if ( $this->should_user_see_overlay() ) {
+			wp_enqueue_style( 'subscribe-overlay-css', plugins_url( 'subscribe-overlay.css', __FILE__ ), array(), JETPACK__VERSION );
+			wp_enqueue_script( 'subscribe-overlay-js', plugins_url( 'subscribe-overlay.js', __FILE__ ), array( 'wp-dom-ready' ), JETPACK__VERSION, true );


Wondering if we should add the subscriptions module to webpack, build the frontend JS as well and include the JS from jetpack/projects/plugins/jetpack/_inc/build?

Would help with minification and also allow importing from @wordpress/dom-ready directly, and build pipeline "externalizes" WP scripts instead of including them in bundles.

No strong opinion and current way is fine too.

Seems like an idea for a separate PR.

Yep sounds good 👍

.../plugins/jetpack/modules/subscriptions/subscribe-overlay/class-jetpack-subscribe-overlay.php

simison · 2024-05-14T11:56:43Z

.../plugins/jetpack/modules/subscriptions/subscribe-overlay/class-jetpack-subscribe-overlay.php

+		$template->status         = 'publish';
+		$template->has_theme_file = false;
+		$template->is_custom      = true;
+		$template->description    = __( 'An overlay that shows up when someone visits your site', 'jetpack' );


Is the copy consistent with the toggle setting label from designs?

Good question. The toggle label is:

Which IMO is missing the verb, like "Enable" or sth. Now it's a bit mysterious to me, @crisbusquets WDYT?

Although I see why it can be helpful, I wouldn't use Enable because then all the toggles will begin the same way, and it'll be repetitive.

Almost none of the Jetpack Settings toggles include a verb, even though all of them are enabling something.

Sure, what about the template description? It's visible when a user is editing it.

The description needs . at the end.

Added, the subscribe modal and modal for comments don't have the dot as well. Could add it there as well but it would break translations.

Translations would continue work — translation team applies "fuzzy" label to strings that change only 1-2 characters, and old translation would continue being used. You can always confirm with them it's the case with this specific string too.

Ah, didn't know that, thanks!

enejb · 2024-05-14T21:50:12Z

.../plugins/jetpack/modules/subscriptions/subscribe-overlay/class-jetpack-subscribe-overlay.php

+
+Jetpack_Subscribe_Overlay::init();
+
+add_action(


Can you explain why we need this action?

Good question! I would also like to know 😄

This is also copy&paste from the Subscribe Modal:

jetpack/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/class-jetpack-subscribe-modal.php

Lines 231 to 236 in 9393263

add_action(

'rest_api_switched_to_blog',

function () {

Jetpack_Subscribe_Modal::init();

}

);

@lezama do you remember why we need it for the modal? According to the git blame, you added it there.

Just noticed the Jetpack_Subscription_Modal_On_Comment has it as well.

jetpack/projects/plugins/jetpack/modules/comments/subscription-modal-on-comment/class-jetpack-subscription-modal-on-comment.php

Lines 195 to 200 in f4c3844

add_action(

'rest_api_switched_to_blog',

function () {

Jetpack_Subscription_Modal_On_Comment::init();

}

);

@lezama do you remember why we need it for the modal? According to the git blame, you added it there.

My guess is that it was there while we had the feature flag: https://github.com/Automattic/jetpack/blame/77189e0a87b3418f2d4d791c1ab83ac7b3f1d4f5/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/class-jetpack-subscribe-modal.php

but if we are always calling Jetpack_Subscribe_Overlay::init(); it is probably not needed 🤔

projects/plugins/jetpack/modules/subscriptions/subscribe-overlay/subscribe-overlay.js

enejb · 2024-05-14T21:58:49Z

projects/plugins/jetpack/modules/subscriptions/subscribe-overlay/subscribe-overlay.js

+	}
+
+	function setOverlayDismissedCookie() {
+		// Expires in 7 days


…verlay

lezama · 2024-05-16T16:45:49Z

.../plugins/jetpack/modules/subscriptions/subscribe-overlay/class-jetpack-subscribe-overlay.php

+			add_action( 'wp_footer', array( $this, 'add_subscribe_overlay_to_frontend' ) );
+		}
+
+		add_filter( 'get_block_template', array( $this, 'get_block_template_filter' ), 10, 3 );


shouldn't this be under the feature flag too?

I think it's safe to leave it as it is. It allows the user to edit an overlay template if he has a link but there is no link to it anywhere.

simison

Code looks good, we can continue iterate and improve behind feature flag.

simison · 2024-05-16T17:59:59Z

Looks like there are some build failures for files, so needs looking into.

[plugins/jetpack 37.070] [build-production-client] [css] /home/runner/work/jetpack/jetpack/projects/plugins/jetpack/home/runner/work/jetpack/jetpack/projects/plugins/jetpack/modules/subscriptions/subscribe-modal/subscribe-overlay.css doesn't exist

pkuliga · 2024-05-16T19:18:00Z

Looks like there are some build failures for files, so needs looking into.

Fixed!

pkuliga added 11 commits May 8, 2024 10:03

initial code

697bc24

update template

fc7a893

some styling

34f1e4c

Merge remote-tracking branch 'origin' into update/subscribe-welcome-o…

6a700aa

…verlay

connect with sub flow

8e9d21a

changelog

bdd23ef

add dismissed cookie

9d82c3d

some theming

146b7d3

show only when enabled

8fae71a

show it behind the ff

05c7687

default colors + indentation fix

c813b43

github-actions bot added [Feature] Subscriptions All subscription-related things such as paid and unpaid, user management, and newsletter settings. [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Status] In Progress labels May 14, 2024

pkuliga mentioned this pull request May 14, 2024

Newsletter: Welcome overlay #36208

Closed

13 tasks

fix docblock

6c237c5