Enhance sharing buttons UI #34181

andrii-lysenko · 2023-11-17T05:43:25Z

Proposed changes:

After discussion in a primary ticket we are moving forward with the implementation similar to Social Links in Gutenberg.
This PR adds new Sharing Button block alongside Sharing Buttons one that is used as a container. Also, added styles to match existing behaviour.

Note: Official buttons style is not yet available and we will add it on later stages. This is also still a dummy block with no logic connected and probably some code to be improved in the future.

Screen.Recording.2023-11-22.at.12.15.30.mov

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)?

Testing instructions:

Spin up your site with local changes
Make sure you have beta block enabled. In your environment (example Docker) wp-config.php you should have define( 'JETPACK_BLOCKS_VARIATION', 'beta' );
Add Sharing Buttons block to a post and check it's behaviour.

github-actions · 2023-11-17T05:44:31Z

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.

🔴 Action required: We would recommend that you add a section to the PR description to specify whether this PR includes any changes to data or privacy, like so:

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

My PR adds *x* and *y*.

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 December 5, 2023 (scheduled code freeze on November 28, 2023).

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

github-actions · 2023-11-18T05:28:32Z

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

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

bin/jetpack-downloader test jetpack update/sharing-block-ui

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

andrii-lysenko · 2023-11-23T17:23:42Z

projects/plugins/jetpack/extensions/blocks/sharing-button/sharing-button.php

+	$data_shared = 'sharing-' . $attr['service'] . '-' . $post_id . $attr['service'];
+	$link_url    = get_permalink( $post_id ) . '?share=' . $attr['service'] . '&nb=1';
+
+	$content = str_replace( 'url_replaced_in_runtime', $link_url, $content );


I think this is a temporary solution while block is still in beta.

monsieur-z

I noticed a couple of rough edges in the UI. The PR still has the In Progress label, so don't mind me if these are already known.

It'd be nice to have a preview of the block (definitely something that could be done later).

The label could be a bit clearer, e.g., Click the plus icon to add a social network.

The button style can be chosen in both the block's Settings and Styles panels. Should we leave the selection in Styles only?

The rendering seems to be the same in the front-end, no matter the style.
When adding a button, the Sharing button is proposed but has no icon? Should it even be there?

The button labels are rendered in lowercase and with no start padding in the front-end.

Is this block independent from the Sharing buttons settings?

andrii-lysenko · 2023-11-24T20:40:32Z

@monsieur-z Thank you for a thorough review. Initially I also thought that we will want to wrap up the UX with this task, however, after discussion with Design, we enhanced a different approach here. So I wanted to roll out initial step, where we basically change the behavior from single block to parent-child. We would still need to do a fare amount of work with UI, including Ofiicial buttons, More button and some adjustmentes to the logic inside as well. So to keep things going, thought we could merge this as a step, but definitely not the final look. What do you think?

andrii-lysenko · 2023-11-25T00:51:18Z

Though, most of them are pretty easy to fix, so I pushed it. As per the last point, yes, these two functionalities are currently disconnected and probably be like that till the very last step, not to provide issues to the users, while we are still working on the block.

monsieur-z · 2023-11-27T16:40:27Z

