Improve sharing buttons events performance

projects/plugins/jetpack/changelog/improve-sharing-buttons-events-performance

@@ -0,0 +1,5 @@
+Significance: patch
+Type: other
+Comment: This feature is not awailable for users yet and should not affect visual representation. It's only inner performance improvements.
+
+

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

@@ -42,18 +42,18 @@ function render_block( $attr, $content, $block ) {
 	$post_id = $block->context['postId'];
 	$title   = $attr['label'] ?? $attr['service'];
 
-	$style_type  = $block->context['styleType'];
-	$style       = 'style-' . $style_type;
-	$data_shared = 'sharing-' . $attr['service'] . '-' . $post_id . $attr['service'];
-	$query       = 'share=' . $attr['service'] . '&nb=1';
+	$style_type = $block->context['styleType'];
+	$style      = 'style-' . $style_type;
+	$query      = 'share=' . $attr['service'] . '&nb=1';
+
+	$data_shared = 'sharing-' . $attr['service'] . '-' . $post_id;
 
 	$services   = get_services();
 	$service    = new $services[ $attr['service'] ]( $attr['service'], array() );
 	$link_props = $service->get_link( $post, $query, $data_shared );
-	$link_url   = $link_props['url'];
-
-	$icon = get_social_logo( $attr['service'] );
 
+	$link_url           = $link_props['url'];
+	$icon               = get_social_logo( $attr['service'] );
 	$sharing_link_class = 'jetpack-sharing-button__button ' . $style . ' share-' . $attr['service'];
 
 	$link_aria_label = sprintf(
@@ -65,9 +65,10 @@ function render_block( $attr, $content, $block ) {
 	Jetpack_Gutenberg::load_assets_as_required( __DIR__ );
 
 	$component  = '<li class="jetpack-sharing-button__list-item">';
-	$component .= '<a rel="nofollow noopener noreferrer" class="' . $sharing_link_class . '" href="' . $link_url . '" target="_blank" data-shared="' . $data_shared . '" aria-label="' . $link_aria_label . '" primary>';
+	$component .= '<a rel="nofollow noopener noreferrer" class="' . esc_attr( $sharing_link_class ) . '" href="' . esc_attr( $link_url ) . '" target="_blank" ';
+	$component .= 'data-service="' . esc_attr( $attr['service'] ) . '" data-shared="' . esc_attr( $data_shared ) . '" aria-label="' . esc_attr( $link_aria_label ) . '" primary>';
 	$component .= $icon;
-	$component .= '<span class="jetpack-sharing-button__service-label" aria-hidden="true">' . $title . '</span>';
+	$component .= '<span class="jetpack-sharing-button__service-label" aria-hidden="true">' . esc_html( $title ) . '</span>';
 	$component .= '</a>';
 	$component .= '</li>';
 

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

@@ -2,8 +2,9 @@ import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save() {
 	const className = 'jetpack-sharing-buttons__services-list';
+	const id = 'jetpack-sharing-serivces-list';
 	const blockProps = useBlockProps.save( { className } );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
-	return <ul { ...innerBlocksProps } />;
+	return <ul { ...innerBlocksProps } id={ id } />;
 }

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

@@ -1,38 +1,43 @@
 import './style.scss';
 
-const services = window?.jetpack_sharing_buttons_services || [];
-let windowOpen;
+let sharingWindowOpen;
 
 ( function () {
-	services.forEach( service => {
-		document.querySelectorAll( `a.share-${ service }` ).forEach( link => {
-			link.addEventListener( 'click', event => {
-				if ( service === 'mail' ) {
-					return;
-				}
-				event.preventDefault();
-				event.stopPropagation();
-
-				if ( service === 'print' ) {
-					window.print();
-					return;
-				}
-
-				const el = event.target.closest( `a.share-${ service }` );
-				if ( ! el ) {
-					return;
-				}
-
-				if ( windowOpen !== undefined ) {
-					windowOpen.close();
-				}
-
-				const options = 'menubar=1,resizable=1,width=600,height=400';
-				windowOpen = window.open( el.getAttribute( 'href' ), `wpcom${ service }`, options );
-				if ( windowOpen ) {
-					windowOpen.focus();
-				}
-			} );
-		} );
+	const servicesContainer = document.getElementById( 'jetpack-sharing-serivces-list' );
+	if ( ! servicesContainer ) {
+		return;
+	}
+	servicesContainer.addEventListener( 'click', event => {
+		const link = event.target.closest( 'a' );
+		const service = link?.dataset?.service;
+
+		if ( ! link || ! link.classList.contains( `share-${ service }` ) ) {
+			return;
+		}
+
+		if ( service === 'mail' ) {
+			return;
+		}
+
+		event.preventDefault();
+		event.stopPropagation();
+
+		if ( service === 'print' ) {
+			window.print();
+			return;
+		}
+		if ( sharingWindowOpen ) {
+			sharingWindowOpen.close();
+		}
+
+		sharingWindowOpen = window.open(
+			link.getAttribute( 'href' ),
+			`wpcom${ service }`,
+			'menubar=1,resizable=1,width=600,height=400'
+		);
+
+		if ( sharingWindowOpen ) {
+			sharingWindowOpen.focus();
+		}
 	} );
 } )();