Enhance sharing buttons UI (#34181)

projects/plugins/jetpack/changelog/update-sharing-block-ui

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Enhance Sharing Buttons UI to match Social Icons behavior

projects/plugins/jetpack/extensions/blocks/sharing-button/block.json

@@ -0,0 +1,32 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "jetpack/sharing-button",
+	"title": "Sharing button",
+	"description": "Give your readers the ability to easily share your content with X, Facebook, Tumblr, LinkedIn, and a host of other services to help spread your message across the web.",
+	"keywords": [],
+	"version": "12.5.0",
+	"textdomain": "jetpack",
+	"category": "embed",
+	"parent": [ "jetpack/sharing-buttons" ],
+	"attributes": {
+		"url": {
+			"type": "string"
+		},
+		"service": {
+			"type": "string"
+		},
+		"label": {
+			"type": "string"
+		},
+		"rel": {
+			"type": "string"
+		}
+	},
+	"usesContext": [ "styleType", "postId" ],
+	"supports": {
+		"reusable": false,
+		"html": false
+	},
+	"viewScript": "file:./view.js"
+}

projects/plugins/jetpack/extensions/blocks/sharing-button/edit.js

@@ -0,0 +1,68 @@
+import { useBlockProps } from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import { withSelect } from '@wordpress/data';
+import { store } from '@wordpress/editor';
+import { __, sprintf } from '@wordpress/i18n';
+import { addQueryArgs } from '@wordpress/url';
+import classNames from 'classnames';
+import { useEffect } from 'react';
+import SocialIcon from 'social-logos';
+import { getNameBySite } from './utils';
+import './style.scss';
+
+const mountLink = ( service, post ) => {
+	if ( 'email' === service ) {
+		return addQueryArgs( 'mailto:', {
+			subject: sprintf(
+				/* translators: placeholder is post title. */
+				__( 'Shared post: %s', 'jetpack' ),
+				post.title
+			),
+			body: post.link,
+		} );
+	}
+	return addQueryArgs( post.link, {
+		share: service,
+		nb: 1,
+	} );
+};
+
+const SharingButtonEdit = ( { attributes, context, setAttributes, post } ) => {
+	const { service, label } = attributes;
+	const { styleType } = context;
+
+	useEffect( () => {
+		const url = mountLink( service, post );
+		setAttributes( { url } );
+	}, [ service, post, setAttributes ] );
+
+	const socialLinkName = getNameBySite( service );
+	const socialLinkLabel = label ?? socialLinkName;
+
+	const sharingButtonClass = classNames(
+		'jetpack-sharing-button__button',
+		'style-' + styleType,
+		'share-' + service
+	);
+
+	const blockProps = useBlockProps( {
+		className: 'jetpack-sharing-button__list-item',
+	} );
+
+	return (
+		<>
+			<li { ...blockProps }>
+				<Button className={ sharingButtonClass }>
+					<SocialIcon icon={ service } size={ 24 } />
+					<span className={ 'jetpack-sharing-button__service-label' }>{ socialLinkLabel }</span>
+				</Button>
+			</li>
+		</>
+	);
+};
+
+export default withSelect( select => {
+	return {
+		post: select( store ).getCurrentPost(),
+	};
+} )( SharingButtonEdit );

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

@@ -0,0 +1,11 @@
+import { registerJetpackBlockFromMetadata } from '../../shared/register-jetpack-block';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+import variations from './variations';
+
+registerJetpackBlockFromMetadata( metadata, {
+	edit,
+	variations,
+	save,
+} );

projects/plugins/jetpack/extensions/blocks/sharing-button/save.js

