Sharing: Add X button (#33134)

Co-authored-by: sdixon194 <steve.dixon@automattic.com>

projects/plugins/jetpack/_inc/lib/class.core-rest-api-endpoints.php

@@ -2494,7 +2494,7 @@ public static function get_updateable_data_list( $selector = '' ) {
 				'description'       => esc_html__( 'Enabled Services and those hidden behind a button', 'jetpack' ),
 				'type'              => 'object',
 				'default'           => array(
-					'visible' => array( 'twitter', 'facebook' ),
+					'visible' => array( 'facebook', 'x' ),
 					'hidden'  => array(),
 				),
 				'validate_callback' => __CLASS__ . '::validate_services',

projects/plugins/jetpack/changelog/update-twitter-sharing

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Sharing: add X sharing button.

projects/plugins/jetpack/modules/sharedaddy.php

@@ -1,7 +1,7 @@
 <?php
 /**
  * Module Name: Sharing
- * Module Description: Add Twitter and Facebook buttons at the bottom of each post, making it easy for visitors to share your content.
+ * Module Description: Add sharing buttons at the bottom of each post, making it easy for visitors to share your content.
  * Sort Order: 7
  * Recommendation Order: 6
  * First Introduced: 1.1

projects/plugins/jetpack/modules/sharedaddy/admin-sharing.css

@@ -168,6 +168,9 @@ li.service.share-mastodon span:before {
 li.service.share-nextdoor span:before {
 	content: '\f10c';
 }
+li.service.share-x span:before {
+	content: '\f10e';
+}
 
 /**
  * Preview section

projects/plugins/jetpack/modules/sharedaddy/sharing-service.php

@@ -108,6 +108,7 @@ public function get_all_services( $include_custom = true ) {
 			'jetpack-whatsapp' => 'Jetpack_Share_WhatsApp',
 			'mastodon'         => 'Share_Mastodon',
 			'nextdoor'         => 'Share_Nextdoor',
+			'x'                => 'Share_X',
 			// deprecated.
 			'skype'            => 'Share_Skype',
 		);
@@ -293,8 +294,8 @@ public function get_blog_services() {
 		if ( ! is_array( $enabled ) ) {
 			$enabled = array(
 				'visible' => array(
-					'twitter',
 					'facebook',
+					'x',
 				),
 				'hidden'  => array(),
 			);

projects/plugins/jetpack/modules/sharedaddy/sharing-sources.php

@@ -1317,6 +1317,182 @@ public function display_footer() {
 	}
 }
 
+/**
+ * X sharing button.
+ *
+ * While the old Twitter button had an official button,
+ * this new X button does not, since there is no official X button yet.
+ */
+class Share_X extends Sharing_Source {
+	/**
+	 * Service short name.
+	 *
+	 * @var string
+	 */
+	public $shortname = 'x';
+
+	/**
+	 * Service icon font code.
+	 *
+	 * @var string
+	 */
+	public $icon = '\f10e';
+
+	/**
+	 * Length of a URL on X.
+	 * https://developer.twitter.com/en/docs/tco
+	 *
+	 * @var int
+	 */
+	public $short_url_length = 24;
+
+	/**
+	 * Service name.
+	 *
+	 * @return string
+	 */
+	public function get_name() {
+		return __( 'X', 'jetpack' );
+	}
+
+	/**
+	 * Get the markup of the sharing button.
+	 *
+	 * @param WP_Post $post Post object.
+	 *
+	 * @return string
+	 */
+	public function get_display( $post ) {
+		return $this->get_link(
+			$this->get_process_request_url( $post->ID ),
+			_x( 'X', 'share to', 'jetpack' ),
+			__( 'Click to share on X', 'jetpack' ),
+			'share=x',
+			'sharing-x-' . $post->ID
+		);
+	}
+
+	/**
+	 * Determine the X 'via' value for a post.
+	 *
+	 * @param  WP_Post|int $post Post object or post ID.
+	 * @return string X handle without the preceding @.
+	 **/
+	public static function sharing_x_via( $post ) {
+		$post = get_post( $post );
+		/** This filter is documented in modules/sharedaddy/sharing-sources.php */
+		$twitter_site_tag_value = apply_filters(
+			'jetpack_twitter_cards_site_tag',
+			'',
+			/** This action is documented in modules/sharedaddy/sharing-sources.php */
+			array( 'twitter:creator' => apply_filters( 'jetpack_sharing_twitter_via', '', $post->ID ) )
+		);
+
+		/*
+		 * Hack to remove the unwanted behavior of adding 'via @jetpack' which
+		 * was introduced with the adding of the Twitter cards.
+		 * This should be a temporary solution until a better method is setup.
+		 */
+		if ( 'jetpack' === $twitter_site_tag_value ) {
+			$twitter_site_tag_value = '';
+		}
+
+		/** This filter is documented in modules/sharedaddy/sharing-sources.php */
+		$twitter_site_tag_value = apply_filters( 'jetpack_sharing_twitter_via', $twitter_site_tag_value, $post->ID );
+
+		// Strip out anything other than a letter, number, or underscore.
+		// This will prevent the inadvertent inclusion of an extra @, as well as normalizing the handle.
+		return preg_replace( '/[^\da-z_]+/i', '', $twitter_site_tag_value );
+	}
+
+	/**
+	 * Determine the 'related' X accounts for a post.
+	 *
+	 * @param  WP_Post|int $post Post object or post ID.
+	 * @return string Comma-separated list of X handles.
+	 **/
+	public static function get_related_accounts( $post ) {
+		$post = get_post( $post );
+		/** This filter is documented in modules/sharedaddy/sharing-sources.php */
+		$related_accounts = apply_filters( 'jetpack_sharing_twitter_related', array(), $post->ID );
+
+		// Example related string: account1,account2:Account 2 description,account3
+		$related = array();
+
+		foreach ( $related_accounts as $related_account_username => $related_account_description ) {
+			// Join the description onto the end of the username
+			if ( $related_account_description ) {
+				$related_account_username .= ':' . $related_account_description;
+			}
+
+			$related[] = $related_account_username;
+		}
+
+		return implode( ',', $related );
+	}
+
+	/**
+	 * Add content specific to a service in the footer.
+	 */
+	public function display_footer() {
+		$this->js_dialog( $this->shortname, array( 'height' => 350 ) );
+	}
+
+	/**
+	 * Process sharing request. Add actions that need to happen when sharing here.
+	 *
+	 * @param WP_Post $post Post object.
+	 * @param array   $post_data Array of information about the post we're sharing.
+	 *
+	 * @return void
+	 */
+	public function process_request( $post, array $post_data ) {
+		$post_title = $this->get_share_title( $post->ID );
+		$post_link  = $this->get_share_url( $post->ID );
+
+		if ( function_exists( 'mb_stripos' ) ) {
+			$strlen = 'mb_strlen';
+			$substr = 'mb_substr';
+		} else {
+			$strlen = 'strlen';
+			$substr = 'substr';
+		}
+
+		$via     = static::sharing_x_via( $post );
+		$related = static::get_related_accounts( $post );
+		if ( $via ) {
+			$sig = " via @$via";
+			if ( $related === $via ) {
+				$related = false;
+			}
+		} else {
+			$via = false;
+			$sig = '';
+		}
+
+		$suffix_length = $this->short_url_length + $strlen( $sig );
+		// $sig is handled by twitter in their 'via' argument.
+		// $post_link is handled by twitter in their 'url' argument.
+		if ( 280 < $strlen( $post_title ) + $suffix_length ) {
+			// The -1 is for "\xE2\x80\xA6", a UTF-8 ellipsis.
+			$text = $substr( $post_title, 0, 280 - $suffix_length - 1 ) . "\xE2\x80\xA6";
+		} else {
+			$text = $post_title;
+		}
+
+		// Record stats
+		parent::process_request( $post, $post_data );
+
+		$url         = $post_link;
+		$twitter_url = add_query_arg(
+			rawurlencode_deep( array_filter( compact( 'via', 'related', 'text', 'url' ) ) ),
+			'https://x.com/intent/tweet'
+		);
+
+		parent::redirect_request( $twitter_url );
+	}
+}
+
 /**
  * Reddit sharing button.
  */

projects/plugins/jetpack/modules/sharedaddy/sharing.css

@@ -282,6 +282,12 @@ body .sd-content ul li.share-custom.no-icon a span {
 .sd-social-icon-text .sd-content li.share-twitter a:before {
 	content: '\f202';
 }
+.sd-social-icon .sd-content ul li.share-x a:before,
+.sd-social-text .sd-content ul li.share-x a:before,
+.sd-content ul li.share-x div.option.option-smart-off a:before,
+.sd-social-icon-text .sd-content li.share-x a:before {
+	content: '\f10e';
+}
 .sd-social-icon .sd-content ul li.share-reddit a:before,
 .sd-social-text .sd-content ul li.share-reddit a:before,
 .sd-content ul li.share-reddit div.option.option-smart-off a:before,
@@ -639,6 +645,11 @@ body .sd-social-icon .sd-content li.share-custom a span {
 	color: #fff !important;
 }
 
+.sd-social-icon .sd-content ul li[class*='share-'].share-x a.sd-button {
+	background: #000;
+	color: #fff !important;
+}
+
 .sd-social-icon .sd-content ul li[class*='share-'].share-pinterest a.sd-button {
 	background: #ca1f27;
 	color: #fff !important;