Jetpack Dashboard: update sharing settings to account for upcoming sharing block by jeherve · Pull Request #34619 · Automattic/jetpack

jeherve · 2023-12-13T15:04:48Z

Proposed changes:

In this PR, we update the Sharing settings under Jetpack > Settings > Sharing, to account for the upcoming Sharing block. Those settings now have to support both the legacy sharing module and the block. Both do not need to be active at the same time.

If you use a classic theme, the Sharing block itself will not be that useful. Yes, you can add it to some of your posts at random, but nothing more.
If you use a block-based theme, the legacy Sharing module will not be that useful to you. Instead, you'll want to insert the Sharing block into one of your theme templates so the button can appear on multiple pages of your site.

Warning
The Sharing Block is not yet widely available ; it is still in Beta. We still want to be able to test the different flows that will allow site owners to set up the button on their site.
To make that possible, this PR checks whether the sharing block is available before to make any changes to the Settings UI.

Screenshots

You can have different sharing settings statuses:

Status quo on a site that's connected to WordPress.com

If you use Jetpack on a production site where you do not have access to the Beta blocks, and thus the sharing block isn't available to you.
Or if your site uses a classic theme such as Twenty Ten.

-> When the module isn't active yet

-> When the module is active

Status quo on a site that's in Offline mode

When you use a classic theme on your site,
And your site is not connected to WordPress.com,
And the sharing block isn't available.