projects/plugins/jetpack/extensions/blocks/sharing-buttons/editor.js


 registerJetpackBlockFromMetadata( metadata, {
 	edit,
 	save,
+	example: {


I believe the example could be added to block.json instead, since it doesn't have dynamic values.

monsieur-z · 2023-11-27T16:47:36Z

projects/plugins/jetpack/extensions/blocks/sharing-button/components/view-button.jsx

+
+const ViewSocialButton = ( { service, url } ) => {
+	return (
+		<a


From an accessibility perspective, we could make screen readers read something like Share to Facebook rather than Facebook. This would provide more context to screen reader users and avoid confusion if there are multiple link labelled Facebook on the page.

We could do that by adding an aria-label attribute on the a and, I believe, hiding the span with aria-hidden="true".

monsieur-z · 2023-11-27T16:51:16Z

projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss

+}
+
+.jetpack-sharing-button__service-label {
+	margin-left: 5px;


It's probably safer to use margin-inline-start for internationalization reasons.

monsieur-z

Thanks for the additional context @andrii-lysenko. I left some comments but they can definitely be tackled later one.

andrii-lysenko · 2023-11-27T17:49:06Z

@monsieur-z Thanks for highlighting these. I think it is worth having these added so I pushed an additional commit.

chrisbliss18

I see that you made the changes that @monsieur-z requested. Everything looks good. Approved!

keoshi · 2023-11-28T11:07:39Z

Commenting here after the PR merge but hope this feedback is useful. Love the suggestions that @monsieur-z left above, btw!

~~1. Adding the block the first time asked me to activate the sharing feature. This is great, but it also added the old sharing buttons by default.~~ Disregard this one, I was testing RC and not Bleeding Edge.

Agree with @monsieur-z that the placeholder copy could be Click the plus icon to add a social network.

The empty + unselected state is perfectly fine, but I wonder if we should try to do something like the social icons do. E.g.: add a visual flare to denote the block hasn't been touched yet.

The block options — moving icons, justification, alignment, orientation, styles — worked perfectly. Very neat that people will soon have much more flexibility to play around with these buttons.

The child blocks description is the same across the board but refers to the parent block. Perhaps we should replicate what the Social block is doing.

Suggested copy: Display a button that allows people to share your content to a social media network.

We could probably approximate the style of the new buttons with the older ones, so that nothing really changes in their site design. In particular icon size and font size.

"Official Buttons" didn't work for me; it shows the same styling as Icon & Text, but I'm guessing this hasn't been built out yet.

Finally, a sidenote: I'm seeing BETA tags in the child blocks as well. Would be great to get rid of these and just have one in the parent block so the editing interface shines through while we test the UI.

This is looking very, very promising @andrii-lysenko — awesome work so far! Thank you.

first draft to enhance sharing buttons UI

55aa721

github-actions bot added [Block] Sharing Buttons [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Status] In Progress [Block] Sharing Button labels Nov 17, 2023

andrii-lysenko added 2 commits November 17, 2023 10:45

Merge trunk

eb47b33

update: refactor blocks to have needed functionality

02d0bf6

andrii-lysenko added 4 commits November 20, 2023 20:42

update: add different edit styles

80d3006

update view styles with temporary code

dd1f1c0

improve matching styles

6f87d94

Merge branch 'trunk' into update/sharing-block-ui

e06cfa6

andrii-lysenko requested a review from a team November 22, 2023 21:27

andrii-lysenko added the [Status] Needs Team Review label Nov 22, 2023

andrii-lysenko marked this pull request as ready for review November 22, 2023 21:28

andrii-lysenko changed the title ~~first draft to enhance sharing buttons UI~~ Enhance sharing buttons UI Nov 23, 2023

andrii-lysenko commented Nov 23, 2023

View reviewed changes

cleanup namings

23b7455

monsieur-z requested changes Nov 24, 2023

View reviewed changes

andrii-lysenko and others added 3 commits November 24, 2023 12:46

Merge branch 'trunk' into update/sharing-block-ui

11f3e43

remove unused block

e134abd

add suggest improvements

b74e762

andrii-lysenko requested a review from monsieur-z November 25, 2023 00:51

monsieur-z reviewed Nov 27, 2023

View reviewed changes

monsieur-z previously approved these changes Nov 27, 2023

View reviewed changes

add suggested improvements

42e09cb

andrii-lysenko dismissed monsieur-z’s stale review via 42e09cb November 27, 2023 17:48

andrii-lysenko added 5 commits November 27, 2023 10:42

Merge branch 'trunk' into update/sharing-block-ui

7593005

fix translators comment

15147fc

fix minification issue

b80140b

remove newline

ba5aa8f

Merge branch 'trunk' into update/sharing-block-ui

1454ae8

andrii-lysenko requested a review from monsieur-z November 27, 2023 22:20

remove unused files

1368a89

chrisbliss18 self-requested a review November 27, 2023 23:48

chrisbliss18 approved these changes Nov 27, 2023

View reviewed changes

andrii-lysenko merged commit 17dc392 into trunk Nov 28, 2023
51 checks passed

andrii-lysenko deleted the update/sharing-block-ui branch November 28, 2023 00:41

andrii-lysenko mentioned this pull request Nov 28, 2023

Sharing block: ensure that we do not load resources on the frontend unless needed #34108

Closed

github-actions bot removed [Status] Needs Team Review [Status] In Progress labels Nov 28, 2023

github-actions bot added this to the jetpack/12.9 milestone Nov 28, 2023

This was referenced Dec 5, 2023

Update sharing block controls #34414

Merged

Fix sharing buttons block icons on simple/atomic sites #34527

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Enhance sharing buttons UI #34181

Enhance sharing buttons UI #34181

andrii-lysenko commented Nov 17, 2023 •

edited

Loading

github-actions bot commented Nov 17, 2023 •

edited

Loading

github-actions bot commented Nov 18, 2023 •

edited

Loading

andrii-lysenko Nov 23, 2023

monsieur-z left a comment

andrii-lysenko commented Nov 24, 2023

andrii-lysenko commented Nov 25, 2023

monsieur-z Nov 27, 2023

monsieur-z Nov 27, 2023

monsieur-z Nov 27, 2023

monsieur-z left a comment

andrii-lysenko commented Nov 27, 2023

chrisbliss18 left a comment

keoshi commented Nov 28, 2023 •

edited

Loading

Enhance sharing buttons UI #34181

Enhance sharing buttons UI #34181

Conversation

andrii-lysenko commented Nov 17, 2023 • edited Loading

Proposed changes:

Other information:

Testing instructions:

github-actions bot commented Nov 17, 2023 • edited Loading

github-actions bot commented Nov 18, 2023 • edited Loading

andrii-lysenko Nov 23, 2023

Choose a reason for hiding this comment

monsieur-z left a comment

Choose a reason for hiding this comment

andrii-lysenko commented Nov 24, 2023

andrii-lysenko commented Nov 25, 2023

monsieur-z Nov 27, 2023

Choose a reason for hiding this comment

monsieur-z Nov 27, 2023

Choose a reason for hiding this comment

monsieur-z Nov 27, 2023

Choose a reason for hiding this comment

monsieur-z left a comment

Choose a reason for hiding this comment

andrii-lysenko commented Nov 27, 2023

chrisbliss18 left a comment

Choose a reason for hiding this comment

keoshi commented Nov 28, 2023 • edited Loading

andrii-lysenko commented Nov 17, 2023 •

edited

Loading

github-actions bot commented Nov 17, 2023 •

edited

Loading

github-actions bot commented Nov 18, 2023 •

edited

Loading

keoshi commented Nov 28, 2023 •

edited

Loading