@@ -0,0 +1,43 @@
+import { __, sprintf } from '@wordpress/i18n';
+import classNames from 'classnames';
+import SocialIcon from 'social-logos';
+import { getNameBySite } from './utils';
+import './style.scss';
+
+const SharingButtonsView = ( { attributes } ) => {
+	const { service, label } = attributes;
+	const sharingLinkClass = classNames(
+		'jetpack-sharing-button__button',
+		'style_button_replace_at_runtime',
+		'share-' + service
+	);
+
+	const socialLinkName = getNameBySite( service );
+	const socialLinkLabel = label ?? socialLinkName;
+	const linkAriaLabel = sprintf(
+		/* translators: %s refers to a string representation of sharing service, e.g. Facebook  */
+		__( 'Share on %s', 'jetpack', /* dummy arg to avoid bad minification */ 0 ),
+		socialLinkName
+	);
+
+	return (
+		<li className="jetpack-sharing-button__list-item">
+			<a
+				rel="nofollow noopener noreferrer"
+				className={ sharingLinkClass }
+				href={ 'url_replaced_in_runtime' }
+				target="_blank"
+				data-shared={ 'data-shared_replaced_in_runtime' }
+				aria-label={ linkAriaLabel }
+				primary
+			>
+				<SocialIcon icon={ service } size={ 24 } />
+				<span className="jetpack-sharing-button__service-label" aria-hidden="true">
+					{ socialLinkLabel }
+				</span>
+			</a>
+		</li>
+	);
+};
+
+export default SharingButtonsView;

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

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Sharing Buttons Block.
+ *
+ * @since 11.x
+ *
+ * @package automattic/jetpack
+ */
+
+namespace Automattic\Jetpack\Extensions\Sharing_Button;
+
+use Automattic\Jetpack\Blocks;
+use Jetpack_Gutenberg;
+
+require_once JETPACK__PLUGIN_DIR . 'modules/sharedaddy/sharing-sources.php';
+
+/**
+ * Registers the block for use in Gutenberg
+ * This is done via an action so that we can disable
+ * registration if we need to.
+ */
+function register_block() {
+	Blocks::jetpack_register_block(
+		__DIR__,
+		array( 'render_callback' => __NAMESPACE__ . '\render_block' )
+	);
+}
+add_action( 'init', __NAMESPACE__ . '\register_block' );
+
+/**
+ * Sharing Buttons block registration/dependency declaration.
+ *
+ * @param array  $attr    Array containing the Sharing Buttons block attributes.
+ * @param string $content String containing the Sharing Buttons block content.
+ * @param array  $block Array containing block data.
+ *
+ * @return string
+ */
+function render_block( $attr, $content, $block ) {
+	$post_id = $block->context['postId'];
+
+	$style_type  = $block->context['styleType'];
+	$style       = 'style-' . $style_type;
+	$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 );
+	$content = str_replace( 'style_button_replace_at_runtime', $style, $content );
+	$content = str_replace( 'data-shared_replaced_in_runtime', $data_shared, $content );
+	Jetpack_Gutenberg::load_assets_as_required( __DIR__ );
+	return $content;
+}

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

@@ -0,0 +1,82 @@
+@import '@automattic/jetpack-base-styles/gutenberg-base-styles';
+
+.jetpack-sharing-button__button {
+	display: flex;
+	flex-direction: row;
+	margin: 4px;
+	cursor: default;
+	font-size: 13px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	font-weight: 500;
+	border-radius: 4px;
+	color: var(--color-neutral-80);
+	background: #fff;
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.12);
+	line-height: 23px;
+	padding: 4px 11px 3px 9px;
+	justify-content: center;
+	text-decoration: none;
+
+	&:hover {
+		cursor: pointer;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.22);
+	}
+
+	&.style-icon {
+		border-radius: 50%;
+		border: 0;
+		box-shadow: none;
+		padding: 7px;
+		position: relative;
+		top: -2px;
+		line-height: 1;
+		width: auto;
+		height: auto;
+		margin-bottom: 0;
+
+		&.share-x { background: #000; }
+		&.share-print { background: #c5c2c2; }
+		&.share-reddit { background: var( --color-reddit ); }
+		&.share-skype { background: var( --color-skype ); }
+		&.share-facebook { background: var( --color-facebook ); }
+		&.share-linkedin { background: var( --color-linkedin ); }
+		&.share-mail { background: #c5c2c2; }
+		&.share-twitter { background: var( --color-twitter ); }
+		&.share-tumblr { background: var( --color-tumblr ); }
+		&.share-pinterest { background: var( --color-pinterest ); }
+		&.share-pocket { background: var( --color-pocket ); }
+		&.share-telegram { background: var( --color-telegram ); }
+		&.share-whatsapp { background: var( --color-whatsapp ); }
+		&.share-mastodon { background: var( --color-mastodon ); }
+		&.share-nextdoor { background: var( --color-nextdoor ); }
+
+		.social-logo { fill: #fff; }
+	}
+
+	&.style-icon.is-custom {
+		padding: 8px;
+		top: 2px;
+	}
+}
+
+.style-text .social-logo,
+.style-text .sharing-buttons-preview-button__custom-icon,
+.style-icon .jetpack-sharing-button__service-label {
+	display: none;
+}
+
+.jetpack-sharing-buttons__service-label.style-icon {
+	display: none;
+}
+
+.jetpack-sharing-button__service-label {
+	margin-inline-start: 5px;
+}
+
+.jetpack-sharing-button__list-item {
+	list-style-type: none;
+	padding: 0;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: 5px;
+}

projects/plugins/jetpack/extensions/blocks/sharing-button/utils.js

@@ -0,0 +1,12 @@
+import { __ } from '@wordpress/i18n';
+import variations from './variations';
+
+export const getIconBySite = name => {
+	const variation = variations.find( v => v.name === name );
+	return variation ? variation.icon : null;
+};
+
+export const getNameBySite = name => {
+	const variation = variations.find( v => v.name === name );
+	return variation ? variation.title : __( 'Sharing Button', 'jetpack' );
+};