Note
You can enable Offline mode on your site by adding the following to a functionality plugin on your site:
`add_filter( 'jetpack_offline_mode', '__return_true' );``

In this case, the UI will look very similar to the first use-cases above, but when the module is active, the sharing settings link will lead to Settings > Sharing in wp-admin instead of the Sharing Buttons screen in Calypso. As a result, you also won't see an external link icon next to the configuration link.

New interface on a site using a block-based theme and the sharing block

When you use the Beta blocks from Jetpack
When your site uses a block-based theme like Twenty Twenty Four

Note
You can enable Beta blocks on your site with the following code snippet:
add_filter( 'jetpack_blocks_variation', function () {
    return 'beta';
}

When the legacy module is active

Here, we want to suggest turning the module off. It is not necessary on the site.

@keoshi I would appreciate your input on design and wording on this one, since that's not a use-case we had discussed in #34325 (comment)

When the legacy module is not active

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

Epic: Sharing: create a "Sharing Buttons" block #19694

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

Yes, it adds tracking on the link used to disable the sharing module. You can check that tracking like so:

In your browser's js console, add the following:

localStorage.setItem( 'debug', 'dops:analytics*' );

Refresh the page.
Click on the link and you should see the following in your console:

Testing instructions:

This will require switching themes, and switching between beta blocks and production blocks, as noted above. It's worth noting that on WordPress.com Simple, if you are proxied you're getting Beta blocks by default. Try unproxying to get production blocks.

Test on a site in Offline mode.
Test on a site using a classic theme like Twenty Ten.
Test on a site using a block-based theme like Twenty Twenty Four.
Test on a site using Beta blocks.
Test on a site using Production blocks.

This will allow us to conditionally display different links whether the upcoming sharing block is available or not. Down the road, we can remove those settings when the sharing block will be available for everyone.

Fixes #34325 See the designs in #34325 (comment) for more explanation.

github-actions · 2023-12-13T15:05:56Z

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/react-sharing-settings-sharing-block branch.

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

bin/jetpack-downloader test jetpack update/react-sharing-settings-sharing-block

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 · 2023-12-13T15:06:08Z

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 January 9, 2024 (scheduled code freeze on January 8, 2024).

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

jeherve · 2023-12-13T15:32:55Z

@andrii-lysenko Let me know what you think about this approach. I think if we're happy with this, we can follow a similar general logic for the other settings page.

andrii-lysenko · 2023-12-13T16:50:50Z

@jeherve Thanks for working on this and for an extensive explanation. I can clearly see the logic.
Some notes though:

We would want to create a support page explaining the switch and how to use block. Adding a link to it to all places where we change the logic.
Maybe we would also want to have some ENV variable, where users can just stick to old version (because they just don't like the change or because of some limitation).
Or, we could maybe add in current design button like No, stick to old logic or something, though, not sure if it won't add confussion.
What do you think? These are non blocking questions though.

keoshi · 2023-12-13T18:39:55Z

When the legacy module is active
Here, we want to suggest turning the module off. It is not necessary on the site.

Does it impact the site if the legacy module is still active? Can we disable the feature ourselves without intervention from the user?

The copy looks good, but I wonder if we're making it more complicated for users than it should be.

andrii-lysenko

The code looks good, and tests as described.

I left some comments, but don't think they are blocking, especially at this stage where you would need to have beta blocks enabled to see this feature. However, we should use caution and notice if we will make block to prod, it will be shown to all users.

jeherve · 2023-12-18T12:55:34Z

Does it impact the site if the legacy module is still active? Can we disable the feature ourselves without intervention from the user?

The copy looks good, but I wonder if we're making it more complicated for users than it should be.

@keoshi It can impact the site, yes. You may find yourself with 2 sets of sharing buttons:

One added by the legacy sharing module
One added by the sharing block

The 2 sets work differently, and having them both at the same time would end up being very confusing; you'd have toggles in the post editor impacting the legacy sharing options, a block in the site editor that doesn't modify the sharing buttons that were added via the legacy module.

Beyond the visual aspect, I think that deactivating the legacy module makes a lot of sense when you don't use it: once it's off you're sure it's not going to have any impact (performance, UI elements on the frontend and in the editor) on your site.

I could, however, imagine that some people will want to continue to use the legacy module, even if they use a block-based theme. It could be because they configured the legacy sharing buttons in a way that's not yet supported by the block (they could have added a custom sharing service for example).

In this case, how do you think we should proceed in the different UI elements. Should we offer an option to "stick with the legacy sharing buttons" here in the Jetpack dashboard, or one to "view the legacy sharing options" in the Sharing settings in wp-admin > Settings > Sharing and Calypso > Tools > Marketing > Sharing Buttons (see #34673 and Automattic/wp-calypso#85180)?

We would want to create a support page explaining the switch and how to use block. Adding a link to it to all places where we change the logic.

@andrii-lysenko I agree. I created a draft for the new sharing block support doc. I think we could add everything there, including maybe a video.

Maybe we would also want to have some ENV variable, where users can just stick to old version (because they just don't like the change or because of some limitation).
Or, we could maybe add in current design button like No, stick to old logic or something, though, not sure if it won't add confussion.

Yes, that's a good point. I'm not sure if this should be done via a filter or a UI element. See my question to @keoshi above for more.

keoshi · 2023-12-19T10:35:28Z

Thanks for all the context @jeherve — I have one more question before I can fully wrap my head around the problem.

Would it be possible for us to:

Automatically convert the existing sharing buttons configuration to a pre-populated new sharing block?
Conditionally determine if they're using a custom sharing service in the legacy options?

Thank you!

jeherve · 2023-12-19T16:06:33Z

Automatically convert the existing sharing buttons configuration to a pre-populated new sharing block?

That's a good question.

I do want to say yes, but with some caveats:

We do not support everything in the block yet (e.g. the official buttons style, the hidden buttons, or the custom sharing services)
Where should we add that pre-configured sharing block? In the Single Posts template most likely, or somewhere else? In the post meta template part if there is one, but before or after other elements? I don't know that there is a single answer to those questions, and I think the site owner is really the only person who can make those decisions.
Site owners may want to add sharing blocks to different page templates, with different settings maybe (e.g. simple text buttons on the home page, and icons in single posts).

Conditionally determine if they're using a custom sharing service in the legacy options?

Yeah, we can do that.

keoshi · 2023-12-19T16:54:46Z

Thanks again for all the context @jeherve.

I asked that because the legacy social icons can only live in one spot and its option are relatively controlled, so if we could automatically recreate those for the user it would get them through the biggest hurdle here in terms of UX. It would keep the same icons with the same or closest visual style as possible, and put in the same place for them.

As pointed out before, I still see the initial configuration of the sharing icons as a huge obstacle even to users that are familiar with Gutenberg, so lowering the friction for everyone would be nice. Even though I understand this solution would probably add too much complexity to the project and delay its release.

To answer your question, adding a link to Settings so users can deactivate the legacy sharing icons seems easy to add and to understand.

But it doesn't solve the disconnect between the legacy icons and the new ones. What I mean by that is that removing the old ones isn't enough and doesn't guarantee the new ones will magically show up. That's where the idea of an option to “Replace with new icons” came from.

Another solution would be notify users in the frontend. Admin users would see a notice that the new options are available and are invited to switch between them. This option would create a hook where the icons are actually visible (the site their visitors also see) and give them a more tangible path forward.

In general it seems like a good idea to:

Explain why the new icons are better and why they should care about them.
Give people an automated way to transition OR educate them as best as possible on how to do so OR give them the option to keep the legacy icons.

I might be overcomplicating this too, so please let me know what's your preferred idea.

andrii-lysenko · 2023-12-19T22:27:08Z

Thanks for a thorough explanation @keoshi.
I just wanted to share some additional general thoughts. As I understood, we would want to split the Sharing Block release into several stages to get feedback as early as possible. On block configurations, etc. Thus, we holding other tasks like Official Buttons and More Button, without which, it's not possible to automatically replace the existing functionality.
My initial thought is that we need this functionality in-house at first (Team51, VIP) and they would be able to start using it ASAP. And in the meantime we would continue working on getting this block to have full functionality. And before that, it would be kinda experimental block still. I might be wrong though :)

andrii-lysenko · 2023-12-20T19:58:02Z

Also, as a thought. Maybe we not force anything on users for now, we have these 2 functionalities distinct. We only need to have a proper support page explaining the block and it's relation to the Module, and that if they just want to switch to block they should switch off the module for better experience.
We can basically release block kinda silently, so people will gradually learn about it (proper support doc is important) and we could address any issues if these arise before we have too many people using it.

To sum up, I see it even more like having a small message in the current UI (if block is available), like We created new Sharing Buttons Block check it out and link to the docs which explains how to use it.

jeherve · 2023-12-21T10:45:05Z

if we could automatically recreate those for the user it would get them through the biggest hurdle here in terms of UX.

That is something @TimBroddin has been working on for Likes in #34732. Maybe we can do something similar for Sharing.

Like @andrii-lysenko says though, that is something we can do in a second iteration maybe, with a first iteration only there to introduce the new Sharing block, suggest it without replacing the legacy buttons with it, explain the differences (either in the UI or in a support doc), and let folks deactivate the legacy sharing buttons if they feel like the new block would be a better fit for them.

And then in a second iteration, once we have more feature parity between the legacy sharing buttons and the sharing block, we can opt to automatically replace one with the other?

keoshi · 2023-12-21T11:41:30Z

As I understood, we would want to split the Sharing Block release into several stages to get feedback as early as possible.

Such a good point, @andrii-lysenko — thanks for bringing me back down to earth.

It's important to discuss all the implications we anticipate as early as possible, but I couldn't agree more with you two that what's even more important is to get people using the new tools.

I really like what you propose above @jeherve. The only thing I'd note in terms of explaining in the UI vs support doc is that the latter sounds like it could be a more comprehensive resource, albeit not contextual.

Please excuse my wandering about and let's get this in front of users. Thank you! 🙇

…-settings-sharing-block

See discussion in #34619 (comment)

jeherve · 2023-12-21T18:03:06Z

@keoshi I've just updated the PR like so:

Screen.Recording.2023-12-21.at.18.57.35.mov

What do you think about it? Would you suggest doing anything different?

andrii-lysenko

I find this approach quite nice and it tests well. Will wait for @keoshi to check it out, but otherwise it seem good to go for me.

keoshi · 2023-12-22T09:58:12Z

That looks really good, @jeherve! Two notes:

On the third sentence, should it say “As an alternative, you could disable the legacy sharing feature above (...)” instead?
Wonder if we should add “Legacy” to the option's copy or as sort of a tag to denote the change happening here. Example:

andrii-lysenko · 2023-12-22T15:46:31Z

@keoshi Thanks for your comments. @jeherve is AFK and I will be finishing up this PR.

Yes, "above" seems right to me.
As per 'Legacy', I'm not so sure we need this at the moment, but can add if you think we should.

keoshi · 2023-12-22T17:06:47Z

@andrii-lysenko Adding the “Legacy” tag is not something we've done in the past, so it could easily be misunderstood. Let's go without it for now and add later if/once we have supporting documentation/media on transitioning from legacy options to blocks.

andrii-lysenko · 2023-12-22T17:14:27Z

@keoshi Sounds good. Our next step would be a Call For Testing within A8C for probably next 2 weeks (as it's holiday season and lots of folks are out), so we'll see if this is sufficient enough.

andrii-lysenko

Re-Approving as there was only a slight wording change.

…aring block (#34619) * Dashboard: Get sharing block availability for use in dashboard This will allow us to conditionally display different links whether the upcoming sharing block is available or not. Down the road, we can remove those settings when the sharing block will be available for everyone. * Make theme and sharing block info available to Sharing component * Update the interface to account for the sharing block Fixes #34325 See the designs in Automattic/jetpack#34325 (comment) for more explanation. * Add changelog * Link to a different support doc when you use the sharing block * Always display the legacy module toggle, but suggest the block See discussion in Automattic/jetpack#34619 (comment) * update wording Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/7302442324

There are currently 2 main options for sharing buttons: - The legacy sharing buttons, the preferrable option when you use a legacy/classic theme. - The sharing buttons block, when you use a block-based theme. We've tried to highlight the 2 options in #34619, but the wording mentioning "below" for a link that in fact lead to the site editor was confusing. This commit updates the wording and introduces a notice instead of a basic paragraph text that may be missed.

jeherve added 4 commits December 13, 2023 15:22

Dashboard: Get sharing block availability for use in dashboard

35ff397

This will allow us to conditionally display different links whether the upcoming sharing block is available or not. Down the road, we can remove those settings when the sharing block will be available for everyone.

Make theme and sharing block info available to Sharing component

09e1841

Update the interface to account for the sharing block

202df94

Fixes #34325 See the designs in #34325 (comment) for more explanation.

Add changelog

fd545cf

jeherve self-assigned this Dec 13, 2023

github-actions bot added the [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ label Dec 13, 2023

Link to a different support doc when you use the sharing block

0993c78

jeherve requested a review from andrii-lysenko December 13, 2023 15:32

jeherve added [Status] Needs Team Review Obsolete. Use Needs Review instead. and removed [Status] In Progress labels Dec 13, 2023

jeherve mentioned this pull request Dec 13, 2023

Sharing: add notice in Calypso Sharing settings to explain that this doesn't impact the sharing block #34327

Closed

andrii-lysenko previously approved these changes Dec 13, 2023

View reviewed changes

andrii-lysenko mentioned this pull request Dec 15, 2023

Sharing buttons block alternate settings screen #34673

Merged

3 tasks

jeherve added 2 commits December 21, 2023 18:26

Merge remote-tracking branch 'origin/trunk' into update/react-sharing…

cb4e204

…-settings-sharing-block

Always display the legacy module toggle, but suggest the block

59acd86

See discussion in #34619 (comment)

jeherve dismissed andrii-lysenko’s stale review via 59acd86 December 21, 2023 18:02

andrii-lysenko previously approved these changes Dec 21, 2023

View reviewed changes

keoshi mentioned this pull request Dec 22, 2023

Sharing block/wp settings suggest deactivating module #34759

Merged

3 tasks

update wording

dca8963

andrii-lysenko dismissed their stale review via dca8963 December 22, 2023 15:50

andrii-lysenko approved these changes Dec 22, 2023

View reviewed changes

andrii-lysenko merged commit 6abdfef into trunk Dec 22, 2023

andrii-lysenko deleted the update/react-sharing-settings-sharing-block branch December 22, 2023 17:33

github-actions bot removed the [Status] Needs Team Review Obsolete. Use Needs Review instead. label Dec 22, 2023

github-actions bot added this to the jetpack/13.0 milestone Dec 22, 2023

jeherve mentioned this pull request Mar 20, 2024

Sharing: update the sharing button settings to clarify the available options (block or legacy sharing buttons). #36473

Merged

3 tasks

Conversation

jeherve commented Dec 13, 2023

Proposed changes:

Screenshots

Other information:

Jetpack product discussion

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

Testing instructions:

Uh oh!

github-actions bot commented Dec 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Dec 13, 2023

Uh oh!

jeherve commented Dec 13, 2023

Uh oh!

andrii-lysenko commented Dec 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

keoshi commented Dec 13, 2023

Uh oh!

andrii-lysenko left a comment

Choose a reason for hiding this comment

Uh oh!

jeherve commented Dec 18, 2023

Uh oh!

keoshi commented Dec 19, 2023

Uh oh!

jeherve commented Dec 19, 2023

Uh oh!

keoshi commented Dec 19, 2023

Uh oh!

andrii-lysenko commented Dec 19, 2023

Uh oh!

andrii-lysenko commented Dec 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jeherve commented Dec 21, 2023

Uh oh!

keoshi commented Dec 21, 2023

Uh oh!

jeherve commented Dec 21, 2023

Uh oh!

andrii-lysenko left a comment

Choose a reason for hiding this comment

Uh oh!

keoshi commented Dec 22, 2023

Uh oh!

andrii-lysenko commented Dec 22, 2023

Uh oh!

keoshi commented Dec 22, 2023

Uh oh!

andrii-lysenko commented Dec 22, 2023

Uh oh!

andrii-lysenko left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Dec 13, 2023 •

edited

Loading

andrii-lysenko commented Dec 13, 2023 •

edited

Loading

andrii-lysenko commented Dec 20, 2023 •

edited

Loading