Social Logos: update to the most recent version of the package

[jeherve]

Proposed changes:

This includes 2 things:

• Fixes to the X and Threads logos, to avoid invalid SVG warnings (see Icons: update label name for X icon. social-logos#127 (comment) ).
• An updated X logo to match updated branding guidelines (in practice, the logo is now aligned a bit differently on the grid).

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

• N/A

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

• No

Testing instructions:

Testing sharing buttons

• Go to Jetpack > Settings > Social and enable sharing buttons.
• Go to Settings > Sharing and add some sharing buttons to your site. Use the icon-only sharing type.
• The buttons should look good in the admin preview, as well as on the frontend when your changes are saved. Make sure all buttons look good, not just the X one.

Testing the post-publish modal

• Create a new post and hit publish or for an existing post, run this in browser console
  • wp.data.dispatch('core/edit-post').togglePublishSidebar();
• On the post publish panel, confirm that you see the X icon; it should look good
• Confirm that it works as expected
• Open Jetpack sidebar
• Under "Share this post", click on the Quick Share icon
• Confirm that you see the X icon
• Confirm that you see no warnings in your JS console.

[github-actions]

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 (other than "Required review") 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:

• Next scheduled release: November 7, 2023.
• Scheduled code freeze: October 30, 2023.

[github-actions]

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/social-logos-256 branch.

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

  bin/jetpack-downloader test jetpack update/social-logos-256
  

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

[monsieur-z]

Testing sharing buttons

I don't know if that's related to this PR, but the Facebook blues on WordPress.com and in a post are different.

Definitely not related to this PR, so I could bring it up where appropriate: I find it odd that we use the white background Facebook and LinkedIn icons inside a blue circle, instead of using a white "f" or "in" as we do in wordpress.com/marketing/connections/:site.

Testing the post-publish modal
I could see the X icon in the post publish panel, and the feature works as expected. However I can't see a Quick share icon in the "Share this post" panel (with either a free or Social plan). What might I have missed?

[jeherve]

the Facebook blues on WordPress.com and in a post are different.

This Calypso PR should help with that:

Automattic/wp-calypso#83036

I find it odd that we use the white background Facebook and LinkedIn icons inside a blue circle

This is due to the design of the sharing buttons. That's something we had discussed a bit in #15954. I think this is something we could address when we tackle #19694.

I could see the X icon in the post publish panel, and the feature works as expected. However I can't see a Quick share icon in the "Share this post" panel (with either a free or Social plan). What might I have missed?

I'll leave that question to @manzoorwanijk, who is more familiar with the feature than me.

[manzoorwanijk]

I could see the X icon in the post publish panel, and the feature works as expected. However I can't see a Quick share icon in the "Share this post" panel (with either a free or Social plan). What might I have missed?

I'll leave that question to @manzoorwanijk, who is more familiar with the feature than me.

You need to click on this Share icon

May be it's not too obvious and can be improved, what do you think @Automattic/jetpack-reach & @ilonagl?

[monsieur-z]

Thanks for the clarification @manzoorwanijk, I could test the rest of the instructions.

May be it's not too obvious and can be improved

I think so too. The sharing icon doesn't look like it's activable and the buttons inside the panel call for attention.

Here are 2 points regarding accessibility, in case improving this is considered:

• A label next to the button is lacking. It is essential for screen reader users and generally useful for all users.
• 2 clickable areas should probably not overlap, at least when one of them is so small. Depending on the user's device and/or ability, the icon button may be hard to hit.

[manzoorwanijk]

Thank you @monsieur-z. I have created a task for the a11y improvements and it's linked above.